Color Splash Documentation

First Few Steps

When we were told that we are required to make a game as one of our projects at Binus University, my mind just went flying to come up with anything that might be taken as the inspiration and foundation for the project. I decided to team up with Jevon to tackle this project together. As the first planning phase began, I came up with the concept of teaching colors or trying to come up with a game that has a heavy influence of colors in it. So I came up with a game that incorporates color and color mixing as part of the combat. After telling this idea to Jevon, he expanded the idea and created a concept where the game would draw heavy influences from pokemon and slay the spire. After a bit of thinking and discussing, we ended up deciding that there will be two gameplay styles. The exploring,or as we called the overworld, is inspired by the classic pokemon games and enemy movement similar to games such as earthbound. And also, the Battle phase, or as we called the engaged mode that draws inspiration from games like slay the spire. We agreed that there will be at least two levels and maybe even a third level, with each level going to have its own distinct themes.

Splitting the work

We decided to split the levels for each person. So I worked on the first level,which is the grass theme overworld,and then Jevon worked for the desert theme overworld. We decided to use our own assets,at least for the visuals,for the time being. The rest of the job deciding came up on its own outside of the initial planning on who is going to do what.

My Contribution and Difficulties

The first thing I did was watch many general tutorials regarding the Construct 2 Game Engine. Even though most of the tutorials are quite boring and sometimes not thorough on the concept, I managed to get a grasp on how the engine will operate. So for the next thing that I do, I created a tilemap for my grass theme level. After countless hours of looking at hundreds of reference images, I finally created the first version of the tilemap using the software marmoset hexel.

The next thing that I did was planning on the level design of the level. At first, I thought this will be the easy part of the work, but it turned out to be the hardest part and took the most time to get done. Trying to create a level that looks nice and also not confusing in terms of gameplay is not an easy feat to accomplish. Figuring out the path that the player has to take while also still keeping the level to make sense is not as easy as I thought. I was stuck on how to make the level open enough but still make it a linear level. Finally, I decided to create NPCs that will give the player quests to complete in order to progress to the next area of the level so that the player will not just wander aimlessly and get lost in the level. By making the NPC it serves as a barrier and also serves as the pointer on which the player is now currently located. The hard part on the NPC and quests is adding the dialogue system for the player and the NPC. There are no tutorials that explain the concept of showing a dialogue and ending the dialogue by pressing the same button. Every tutorial that I came across makes it that the player shows the dialogue by pressing ‘E’ and closing it by pressing ‘ESC.’ I don’t want that to be the game dialogue system. So through trial and error, I was finally able to create the system to show the dialogue and ending it by the press of a single button. It was hard, but when I finally was able to make it work, I felt a rush of satisfaction. The next problem is that the game was not able to track back to where it was after the player entered the engaged mode. Thankfully it’s not a hard fix. By just adding a built-in save and load system from the game engine, it was easy to be fixed.

For a while, I left the continuation to work for the overworld, I focused on making the UI so that the game is much more presentable for a presentation that is required by the lecturer. So I decided to make a pause menu and also tidying up the code for the volume slider that is created by Jevon. For creating the pause menu, thankfully, I already have the reference from the dialogue system that I have made for the game. So I was able to make the pause menu in quite a short time. And for the volume slider, it’s just changing a few numbers and adding a few more lines of code.

As the deadline is closing, I finished my grass level by adding the last area and NPC quests and also an object that would transition the player to the next level. It was just copying the previous dialogue code and just changing the variable to fit with the new NPC. And as for the transition, I just create a sprite of a door and the animation of the door opening. So that when the player interacts with it,the door will open,and the player would just be magically transported to the next level.

Final Thoughts

In hindsight, we kind of bit more than what we could chew. We were planning to create three levels, but in the end, only two levels were made. Doing this project made me realise that a game dev’s life is more complicated than I thought. Seeing it now as a professional project, I would be ashamed to think about it. But, looking at as an amateur project, I was quite happy with how it turned out.

Color Splash Overview

As one of the projects created for Binus University’s course, Color Splash is a child-friendly game created by both me, Fadhlan Muhammad Razan and Jevon Danaristo.

Showcase

Image showcase of our game Color Splash:

The player in the grass overworld
Enemies and items scattered in the overworld
Battle UI

Gameplay

Overworld:

The overworld is where the player starts the game, the player can move and interact with NPC that are in the overworld. Overworld also got item pick-ups to unlock certain areas and slimes that will always try to get close to the player when they are in sight with the player. When the slime is in contact with the player, the battle mode began.

Battle:

Color Splash is a game where players need to recognize the relation between color based on the game logic. For instance, in the game, blue will beat red, red will beat yellow, and so on. When the player drags the right color to the opponent’s color, the player’s strength will be increased, indicated by the strength sign. The strength sign indicates how much damage the player will inflict on the enemy every time the round ends.

Player Controls

Overworld:

A – Move left

S – Move down

W – Move up

D – Move right

Esc – Pause

Battle mode:

LMB – To interact with buttons

LMB and mouse drag – To drag colors

Team Contribution

Fadhlan contributes on making the first overworld tilemap, character sprite, dialogue mechanic, pause menu, NPC, player model, player animation, and player movement.

Jevon contribute on making the second overworld tilemap, slime sprite, slime movement and detection, battle layout, battle mechanic, and menu layout

Original Assets

Every sprites and tilemap on Color Splash is made by our team, character model, enemy model, npc model, animations, and user interface are either made by Fadhlan or Jevon.

Taken Assets

Background Musics:

Jump and run

The adventure begins

Victory!

Overworld Chiptune Select

Moving Right Along

Sound Effects:

Water Pour On Fire

8 Bit Video Game Explosion Sound Effects SFX

Electric Sound Effects Compilation

Guide made by :

Fadhlan Muhammad Razan (2440047463)

Jevon Danaristo (2440043591)

Color Splash Project Proposal

Comp6341 – Multimedia and Human-Computer Interaction

Theme: Creating an educational game for a kindergartener

Color Splash

A game project that me and Jevon are currently creating for one of the Multimedia and Human Computer Interaction projects. It is designed to teach kindergarteners about colors in the form of an interactive and fun video game. It will teach about the application of colors in art and the real world and the concept of combining and mixing colors to create new colors with existing colors. In addition to that, this game will also teach kindergarteners always to be attentive and always exploring.

Gameplay

The gameplay for color splash is mainly divided into two parts: the exploring state and the engaged state.

Exploring

When exploring, the player can explore the world (levels) to find the keys needed to progress to a different world. It could be in the form of anything. So, try exploring to find secrets that might be hidden across the world!

Engaged

While exploring, players may occasionally come in contact with the game’s enemies. If a player comes in contact with one of those enemies, the player would be in an engaged state and would need to use colors to defeat the enemies according to the enemy types.