Not too soon after completing different types of games tutorials given by Mr. Razif, we're tasked to progress into our final project in which we're given the choices to design and development a new game fully composed as a one-man team.
Game Ideation was the first part of the project where I ran through the SCAMPER process we've learned earlier in the semester. Here, I picked a classic game previously known for its pleasing visuals and game dynamics, Kirby's Dream Land. Through a solid and nostalgic childhood experience with the game, I quickly analysed the gameplay and made research to learn about its popularity. Kirby has everything for OG gamers to love about, counting from its gorgeous and adorable character design, its beautiful visuals, and the extremely versatile gameplay dynamics, which provides each players the empowerment to play according to their own style and likings.
Figure 1.1. Character Reference, Kirby, an adorable character design.
Figure 1.2a. Game ideation (Scamper).
Figure 1.2b. Game ideation (narration).
Once my ideas were confirmed, I head over to the character design process to get my hands on pixel art for the very first time. The following are the initial process I walked through with pixel art:
Figure 1.3. Character sketches.
Figure 1.4. First pixel art attempt.
Figure 1.5A. Pixel art lining tutorial.
Figure 1.5B. Pixel art movement animation tutorial.
A week was spent over the process as I made several attempts to get the right character to fit the overall vibe of the game. I began with a similar character design with my main game reference as seen above (figure 1.1). The process created an outcome that is way too similar to its source of inspiration. It wasn't a big problem until a familiar and yet, a significant experience shook me. It was one of Mr. Vinod's words of advice:
"Don't get carried away with what you see, your design will be too influenced by it." -Mr. Vinod
Without much hesitation, I decided to drop my first creation and it was time to study pixel art further as I attempt to create a character completely different from the adorable little Kirby, perhaps a human figure with magic might suffice the storyline. Another week went on and I drafted out a new character as a blend of many references I collected during the process. To help me out in the assets creation, I used available online assets to do minor modification.
Figure 1.6. Main character reference.
Figure 1.7. Versions of my new pixel art character on Adobe Photoshop.
Figure 1.8. Raven, pixel art protagonist, transferred over to Aseprite for animation.
With a deeper understanding to my own game, I prepared my game proposal presentation to present my progress to Mr. Razif. The feedbacks were positive so I was ready to hop on to the next quest, the assets design and preparation.
Figure 1.10. Game environment visual sketches planning.
Figure 1.11. Visual composition planning.
Game Assets Design & Preparation
I continued to work on the environment design of the game. The game setting will take place in a magical realm where the environment will be designed to look like an alternate world of Earth. There will be grass, trees, skies, but all in an alienated colors (not too far off, so its still recognisable by the players).
Figure 2.1A. Game tiles design process.
Figure 2.1B. Game tiles design process.
Figure 2.1C. Game tiles design process.
After I finish compiling all the tile sets I've drawn and collected, I shifted all my attention to the animation of the main character.
Figure 2.2A. Raven Jump sprite sheet.
Figure 2.2B. Raven run animation.
Figure 2. 2C. Raven attack animation.
Figure 2.2D. Raven hurt animation.
I've recorded my one of my pixel art animation process in the following video:
Figure 2.3A. Thunder Strike spell progress.
Figure 2.3B. Lighting Beam spell progress.
Figure 2.3C. Lighting Beam spell progress.
Given a few days in the week, I moved on to the game obstacles design, which includes the monsters and other damaging elements of the game.
Figure 2.5B. Fire trap pixel art sprite sheet on Aseprite.
Figure 2.6A. Enemy flying eye monster reference.
Figure 2.6B. Enemy Flying Eye Monster pixel art (boss 1).
Figure 2.6C. Enemy Flying Eye monster fire.
Figure 2.7A. Death Knight pixel art on Aseprite.
Figure 2.7B. Abyssal Knight final pixel art (boss 2).
Figure 2.8A. Quick game mockup (Realm level 1).
Figure 2.8B. Quick game mockup (Realm level 2).
Figure 2.9A. Pause button design.
Figure 2.9B. Level up magical runes design.
Figure 2.9C. Game instruction keys design.
Figure 2.10A. Game character asset compilation.
Figure 2.10B. Games level tiles asset compilation.
Figure 2.11. Game Asset Management.
Figure 2.12A. Game interface mockup progress.
Figure 2.12B. Game title design variations.
Figure 2.12C. Game title design mockup.
I made my intention clear for the title design of the game and decided on the final outcome through the variables I created on Adobe Illustrator. A sense of mystery and adventure was the main taste of the game so that was crucial to the design element of the title. I selected the condensed type in combination with display/decorative elements for the main word and followed up with an all caps subtitle in a much smaller scale to balance out the hierarchy of design elements. It was about matching the vibe of the 2 typeface I've chosen (out of availability). The outcome is not a wow type, but considering the time limits, it was made in barely an hour, and it's ready for the go.
Figure 2.13A. Game title design (coloured).
Figure 2.13B. Game title design (black & white).
It was a long way to go, but I was able to create and collect most of the assets I needed for the game. Preset characters were also extremely handy as part of the asset collection as they add more potential to the game and breaks through our time limit.
Game Level Design & System
I drafted my game level design as per planned from the Game Flow I've sketched earlier (see figure 1.9). The digital planning process was done using Miro board as the low-fidelity wireframe of the game platforms. Lots of changes were made through out the mapping process before the final versions were confirmed by a few game enthusiasts.
Figure 3.1. Level 1 - Phase 1-3 wireframe.
Figure 3.2. Level 1 - Phase 4-6 wireframe.
Figure 3.3. Level 2 - Phase 7-8 wireframe.
Figure 3.4. Level 2 - Phase 9-10 wireframe.
Figure 3.5. Narration flow: Prologue.
Figure 3.6. Calculating game levelling and damage system.
Game Development
It was fairly over a week to prepare all the game assets and planning out the game systems, but I knew I had to be ready for the next phase as the time ticks. I proceeded to Unity and set to prepare the sprite sheets from my entire asset collection. It was about getting the visuals ready before moving into the C# scripting.
Figure 4.1. Sprite sheet planning notes.
Figure 4.2A. Slicing environment tile sets sprite sheet on Unity.
Figure 4.2B. Slicing Raven hitting animation sprite sheet on Unity.
Figure 4.3A. Setting up the tile map placement with Unity palettes.
Figure 4.3B. Continuing the tile map process into level 2.
The basic tile map went through several attempts and testings initially. I knew they are the skeletons of the game level platforms, so attention to details such as player movements and jumping velocity must be carefully set for the game to be playable. With basic tiles ready on the go, I tested the game with some minor animations setup on Unity:
As much crucial as usability are in design and products, aesthetics are no exception. With that said, I utilised the Unity palette layers to create more decorative elements to the level platforms, starting from trees to grass to mushrooms, tile textures, colors variations, vines, lights, and bushes. The level design itself was a challenge, but with some time, it was ready to be played with basic controllers.
Figure 4.4. Level tile map decoration.
The next step was to work on the game mechanics on Unity using C#. I worked on the player first to make sure the player controller is prioritised over anything else.
Figure 4.5. Raven attack range.
Testing out player attack cycle on Unity play (attack cool down not implemented yet).
Figure 4.6. Unity screenshot progress on sprite placement and C# scripting.
I have captured a few of my C# scripting below:
Figure 4.7A. Player C# script.
Figure 4.7B. Enemy taking damage C# script.
Figure 4.7C. Items C# script.
Figure 4.7D. Boss door open controller C# script.
Figure 4.7E. Audio C# script.
Figure 4.7F. Enter boss fight audio C# script.
Figure 4.7G. Final boss C# script. Lots of variables were assigned to create an interesting and dynamic boss attacking pattern.
Figure 4.8A. Boss level platforming and animation on Unity.
Figure 4.8B. Full boss 1 (Fly Eye) animator visual scripting patches and attacking patterns.
Figure 4.9. Basic enemy state machine C# script.
With the progress shown, the final outcome was produced over a week on Unity. The first game build (beta v3.4E) and game walkthrough is attached below.
Comments
Post a Comment