In this series, we're going to make a side-scrolling robot
who can move left and right and also jump up and down.
We're also going to add some hazards for this robot to deal with
such as a disappearing platform and a bat which chases it around.
But before we do this, we're going to go through the project
because there are a few things that you may need to know before moving forward.
We have a few pre-built scenes that we've created,
just so it's quicker to get into the actual movement of the character.
With the practice project open,
you can scroll down to the side-scroller folder down here
and we're going to be working in this folder.
The first pre-built scene that
I'd like to show you is the side-scroll skin.
Now if we have a look here,
we've got a load of sprites here.
Which make up our character and the character's skin.
We have an animation player,
which has various animations that you'll use
in this series such as running.
If we just play this, you can see the character runs,
but we also have an idle animation and a jump animation.
We'll also use the push animation later in the course,
when we're pushing rocks around the levels.
Now, this skin scene will play these animations automatically,
depending on how the robot is moving.
We have a similar skin for the bat enemy and again we've got some animations
that it will use such as flying, when the bat is chasing the robot.
We also have a hang animation, which is like an idle animation
and just a little bit of a shifty animation there
just to show that the bat is looking at you but not moving.
This skin works in the same way as the side-scroller skin.
It will automatically choose either flying or hanging,
depending on whether the bat is moving or not.
Finally, I also want to go over the tile map.
Now, you've worked with tile maps before,
but we made this tile map just so it's easy to get started straight away.
With those three scenes in mind,
let's create the level that we'll be working in.
To create the level, create a new 2D scene
and we're going to call this, Level.
Now, this level scene is what we're going
to be working in almost exclusively in this series.
Whenever we're creating a character, we're going to add it to the level.
Whenever we add a hazard such as a disappearing platform,
we're going to add it to the level so it doesn't look very good at the minute.
What we're going to do is we're going to add our tile map
into it as a child, and then we can start drawing.
If you click the cave tile,
you can start drawing some cave walls by holding the left mouse button.
You can also hold Shift to draw a line.
Now, that doesn't look very good
so I'm going to press Control Z to undo that.
Now, if you want to draw large blocks of wall,
you can hold Shift and Control and you can draw rectangles,
when you click and drag with the left mouse button.
Now, this is a very quick and easy way to map out some levels.
We'll say this is our play area here.
This will be a good size to move around in.
I'm just going to draw some random bits on the ceiling and the wall
just to make it look just a little bit more interesting.
What I'm going to do is I'm going to fill out
just the rest of the level just so it looks a little bit better.
Hold Space and hold left mouse button to move around.
I'm just going to press Control S and save it in the side-scroller folder.
Then if we press F6 or this button in the top right, we'll play the scene.
I'm going to press F8 to close the scene,
and then we're back to editing the level.
Now to make this level look a little bit more interesting,
we also have a cave background scene,
which you can just drag and drop into the level,
and that gives us a nice textured background for the cave.
Now to add details to the tile map,
you might have noticed some other tiles here in the tile map.
If we try and select them and place them on our tile map,
it doesn't look very good because here,
they're overwriting the tiles we've already placed.
So I'm just going to Control Z.
Just get rid of all of those.
Now to get around this, we're going to actually add another tile map.
I'm just going to drag it just below this one, just so it looks nicer.
Now, we know that nodes are usually drawn from top to bottom,
so you would expect our details tile map
to always draw on top of the previous tile map, right?
However, in this tile map, we have changed the Z Index of the bush and bushes,
which means they are drawn behind anything else
with a higher Z Index, and that makes it so you don't have to worry
about the order of the scene tree.
Also, we have bushes which should appear behind the walls,
and rocks which should appear in front of them.
So it makes sense to change the Z Index for each tile.
Place some bushes on the ceilings and the floor.
Add some rock details and we're good to go.
If there's anything you're not happy with the tile map,
you can right-click to delete it.
The same goes for our previous tile map.
If you want to get rid of some walls,
make sure you select the right tile map on the left here.
Now, our level is looking very empty
so what we're going to do is create the robot scene
before we get coding so to this scene, add a new kinematic body.
We're going to search for it.
Kinematic Body 2D is what we want because we're working in 2D
and this is right up here.
I'm just going to press W and drag it into the center of the level.
To this, we are going to add a side-scroll skin
so move down here and click and drag
so it's a child of the kinematic body
and already it's looking much better.
If we take a look over here,
we can see that we've got a small error
and this node has no shape so we need to add a Collision Shape 2D.
Up here, we're going to add a Collision Shape 2D.
This also has an error, so let's have a look and see what it wants.
"A shape must be provided for the Collision Shape to function."
Now to do that, we go over to the right
and we're going to go into the drop-down and add a new rectangular shape.
If we zoom in here you can just about see it but it's very small at the minute.
We need to make it a little bit bigger so zoom out,
let's see if we can make this a little bit better.
What you can do is you can change the extent
by clicking and dragging in the editor.
Let's have a look here.
Let's maybe move this up here like so.
Let's have a look and see what happens when we run the scene.
We have our character and you'll notice that the skin is automatically playing
the idle animation because the character isn't moving.
Good, everything seems to be working so far.
Now we're going to rename our character to something like Robot.
Doesn't really matter what you call it
and what we're going to do is add a script
by clicking the button in the top left here,
and we're going to create it in the same folder as the side-scroller.
That's fine.
Since we have our robots here, we're going to click it
and we're going to Save Branch as Scene
and you can save it in this folder as well.
This has created a scene for our robot
which if we wanted to, we can edit individually.
Saving scenes in this way, means we can reuse it in other scenes.
Let's close out of this and open up our robot script.
Let's expand this code editor by clicking this button up here,
or pressing Control Shift F11
and we're going to delete all of this and get coding in the lesson.