You can access the full course here: Unity 2D Projects – Toads and Fireflies
Table of contents
Part 1
Setting Up Our Scene:
- Import needed sprites.
- Create our Toad objects.
- Create our level.
Open the Unity editor and create a new Unity project and call it “Toads and Fireflies.”
For this course we are using the latest version of Unity which is currently at version 2019.2.0a11.
Use the 2D template, and disable the Unity Analytics.
Click on the Create Project button:
Use the Default layout during this course so that your Unity editor will look like Austin Gregory’s.
Create a new folder and call it “Sprites” this is where we will keep all of the sprites used in the creation of this game.
We’ll be using the assets below. Drag and drop three sprites right into Unity inside the Sprites folder you just created:
With all three of the sprites selected inside Unity make sure the Texture Type in the Inspector window is set to Sprite (2D and UI).
Select just the Toads sprite and for Sprite Mode make sure this is set to Multiple in the Inspector window:
Then open the Sprite Editor, Apply the Changes, and we need to split this sprite up into a total of three:
Click on the Slice option in the menu, and set the Type to Grid by Cell Count, set the Columns to 3, and then click on the Slice button:
Now click on the first toad in the editor, and name this to “idle_toad.”
Click on the second toad and name this one “jump_toad.”
Click on the third sprite and name this one “tongue.”
Make sure to Apply the changes.
You should now have three sprites that you are able to work with:
Set the screen size to 16:9.
Select the background and drag and drop it into the Scene, then all you need to do is simply drag it out to resize it to fit in the camera space:
Select all of the sprites in the Sprites folder and change the Filter Mode to Point (no filter). Hit the Apply button to apply the changes to the Sprites.
Create a 2D object and rename it to “Toad.”
Set the Sprite to the idle_toad in the Inspector:
You can change the color of this toad to a green color using the color picker:
Move the green toad over to the left side of the screen:
Create a new folder and name this folder “Prefabs.”
Turn the green toad into a Prefab by dragging and dropping it from the Hierarchy into the Prefabs folder:
Create a 2D Object>Sprite, and rename this to “firefly.”
Change the Sprite to the Firefly in the Inspector:
We now need to add a Sorting Layer, so add a new Sorting Layer and name it “Background.”
Add another layer for “Player.”
Add another layer for “Foreground.”
Set the sorting layer for the Firefly to be on the Player sorting layer.
Set the Toad sorting layer to be on the Player sorting layer.
Set the Background sorting layer to be on the Background sorting layer.
Part 2
The Toad
- Create a script for our Toad object.
- Setup a “jump path” for our toads.
- Jumping moves between jump path points.
- Add an attack to strike fireflies.
The first thing we will do in this lesson is setup the jumping points for our toad. Create an empty game object, and we will be using the empty game objects to define points for the toad to follow along its jumping path. The first empty game object will be at position (0, 2, 0).
Rename the empty game object to “Path Point.”
Create another empty game object and rename this object to “Left Pad.” Set this position to (0,0,0.)
Add an empty game object as a child to the Left Pad, and position it at (-4, -3, 0).
Duplicate the Path Point and set Path Point (1) to be at position (-5.5, -2.75, 0).
Duplicate the Left Pad and rename it to “Right Pad.”
Reposition the Right Pad Path Point to be at (4, -2.75, 0).
Reposition the Right Pad Path Point (1) to be at (5.5, -2.75, 0).
We now have the path for the toad setup.
Transcript 1
Hey guys, my name is Austin Gregory. And in this course, I’m gonna teach you how to create a pretty cool little game.
I’m gonna be creating Toads and Fireflies. It’s based on another game with a similar name. There’s gonna be two little frogs. It’s a two-player game, a local two-player game, where you can play with a friend and compete. You’re gonna jump and you’re gonna try and attack these fireflies. And each firefly has a unique speed and a unique point value. They can be different sizes, different colors, all kind of fun things. And the frogs – you can have as many frogs as you would like, as many players as you like. But we’re gonna go with two players.
You’re gonna jump from pad to pad. You’re gonna follow a nice little jump path. Each frog has their own jump path. And while you’re in the air, if you try to jump again, if you use the action button again, you’re going to attack these fireflies. And the level, the competition takes place over a set amount of time, so you’ve got 30 seconds or a minute or two minutes (or however long you want your game to be). And at the end, whenever the time runs out, whoever has the most points wins the game.
It’s going to be pretty simple to do. And we’re gonna learn quite a few fun things, a few fun things that you can take and apply to this game and extend it into something fun, something a bit more. And also things you can take and apply to whatever kind of project you want to work on, because these are gonna be very general topics that we’re going to cover.
So again my name is Austin Gregory. And I will see you in the first lesson of Toads and Fireflies.
Transcript 2
Hey guys, in this first lesson, we are going to set up our level. We’re gonna simply import some sprites, so we need to build our very simple level. We are gonna create our Toad objects, which are not just going to be objects with a sprite renderer on them. Someone can add our Toads sprites to them. And then we are going to set up our level sprite. Just one big sprite as a couple of lily pads that we can jump from and catch those flies in the sky.
So, first thing I want to do is create a new project in Unity Hub, call it Toads and Fireflies. And I want to use the latest version available to me, which is 2019.2Alpha11, and I want to select 2D as my default template and click create project. And then to make sure we’re on the same page, I want to go up to layout and I want to select default, so we all have the exact same layout going into this.
And I want to create a folder for my sprites, I’m gonna call it Sprites. And then what I wanna do is- I wanna go into my Assets folder that is included in the project, and I’m just gonna grab these three sprites: we have our toads sprites, the idle, the jump, and our little tongue is gonna be shooting out and catching these fireflies, and then our background image. So, let’s take these and drag them into our Sprites folder. Now with them all selected, make sure we have it set to 2D and UI sprite. If you have your template set to 2D, this should be the default, so that should be okay.
Then for our toads, we have three sprites in one, so what I want to do is set this sprite mode to be multiple then I want to go to Sprite Editor and apply my changes for the multiple there. And what I want to do, is split this up into my three sprites. So, I know I have three columns here, so the easiest way to do this is to go to slice, type, and I want to do grid by cell count; and I know I have three columns and click slice. There we go, so we have one, two, three. Now to keep this organized, I could name this idle toad, jump toad, and tongue, and apply those changes. Now we should have three sprites that we can work with right here all from one sprite sheet.
Now, I know I’m going to be building my game based on a 16×9 screen. If you have more time and you want to put a bit more work in you can obviously do this where it’s dynamic and resizes and all that fun stuff, but I’m gonna keep mine very simple and just restrict it to now by a 16×9 aspect ratio. And the first thing I want to do with our scene is add a background. Now if I take this and drag it out, this is what we get, and all I simply have to do is just resize this to kind of match, holding down shift. So we get, we lock in the aspect ratio to kind of match our size of the screen here. Zero, zero. And there we go, so there is our game world. Very simple.
Let’s select these, and I want to change the filter mode, these are, this is a pixel art sprite, all of these are. And we’re getting this weird blur from when it’s trying to scale up these sprites. So, what I want to do is set the filter mode to be .nofilter, which when I add any anti-aliasing to our pixels as we scale it up. So, there we go, and now let’s create a 2D object sprite for our Toad. And this is gonna be by default, just our little idle sprite. And we can add color to this, so one of our frogs, or one of our toads, sorry, will obviously, probably be a green color. So, we can just place him in the back where he would be. And then we’d have another toad that we can make a different color for player two. But we will do that in a bit.
Then I’m gonna create a folder for our prefab objects. The objects that we’ve already fabricated that way we can just create new versions of that. So, I know I’m gonna have two frogs, and they’re all going to have the same settings, except for, one’s gonna be player one, one’s gonna be player two, and they’re gonna have two different colors. So, other then that, they’re the same thing. So, I’m just gonna create a prefab from that frog. That way all I’ll have to do is drag it out and then have another frog that is set up the same way. And I can change the color on that frog. So that’s what we’re doing eventually.
And then the next thing I want to do for now is create a firefly. And the sprite for firefly will be our firefly sprite. Here we go, so this is what we look like at the moment.
So if we have these all on the exact same Z, that means they’re going to be fighting to see which one is displayed. So the simple way to fix that is by using sorting layers for our sprites. So, if I want to go to sorting layer, I don’t have any set defaults, I’m gonna add a sorting layer and I’m gonna add a sorting layer for background. So what’s going to be drawing on the background. I’m gonna add a layer for player, so what things are drawn on the player level, so our frog, our fireflies, our tongue, or again, our toad. And we’re gonna have foreground if we’re gonna have something floating in our foreground. Not sure we will though.
And then I just set this to be a player, and set the toad to be player and set the background to be background. Then we have some nice organization so we know easily how to place things in our game world so they are displayed correctly.
And that’s gonna be it for this first lesson guys. In the next lesson, we are going to work on our toad. Which is gonna be the most complex thing we do, because he has to jump, he has to attack, and all these fun things. So, it’s going to take a couple of lessons to get it done, but we are gonna get started on that in the next lesson. My name is Austin, and I will see you there.
Transcript 3
Hey guys, welcome back. In this lesson, we’re going to set up our toad, which means we have to create a new script for our toad object. It’s gonna control everything the toad can do. We’re gonna also have to set up a path.
So there’s a bunch of ways we could do the jump for our toad, because they have to jump from one pad to another. Now, I need to know exactly where my toad’s going, and I need to be able to control it very precisely, because it has to jump from an exact point on one pad to an exact point on another. There’s a bunch of ways we can do this. We could calculate the exact amount of velocity that we have to have to get from one point to another, but that’s going to lose precision over time the more that we do that. Just a couple of points here and there, but it will make a difference.
Also, we could do it with a parabola. We could just calculate the type of- or the parabola that we’ll need to get from one point to the next. And that’s a lot of math that we’ll have to walk through and talk about. That’s just not absolutely necessary to make simple, little game like this.
So what we’re gonna end up doing is just placing a couple of points along the path that the toad has to jump. Then we’re gonna go from one point to the next whenever we jump. If we’re on the left side, we’ll jump and follow to the right. If we’re on the right side, we’ll jump and follow to the left. That should cover what we need to do for such a simple game. And our toad also has to have the ability to strike or to attack, using its tongue, which we’ll set up the method for this for now. But we will not have the tongue action until a couple of lesson for now, because we have to animate it, and we have to set up collisions, and we have to have flies to test it with. Just a bunch of stuff we have to do for that. So over the next couple of lessons, we’re gonna be working on our toad and getting it do all of these things.
The first thing I’m gonna do for my toad is set up those jumping points, so that it can jump from here to here. The way we’ll do this is we’ll have two toads, and the toad that’s on the left side here can jump from this point, up here, try to grab some flies, and fall down right here. We’re not gonna share a point because they’re gonna have to be next to each other while they’re on the pad. The other frog can be standing right here. It’ll jump, do the same thing, but it will land in the back. So they move the same distance. They have the same amount of ability and potential to catch these flies, but they’re at a slightly different position.
What I’ll do first of all is create an empty object, and we’re gonna be using empty objects to define the points for our pad. So all I have to do is take this object. If I just grab this, I can just move it to wherever I want it to be and say, okay, this where it’s gonna jump to. From here, to here, and then down to here. So I can place this at maybe 1.5. Maybe something like two, however high you want your frog to jump. And, again, place it at zero on the Z there. And I’ll call it Path Point.
Then I have to have two points on each of these pads to show where the frogs start and where they can end up. To do that, I’ll create an empty object, and I will call it Left Pad. And, again, I’ll just center this. Inside of left pad, I’ll have a couple of empty objects, and I can place where I want them to be. So I’m thinking this is about -4 and -2.75, or maybe -2.8, maybe -3. I have to see how that looks whenever we set this to be at that point. If we look at our toad, we can see negative -2.75 is right on the pad, so we’ll do that for this Path Point. Then I’ll duplicate that, and I’ll put this one at about -5.5, where that frog is going to be. Then we have those two points there.
Then all I have to do is duplicate the Left Pad, and then move these over. I’ll rename it Right Pad. And move these over to the right, so instead of being negative, zero is right here. We’re off -4 and -5.5, so I wanna go positive four and positive 5.5. Basic math there, so four and then 5.5. And there we go. That’s our path. So we can jump from here, up to there, and then down to this point, and then jump from here, up to there, and down to this point. Just keep going back and forth for both toads.
That’s gonna be it for this short lesson. In the next lesson, we’re gonna start using these path points to control our toad. My name is Austin, and I will see you there.
Interested in continuing? Check out the full Unity 2D Projects – Toads and Fireflies course, which is part of our Unity Game Development Mini-Degree.
