使用unity3d+免费扩展工具开发2D游戏_第三节

驰骋的风 3D打印店铺

            非常不错的系统教程，很多经验值得借鉴！
           

           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 inPart 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 Atlas
         

           If 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 inTexturePacker.
         


            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 the
            
             sprites/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 in
            
             Assets/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 Mode
            
            to
            
             Point
            
            .
           

            Click the
            
             Override for Web
            
             box, set the
            
             Format
            
             to
            
             Truecolor
            
             and then click
            
             Apply
            
            .
           


           Making the Player Sprite
         

           Now we’re ready to turn the player’s sprite atlas into animated sprites using theOrthello 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 the
            
             Atlas 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 Player
         

           In 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
            
             to
            
             0.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 Animation
         

           We 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 Sprite
         

           We 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 the
            
             shoot
            
             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 Scripts
         

           We’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 Colliders
         

           In 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 the
            
             Scale 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 the
            
             Vertex 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 Colliders
         

           The 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:
         

           Like 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 the
            
             Scale 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.
         

           Conclusion
         

           Now 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.
         

            
         

           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.rocket5studios.com
         

菜刀吻电线

百度的叫度娘，网易的叫易娘，新浪内部还在为是叫新娘还是浪娘而争论不休！……不管你们是企鹅的额娘，豆瓣的伴娘，还是华为的伪娘，都要记得，淘宝才是你们的亲娘啊！亲！！

奇

不错不错，收藏了

菜刀吻电线

你们都躲开，我来顶