Documentation and User Guide

A browser game made in HTML5

Posted May 25, 2023 by Nguyen Mai Lan Vo

During the past two months, Skate to Home has undergone a significant transformation, progressing from a basic concept to a fully functional and enjoyable game. Numerous changes and improvements have been implemented, thanks to valuable feedback from a wide range of testers. This devlog aims to offer a concise overview of the progress made in developing my game for KIT109: Games Fundamentals and to serve as a reference for the assets currently incorporated into the game.

Documentation

Concept versus Final Version comparison:

Skate to Home draws its inspiration from the relatable scenario of skating home after missing a bus, adding an element of urgency and excitement to the game. It offers an enjoyable experience that requires precision in judgment and movement, demanding players to make accurate decisions and execute precise maneuvers. In line with the art styles of Subway Surfers and Flappy Bird, Skate to Home also embraces a simple and cartoonish visual approach. This consistent art style features vibrant, colorful graphics with a pleasing cartoony aesthetic. The visuals create a lively and engaging atmosphere, enhancing the overall experience of the game. By incorporating these elements, Skate to Home aims to captivate players with its relatable concept, challenging gameplay, and visually appealing art style. It strives to deliver an immersive and enjoyable skateboarding adventure that keeps players hooked and entertained.

Throughout the development of Skate to Home, numerous changes have been made, with the majority focusing on design decisions that came after the initial concept. These alterations and refinements have shaped the game, adding an extra layer of creativity and fine-tuning to make the skateboarding experience even more enjoyable and immersive.

While the concept document for Skate to Home was initially comprehensive and detailed, the final implementation did see a few differences. These changes were made to address certain challenges and improve the overall experience. Here is a list of the differences and their reasons:

Background art: The background art in Skate to Home underwent a significant change as the concept document background does not align with Skate to Home's genre. The initial concept's background, intended to evoke nostalgia, didn't align well with the platformer genre. When implementing Player Movement mechanics, it became clear that a different background (see Picture 1) was needed. Choosing a tile map that matched the genre and complemented the gameplay ensured a cohesive and enjoyable experience for players. The new background art created an immersive environment that enhanced gameplay and focused on the platforming challenges. All five levels in Skate to Home underwent a complete change in background art. The decision to switch backgrounds was made to ensure better alignment with the game's overall theme and genre. By replacing the backgrounds for each level, the game achieved a more cohesive and immersive visual experience. This change allowed players to feel more engaged and connected to the different environments presented throughout the game.

Picture 1: The current background level as in level 1

Obstacle objects: In regard to the obstacle objects, the concept document initially mentioned water puddles and pebbles as the main obstacles. However, during the implementation of the game, it became evident that only water puddles made sense in this particular game. Feedback from the devlog regarding Enemies/Interaction/Puzzles indicated that adding a cactus as an obstacle caused confusion for players in distinguishing between the background and obstacles. This prompted the need for some alterations. To address this issue, I decided to introduce a saw-blade as an obstacle. While I initially added it to level 1, feedback indicated that it made the level somehow challenging to overcome. Consequently, I made the decision to remove it. Although adding a saw-blade may not seem suitable for this type of game at first glance, it effectively helps players differentiate between the background and obstacles. Additionally, in level 3, I incorporated a zombie (see Picture 2) as an obstacle. This decision was made to align with the background theme and create a more engaging and intriguing gaming experience for players.

Picture 2: a cute zombie as an obstacle in level 3

UI/Polish: In terms of UI/Polish, my intention was to maintain a simple and user-friendly interface. However, upon observing the UI/Polish implemented by other students, I noticed that they all incorporated a simple yet colorful background. Recognizing the need for a change in the UI, I decided to modify the font and move away from the default Unity font. Additionally, I aimed to infuse more vibrant colors (see Picture 3) into the UI elements to align with the energetic vibe of Skate to Home. These adjustments were made to enhance the overall visual appeal and create a more enjoyable and engaging user experience.

Picture 3: a new UI menu interface for the user with a cartoonish vibe

Particle effect: During the development process, feedback was received regarding the intensity of the original blood particle effect when the player collided with an obstacle in Skate to Home. Considering the game's "kid-friendly" approach, it was necessary to address this concern. As a result, I made the decision to change the colour of the blood splatter effect. To ensure a more suitable and less intense visual representation, different colours were assigned to the blood splatters based on specific collision scenarios. For instance, when colliding with a saw blade ( see Picture 4) (noted that the collision between the player and the zombie will display the same visual effect as when colliding with the saw blade) or accidentally jumping into the water (see Picture 5), the blood splatters would display different colours. This modification allows for a more appropriate and age-appropriate experience while maintaining the necessary feedback for the player's interactions within the game.

Picture 4: When the player collides with a saw-blade

Picture 5: When the player accidentally jumps into the water

Overall, I'm quite happy with how far I have come in the progress of this game and I realize that Skate to Home has a "kid-friendly" vibe, as the target audience is all ages.

Feedback and observations:

Throughout the semester, I received ongoing feedback as Skate to Home progressed in its development. However, as we neared the end and conducted testing sessions when Skate to Home was almost complete, I received valuable feedback from several classmates. Overall, the feedback I received was very positive, with insightful advice, tips, and recommendations on how to further enhance Skate to Home.

Regarding the visuals, difficulty progression, and overall playability of the game, the feedback was consistent. Testers found the art style to be cohesive, appreciated the challenging difficulty level, and were able to grasp and understand the mechanics. They acknowledged that Skate to Home aimed to provide a highly challenging experience, and this reassured me that I had successfully achieved my intended goals for difficulty and playability. Furthermore, no bugs were reported, and the overall gameplay felt smooth and cohesive, affirming that little needed to be changed in those aspects.

However, feedback regarding the UI and overall polish of the game was positive, but it highlighted that there was room for improvement. While what was already implemented was considered good, it was mentioned that there was a sense of lacking or something missing in those areas. This feedback provided valuable insight into areas where I could focus my attention to further enhance the UI and overall polish of Skate to Home.

Some individuals initially appreciated the simplicity of the UI, but after further consideration, I personally felt that the implemented version appeared somewhat dull. Therefore, I decided to make a change, as shown in Picture 3. This alteration aimed to add more visual interest and appeal to the UI, ensuring that it captivated and engaged players more effectively.

However, there were several pieces of feedback regarding the intense feeling of the blood splatter, which seemed out of place considering the "kid-friendly" vibe of the game. This feedback highlighted the need to adjust the visual and audio elements to align better with the intended audience and the overall theme of the game. And I made the change to reduce the intensiveness of the game, as shown in Picture 4 and Picture 5.

Overall, I'm quite happy with how far I have come in the progress of this game and I realize that Skate to Home has a "kid-friendly" vibe, as the target audience is all ages.

Asset list:

Most of the assets are created by myself, while some will have references to their sources, check it in Credits.

Animations:

Idle:

This animation is taken from a sprite sheet I downloaded from the internet. This animation is played when the character is standing still on the ground, not moving, not jumping, and not colliding with any obstacles.

Jump:

This animation is also taken from a sprite sheet I downloaded from the internet. This animation is played when the character is in the idle state, and if the player holds down the Space bar, the character will jump up and the animation will continue until the player releases the Space bar, at which point it will switch back to the idle state.

Run:

This animation is also taken from a sprite sheet I downloaded from the internet. This animation is played when the character is in the idle state, and if the player holds down the Space bar, the character will jump up and the animation will continue until the player releases the Space bar, at which point it will switch back to the idle state.

Spawn:

This animation simply changes the alpha of the character from 0 to 1 to create a gradual appearance when it dies and comes back to life.

StateController:

In this part, I have created parameters and adjusted them according to the corresponding states, which then triggers the animation to play accordingly.

Enemy

Blood:

Blood is a particle system attached to the player. Whenever the player collides with sharp or gruesome obstacles like zombies, blood will be sprayed. This implies that the player will die as a result.

Water:

Water is something that appears in most levels, except for level 5. When the player falls into the water, it triggers a water splash effect and the character dies instantly.

Saw blades:

Saw blades are a dangerous element that rotates and sometimes moves along a specific path, either vertically from top to bottom or horizontally from left to right. They come in various sizes, ranging from small to large, requiring players to be more careful in order to avoid colliding with them. Touching a saw blade results in immediate death.

Arrows :

Arrows appear only in level 5, and although they remain stationary, they still require you to avoid them skillfully. Just like other obstacles, touching them will result in instant death.

Zombie:

The zombies only appear on the Halloween map, and they move back and forth, attacking if you touch them. When you touch a zombie, it will emit a loud sound, and you will be killed as well.

Acid:

They only appear on level 5, similar to water. Whenever you fall into them, you also die instantly.

Scenes

Menu:

In the menu screen, there will be three main components. Firstly, the "Start Game" button, secondly, the "High Score" button, and finally, the "Settings" button to adjust the sound.

Settings:

In the settings, there will be three sliders to adjust the game's sound, including music, sound, and effects.

HighScore:

This place will contain the player's scores. If you enter your name after completing level 5, it will be saved here and sorted in descending order based on the scores.

Scripts

Most of the script for the game is from the help of Unity document and Youtube

Sound

The sound when selecting an option in the menu when the player presses play.
- The sound effect is played when the player selects an option in the menu by clicking on it
Level Theme
- Music played in the Skate to Home scene in each level from 1 to 5 (source: see Credits)
Sound effect when collides with the saw blade or falls into the water (see Credits)
Sound effect when jumping and landing, it's like doing an Ollie on a skateboard (see Credits)

Tilemaps

It is composed of tiles with different paths and stairs, creating diversity in each map. Additionally, there are decorative items such as trees, bushes, bones, etc., depending on the context of each map. Each level has its own background depicting the sky.
From level 1 to level 4, there are water obstacles to collide with, but on level 5, the entire area below consists of acid.

UI

Start Button
- Loads the Skate to Home scene when pressed.
Settings Button
- Loads the settings scene when pressed.
High Scores Button
- Loads the high scores scene when pressed.
Ending Scene:
- Loads this scene only when the player completes 5 levels

User Guide:

Skate to Home is deceptively challenging. The goal is simple: get home quickly. However, as you progress, the game ramps up the difficulty. With obstacles, tricky jumps, and timing-based challenges, it's not as easy as it seems. You'll need precise controls, quick reflexes, and split-second decision-making to succeed. The game tests your skills and pushes you to improve. Don't be fooled by its simplicity. Skate to Home demands your best to navigate each level and reach home as fast as possible. Can you handle the challenge?

To navigate in Skate to Home, you have the option to use either the arrow keys or the A and D keys. Using these controls will make Alex, the skateboarder, move backwards or forward accordingly. Holding the Space bar allows you to overcome specific obstacles or simply jump whenever you desire.

Working your way through the start may seem easy, as the first level serves as an introduction to the game. However, brace yourself for a rapid increase in difficulty with each subsequent level. But beware! In this game, everything except you poses a threat. The saw blades can suddenly appear exactly where you're about to land, instantly ending your journey. So, be agile and dodge them before they reach you. And if you manage to dodge the saw blades, stay alert for water puddles and other obstacles along the way. You must navigate through them all to reach Home on level 5, where another task awaits you. Get ready for the challenge!

Skate to Home features various screens, and one of them is the menu screen (see Picture 6). Within this screen, you have the opportunity to choose your options for Skate to Home:

From this screen, you can proceed to the new game scene (see Picture 7), where you will be instantly spawned into the introduction level: level 1.

If you select Settings (see Picture 8), it will take you to the options for adjusting background sounds and sound effects. Alternatively, you can return to the main menu by clicking the back arrows located on the top left-hand side.

This also applies to the High Score screen (see Picture 9).

As I progressed through the semester and made significant changes to the background levels, I would like to present how each level looks now, as depicted from Picture 10 to Picture 14.

Upon reaching level 5, there won't be any instructions indicating what item you need to touch like the previous 4 levels, which might confuse you. Trust me, all you need to do is touch the door that appears exactly like at the beginning of level 5, and you will complete the game. You have made it home after 5 challenging trials, and the end screen UI will be displayed (depicted in Picture 15).

Apart from the menu, settings, and playing Skate to Home, there aren't many other functions. However, as a parting tip, here's some advice to improve your movement mechanics:

If you find yourself struggling to make a jump high enough to overcome a specific obstacle, try holding down the Space bar a bit longer. It might just save you some time and help you conquer the challenge!

One more thing to take note of is that when you press ESC, then if you press resume, you can continue where you are, otherwise you have to start all over again !! Be careful !!

Thank you for playing Skate to Home!!! I appreciate your participation in Skate to Home!