DONALD KOUL
GAME DESIGNER
OVERVIEW
Chain Reaction is a 2D competitive game that requires two players. The primary objective is to take over the board or eliminate the opponents by placing atom on the tiles of the grid.
Players place atoms in turns on different tiles of the grid. There are three types of tiles: normal tiles, corner tiles and border tiles with capacities of 3,2 and 1 respectively. Once a tile reaches its capacity, the atoms explode and occupy the neighboring tiles. Chain reactions occur when the adjacent tiles are full thus helping the player take over the board and eliminate their opponent.
NOTE: This game is a replication of Chain Reaction game created by Buddy-Matt Entertainment and published by App Holdings on the Google Play store.
EVOLUTION OF THE PROJECT
INITIAL LUA PROJECT
GAMEPLAY READY PROTOTYPE (PoCG)
FINAL VERSION
CHAIN REACTION
ENGINE: Unreal Engine 4.16
GOAL OF THE PROJECT: Gameplay scripting
RESPONSIBILITIES: Scripter, Designer, Artist, UI/UX design
DEVELOPMENT TIME: 1 Month
3DS MAX
PROJECT HIGHLIGHTS
SCRIPTING
-
Scripted the entire game from scratch in the Corona engine using Lua and the logic was ported to Unreal Engine.
-
The primary challenge was to get the Chain Reactions to work so that players visually see the atoms explode and take over the board and wipe out their opponents.
RAPID PROTOTYPING
​
-
I prototyped the game, and a gameplay ready version was available in just two weeks of development.
-
Initially, this project was programmed in Corona SDK using Lua, but the game crashed several times due to limitations of the Engine. Corona SDK could not handle multiple physics collisions and the game used to crash making it unplayable.
-
I decided to switch engines and rapidly prototyped the game in Unreal Engine. I had already figured out the logic behind the game so with my experience in Unreal Blueprints I delivered a prototype in 12 development hours.
CUSTOM ART ASSETS
-
All the 2D and 3D assets in the game are custom-made.
-
I used 3DS Max for the static meshes.
-
PhotoShop for the textures and UI elements.
-
Scripting the "Normal Tile / Core tile" laid the foundation for the entire game. I could script the other border tiles and corner tiles just by turning off specific properties of the Core tile.
-
This way of scripting helped me design different systems that can be used by other designers to come up with a variety of levels/boards.
SYSTEMS DESIGN
CREATIVE PROBLEM SOLVING
-
Different aspects of the game are scripted to provide an illusion. A small example is the UI; it is nothing but a couple of Actor with the "EventOnBeginTouch" node on them.
-
I had to adopt an alternative way as the Unreal UI Widgets were tedious to use and were messing up the aspect ratios on different devices.
FLOWCHART
CODE (Lua)
The following flowchart is the underlying logic followed by every tile available on the grid.
The logic varies based on the type of tile, but this flowchart gives a general idea.
This the code for the game on Corona SDK scripted using Lua. The game functions as intended (logically). But this engine has limitations with the number of collisions, so I had to shift to Unreal Engine. However, the logic remains the same and this project served as a strong foundation.
SCRIPTING THE CORE TILE OF CHAIN REACTION
DISCLAIMER: I captured the high-res screenshots of blueprints by a third party plugin named "ODIN." The plugin was used only to take screenshots.
THE CORE TILE
The Core tile the foundation of this game. These are tiles that are not on the borders or corners. In the game, these tiles have a capacity of 3 and explode in all four directions on the addition of a fourth atom.
I took advantage of this system I created and duplicated this actor, turned off some functions, set the capacities and created the border tiles and the corner tiles. This way, I realized that I had created systems and these can be used to create different layouts. But in this section, I will focus only on how I prototyped the Core Tile.
NOTE: I have renamed the blue atoms as Green Atoms in the picture as I initially started with a combination of red and green atoms.
The Core tile is a set of hidden static meshes and spawns points and a trigger. All of these components are placed in the same position and hidden at the beginning of the game. The main functionality of this tile is in the grey box, the trigger box, and the arrow components. The circle, red and blue atoms exist only for faking everything. I manipulated the visibility of the atoms, and they serve just for the conveyance of the tiles capacity.
I created a new actor and added the components listed below and turned off the visibility of all the components EXCEPT for the grid tile.
List of Components in the actor :
-
Six static meshes of the atoms.
-
A basic plane mesh (the grey box) for touch functionality.
-
A basic plane mesh (the blue circle) with texture for the grid tile.
-
1 Trigger box to detect exploding atoms.
-
4 Arrow Components for spawning exploding atoms.
-
A Rotating Movement Component for the rotating effect.
STEP 1 : HIDING EVERYTHING
SETTING UP THE SYSTEM
-
IsFull is a boolean that checks if the tile has reached its maximum capacity, in this case, it's 4.
-
Capacity is an integer and keeps incrementing each time the tile gets tapped on or each time it encounters an exploding atom.
-
HasRed is a Boolean which is set to true if the tile has red atoms in it or is taken over by an exploding red atom.
-
HasBlue is a Boolean which is set to true if the tile has Blue atoms in it or is taken over by an exploding blue atom.
-
Number of Red Atoms is an integer that stores the number of red atoms present in the tile.
-
Number of Blue Atoms is an integer that stores the number of Blue atoms present in the tile.
The last two integers are used to set up the corner tiles and border tiles.
STEP 2 : SETTING UP THE VARIABLES
STEP 3 : SETTNG UP SPAWN POINTS FOR THE EXPLODING ATOMS
-
Name the 4 arrow components as "ExplodingAtom1", "ExplodingAtom2", "ExplodingAtom3" and "ExplodingAtom4."
-
I created four functions to set the arrow components as the spawn points. These functions get called when an explosion event is triggered. I named these functions as "SpawnPointForExlodingAtom1"...."SpawnPointForExlodingAtom4".
-
Get the world transform of the spawn point and set it as a return value/output of the function. This output returns the position of the spawn point in the world.
-
To do that, click on the return note and click on the add button on outputs. Add an Output for variable type "Transform" and name it as "Spawnpoint."
-
When a game begins, we want the tile to be empty. So, I created a custom event and when runs once at the beginning of the game. The reason I set this up as an event is so that I cant reuse the event again in other functions and events.
-
This event is used mainly initializes all the variables so that the capacity is zero, the Number of red atoms and blue atoms are set to 0, and the IsEmpty flag is set to true. This event sets the "Empty State" of the tile.
STEP 4 : SETTING UP THE EMPTY TILE
-
I approached this problem by setting up events. I used events for their reusability. They are easy to use and help to maintain an organized structure in the blueprint editor.
-
I created an event for every tap on the actor.
-
The first tap turns on the visibility of the red/green atom (depending on the players turn, where in this case, all the odd numbered turns are Blue and even numbered turns are Red).
-
The blueprints in the following gallery showcase the logic behind every event.
STEP 5 : CREATING THE EVENTS
​
-
The meshes in the "Core tile" actor are static. Only their visibility changes and their positions are always the same.
-
To fake the exploding atoms, I created eight new actors - 4 for red and 4 for Blue. I used 4 actors for each color to explode in the four cardinal directions.
-
The pictures shown below are only for one of the actors that explode/moves a blue atom in the Positive X direction. The remaining actors follow the same logic and are set up with changes to the direction of movement.
-
These exploding atoms trigger events when they pass through the trigger box set up in the core tile.
STEP 6 : SETTING UP THE EXPLODING ATOMS.
​
-
This event is set up to increase the capacity or change the flag based on the incoming exploding atoms.
-
There are three different cases we need to consider based on the capacity of the tile.
-
The blueprint below showcases the what happens when an exploding atom actor overlaps the trigger box set up in the core tile actor.
STEP 8: ENCOUNTERING EXPLODING ATOMS
STEP 7: SETTTING UP THE EXPLOSION EVENT
-
When an atom explodes, I set up two major events to trigger. First, I set the tile as empty and turned off the HasRed and HasGreen flags. Second, I turned off the visibility of the atoms and spawned the exploding atoms in the four cardinal directions
-
Again, I set up the explosion as an event and created two separate events for the red atom explosion and the blue atom explosion.
-
The pictures below show how to set up the red atom explosion. The blue atom explosion follows the same logic.
UNREAL PROJECT
The section above is only a small aspect of setting up the game. Due to constraints, I cannot add all the details of the other elements of the game. Hence I'm providing the entire project. Feel free to get in touch with me for questions or if you have suggestions to improve the implementation and scripting.