The brief required me to make a two-level game with a start screen. I started by working on the first level by creating the environment assets. Firstly, I made my ground texture in Photoshop because I was going to have to make the ground in a tilemap layer, I made this texture using several 32x32 blocks. Because it was a side scroller I was going to have to show a cut out of the ground, which meant I had to draw earth beneath the floor as well as the sidewalk. I then drew street lights and a train station sign. This was because I intended my first level to end with my main character entering an underground station. I then had to start making the backgrounds. For the purposes of time, I decided it would be best to find some city landscape images which I could then transform into the style that would fit my game. Next I needed to find buildings I could add in between the background and the character, which was achieved following the same basic method. Once these individual elements were completed, the task was to get them all into Unity and arrange the scene as needed. This was fairly simple, following our tutorial in class sessions, as the skills required to make the scene were fairly basic. Until I could add my main character, I used a red square as a placeholder.
Before going any further, I needed to make my main character. The first part of the process was to use a character design mood board I had made a couple of weeks earlier to come up with some sketch ideas. For my sketches I tried to come up with a front and side view for each design. I knew that I wanted the character to wear some kind of coat, but I needed to decide on the exact type of coat they should wear. I considered a long coat, a short coat, as well as a coat with and without a hood. Ultimately, I felt that something was missing, as most of my character designs had their hands in their pockets, which on reflection, I felt was rather boring. In contrast, the characters that were in my mood board often didn't have their arms exposed. Since I was doing a more proportionate human design, I could not just remove the arms completely. Instead, I thought it would be more interesting to have the sleeves of the coat loosely hanging, without being able to see the physical arms inside.
Once I had come to this decision, I drew what I considered to be a final design from a few different angles and in several poses. The designs I did not use were changed to become NPCs and used at a later stage.
Now the design had been decided, I went about creating the sprites for it. I started with a standing pose using my sketches as reference. Because my game was in a pixel style, I didn’t need to be overly detailed. However, in order to make my character stand out from the level, I needed to add a brighter outline around him. After the idle pose was completed, I created the sprites walking animation by editing copies of the first pose. After this was done I imported the resulting “spritesheet” into Unity and created my player object. The placeholder was promptly removed.I added a box collider and the movement script we were provided with by the tutor.
I also added a cinema machine camera to follow the player, and added a camera confiner.
This is the level I wanted to make my train scene. However, I put a placeholder image in place until I could construct a train scene of my own, however, I still needed to draw the ground textures myself. I quickly created another set of blocks. I also needed a scrolling background to simulate the movement of the train or to create the effect of the train moving, so I went back into Photoshop and extended one of my existing backgrounds by copying and pasting it in a long repeated pattern. I proceeded to put this background image into Unity and created a looping animation by moving the scene to the side and making it jump forward every time it reached the other side. From the view inside the train this effect looked flawless. I then added some limits to the level by stacking up the blocks I had created on the other side of the train carriage and because these had a tilemap collider attached to them, this would stop the character from moving outside of the area.
I now required a means of moving from the first level to the next. This would come in the form of the train station which had to be made from scratch. At this point I decided that this should be an overground station, rather than an underground station, as the train I wanted to design had a lot more in common with overground trains. I looked for images online for reference and inspiration for the design of the station. I liked the look of this station the most:
The building I created had a similar layout, with glass walls, a metal framework, and an orange sign above the door. I also had to add a script to the station that would allow it to transport me to the next level when the character walked through the door.
Although we were given scripts for swapping levels, they didn’t particularly suit the exit I was making because those scripts relied on the player interacting with an NPC. They also had a lot of sections which didn’t suit the context of my level, such as showing dialogue and stopping sounds. Because of this, I created a new script with only the elements I needed, which was the moving from one level to the other and detecting when a player entered the station.
To make this work properly, I also had to define the area that the player would have to enter in order to finish the level, so for this I used a box collider, set it to “trigger” and placed it at the back of the building so that the player could physically walk through the door.
For the NPCs I made copies of my player sprite-sheet and edited it to match the right design. I then edited them to match the NPC sketches and also changed some colours, mainly coats, and gave every NPC an individual colour i.e. NPC1 had a blue coat, NPC2 had a green coat and NPC3 had a red coat. At this point, I only intended to edit the idle sprites as I was not sure whether I could move the NPCs around. I just went on to place the sprites in the scenes.
For the base image, I used the same background as the first level, because I was pleased with my result and wanted to show it off!
To make the logo text, I first needed to decide what the title would be. I considered referencing night or travelling or a journey. After brainstorming with my family, I decided on the title “Night Owl”. Now I needed to find custom fonts to use for the logo and the buttons. I looked for some 8-bit style fonts on a website called “dafonts” and found a couple of good ones that I could use. To import these into Unity, I had to use a tab on Unity called “font asset creator”. I then input the fonts’ source files and clicked the button “generate font atlas” to add them to Unity’s fontlist.
The font I used for the main title, named ‘8- bit Arcade’ came in two parts; one just had solid text and the other one had a text shadow. I overlaid these two fonts on top of each other, changed their colours and added some nice looking gradients. Below the title, I then added two buttons, one to start the game and one to quit. I used a different font for these buttons called “Pixellari” as they included lowercase letters, whereas the first font did not. To give the buttons a nice texture, I went into Photoshop and made some quick button sprites, changing the colours for each button.
Over the following week, I dedicated time working on my train design for the second level based on the modern ThamesLink trains. I chose this train design because I liked the general arrangement including the seating. Aside from the reference images, I did everything myself from scratch, including the shading. This was a long task, taking almost a week to complete but I was at the end quite proud of the result, considering I had not undertaken any pixel art before. As soon as I was finished, I replaced the previous image with this new artwork.
I had then to make an exit for this level. I also wanted to add a couple of other features. The main function I wanted to set up was two timers. The first would count down until the train reached the stop, and when that timer finished, I wanted a second timer to replace it and give you a few seconds to get off the stop.
This proved to be one of the most difficult processes in the project, luckily we had made a timer in class so I wasn’t completely lost. However, there were still a lot of things that were unclear to me. After trying to figure this out for myself, with little success, I brought up the problem with my tutor, who gave me a 1:1 session and guided me through the problems I was experiencing.
From this point I was more confident and had a clearer understanding of what to do. At the end of the session, we started creating a script and he showed me how to make it work. I had to change the values I had added for the scene and to link certain elements to the script.
To make the exit for my level I used a similar method to the train station, which was to add a box collider to the areas (with “isTrigger” checked) I wanted the player to leave from. In this case, the exits would be the two sets of double doors I had added on the inside of the train. For both, I added the same script as the train station to move from the last level to the start screen again.
It was important to ensure that these exits would only activate when the timer for the train’s arrival had run out. To do this, all I needed was a couple of extra lines of code to be added to the first timer script, which wasn’t too difficult a task.
The last major thing I wanted to add was an animation of the train slowing down before reaching the stop. My idea originally was that the animation would react to the running down of the timer, and come to a stop, then start again when the stop was missed. I tried all sorts of methods to do this, some were pretty complicated. These included adding an animation controller to the background image and that would transition between moving, slowing down and starting up again. This issue was eventually resolved using a very simple solution.
Comments
Post a Comment