Hi Alex here from rebeloper.com and in this video series I will teach you how
to create awesome a ARKit games with the help of course of SceneKit. Now in
this video I will create an ARkit game from a single view application so
without further ado let's get started!
First of all let's open up our finder here and let's create a new folder on
our desktop and I will call this ARMagic because I will name my project ARMagic.
Here it is. Okay, good stuff! Now let's open up Xcode and let's create... let me
just take this down... let's create a new project. Okay, and you could create an
augmented reality app template but now we are going to create a single view
application because why not because we will learn the basics of the a ARKit
game. So do not choose augmented reality app. Choose a single view app and then
let just click on next. Now the product name should be ARMagic. Okay, and let it
be our language Swift and finally let's click on next. And I will create a Git
repository because I will store this on GitHub you may go there and check out of
this repository for yourself on my GitHub profile. So let's choose
ARMagic for the folder that I want to store this and let's click on create.
Good stuff! Now before we move forward let us commit this to our GitHub
repository so I will just choose this little icon show the source control
navigator. And I will just unfold these and as you
can see there are no remote. So I will just right-click on it and let's create
ARMagic remote on GitHub. Okay, and this time it will be a public and as you
can see at the repository name should remain ARMagic and it will be at
https://github.com/rebeloper/ARMagic. So go ahead and take a look at the
existing project maybe it is finished maybe it is not it depends on whether
the time of and day of you watching this video in the future. So I just
created as public and let's create this let's wait for it it is pushing it up
and great it is live. Now I want to create a new branch from the master... well
first of all let us just commit this okay. Let's commit, let's see if nothing
to commit because it has already pushed it up and committed it. It has firstly
committed and then pushed it up to the GitHub repository so let us just right
click on the master branch and let's create a branch from master and I will
name this...
So it is quite descriptive I will try to follow this descriptive branch name so
you may go to your GitHub repository and find the one lesson you want so let's
create this and as you can see we are in the current branch ARKit from single
view application. Okay, now let's go back and finally let's get started on the code!
What do we want to achieve first of all let's take a look at how this single
view application is created. Well we have our main storyboard and it is called
firstly in the main interface is set to main so the main storyboard will load.
Well as you might have already known I really do not like using storyboards or
SKS files for the matter of fact and I will now show you how you can avoid
using storyboards and do all of this in code. So I would just simply delete the
main interface what is just I did and I will just delete the Main.storyboard
to find too. Let's move it to trash. So now we don't have a main storyboard. Okay! Now
let's get to coding go ahead and open up your AppDelegate.swift file and
inside here as you can see we already have a window UIWindow variable declared.
Now we have to instantiate it. So window = UIWindow, okay. And
now we need to make it key and visible. So go ahead and type in window?.makeKeyAndVisible
good stuff till now! Now all we need to do is create a
viewController instance of it of a viewController. And add
that viewController to the root of our window... This rootViewController will
have some kind of a UIViewController and I will just create this now here...
let gameViewController and that will be equal to GameViewController(). And for
this to actually happened we need to create a GameViewController file
here. A class and I will put it of course in a new file and let it be a swift file.
Let's click on next and I will just name this GameViewController with a double L
here. And let's create this. Ok, I will just simply import ARKit for
now. And let's create our class here of course the name is the GameViewController
and it is of a superclass UIViewController. And let's add our the
viewDidLoad(). Ok, and maybe at our super.viewDidLoad. Ok, now we have our
GameViewController set up and let's go back to our AppDelegate and as you can
see we have our GameViewController constant ready. So we just simply add
here gameViewController and everything should compile correctly. Maybe hit a
command+B to build it out. Now next thing well maybe let us just delete our
default viewController. Let's move it to trashed. Ok!
Now we need to create manually an AR scene view, ARKit view. So I will
just create it here. So let arView and it will be of ARSCNView.
AR is for ARKit, SCN is for SceneKit because ARKit
uses SceneKit. It uses a lot of 3D objects of course and Scene
SCN objects like SceneKit objects. Okay, and that is why this abbreviation ARSCN
is used for... well most of the ARKit elements. So I will just type in here
view = ... and that will be an ARSCN view. Oh sorry about that... we need to put
in here a let. And now we should get the completion and it will be a simple
ARSCNview. We are not giving into frame because we are going to add some anchors
later on in the didMoveToView functions. Okay, and let's return our view now.
Okay, now we have an arView. What we need to do is simply let's just wait I just
yeah it the error just disappeared... Okay thank you Xcode compile. Okay, now we
need to select our view and let's add a subview to our arView
as a sub view to arView. But now we need to still position our view and that
will be done through our constraints. So arView. let's start with a top anchor
and let's constrain it. Constrain... and I will select this equal to because I want
to constrain it to our view.topAnchor. So we are constraining it to the view
top anchor. So it will go all the way up to our top anchor and of course we need
to activate it. So is active equals true, okay!
The same goes for all the other 3 anchors so I will just simply copy this
paste it three more times and change this to right anchor.
And here it is we have set up our top, right, bottom and left anchors. And now
this arView should constrain to the frame of our app. Now this is all you
have to do to add an ARSCN view. Now we need to actually create our ARKit
views. Well we need to add a configuration, ARKit world tracking
configuration. And that will be of ARSCN...here today ARWorldTrackingConfiguration.
Okay, and now we need to add this configuration to our arView.
arView.session.run and here it is run configuration. And I will get
add in simple configuration here. And the options will be... well no options, if you
want to add it here you can check out what kind of options there are.
Well there are run options, remove existing anchors, reset tracking. We will
talk about this maybe in a later video when we maybe want to reset the existing
anchors and reset the tracking for now we will just leave this array as empty.
And finally we are going to add some debug options because... well this really
works but you can't really see anything of course you can see through the camera
on your device but nothing really happens. So we are going to get some
debug actions. So arView. and here we have our debug options and that will be
equal to... and we will add two debug options. So I will
just create an array here ARSCNDebugOptions there you have it. And
let's add a . (dot) here. And as you can see we have two: show feature points and show
award origins. Well let's add both of them here and and we just go through
each one of them in just a second. So show feature points this is
how your app receives the data from the world that is shown through the camera.
These will be little yellow dots on your screen. And show world origin that will
show the origin of the world that the game has created upon first launch. You
will see origin the red blue and green immediately. Now one last thing that you
need to add in order to build and run this project is go to your info.plist
file under your target. And here let us just click on this little plus button
and type in with a capital "P" Privacy. And you will need Camera Usage Description
because... and I will just tell you because this is needed for the Apple project...
well this is needed for Apple to show the user that you need camera usage.
It will prompt the user to agree to use their cameras. This is a new requirement
from Apple, if the user declines this usage well it can't be used with this
app. Okay and I will type in here... so Privacy Camera Usage Description why do
we want to use?... And that is a pretty good explanation
why we need our work camera. Okay, and finally you will need to have a real
device plugged in for testing that is because ARKit games cannot be used in
the simulator because they are using the camera of course and the environment
that you want to test your app in. So you will need a real device for testing this.
I have set up here my QuicTime Player and it is showing my
device and I will just simply select my device and build and run and let's see
what happens. Okay build has succeeded! And there it is a
ARMagic. Let's just wait for it... we are inside. And as you can see ARMagic would
like to access the camera and the reason is show AR word. Let's allowed this, okay.
Okay, I believe I had made... I have a amited one final a very crucial step and
that is let me just double check... I believe... Yes and this is why I am going
to create a new tutorial on this. It's about adding these constraints I will
make it much easier but for now what you need to remember is for add for the
view.translateAutoresizingMaskIntoConstraints = false. Okay, and now
let's test again. So let's build and run and let me show you my device. Well I
need to unlock it first.
Okay, and there you have it. Okay and let it just familiarize itself. As you can
see there are these yellow dots and if I just back up a little bit you will see
the origin. This is put at the very beginning of our launch where the
device was... so it was like here. Okay, and that is the origin the yellow dots are
those feature points that we will use later on. We will use this origin too.
Okay, hope you enjoyed this video we will add a new button here right here to add
new elements into the scene in the next video. And I will cover all of this
constraints in the next video when we will add this "Add" button. Hope you
enjoyed this video and if you did go ahead and give it a thumbs up and share
it with your friends of course. And if you haven't already done so go ahead and
subscribe to this channel to see more videos of and this playlist is about
ARKit and SceneKit development. Okay, I will see you in the next one!