Tag Archives: Unity3D

Make A 2D 2-Player Platformer Game With Unity 4.3

This tutorial will show you how to make a 2D 2-player capture the flag platformer game using the new 2D sprite tools and 2D physics that were recently added in Unity 4.3.

If the game in this tutorial looks familiar it’s because I showed you how to make this same game last year using a 3rd party sprite manager plugin to handle the sprite display and animation. This time I’m going to show you how to make the game using Unity’s brand new built-in 2D tools.

In This Tutorial

  • Create animated and static sprites using the new 2D sprite tools
  • How to use the new Physics 2D components
  • Connect animation states in Mecanim
  • Basic principles of level design and placing objects in the editor
  • Lots of Unity tips and tricks
  • Project files are included (download link is below)

Before You Begin

The Video Tutorial

Here’s a look at how the completed project will look inside Unity:
Rocket5 2D Game - editor screenshot

Show Your Support
If you found this tutorial useful, please show your support by checking out some of our games and apps (links are on the sidebar) and by following us on Twitter and Facebook.

And if you have any questions or need some help, please be sure to add a comment.

Wow. Unity Supports Joint Scaling? Awesome!

Working as an animator on AAA titles and films, I’ve never been allowed to scale joints on a rig. I’ve always been told that the “engine won’t support joint scaling”. This meant, to me, that I’d blow up the game if I tried to scale joints on a rig… since scale is almost always locked, I never missed it.

Until now, that is.

Working on incredibly fast and agile mobile development is changing how I think about ‘pipeline’ and ‘rules’. If it works in-game, and it means we can make things faster and cheaper, then I’m all for it!

Our current game in production “The Phantom P.I.” is far more ambitious than the other games we’ve made thus far, with tons of custom art. We’re a core team of two, Tim and I, so we are always looking for shortcuts that don’t affect quality or concept. We needed a quick way to prototype a Raven flying around in the levels, so we bought this Crow from the Unity Asset Store. The crow worked great; it came with a texture, flight cycle animation and has a skeleton.

OpenWings_sm

I re-painted the textures to make it look like it lived in our world, tweaked the animation to make it more to my liking, and hurrah! A ready-made Raven for our game!

Raven Fly

Then Tim wanted it to hop around on the ground. “NO NO NO!” (I like to rant.) “Its wings are open! We can’t close them without a very sophisticated rig! Exporting animations into Unity is very tricky business – what exports? What does not? A complex rig is simply beyond my technical abilities right now!”. At least this is what I’ve always been told.

I had tried out joint scaling before, with our little friend Cecil. He gets knocked on the head – his head compresses as he goes into his ‘squash’ – and we get a nice exaggerated pop-up to animation.

Cecil Head Squash

Thinking outside my comfort zone is what makes my work here at Rocket 5 so exciting! Why not scale the wing tips and tuck them back out of site?

scaledWingTips_sm

Mobile screens are very small, and even on the iPad this kind of detail is not really necessary. And since game-play trumps everything else, why not try it?

Raven Fly to Hop

It worked! AND it was very easy to just animate on the Raven’s skeleton for additional animation details.

Raven Hop

The more time I get to animate, the happier I am. :)

SkillSwap: Making A 2 Player 2D Game With Unity

SkillSwap Icon[UPDATE] We have a brand new Unity tutorial which uses the new built-in 2D sprite and physics systems that Unity added in version 4.3. You can find it here.

I recently presented a step-by-step workshop titled “Making A 2D Sprite-Based Game With Unity” to the Toronto SkillSwap community which is “A collaborative group for folks interested in sharing their skills and training with other developers in Toronto, and for folks interested in learning!”.

Around 50 people showed up to the 3 hour workshop and although we tried our hardest to get through all of the content, we only completed about 1/2 of the project before it was time to move on to the beer drinking portion of the event.

So while I still had all of the project steps fresh in my mind, I figured it would be a good idea to go through the workshop at home and screencast the whole thing so that everyone could get a chance to follow along with the complete tutorial.

Here’s a look at what the completed project looks like, because you know; editor screenshots in blog posts look cool.
SkillSwap 2d game editor

Before you jump into the video, here’s all the stuff you’ll need to complete the project:

And here’s the screencast:

Calculating Orthographic Camera Size

If you’re wondering how I came up with the 6.25 orthographic size used in this project, here’s a handy formula for figuring out the orthographic camera size which was provided by Jason Caldwell.

x = screen width in pixels
y = screen height in pixels
s = sprite height or width (whichever is larger) in pixels
 
x / ((( x / y ) * 2 ) * s )

More Unity 2D Game Tutorials

Make A 2D Game in Unity3D Using Only Free Tools Part 1
Make A 2D Game in Unity3D Using Only Free Tools Part 2
Make A 2D Game With Unity3D Using Only Free Tools Part 3
Make A 2D Game With Unity3D Using Only Free Tools Part 4
Make A 2D Game With Unity3D Using Only Free Tools: Beginning Enemy AI With A* Pathfinding

Show Your Support

If you find our tutorials useful, please considering buying one or more of our games and apps for iPhone and iPad. Your support helps to keep the tutorials flowing!

Giant Moto: High flying arcade style motocross action!
Small Space: Fly a spaceship, eat space creatures, get huge, score point!
Holeshot Drag Racing: High speed drag racing action!
Alien Booth: Transform pictures of your friends into awesome aliens!
iSpoof Walken: A hilarious look into the world of Christopher Walken!
Gaga Eyes: Transform pictures of your friends to give them huge anime eyes!

About the author

Tim MillerTim Miller is a veteran game developer with over 15 years experience in the video game industry working as a Level Designer and Lead Level Designer at LucasArts, Secret Level and Nihilistic Software. He co-founded Rocket 5 Studios with his wife Cathy and their dog Rocket in 2009. Twitter, LinkedIn, Portfolio

Make A 2D Game With Unity3D Using Only Free Tools: Beginning Enemy AI With A* Pathfinding

Make a 2d game in unity3d part 5In This installment of our 2D tutorial series, we will be adding enemy AI to our Lode Runner clone using A* Pathfinding. This post has been guest written by Adrian Seeto of Fun Mob Games who was also kind enough to write the AI scripts that are a huge part of bringing the game to life.

Adding the enemy AI required changes to many of the scripts that we added in the previous tutorials. You can download the complete project here which has been rebuilt to support the new prefab system in Unity 3.5x. If you’re using an older version of Unity (pre 3.5), then you should download this version. You can also follow the steps below to update your existing project. I recommend following along with the tutorial as there’s tons of great information on implementing the AI with A*. You can also play the game as it will be at the end of this tutorial here.

Installing the A* Package

  1. Import the free version of Aron Granberg’s A* Pathfinding Project into Unity3d
  2. Create an empty GameObject and rename it A*. Make sure it’s positioned at 0,0,0
  3. Drag the /AstarPathfindingProject/Core/AstarPath.cs file onto the A* GameObject
  4. Click on the A* GameObject and disable the “Allow Javascript” option

Importing game C# scripts

Many of the scripts have been modified since Part 4 of this series, so you’ll need to update them. If you’ve made changes to your own scripts then you’ll need to merge your changes into these new scripts.

  1. Copy these scripts into your Assets/Scripts/ folder:
    1. Player.cs (updated)
    2. PlayerAnims.cs (updated)
    3. xa.cs (updated)
    4. ChangeBehaviorGUI.cs (new)
    5. Character.cs (new)
    6. Enemy.cs (new)
  2. Copy this script into your AstarPathfindingProject/Editor/GraphEditors folder:
    1. MyGridGeneratorEditor.cs
  3. And finally copy this script into your AstarPathfindingProject/Generators folder:
    1. MyGridGraph.cs

Configure The xa.cs Script

Create a new Layer by going to Edit –> Project Settings –> Tags and then enter “Enemy” in one of the empty User Layer slots.

  1. Select the Global/Scripts/xa GameObject
  2. Set Ground Mask field to “Ground
  3. Set Ladder and Rope Mask field to “NoDraw
  4. Set Enemy Mask field to “Enemy

Miscellaneous Project Changes

Note that some of these may be unnecessary or redundant depending on how your project is currently setup.

  1. Expand the Global game object in the Hierarchy and then select the “border bottom” and “border top” GameObjects and set their layer to Ground.  This is so enemies can stand on it if/when we dig a trap above the bottom border and our enemies fall into it they won’t fall continue through the border into the great abyss.
  2. Select the player object in the Hierarchy and then change its Tag to “Player
  3. Select the OT/View object in the Hierarchy and uncheck “Always Pixel Perfect“. Note I’m not sure why Adrian turns off pixel perfect, feel free experiment on your own.

Configure A* Pathfinding For Our Level

A* is a graph traversal algorithm widely used in computer science, and commonly used in games for path finding.  A full discussion of A* is beyond the scope of this tutorial, but there is some terminology you should be aware of.  A graph consists of nodes and the network of connections between them.  Once A* has been provided with a graph, you can query it to find the shortest path from one node to another.  A* will return a path way list of all the nodes that you must travel along to get from your start node to your end node, in the shortest path possible.  

More accurately, the path returned is the “least cost” path, because nodes have a specified penalty cost for traveling along it.  A* will attempt to create a path which incurs the least cost.  The unit of a penalty is up to the application developer.  For example, in an isometric RTS game the terrain tiles would be nodes, with 8 connections per node (except for the boundary tiles).  We could have the penalty cost units be related to the time it takes to travel on it.   A swampy area might therefore have very high penalties on the nodes in it, while the grass land nodes surrounding the swamp have smaller penalties.  A computer-controlled tank which wants to get from one side of the swamp to the other may then plot a course around the swamp if it costs less, even though it is physically further (i.e. more tiles must be travelled, but the total travel duration is less) . Of course, it is up to us as the game developer to implement all the code to actually slow the tank down if/when it travels over swamps, A* is only the pathfinder.

We don’t make use of penalties in this game because traveling along ropes, ladders, the ground, and falling is all done at the same speed.  If gravity in our game was a useful non-lethal force (i.e. falling is faster than climbing and just as safe) then we can set node penalties so that A* would return a path where jumping off a platform would be a preferable shortcut to climbing down the ladder. If your game enforces lethal falls from great heights, then you would need additional logic.

A game could have multiple graphs, for use by the various units (ships have different travel behavior to an infantry man for example).  For this tutorial, we only need to create one graph.  In the graph one node will be created for every tile in a 2d grid-like layout.  Each node may have up to 4 connections (up, down, left, right).  Aron’s A* Project includes several different path graph generators, such as GridGraph, ListGraph, and NavMeshGraph.  The GridGraph is a suitable starting point for our game.

The node connections generated by the base GridGraph are always bidirectional (if it creates a connection from from node1 to node2 then it will also create a connection from node2 to node1) which is not necessarily what we want.  Bidirectional paths are fine for ladders, ropes, and the ground because you can go up and down a ladder, and both left-to-right and right-to-left on rope and ground.  The problem arises when you want to include fall lanes. A fall lane is a term I’ve made up for a vertical one-way path that you can only travel on by falling.  Fall lanes exist under the ropes (you can let go of a rope and fall) and off of cliff edges (you can run off a cliff and fall down to a lower platform).  Once on a fall-lane you can’t travel in any direction but down until you’ve hit bottom.  This is a uni-directional connection so the nodes on a fall lane only have one connection each: a connection to the node directly below it.  Other nodes in the level will have between 2 and 4 connections each.  

We could use the base GridGraph and not bother about having any fall lanes, it would just mean that our AI would not plan any paths that involve letting go of ropes or running off platforms.  In this scenario you could still have your AI let go of ropes in a “reactionary” manner i.e. if it’s already on the rope and see a player below it, it could let go.  You would do this will “special case” code in your enemy AI loop.  However, its important to understand this is different from forward planning a route which takes into account the ability to jump off ropes.  In order to that kind of path planning with A*, you need to provide that information in the graph, via the fall lane concept.  

I’ve created a new generator class called “MyGridGraph” which inherits from GridGraph and overrides the Scan() and IsValidConnection() functions.  Our new MyGridGraph class implements the fall lanes idea so let’s add it the scene.

  1. Select the A* GameObject
  2. Click the Graphs -> Add Graph button
    1. Add a new “My Grid Graph
    2. Width: 26 (these dimensions match our level)
    3. Depth: 20
    4. Node Size: 1
    5. Aspect Ratio: 1
    6. Center: 0, 0.3, 0.01 (y is 0.3 so that our nodes are centered in the middle of each tile (which we already previously aligned at 0.3), the z is 0.01 because the integer coordinates used for Aron’s A* node positions have a fixed precision of 0.01 and anything smaller than that would cause troubles.)
    7. Rotation: -90, 0, 0 (rotate x because our grid is for a side-on view rather than the expected top-down view)
    8. Disable Cut Corners checkbox
    9. Connections: Six (we only need 4 connections per node up/down/left/right, but we don’t have that option)
    10. Disable Collision testing checkbox
    11. Disable Height testing checkbox
    12. Level Layers: Ground and NoDraw
    13. Scroll to the bottom and enable the Show Graphs checkbox then hit Scan

If it worked right you should now see the A* graph layout in your game/scene window (enable Gizmos) similar to the following image (click to see a larger version).

2dGamePt5 pathfinding

The red squares represent nodes that the AI can not travel on.  All the bricks should have a red node centered on them.  Much of the black “air” tiles should also have a red square gizmo.  The tiles without the red gizmos are the nodes the AI can travel on.  The blue line represents the connections between nodes. You should therefore see that the AI can travel along the surface of ground tiles, along ropes, and up and down ladders.  You should also see the vertical fall lanes under ropes and over the edge of a platform.  If you are very perceptive you will see that the blue lines come in 2 thicknesses.  A thick line means that the connection is bidirectional (the line gizmo was rendered twice, once each way, making it thicker).  A thin line represents a unidirectional connection.

Making Enemies

Our enemies and the player classes both derive from the Character class which implements the movement code.  In this way we can ensure that the enemies and player move with the same constraints to help prevent giving either an unfair advantage, and just general time-saving and efficiency.  The character class does have a movement speed variable, so we can give the enemies different movement speeds than the player, if desired.

Below we create 2 enemy game objects.  I’ve just reused the player sprite for them, and I’ve given each one a different tint so I can tell them apart (helpful during the development stage). If you create your own different enemy sprite go ahead and use it.

  1. Create an empty GameObject called Enemies to use as an organizational holder.
  2. Clone the player GameObject in the hierarchy and rename it to enemy-1.
  3. Drag the enemy-1 to child it under your Enemies GameObject.
  4. Drag the /AstarPathfindingProject/Core/Seeker.cs script onto your enemy-1.  The script’s defaults are fine.  Go ahead and break enemy-1’s connection to the player prefab when prompted.  The Seeker provides the enemy with the ability to use A* path finding.  It has gizmos which paint green lines representing the found path.
  5. Expand the enemy-1 GameObject to see it’s children.
  6. Delete the “shoot parent” child.
  7. Add an empty GameObject child under enemy-1 named “path target”.  Local Position 0,0,0 Local Scale 1,1,1. This will be a transform that the enemy script will move around to place on the desired target for our path finding AI.  Useful during debugging to see what it is targeting.
  8. Duplicate “path target” and rename to “tile bounds”.  Add a box collider to it, set to Trigger and centered at 0,0,1 and scale 1,1,1.  This is so that when we trap an enemy we can walk smoothly on top of it’s head as if it was ground.
  9. Select the enemy-1 game object and set its Layer to Enemy and apply to children.  Set its Tag to Enemy (leave children untagged).
  10. Expand the enemy-1 Player script component.  Drag the /Scripts/Enemy.cs script onto the Player Script field to replace it with the Enemy script.
  11. The Enemy script has 3 slots that need to be filled: Player and Player Tr (drag the player gameobject to those slots), and Target (drag the path target gameobject to this slot).
  12. Expand the enemy-1 OTAnimatingSprite script.  Set the Material Reference slot to “tint”.  Set the Tint Color to red (or your preference) to visually differentiate it from the player.
  13. Clone enemy-1 as enemy-2 and give it a green tint. (You may have to redo the Red tint on the other enemy due to an OT quirk).
  14. Drag the enemies to suitable spawn points in the scene.
  15. Optional: Select the Enemies root GameObject.  Drag the ChangeBehaviors.cs script onto it.  Set the Enemies array size to 2, and drag enemy-1 and enemy-2 into the slots.  This script will allow you to modify an enemy’s behavior on-the-fly via GUI between a “plain A* to Player” and a “Lode Runner-esque” behavior.  The A* to Player behavior simply follows the shortest path toward the player’s exact position.  The Lode Runner-esque behavior still uses A* but also tries to reimplement some of the reactionary quirks of the original game, especially with regards to ladder use.  See the Enemy.cs file for details.  You can disable/remove the ChangeBehaviors.cs script when you are done testing it out.

Conclusion

While the enemy AI is not a completely faithful recreation of the original, it is hoped that it will provide you with enough of an idea on how you can use and implement A* path finding in your own creations.

If you have any questions about the tutorial, please let us know in the comments below. Your support helps to keep these tutorial coming so be sure to follow us on Twitter and Facebook. This blog post is part of iDevBlogADay, a collection of indie developers writing about their development experiences.

More Tutorials In This Series

Make A 2D Game in Unity3D Using Only Free Tools Part 1
Make A 2D Game in Unity3D Using Only Free Tools Part 2
Make A 2D Game With Unity3D Using Only Free Tools Part 3
Make A 2D Game With Unity3D Using Only Free Tools Part 4
Make A 2D Game With Unity3D Using Only Free Tools: Beginning Enemy AI With A* Pathfinding

And here’s another tutorial series that uses Sprite Manager 2 for the sprite display and animation duties:
Creating 2D Games with Unity3D Part 1
Creating 2D Games with Unity3D Part 2
Creating 2D Games with Unity3D Part 3
Creating 2D Games with Unity3D Part 5

Show Your Support

If you find these tutorials useful, please considering buying one or more of our games and apps for iPhone and iPad. Your support helps to keep the tutorials flowing!

  • Giant Moto: High flying arcade style motocross action!
  • Small Space: Fly a spaceship, eat space creatures, score point!
  • Holeshot Drag Racing: High speed drag racing action!
  • Alien Booth: Transform pictures of your friends into awesome aliens!
  • iSpoof Walken: A hilarious look into the world of Christopher Walken!
  • Gaga Eyes: Transform pictures of your friends to give them huge anime eyes!

About the author

The AI scripts and this tutorial were contributed by Adrian Seeto of Fun Mob Games, creators of Pocket BMX game for iOS, a free-roaming 2D bike tricking game with physics.  You can check them out at FunMobGames.com or on twitter @FunMobGames.