Notifications
Article
Castle Escape
Updated 5 years ago
2.6 K
14
0
2D pixel art platformer
FINAL SUBMISSION
INTRODUCTION
Hello everyone!
My name is Eduard and I am an engineering student from Romania. I started to use Unity in my first year of college (Unity 4 at that time) because I wanted to learn computer programming. Since then I made a few games, prototypes and my diploma project using Unity engine, I even participated in some local contests.
For this challenge I decided to create a 2D pixel art platformer similar to Super Meat Boy using some of the 2D tools that Unity offers. My idea is to create one level in which the player has to avoid the traps in order to get to the finish.
References
For the visual style I want to create something that is simple and looks good at the same time, that's why I choose to go with the pixel art style. This is the first time I make pixel art tiles so I needed some references, at first I found these ones:
But then I found this game called Fairy Song (made by Pixel Boy) on itch.io that visually looks so simple but beautiful, so I think this is a better style for me to begin with:
To keep my work organized I also created a Trello board as you can see bellow:
PROTOTYPE
Before I start making the game I want to make a quick prototype to test "the ground" with the 2D tools and I also have to set up the character controller. So in order to use the 2D Tileset I need to have some tiles, I think these are good enough:
Because I will use the 2D Pixel Perfect Camera script some setting must be made when importing the tileset:
(I also disabled Anti Aliasing in Quality Settings because I don't want any gaps between my tiles.)
Then in the Sprite Editor I have to cut each individual tile and for those that need, to change the collider shape:
Now I can add the sprites to the Tile Palette and start drawing some tiles in the scene:
Drawing individual tiles in the scene is great but I wanted something that can help me do it much faster, I searched a bit and I found that unity has some 2D extras for the 2D Tilemaps, and one of these extras is called Rule Tile, all you have to do here is add some tiles and some rules:
As you can see in the above GIF I have two layers, one for background (BGLayer) and one for collisions (CollisionLayer).
Another useful tool in the Tile Palette is the Tint Brush which can change the color of the tiles, and because my tiles are white I can easily add some colors in the scene:
After 10-15 min I made a quick level that looks like this:
Because I wont have time to make a character controller from scratch (I'm 100% sure I wont have time) I decided to find one on GitHub, and I did :O. It's called 2D Platformer Controller and is made by C.J. Kimberlin (thank you for making this asset free). Is amazing how easy it is to customize the controller so I'll use the mechanics but I will change the character visual style (so that means new animations). After a few hours I managed to make some kind of a character that has some basic animations like idle, run, jump etc. After the prototype is done I will refine the character visual style, but until then this is what I have:
Now that I have a character I can add Cinemachine 2D to follow him in the scene:
And I will also add the Pixel Perfect Camera script to the camera component:
If you are wondering what the Pixel Perfect Camera is doing, you can find a comparison bellow:
After setting everything up is time to test the level:
THE GAME
After finishing the prototype is time to make the game.
Tile Sets
As I said in the beginning I'll keep the visual style nice and simple, so I made some tiles for the collision layer and some for the background layer. It took me a few days to make these tiles, and I couldn't stop making more. Is really fascinating to see how much details can go in a 32x32 pixel size area.
The process of adding the sprites to the Tile Palette is similar to what I've explained above, for this tiles I will create a new palette, because the old one had the prototype tiles.
This is the Tile Palette with all the tiles added:
With Rule Tile is possible to add randomness to the tiles, so if you make different versions of the same tile (as I did) add them to the output, you can see below how nice it works (is possible to add more randomness is you change the Shuffle too):
This is how the rule tile looks with almost all the tiles:
(Quick tip) When you want to delete a larger area hold CTRL and drag the mouse, it will make the eraser bigger:
The Character
The character got a few design changes and I also edited the animations a bit.
The character wasn't too visible because the background color was matching his body color, so I found an outline shader and add it to the project. The shader is made by Ryan Nielson quite some time ago in Unity 5.6 but it worked just fine with my unity version.
The Level
This is the level I managed to make, not that impressive but I think is enough:
I also added a Cinemachine Confiner to the scene, it looks like this:
Lastly I added a Post Processing Layer and a Post Processing Volume:
Audio
Unfortunately I couldn't add any sounds or audio to the game, I wasted too much time trying to make useless things for the game like this tree:
CONCLUSION
I learned a lot of things while making this game, a lot of things that I wanted to learn a long time ago but I didn't because I though that it will take a lot of time. Simple things like how to make pixel art tiles or how to use Cinemachine (this was easier than I thought). Pixel art games have a lot of potential these days and thanks to these 2D tools the creation process gets easier for indie devs, so they can focus more on the artistic side of the game.
If I see that people will like what I did here, I'll probably add this project to my TO DO list for 2019.
Also big thanks to these guys for making great tutorials about pixel art and unity:
- Francis Vace - Tilemaps and Rule Tiles In Unity
- Herska Games - Pixel Art 32x32 Better run cycle
- Brackeys - TILESET in Photoshop (Tutorial)
- Brackeys - PIXEL ART in Photoshop (Tutorial)
- MortMort - TUTORIAL: Setup Photoshop for Pixel Art Basic (for beginners)
- MortMort - 3 PixelArt Techniques/Common Mistakes (Doubles, Jaggies & Outline)
- and the Unity team for adding these awesome tools to the engine
TOOLS&ASSETS
- Cinemachine 2D
- Pixel Perfect Camera
- 2D Tilemaps
- Rule Tile
- 2D Platformer Controller
- FFmpegOut
- Unity Recorder
- Outline Shader
