Welcome to Part 3 in this series on making a 2D sprite-based game with Unity 3D. In
Part 1 I introduced you to the tools we’ll be using to make a Lode Runner style action game and in
Part 2 we created the level sprites and built our first level. In this tutorial we’re going to be adding in the player, hooking up the scripts and adding collision to the ladders and ropes so that you’ll finally be able to run the character around in your levels.This tutorial assumes that you have already followed along with Part 2 of this series so your project should be ready to continue on with the steps below. If you haven’t already done Part 2, you should go back and do that first so you can get a full understanding of how everything fits together. If you’d rather skip ahead, you can
download the project up to this point. You can also click here to see how the game will look at the end of Part 3.
Making the Player Sprite AtlasIf you’ve been following the series, I know you’re excited to get the player character running around in the game, so the first thing we need to do is create a sprite atlas in
TexturePacker.
- Download the source sprite .png’s and unzip the file somewhere on your hard drive. If you already downloaded the sprites and added them to your project in Part 2, then you can skip this step.
- Launch TexturePacker and then drag & drop all of the .png files from thesprites/player folder into the Sprites panel.
Texture Settings / Layout:
- Set Algorithm to Basic
- Set Border Padding to 1
- Set Shape Padding to 1
- Uncheck Trim
Texture Settings / Output:
- Leave the Data format set to cocos2d.
- Under Data File, click the little “…” button and browse to the location in your project’s Asset folder where you want to store your sprites (I put mine inAssets/SpriteAtlases), name the file “player” and then click Save.
- TexturePacker automatically adds the .plist extension to the Data File, but Unity wants the file to be .xml. So in the text field, replace .plist with .xml.
- The Texture File path should already be set to the same location as the .xml file except that it will have a .png extension so there’s nothing to do there.
If you followed the steps above, then your settings in TexturePacker should look like this (click the image to see a larger version):
Now if you click the
Publish icon in
TexturePacker and then switch back to Unity, you should see a
player.png file and a
player.xml file in the
SpriteAtlases folder in the Project view.
If you don’t already have the project open in Unity, open it now and then load the scene that you created in Part 2 (eg.
level1.scene).
We need to make a couple of changes to the sprite atlas in Unity so that it looks correct.
- Select the player.png file in the Project tab. In the Inspector change the Filter Modeto Point.
- Click the Override for Web box, set the Format to Truecolor and then click Apply.
Making the Player SpriteNow we’re ready to turn the player’s sprite atlas into animated sprites using the
Orthello 2D plugin.
The Sprite Container:
- In the Unity Project tab, expand the Orthello folders: Orthello –> Objects –> Sprites –> SpriteAtlas and then drag the SpriteAtlas-Cocos2D object into the Hierarchy.
- In the Hierarchy tab, expand the OT object and then the Containers object and you will see your new container with a name something like “Container (id=-6840)“. This is the Container that will hold all of our player sprites from the atlas we made so you can rename the Container to something obvious like “player“.
- Drag the player.png from the SpriteAtlases folder and drop it on the “OTSprite Atlas Cocos 2D” script’s Texture slot.
- Drag the player.xml from the Project, SpriteAtlases folder and drop it on to theAtlas Data File slot. Now if you drop down the little Atlas Data arrow, you should see that it’s populated with all the sprite atlas data that TexturePacker generated for us.
Setting Up The Player Animations:Now we need to assign all of the frames from the sprite atlas to individual animations.
- Drag an Animation object from Orthello –> Objects –> Sprites into the Hierarchy. This will add a new object under OT –> Animations named something like “Animation (id=-4320)“. Rename this object to “player anims“.
- With the new “player anims” OTAnimation still selected, adjust the settings to match those in the following image. To populate the Container field, drag & drop the “player” object from OT –> Containers on to the Container field.
Click the image to see all of the animation settings:
Making The Player Sprite
- Next find the AnimatingSprite object in Orthello –> Objects –> Sprites object in the Project tab and drag it into the Hierarchy, this will make a new object in the scene with a name like “Animating Sprite (id=-23050)“. Rename this object “player“.
- With the new player object still selected in the Hierarchy, drag the “player anims” object on to the Animation slot. The Sprite Container slot should automatically fill with a reference to the “player” container object, if it doesn’t you can drag & drop that onto the slot.
- Now you should see the player sprite in your scene and if you press Play in Unity, the sprite will animate through all of the frames in all of the animations. We don’t want the animation to play on start so uncheck the Play On Start checkbox.
Adding Collision To The PlayerIn order for the player to collide correctly with the ladder and rope colliders we’ll be creating later, we need to set the following.
- With the the player “OTAnimating Sprite” still selected in the Hierarchy, check the check box next to Collidable. This will automatically add a Rigidbody component to the object.
- Click the dropdown list next to Physics and select Custom from the list.
- Under Transform, set the Scale Z to 1.
- Change the Depth to -1.
- Under Box Collider, set Center Y to -0.1 and Z to 1. Change Size X to 0.45, Y to0.6 and Z to 0.4.
If you followed the steps above, the settings on the player sprite should look like the following image.
Click on the image to see all of the settings:
Changing the Depth to -1 and the Center Z to 1 on the Box Collider will position the Collision at 0 on the Z axis while moving the player sprite 1 unit towards the camera. This has 2 effects: it makes sure that the player will always be visible in front of the level sprites while keeping the collision at 0 on the Z so that it will collide with the ladder and rope triggers. It sounds kinda strange, but you can see how it should look in this screen shot:
Setting Up The Shooting AnimationWe need to add another animating sprite so that when you press the fire button, you’ll see a bullet blob animate from the player and hit the ground.
The Shoot Animation:
- Drag an Animation object from Orthello –> Objects –> Sprites into the Hierarchy. This will add a new object under OT –> Animations named something like “Animation (id=-4320)“. Rename this object to “shoot anim“.
- With the new “shoot anim” OTAnimation still selected, adjust the settings to match those in the following image. To populate the Container field, drag & drop the “level” object from OT –> Containers on to the Container field. Remember that we already added the shoot sprite animation to the level sprite atlas in Part 2 of the series.
The Shoot Sprite
- Next find the AnimatingSprite object in Orthello –> Objects –> Sprites in the Project tab and drag it into the Hierarchy, this will make a new object in the scene with a name like “Animating Sprite (id=-23050)“. Rename this object “shoot“.
- With the new shoot object still selected in the Hierarchy, drag the “shoot anim” object on to the Animation slot. The Sprite Container slot should automatically fill with a reference to the “level” container object, if it doesn’t you can drag & drop that onto the slot.
- Set the Transform Position X to -1 so that the sprite is position to the left of the player’s sprite.
- Set the Depth to -1 so that the sprites will appear in front of the level sprites.
- Set the Frame Index to 18.
Now you should see the shoot sprite in your scene and if you press
Play in Unity, the sprite will animate through all of the frames in all of the animations. We don’t want the animation to play on start so uncheck the
Play On Start checkbox.
We only want to see the shoot sprite when the player is actually shooting so uncheck the checkbox next to
Mesh Render on the
shoot sprite. This will hide the sprite in the scene until we show it again later with a script.
Parenting The Shoot SpriteWe want the sprite to move with the player and we also need to flip the sprite so that it’s either on the player’s left or right side depending on which way the character is facing.
- Go to Game Object –> Create Empty
- Rename this object to “shoot parent” and make sure the X, Y, Z Position on the object is set to zero.
- In the Hierarchy, drag and top the shoot sprite on to the shoot parent so that theshoot sprite becomes a child of the shoot parent object.
- Drag and drop the shoot parent object on to the player sprite so that it’s a child of the player.
If you followed all the steps so far, your Hierarchy should look something like the following image. Note that I put all of my level tiles under an empty game object named
LEVEL to keep things organized.
Note that in order for the scripts to work, the child objects under the player must be named exactly as shown in the above image.Hooking Up The ScriptsWe’re finally ready to add the scripts so that the player can move!
- Download the player scripts and unzip the file somewhere on your hard drive.
- Drag the Scripts folder from the .zip into your project’s Asset folder.
- Create an empty game object by going to Game Object –> Create Empty
- Rename the new object to something like “Scripts“.
- Drag and drop the xa.cs file from the Project tab onto the Scripts object in the Hierarchy.
- Drag and drop the player.cs and the playerAnims.cs files from the Project tab on to the player object in the Hierarchy.
- Make sure that the player is positioned above a brick tile so that she has something to stand on. Remember that it’s the player’s Box Collider that actually collides with objects in the world and not the visible sprite object, so the box will be positioned at something like 0,0,-1 (X and Y can be anywhere in the level but Z should always be -1).
Now if everything is setup correctly, when you press Play in Unity the player should stand on a brick tile without falling through it. And if you press left and right on the keyboard the player should move and the run animations should play.
Describing how the scripts work is beyond the scope of this tutorial, but I did add comments to the scripts that should hopefully help you understand how everything is working. If you have questions about anything in the scripts, please feel free to ask in the comments below or email me directly.
Adding The Ladder CollidersIn order for the ladders to work, we need to add colliders to them.
Creating A Ladder:
- Go to GameObject –> Create Other –> Cube
- Rename the Cube to something like “Ladder“.
- Open the Tag Manager by going to to Edit –> Project Settings –> Tags
- Under Tags in the next available slot (probably Element 1) type “Ladder” and then in the next slot after that, type in “Rope” (without the quotes).
- While we’re here, we need to add another layer. Under the next empty User Layer(probably User Layer 9), type “NoDraw” (without the quotes).
- Now click on the Ladder cube you created before and change the Tag to “Ladder” and then change the Layer to “NoDraw“.
Hiding Objects In The Game View:You’ve probably noticed that the Ladder collider is visible in the Game view but we don’t want to see these in the actual game. To hide them, we need to make a change to the camera.
- Click on the Main Camera object in the Hierarchy.
- Under Camera, drop down the list next to Culling Mask and click on “NoDraw” to deselect it. Now any object that is in the “NoDraw” layer will be hidden in the Game view.
Sizing And Positioning The Ladder:Every ladder in the scene needs to have one of these Ladder colliders and we need to adjust the size of the Ladder colliders to match the height of each of the ladders in the level. The ladder collider needs to be 1 unit taller than the visible ladder – so if your ladder is 4 tiles (sprites) tall, then the collider needs to be 5 units tall.
- Assuming your ladder is 4 sprites high: Select the Ladder collider and change theScale Y to 5 (1 unit taller than the visible ladder).
- Snap the Ladder collider to one of the lower corners of the bottom sprite using theVertex Snap feature in Unity.
- You can duplicate this object, resize the Y and snap it to all the other ladder sprites in your level.
Your ladder should look like this (click to see a larger version):
Now if you press
Play in Unity and then walk the player over to the ladder, she should be able to climb up and down the ladder, the player’s sprite should be playing the climb animation and you should be able to exit the ladder at the top and bottom levels and also fall off the ladder if you exit somewhere in the middle.
Adding the Rope CollidersThe rope colliders follow pretty much the same setup as the ladders.
Creating A Rope:
- Go to GameObject –> Create Other –> Cube
- Rename the Cube to something like “Rope“.
- Change the Tag to “Rope” and then change the Layer to “NoDraw“.
Sizing And Positioning The Rope
ike the Ladders, every rope in the scene needs to have one of these Rope colliders. But unlike the Ladders, the Rope colliders must be the same width as your rope sprites.
- Assuming your rope is 4 sprites wide: Select the Rope collider and change theScale X to 4 (Y and Z scale should be 1).
- Snap the Rope collider to one of the lower corners of the bottom sprite using the Vertex Snap feature.
- You can duplicate this object, resize the X and snap it to all the other rope sprites in your level.
Your rope should look like this (click to see a larger version):
Now if you press Play in Unity and then walk the player over to the rope, she should be able to climb left and right along the rope, you should see the rope hang animation playing and if you press the down arrow while hanging from the rope, she should let go of the rope and fall.
ConclusionNow you have everything you need to make levels that support the player’s full suite of movements: running, ladder climbing and rope shimmy. In the next tutorial, we’re going to be adding the scoring system, breaking out brick tiles and picking up objects.
You can
download the project up to this point and you can
play the web version of the project here.
If you like this post, please be sure to say hi in the comments and follow me on
Twitterand
Facebook. Your support helps to keep these tutorial coming. This blog post is part of
iDevBlogADay, a collection of indie developers writing about their development experiences.
Regarding The AI:When I began this series, It was my intention to include enemies that could follow the player around the level using behaviors similar to the original Lode Runner game. However my time has become increasingly limited and my programming skills aren’t fully up to the task of recreating their AI so I might not be able to get AI into this the series.
If you are a programmer who would like to contribute an AI behavior solution to this tutorial series, please contact me.
转自:
http://www.
