Create a 2.5D character


estimated time : 5 mn
ingredients needed : Unity
(this recipe is part of the footvolley game menu )

Detailed Steps

 

00:00 Creating an empty gameObject

Just creating an empty GameObject on the scene by clicking on the top menu GameObject/Create Empty.
Or by right-click on the hierarchy panel and Create Empty.

Rename it as wanted(in our case Player1 ).

00:12 Adding a Sprite Component

Now we add a sprite component, in order to see our 2D art in place of the gameObject, by right-clicking on the GameObject and selecting 2DObject/Sprite.

00:16 Transferring an image into the asset library

Now we’ll take a sprite sheet made especially for the game (all sprites are available for you to use when you join my exclusive patreon community), it contains all animated steps of a running player (just running, more on moves and attacks later), and drop it to the asset in our Images folder Unity project folder/Assets/Images (if you didn’t create the Images folder in the previous step setting up unity, you can do it now. Or never, It’s for clarity purpose only).

00:34 Resetting position

As always, it’s a good practice to reset the vector of new created gameObjects (although in this video, I realized it a little late :p )

00:39 Setting up the image as sprite

Now onto the sprite. For the moment we simply cannot drag & drop the sprite in the images folder directly into the sprite var of the component because of the nature of the imported image that is set by default as a default texture type. We change that in the properties of the image and set it as Sprite and apply the changes.

00:53 Displaying the sprite

Just drag and drop the sprite in the hierarchy window directly onto the sprite var of the GameObject (or select the little icon o, on the left of the sprite var,and browse to the wanted sprite), and Voila ! Well, not really at that time : why is there all the characters displaying ? It’s because that we imported the whole sprite sheet at once.

01:00 Setting up sprite mode

We don’t want the whole sheet to be displayed, that’s why  we have to set the sprite mode as Multiple sprite. Go back to the asset Images directory, select the sprite sheet ,and on its properties set the sprite mode as Multiple. This is not other though, we now have to tell Unity what sprites to cut and where.

01:12 Entering sprite editor mode

For that, let’s click on the Sprite Editor button just above. Fortunately Unity is quite clever for seeing clearly in sprite sheets, we see now the whole sprite sheets as a single long sprite, let’s cut it in some smaller sprites by clicking on the Slice button on top. Then just click on slice to see unity’s magic cutting the whole sprite in multiple sprites of all the animation steps of our character. Don’t be afraid you can always adjust the cut manually yourself later. Do not forget to apply the cut by clicking on Apply button, at the top right of the editor. We can now see in the Project window that our Sprite sheet is now decomposed on multiple sprites, and by the way, look : now our little character stands still proudly and alone on the center of the field.

One important and forgotten step in the video is the anchor point of our sprites. The anchor point will determine the main position of our sprite, by default the anchor is set at the center of each sprites. If we don’t see nothing wrong for the moment, we’ll see it when our sprites will start to get animated (in the idle animation, you’ll see that the player seems to shrink and growth from its center, instead of seems to breathe normally with its both feet anchored to the ground).

Let’s arrange that by entering in the sprite editor mode again, and changing for each sprite the anchor by choosing “bottom” instead of “center” as showed in the animation below:

 

01:33 Adjusting game view

Now play a little with the properties of the game window to get a clear view of what you want your game to show.
Tweak a little until you’re happy .

02:06 About sprite layers

Well we’ll now discuss about a common 2D problem : layers. Just see 2D objects as piece of papers with drawings on it. You put a 1st drawing on the floor, you see it.

But if you put a second drawing above it you’ll get the 1st drawing masked by the 2nd one. In order to avoid 2D objects to overlap you’ll want to sort them with the help of different layers.

Here in our 2.5D exemple see what’s happening when moving our character into the world. The character seems to disappear at some moments.

It overlaps with the 2D drawing of the field because there are on the same layer.

It’s nice to have characters on the same character layer.
But you’d want to have the background (the field) on a layer below. Let’s do this.

02:36 Creating sprite layers

Select the sprite layer in the Player1 sprite component. As you see you cannot choose between much because we only have a Default layer, let’s create one by clicking on Add Sorting Layer. Here we can create and name layers as we want, just create a layer named Characters, and other one named Ground .

02:58 Sorting layers

Now just place the Ground as first layer by drag and drop it. remember, as our little papers, the 1st one will be masked by those above it.

03:04 Sorting GameObject sprite layers

Ok, now go back to our Player1 sprite component and let’s set its sorting layer to Characters . Do the same for the plane sprite by setting it as Ground. Let’s try by moving player in the editor : fine ! the player doesn’t disappears anymore.

03:34 Saving scene

Now we save the scene. Let’s create a Scenes folder into the Asset folder. Right click on the Asset folder in the project window and create a new folder names Scenes.
Once it’s done just go on the top menu File/Save Scene/ .
Let’s call the scene InGame and save it on the Scenes folder for clarity purpose.

 

 

Leave a Reply