We might keep accidentally selecting the Tilemap object. We could lock it, like we did with the Tiled Background. Nevertheless let's use the layering system to make things more manageable.
Adding a layer
Layouts can consist of multiple layers, which you can use to group objects. Imagine layers like sheets of glass stacked on top of each other, with objects painted on each sheet. It allows you to easily arrange which objects appear on top of others, and layers can be hidden, locked, have parallax effects applied, and more. For example, in this game, we want everything to display above the tiled background, so we can make another layer on top for our other objects.
To manage layers, click the Layers tab, which usually is next to the Project bar where we have our Tilemap bar:
Right-click in the layers bar to display a right-click menu in which you can select Add a layer at top.
Layers are organised top to bottom. Objects in the top layer will appear "in the foreground" whereas the objects on lower layers will appear underneath objects on superior layers.
The newly created layer is selected and you can even rename it if you so chose to do so.
Let's name it PlayerLayer.
You will also want to click the little lock icon next to Layer 0.
This locks the layer, preventing from selecting any object on it. Clicking the lock again unlocks the layer.
We can rename Layer 0 to Platforms.
Renaming helps keeping things clearer and you will be grateful to yourself when coming back to a project after months.
To rename, right-click the layer you want to rename and select Rename.
You can then rename your layer to the name you want.
Make sure that the layer PlayerLayer is selected before going further.
Adding the Player sprite
Now we are going to add an object that will represent our player's character in our game.
It will be composed of several animations, regarding the various "states" of our character (idle, falling, walking, jumping).
You can double-click in the gray space around the layout, or right-click in the Project Bar on the folder Object types. In the right-click menu, select Add new object type. Or you can also right-click in a blank space in the layout itself and select Insert new object.
This will bring up the Create New Object Type dialog.
Double-click the Sprite object to insert it (or click the button Insert when Sprite is selected).
The mouse turns in to a crosshair. Click somewhere in your layout to place the Sprite.
The Animations Editor opens so you can set the image(s) to display.
In the Animations Editor click the Open button in the toolbar. It can import multiple frames, and this will also overwrite the current frame.
A system dialog opens, allowing you to browse your computer.
Go where you have decompressed the Abstract Platformer pack and go select the files PNG\Players\Player Blue\playerBlue_walk1.png; playerBlue_walk2.png and playerBlue_walk3.png
Click the button Open.
Frames are now imported in the Animation Frames pane.
We now have three frames, representing our character walking.
Setting the origin
The origin is the center, or hot spot, of the object. In platformers, it's best to have the origin by the player's feet. This means if the animation changes height as it plays, they grow upwards, rather than in to the floor.
To set the origin, click the Edit the image points button in the toolbar.
You should notice a red spot appear on the player. That's the origin. You can click to change it. However, we want it bottom-middle aligned. We can quickly assign this by hitting 2 on the num pad (if num lock is on). If you don't have a num pad (e.g. some laptops), in the Image Points pane to the left, right click the line Origin and choose Quick assign/Bottom.
It's a hassle to do this for each and every frame, but luckily there's another short-cut: in the Image points pane to the left, right click the line Origin and click Apply to whole animation.
Bingo! The origin should be set on every animation frame.
Animations and Animations properties
Let's focus on the Animations pane and the Animation Properties pane for a moment.
Select Animation 1 and make sure that the pane underneath is named Animation Properties (when a single animation frame is selected that pane is instead named Frame Properties)
Let's rename Animation 1 and name it instead walk.
You can either modify the Name property in the Animation Properties pane or directly in the Animations list by selecting the animation until the field becomes editable.
We can keep the Speed property to the default 5. This is the number of frames that the animation will display in a second.
If you want to see what the animation looks like with its current properties, you can right-click it in the Animations pane on top and select Preview.
Another dialog opens, displaying the animation.
Notice the animation, at this time, only displays its three frames and stops.
Close the Preview dialog by left-clicking the top-right cross, go back to the Animation Properties pane and tick the Loop checkbox.
If you preview the animation again, you can now see it displaying in loop and can determine whether its speed fits it.
You can see that Loop makes it so that when the animation has reached its last frames, it starts displaying again from frame 0.
Close the Preview dialog and tick the Ping Pong checkbox in the Animation Properties pane.
Preview again, the animation now feels a bit more natural and smooth.
The animation displays all its frame, at the set speed and when it displays the last frame of the animation, instead of stopping there it displays the frames of the animation in reverse order until the very first.
Then it loops, back from this frame 0.
Let's add another animation to our character.
Right-click in the Animations pane and select Add Animation.
This time we will use the existing frame and replace it with a single animation frame.
Click the Open icon, browse to the Abstract Platformer pack.
Open the image PNG\Players\Player Blue\playerBlue_stand.png
Set the origin point to the bottom of the frame. Rename the animation to idle.
You may go back in this tutorial and apply the same steps used to perform those actions.
When done, close the Animations Editor by clicking the cross in the top-right corner.
Make sure your sprite object is in the dashed area of your layout.
You may preview your current work and see your character displaying its walking animation in your level.
Nevertheless, there are no interactions currently between your character, the player and the platforms.
Let's remedy that by adding some behaviors.