ReimuDodge Tutorial Part 2
Alright, now it's time to actualy make our microgame. We'll start by adding some objects to the scene we just made. Then, we'll make them visible by adding graphics.
A scene can be thought of as a hierarchy of GameObjects which contain all of the logic and components that will make the game run. If you're familiar with object-oriented programming, this is a similar concept, but plays out more like setting up a stage or diorama than just writing code (the code comes later). A GameObject can be visible, invisible, moving, still, or can even be disabled entirely when not currently needed. What they do depends entirely on what you add to them.
In the scene hierarchy window, create a new GameObject with Right Click > Create Empty. This will be our player object. Give it a descriptive name so we don't get confused about its purpose later; "Player" should work fine.
It's invisible right now, because it doesn't have any visible components attached to it. However, the object should have been created somewhere roughly in the center of the scene.
Objects in a scene all have a transform, which defines the object's position, rotation and scale in the 3D or, in this case, 2D world. The transform is visible at the top of the inspector window when selecting a scene object.
Before we can add art assets, they need to be imported by Unity.
Make a new folder inside ReimuDodge called "Sprites". Now, find the ZIP file you downloaded earlier. Extract the contents and find the sprites folder containing two .png images.
We can import these into our project by simply dragging them into our new ReimuDodge Sprites folder whilst the project window is open. Alternatively, you can copy files into the correct folder using conventional means. It makes no difference.
We can very quickly create new scene objects from sprites. Drag the ReimuDodge_Bullet sprite directly into the scene window or hierarchy window of your scene.
This has created a new object in our scene with a SpriteRenderer component already attached. In the inspector for the bullet object, you'll see this component with its Sprite property set to render the bullet sprite we just imported.
Rename this object to something a bit shorter, such as "Bullet".
TIP: To make the bullet sprite always shows up in front of other sprites (like the player sprite) set the "Order in layer" number to a higher value.
Next, we will add the graphics for Reimu, our Player object. This section will cover sprite slicing and Unity's animation system, referred to as "Mecanim". (We'll be writing code soon, I promise)
For the bullet object, we just created a basic object with a SpriteRenderer component attached. Since the Player object is going to have a bit more going on, it helps to delegate some of the functionality of an object into child-objects.
If we right-click the Player object in the hierarchy window and click Create Empty, it will make a new object which is a child of the Player. Child objects inherit transform information from their parent, so they will stay in the same position relative to their parent at all times. The position/scale/rotation of the child can be changed, but will do so relative to the parent.
Apart from that, there's not a lot of functional difference between a parent and child objects. The main uses for them are 1. creating character rigs (especially for more complicated rigs than in this tutorial) and 2. simply keeping your scene tidy and understandable.
We'll use this child object to store all of the animation components for the player. The name doesn't really matter, but we'll call it "Rig".
The other image we imported is composed of two separate sprites. We're going to slice these up to make an animation from them.
Select the ReimuDodge_Reimu image in the project window. In the inspector window you should now see all of the meta information about this file.
Change the Sprite Mode of the file to Multiple to tell Unity that this image contains more than one sprite:
Make sure to hit Apply in the bottom right corner to save your changes.
After that, click on Sprite Editor to bring up the sprite editor window.
Unity offers a few different ways to automatically slice up sprite sheets. For this sheet, we'll use Grid By Cell Count since this image is exactly two Reimu's in width. Select that option from the menu and then change the C, for column, value to 2 and hit Slice.
Now hit the apply button and, in the project window, select the drop down arrow next to the ReimuDodge_Reimu image. You should see two separate sprites within the image:
Select both Reimu sprites with CTR or SHIFT click and drag them onto the Rig child-object object in the scene's hierarchy window. This is a shortcut for creating an animation in Unity.
You should be prompted to save the animation somewhere on your file system. Make a new folder inside ReimuDodge called Animations and save the .anim file as "ReimuDodgeFloat", or similar.
Doing this will have created two new files in the new Animations folder. The first, ReimuDodgeFloat.anim, contains animation information. The other file is the AnimationController which is attached to the scene object's new Animator component:
Go ahead and rename this file in the project window to ReimuDodgeRig. Doing so shouldn't affect the Rig component in the scene.
It's useful to prefix files with the name of the microgame it belongs to since Unity doesn't do a very good job of distinguishing files in one microgame folder from another.
Notice how the Rig object also has a SpriteRenderer. This is used by the animator to render animation frames in exactly the same way that the bullet renders its single sprite.
If you like, you can set the default sprite for this component to your ReimuDodge_Reimu_0 sprite by dragging it from the project window into the Sprite property of the SpriteRenderer component. This wont make a difference to the animation in-game but it will make the Player object visible for us in the editor.
Hitting play now should show you the animation in action. It's a little fast! So next we'll slow it down by modifying the controller.
Open the animator window in Unity from the Window menu or by double clicking ReimuDodgeRig.
Windows in Unity can be dragged, separated and docked wherever you like. If you find the default arrangement clunky, go ahead and change it.
In the animator window you can see information about the currently selected animation controller.
Here, you'll be able to edit transitions and create animation layers. You can see, for instance, that this controller will immediately transition to the ReimuDodgeFloat animation.
Select the ReimuDodgeFloat animation and then take a look at the inspector window to view its properties. Mess with the Speed value until you are happy with the speed of the animation.
It's worth mentioning another useful tool, the animation window (not to be confused with the animator window), which allows you to fine tune the visuals of your animation or build new animations from scratch. Open this with Window > Animation.
Selecting the Rig object while this window is open will let you look at the insides of animation and what it is doing, frame by frame.
For instance, this animator has a single property which modifies the Sprite value of the Rig object's SpriteRenderer component. There are two key frames visible in the timeline, each setting a different sprite value.
You can also use this window to preview an animation in the scene view without needing to start the game by pressing the play button.
There's no need to modify anything here but feel free to mess around and get a feel for how it works.
We've done enough now that we can make another commit.
These are the files that should have changed:
Animation in Unity goes much deeper and more extensive than we've shown here. It's also used to move objects in particular patterns or create character animations. If in the future your game will use extensive animations (or if this just piques your interest in general), I'd recommend giving these tutorials a watch:
Animation 101 (Intro to animation)
Animation 102 (Animating 2D characters)
But for now, let's press on!