Moving Views
Start course

This course explores augmented reality and how to use it to bring some visuals into our lives, into our living rooms. For example, at the end of this section, we're going to build an app that we can show the Earth, the Mars, and the Venus inside of our living room just like it's real. So, we're going to learn how to do that in this section. If you're ready, let's get started.

Learning Objectives

  • Understand what augmented reality is
  • Learn how to create moving views
  • Learn how to create cubs and spheres
  • Learn how to create an augmented app

Intended Audience

This course is intended for anyone who wants to learn how to develop apps on iOS.


To get the most out of this course, some basic knowledge of iOS development would be beneficial. We recommend that you take this course as part of the Developing Mobile Apps for iOS learning path.


Hi. Within this lecture, we're going to see how we can make our spaceship move and of course, we're going to see the other animations as well. To sum up, we're going to animate our spaceship. And by using this, we're going to learn how we can animate anything that we create or that we bring in the augmented reality as well. In order to do that, I'm going to show you a way, a technique to work on and later on, when we create our own views, it will make much more sense to you  but right now, just try to understand that we are working with something called node, and I'm going to show you what a node is, don't worry. And we are trying to reach the nodes of the scene. So, I'm going to create a for loop and within this for loop, I'm just going to say, for node in sceneView.scene. So, I'm getting this scene and in this scene, actually, we have a root node and child nodes. So, we want everything. We want every node that is placed in this scene. In order to get that, you can just call this rootNode. So, this is the rootNode of our scene and in order to get the child, you have to say .childNodes. So, this will create a node variable and get every node inside of the scene and assign them to be our node variable. So, let me do it like this, childNodes with a capitalized N. And I am talking about nodes all the time but we haven't seen what are they. So, let me write something like SCNNode. So, we are working with SCNNode objects, actually. You haven't seen it yet, but you will see it now. So, if you write SCNNode, you will see the object type. So, this is an element that we use to represent a shape or represent a coordinate or represent a geometry or licence, so on. In fact, this shape isn't much by itself. It just defines where our objects will be on the space coordinates, where our objects will be displayed, in which shape they will be displayed and it gets the objects, it gets the materials, it gets the contents,  and it displays them inside of our scene. When we create our own objects, you will much better understand this. So for right now, know that we are working with views inside of our receipt and if we run node.runAction, we can add an action to them. So as you can see, it asks us to create an SCNAction, and that's what we are going to do. There are a lot of SCNActions but I'm going to show you the most common ones, for example, moving an object. So, I'm going to call this moveShip and this will be an SCNAction. And if you say a . and moveBy, it will ask you for an x, y, z coordinates. So right now, we're working with 3D, so we don't have only one x and one y, but also we have z, the z coordinate as well, and we need a duration here. So, x is the horizontal and y is the verticular axis and as you know, the z is the third axis, it's coming toward  us or is going away from us, for example, in the z axis. So for x, I'm going to say 0 but for y, I'm going to say 0.5 and in order to make an object move further from us, we have to say minus and if we want them to come closer to us, we have to say 0.5 and a positive 0.5, for example, or a positive 1. I don't know. And the metric over here is in meters. So, don't go crazy over here like a 10 or 20 because it will move the object in meters. So, let me run this on my phone, so that we can see how it goes. And pay attention, because we will only see for like, a second. So as you can see, it opened up and it moved toward me and it moved up a little bit, a 500 cms, I believe. So, let me go back and change the numbers. Maybe, we can see it better because it's moving toward us, right now. I'm just going to give it an x axis as well, and I'm going to make this move away from us by making this minus. So, let me run this one more time, and beware, we're going to see it for a second only. So here you go, it moved a little bit up, a little bit right, and a little bit further from us. Now I believe you managed to see it. But this doesn't make sense really, just to move it for one second, like a half meter. So, what if I want to do it repetitively, continuously? Is there a way to do that? Of course, there is a way to do that. We can call a repetitive action and we can just repeat whatever we want. So, I'm going to call this repeatForever. And this will be an SCNAction and SCNAction.repeatForever. So, this will ask us to give an action to repeatForever. I'm going to say moveShip and rather than running moveShip, I'm going to run repeatForever over here. So, this will repeat this moving ship action forever. So, let me run this, and you will see what I mean inside of my phone. So, let me run my phone. Let me come over here and you will see it moving, and it will move away continuously as you can see now, it's almost leaving my sight. So, it's kind of cool. And that's not it actually, we can see other actions, we can add other actions as well, and even we can make a loop out of those actions. So, let me show you fade in and fade out actions because these are common too. So, let's start with fadeOut. So, this will be SCNAction.FadeOpacity. So, we have two opacities over here; one is to and one is by. So, by is relative value and to is, we just give the value. So, I'm going to go with to and I'm going to make it 0.5. So, this will make this transparent like a 50%, and I'm going to call this fadeIn and make it 100% one more time. So, this will fadeOut the ship and this will fade the ship in. And I'm going to make a loop out of these three actions. It's called a sequence in here. So, I'm going to call this sequence. And let me say sequence, and this will be an SCNAction one more time. But rather than repeat forever, I'm just going to say sequence this time. And this will ask me to give an array and within this array, I will have the moveShip, fadeOut and fadeIn. And this time, rather than repeating the moveShip, I'm just going to repeat the sequence and over here, I will run the repeatForever action. So, when I run this on my phone, you will see my ship moving, but again, with fading in and fading out. So, this will be cool. Pay attention to here, and here you go. My ship is moving and fading in and fading out. So, this is cool, right? We, now, see the ship in our living room fading in, fading out, flying out. So, I believe that's good and my dog is still sitting over there. So, here we go. Now, we know how to move around the objects inside of our augmented reality projects, and I believe it's now time to see how we can bring in the own objects, like bring in our own views, use our own textures to create what we want. And eventually, we want to create an application in which we can display some galaxies, some planets like Mars or Venus or like, Earth. So, let's do that within the next lecture.


About the Author
Learning Paths

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics