Week 5 - 2D Games - Working with sprites, animations and tilesets

This week of our GMD session finished with workshop 3 assignment in which we are supposed to create a 2D game using all of the knowledge that we have gained from our previous projects, plus on top of that we were introduced to topics such as sprites(pixel art), different kind of animations used in 2D environment, 2D physics, how to handle user's input etc.

The main idea was to create a local multiplayer game, consisting of 2 characters, who co-operate with each other to shoot down enemies standing in their way as they are trying to reach the end of arcade-based level jumping through different obstacles.

We have decided that instead of creating our own sprites, because none of the group memebers have experience with pixel art and all of the concepts in regards to this topic, we are going to take the advantage of having vast amount of sprites atlases(collections of sprites) available online, ready to be downloaded for free. The main website from which we have decided to download these was "The Spriters Resource" (https://www.spriters-resource.com/), where we picked the ones, that were used in the game called "Jazz JackRabbit 2" created by Arjan Brussee and Cliff Bleszinski, which was developed in 1998 by Orange Games.

After we have finally gathered all of the necessary material needed to create our game, we had to find out, how to import it into Unity so we start crating the basics for our game such as characters and animations associated with them, level environment, obstacles... . Except the official tutorials provided by Unity, we have used the following links to achieve the above mentioned targets

    - https://www.youtube.com/watch?v=6P1ivCvofuk
    - https://www.youtube.com/watch?v=PuXUCX21jJU
    - https://www.youtube.com/watch?v=ryISV_nH8qw

Firstly, before we were able to use the Sprite Editor within Unity, we had to prepare a picture in correct format, which included cropping the original sprite atlas only to the selected sprites that we were interested in and removing the background colour, essentially turning it into PNG image with no background.

An example of such picture later imported into Sprite Editor

The picture above illustrates the animation of the main character named Jazz being in idle position as a collection of 27 individual sprites.

After this picture is imported into correspondent Assets sub-folder, it is processed by Unity's Sprite Editor, which uses an algorithm which distinguishes and splits the entire collection into individual sprites ordered numerically, which we will work with later on.

 Sprite Editor

The picture above provides more in depth view on Sprite Editor, which has split the collection, offering an additional options such as pixel offset of the sprite border or marking the sprite boundaries manually in case that the already mentioned algorithm does not work as expected. After we are done, we hit Apply button in upper right corner which results into saving our picture but this time, Unity being aware that it is an atlas consisting of different sprites inside. The result of such operation can be seen at the picture provided below.

Secondly, now we are prepared to create animations from our sprite collections. A process of creating a simple animation in Unity is pretty straightforward, as the only thing we have to do is to create an animation on our character GameObject, select the appropriate sprites and drag them over to the animation window. Later, we can fiddle with setting such as used frames per second if necessary. The gif below shows a final animation of Jazz being in idle position, created from the previous collection of sprites described above.

Finally, after we have imported sprites and created all the associated animations with them, it is time to create a level environment by using Unity's utility called "Tile Pallete". Tile Pallete is a simple tool into which we imported different sprite assets and in microsoft paint-like way created our level.

At the beggining, we started creating the level background by downloading a corresponding Tile Set(a collection of sprites used for background creation) and repeated the process described above for importing assets with only difference, that this time we cropped out the individual background elements and imported them as single sprites instead of a collection. The picture below shows how the Tile Pallete(right) was used to create a first layer(Layer 0) of our game.

The level creation may require to pile different sprites from a tileset on each other to build different layers. The reason for that is to easily distinguish between sprites which are supposed to be interacted with, such as hills, obstacles or jumping platforms and sprites that have no effect on the player, e.g. knights standing as a background decoration in our case.

The picture above describes how the foreground(Layer No.1) was created, which is in our case a walking path for the main character, basically an object that he is supposed to interact with, by using a simple sprite displayed in Tile Pallete on the right. As you have noticed, because this walking path is put on top of the background, it is not necessary for us to see the background wall. The walking path had to be created in a separate layer as it contains a crucial component for our game, which is a collider encapsulated around it that cannot involve any background components, therefore it is bordered by a thin green line indicating it.

The picture below represents the final version of our level design with both of the layers being enabled at the same time.