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

[复制链接]

驰骋的风

3D打印店铺

3795 主题	2 听众	5万积分

版主

Rank: 7 Rank: 7 Rank: 7

纳金币: 53202
精华: 32

电梯直达

楼主

发表于 2011-11-21 14:22:00 |只看该作者 |倒序浏览

      Welcome to part 2 of this tutorial series on making a Lode Runner-style 2D game with Unity 3D. In part 1, I introduced you to a bunch of free tools and scripts that we’ll be using and showed you how to setup your project. In this post, I go over how to create the level sprites and build your first level.




         Of all the Unity plugins we covered in part 1, the main plugin we’ll be focusing on in this installment of the series is Orthello 2D. Orthello was recently updated with a lot of cool new features (as I write this, 1.6a is the latest version) so make sure you’re using version 1.6a or newer.


         Initial Project Setup


         We need to make a few changes to the project settings before we start making the sprites.


         Build Settings:


         File –> Build Settings…


         Click on

         Web Player

         and then click

         Switch Platform

         . (You could leave this set to PC and Mac Standalone if you prefer.)


         Close the Build Settings window.


         Player Settings:


         Edit –> Project Settings –> Player


         Under

         Per-Platform Settings

         click on the little world icon (assuming you set your platform to Web Player in the previous step).


         Click on

         Resolution and Presentation

         and change the

         Screen Width

         to

         800

         and the

         Screen Height

         to

         600

         .


         Render Settings:


         Since you’re typically not going to use Unity’s lighting system in a 2D sprite-based game, we want to brighten things up in here by adjusting Unity’s default ambient light. This step is optional.


         Edit –> Render Settings…


         Click on

         Ambient Light

         and change the color to white (

         255, 255, 255, 255

         ).


         Initial Orthello 2D Setup


         In the Unity Project tab, go to

         Orthello –> Objects

         and then drag the

         OT

         object into either the Scene or the Hierrachy tab.


         In the Hierarchy tab, drop down the little arrow next to the

         OT

         object and then click on

         View

         .


         Change the

         Pixel Perfect Resolution

         to

         800

         x

         600

         (same as we set for the Player Settings)


         Change the

         Custom Size

         to

         10


         Now if you select the

         Main Camera

         in the Hierarchy, you’ll see that Projection is set to Orthographic and Size is set to 10. Orthello automatically changed the Projection from Perspective (Unity’s default setting) to Orthographic when you added the OT object into the scene. And When we changed the Custom Size on the Orthello View object to 10, it set the Main Camera’s Size to 10.


         With a bit of experimenting, I found that with a screen resolution of 800×600 and an Orthographic Size of 10, a Cube at scale 1x1x1 will be exactly 30 pixels on screen which happens to be the exact size of the sprites we’re going to use to build the levels which should make it easy for us to stick to a grid when building levels.


         At this point, your project should look something like the following image (click to see a larger image). Note that I also added a Cube to the scene for scale comparison.





         Download the project up to this point.


         Making The Level Sprite Atlas


         Ok now that all that initial setup stuff is out of the way, it’s time to dig in and have some fun. The levels in Lode Runner were built using just a few simple tiles: Brick (digable), Concrete (un-digable), Ladder and Rope.


         Download the source sprite .png’s

         and unzip the file somewhere on your hard drive.


         Launch

         TexturePacker

         and then drag & drop all of the .png files from the

         sprites/level

         folder into the Sprites panel.


         Then select all of the .png files in the

         sprites/shoot

         folder and drag those into the Sprites panel too.


         Texture Settings / Layout:


         Set

         Algorithm

         to

         Basic


         Uncheck

         Trim


         Uncheck

         Enable Auto Alias

         .


         Texture Settings / Output:


         Leave the

         Data

         format set to

         cocos2d

         .


         Under

         Data File

         , click the little “…” button and browse the location in your project’s Asset folder where you want to store your sprites (I put mine in

         Assets/SpriteAtlases

         ), name the file “

         level

         ” 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

         SpriteAtlases

         folder in the Project tab with the sprite atlas and a sprite data files inside.


         We need to make a couple of changes to the sprite atlas in Unity so that it looks correct.


         Select the

         level.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 Level Sprites


         Now it’s time to dig into Orthello and turn the atlas into sprites.


         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 newly created

         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 level sprites from the atlas we made so you can rename the Container to something obvious like “

         level

         “.


         Drag the

         level.png

         from the Project,

         SpriteAtlases

         folder and drop it on the “OTSprite Atlas Cocos 2D” scripts

         Texture

         slot.


         Drag the

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


         Making An Animated Brick Tile:


         The brick needs to have some animations on it that will play when it’s destroyed and when it regenerates so we need to make an 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 “

         level anims

         “.


         With the new

         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.








         Next find the

         AnimatingSprite

         object in

         Orthello –> Objects –> Sprites

         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 “

         brick

         “.


         With the new brick object still selected in the Hierarchy, drag the “

         level anims

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


         Now you should see a brick sprite in your scene and if you press Play in Unity, the sprite will animate through all of the frames in the animation. We don’t want the animation to play on start so uncheck the

         Play On Start

         checkbox.


         Adding Collision To The Brick:


         We’re going to need some collision on the brick later on so that the player knows when he/she’s standing on the ground.


         With the brick object still selected in the Hierarchy, check the

         Collidable

         checkbox. This will automatically add a Box Collider and Rigidbody component to the sprite.


         We also need to Tag the object with a specific tag and add it to a Layer. Go to

         Edit –> Project Settings –> Tags

         to open the

         Tag Manager

         .


         Under

         Tags

         at the very top, drop down the little arrow and then type “

         Ground

         ” (without the quotes) into the

         Element0

         field and press enter. We’re going to need a few more tags later on so while we’re here, add another tag called “

         Ladder

         ” and “

         Rope

         “.


         We need some

         Layers

         too so under

         User Layer 8

         , type

         Ground

         and under

            User Layer 9

         type

         Ladder

         .


         Click on the brick object in Hierarchy and the drop down the

         Tag

         list in the Inspector and select

         Ground

         . Then click on the

         Layer

         drop down and select

         Ground

         from that list.


         Turn It Into A Prefab:


         Later on in the tutorial series we’re going to be adding some stuff to the brick object and making some changes so it’s a good idea to turn the object into a Prefab so that if you build a level with the brick and then and then want to make changes to it later, the changes will be applied

         all

         the prefab brick objects in your level. Making a prefab is super easy and will save you a ton of time later on.


         Create a new folder in your Project and name it “

         Prefabs

         “.


         Drag the

         brick

         object from the Hierarchy and drop it into the

         Prefabs

         folder in the Project tab.


         Making The Static Level Sprites


         Next we need to make the concrete, ladder and rope tiles. We’re going to use the same Container for these that we made before but instead of displaying them with an AnimatedSprite, we’re going to use the Sprite object.


         Concrete Tile:


         If your brick object is still sitting in the center of the Scene, move it to the side so it’s out of the way.


         Drag & drop the

         Sprite

         object from

         Orthello –> Objects –> Sprites

         into the Hierarchy or Scene which will create a new object named something like “

         Sprite (id=-3700)

         “. Rename that object to “

         concrete

         “.


         Drag the level object that we created earlier from

         OT –> Containers

         and drop it on to the

         Sprite Container

         slot in the Inspector.


         Your sprite will appear but it looks like the brick sprite that we made before, that’s because the brick is the first texture on the Sprite Atlases index. Click and hold your mouse over the word “

         Frame Index

         ” in the inspector (with the concrete object selected) and then drag the mouse to the right to scroll through the textures on the sprite atlas. The concrete texture is at index

         14

         so set it to that. The sprite should now look like a solid brick.


         Check the

         Collidable

         checkbox to add collision to the object.


         Drop down the

         Tag

         list in the Inspector and select

         Ground

         . Then click on the

         Layer

         drop down and select

         Ground

         from that list.


         Drag the

         concrete

         object from the Hierarchy into the

         Prefabs

         folder in the Project tab to create prefab from the object.


         Ladder and Rope Tiles:


         The Ladder and Rope tiles follow most of the same steps as the Concrete tile.


         Move concrete tile out of the way if it’s still sitting in the center or the Scene view.


         Drag & drop a

         Sprite

         object from

         Orthello –> Objects –> Sprites

         into the Hierarchy or Scene and rename the object to “

         ladder

         “.


         Drag the

         level

         object that we created earlier from

         OT –> Containers

         and drop it on to the

         Sprite Container

         slot in the Inspector.


         Change the

         Frame Index

         to

         15

         , the sprite in the Scene view should now look like a ladder segment. That’s all we need to do on the ladder tile for now.


         To make the Rope tile, duplicate the ladder sprite in the Hierarchy and then rename it “

         rope

         “.


         Change the

         Frame Index

         to

         17

         so that it looks like a black cube with a white line across the top (that’s our rope tile!).


         Now make prefabs from the ladder and rope by dragging each of the objects from the Hierarchy into the Prefabs folder in the Project tab.


         Making The Bottom Border:


         Now we have all the sprites necessary for making levels, but before we start we need to make a border object that will sit at the bottom of the screen. The border will give the player and enemies something to stand on if there are missing bricks along the bottom row and it will also give us something to snap to so that the levels will adhere to a nice grid.


         Go to

         Game Object –> Create Other –> Cube

         and rename it to “

         border bottom

         “


         Change the Transform Position to X: 0, Y: -10.3, Z: 0


         Change the Transform Scale to X: 26, Y: 1, Z: 1


         Drag and drop the border bottom object from the Hierarchy into the Prefabs folder in the Project tab to turn it into a prefab.


         A small amount of the cube should be visible above the bottom of the Game view and it shouldn’t quite be all the way to each edge. The cube is pretty ugly with the default white material, so let’s make a material that matches the color of the bricks.


         Create a new folder in the Project tab and name it

         Materials

         .


         Right click on the

         Materials

         folder and go to

         Create –> Material

         and then rename the new material “

         border

         “


         Select the

         border

         material and then in the Inspector click on the white area beside the little eye dropper icon, this will open up the color picker.


         Change the RGBA settings to R: 159, G: 2, B: 0, A: 255 and then close the color picker.


         Drag the

         border

         material and drop it on to the

         border bottom

         object in the Hierarchy to apply the material. The border should now be the same color as the bricks.


         Change The Background Color


         We’re almost ready to make a level, but first lets change the background color to black.


         Select the

         Main Camera

         and then click on the color swatch next to

         Background

         .


         Change the RGBA settings to 0,0,0,255. The background in the Game window should now be black.


         Making A Level:


         Whew! It took a few steps, but now you have everything you need to build a bunch of levels. Well almost everything – you still need a player, enemies, a pickup and a few other things which we’re going to cover later on in the series.


         At this point you can just start duplicating the brick, concrete, ladder and rope tiles around the scene to make a level. BUT before you do, here are a few tips:


         In the Scene view, click on the drop down list directly under the Scene tab – it might say something like “Textured” and change the option to

         Tex-Wire

         .


         You can use

         Vertex Snap

         to easily align objects – in the Scene view hold down the V key and hover the mouse over any of the 4 corners on one of your tiles and you’ll see that the manipulator will snap to the closest corner. Click the left mouse button when the handle is over a corner of the sprite that you want to snap from and then drag the object to another sprite corner to align it tightly with that tile.


         Remember that bottom border cube we made before, well you can use that as a base line for snapping your cubes so that you can build the entire level on a grid. Grab one of your tiles and snap the lower left corner to the upper corner of the bottom border object. Note that you don’t have to worry about snapping on the Z axis since Orthello doesn’t allow you to move objects along the Z axis.


         You can also select several tiles at the same time either with shift+left click or by dragging an area around a bunch of tiles. Duplicate those tiles and then use Vertex Snap to snap them to other tiles in the scene.


         Here’s what my initial scene looks like as I start by building the level from the bottom border object (click to see a larger version):





         And here’s what a finished level looks like (click to see a larger version):





         Conclusion:


         I hope you enjoyed this post and learned a little more about how to make 2D games with Unity. In the next post we’re going to be adding a playable character so you can actually run around in the levels.


         转自http://www.rocket5studios.com