Games Development - Final Project: Playable Game

23/4/2025 - 29/5/2024 / Week 10 - Week 15
Cindy Clarissa Leslie / 0367677
Games Development / Bachelor of Design (Hons) in Creative Media
Final Project - Playable Game

LECTURES


INSTRUCTIONS

 

Based on the prototype we already have, we have to progress further and complete the mechanics to make the game playable with all the planned features. In this task, we focused on completing the functions, UI and lastly the puzzle mechanic.



Final Project: Playable Game

Stage and Mechanics

After creating the basic mechanics, the maps are completed and the enemies are inserted. There are 3 enemies in total, each with different codes. Enemy 1 to which only roams, enemy 2 follows the player and miniboss having a high HP.

Next, the HP bar of the player was added in, additionally a tutorial so that new players recognize which keys to use while playing the game. After all the sprites are added in, the sound effects are also placed, including the background music.

Figure 1.1 Added mechanics into the game

This is another prototype of how the game functions, now there are existing obstacles and moving enemies that players need to get rid off.


UI Elements

To create a short and simple narrative of what's going on, where Byte is supposed to save the player's virus infested computer, we decided to create an animation that plays when players first launch the game.

Figure 2.1 Sketching UI screens

Using Adobe Photoshop, I used my basic illustration skills to create 3 screens: starting, main menu, victory. I used the buttons that I have created in the art assets to make the screens interactable.

Figure 2.2 Animating in After Effects

For the animation itself, I didn't traditionally animate frame by frame, however I used keyframes instead in order to be fast and effective. In here, I utilized a lot of the glitchify plugin which fits the vibes of the game. 

Figure 3.1 Main menu UI

Figure 3.2 Victory screen UI

Figure 3.3 Starting animation


Puzzle Mechanics

To finalize our game, we added in the puzzle mechanic at the end where users have to complete in order to achieve victory.


Figure 4.1 Puzzle mechanic

There are 3 different puzzles in total, with 3 having different images. The mechanics are pretty simple, there's an image guide on the left where players basically have to reorder the puzzle pieces the same way.


Figure 5.1 Final video walkthrough

REFLECTION

During the whole 14 weeks of this module, I learned a lot of new skills especially with the new tool I worked a lot with. Though I worked with Photoshop, drawing in a pixel concept is a new field for me, fortunately, I was able to adapt fast and well with the existing tools and create a good amount of animations in time of the deadline. I would also like to give credits to my groupmate, without him and his contributions, I definitely couldn't have worked it out without him. I learned a lot of programming and coding from the module and being grouped in. In the end, I was able to develop my skills newly as a UI game designer and also scripting.

Comments

Post a Comment

Popular posts from this blog

Application Design - Project 3: Lo-Fi App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Project 3: Lo-Fi App Design Prototype LECTURES Week 11: Lecture 11 Usability testing Evaluate a product or service with representative users The aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction. Create scenarios for the participants, observe how they use it and gain insights. (3 different scenarios for 3 different users) Create a low fidelity wireframe first (does not contain graphics nor colours, just the main idea of the whole layout) UI Kit Should include aspects of the design: typography colour palette iconography INSTRUCTIONS Project 3: Lo-Fi App Design Prototype UI Kit As stated in the lecture, the UI kit should be created first to predetermine the design's typography, colour palette and iconography in order to ensure that it stays as consistent as possible. The kit will then be used as a f...
Read more

Application Design - Final Project: High Fidelity App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Final Project: High Fidelity App Design Prototype LECTURES   PROJECT 1: MOBILE APP PROPOSAL PROJECT 2: UI/UX DESIGN DOCUMENT PROJECT 3: LOW FIDELITY APP DESIGN PROTOTYPE INSTRUCTIONS Project 3: Lo-Fi App Design Prototype Design process Figure 1.1 Deciding on the final colour scheme At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a ...
Read more

Experiential Design - Task 1: Trending Experience

Image
22/4/2025 - 29/5/2024 / Week 1 - Week 4 Cindy Clarissa Leslie / 0367677 Experiential Design / Bachelor of Design (Hons) in Creative Media Task 1: Trending Experience LECTURES Week 1: Lecture 1 Figure 1.1 AR playlist of past works by seniors During the first week, the lecturer mostly took time in class for introduction and providing us a playlist for giving us an idea on how getting into the module would look like. Each videos had a unique theme and concepts that have been tackled, whether it was educational, enterntainment, etc, each of the projects have utilized AR design for a certain function. This week overall, provided me ideas and inspired me to start brainstorming on what I should create for my project. Week 2: Lecture 2 User Mapping Empathy Map Tool used to articulate what we know about a particular type of user to: create a shared understanding aid in decision making Consider: what the user would say, think, do and feel Journey Map Mapping a journey or experience (task flow). ...
Read more