Dev Diaries: KaramelLand


Back in May this year, I entered my UDK game, KaramelLand in IndieCade, it’s an International Festival of Independent Game. And it went through *Yay* and the finalist will be contacted by August 30th, so bsmellah =D

In this post I wanna talk more about the design iterations the map went through, so I’ve made the following collage to showcase just that.



( 1 ) [first paper prototype, far left] I initially designed a single platform for Death Match map, I imagined it to be on a mountain top, with the rivers in blue swirls and black squiggly line as rock walls part, all to work as separators between the pods where players spawn. The pods were 2-story and they had bridges to connected them all on the roofs. The colored dots represent health, and ammo packs and spawn points. The mountain top would have 3 levels in height difference. The pods in the lowest level of the mountain top, and the orange platform is central and on the highest level. An exposed vantage point. I pictured the aesthetics to be foggy, and nature focused.

[second paper prototype, second to the left] I’ve redesigned the map to be a Team Death Match map, I thought It was more suitable for the original idea, and I also wanted to add jumps and gravity mechanics. I was messing around with the physics in UDK with my professor and we had jumps. I loved the feeling of the jumps so I integrated them in the game. Two mountain tops connected via underground tunnels. And a central exposed platform, that was placed higher than the mountain ground level. Each island has 3 pods for each team, 2 holes for jumps and gravity pull holes. Gravitating holes *I still can’t think of a better name lol, any suggestions?* to pull the players down to the underground tunnels/room. Jump holes to propel the players to the central platforms, and that was the only way to get to it. Mid-air kills were fun when testing this. For this one, I pictured it in a remote planet, deserted by some civilization, that can be seen in the underground tunnels, and the player pods are of the robotic aliens that landed on that planet. Very red/orange for the world with blue and grey for the objects. The underground tunnels were to be observatory tunnels, you can see the outside world.

( 2 ) I was happy with the paper prototype, so I built it in the game engine. After a few testing rounds, I realized I’ve built a huge map in comparison to the UDK default robots characters.

( 3 ) I’ve cut down a lot of excess fat from the map, shrunk it down. At this point, I was inspired to create a totally different world theme from the I originally planned and researched for. It started with when I dragged the underground room box up in the sky to clean up, and I tested the map for something, then I noticed the box in the sky floating, I thought Jack-in-the-Box! I can do a bizarre toys/circus/candy world, and it was like a flood gate opened with ideas. I was pretty excited to create such a world. So I did my research, created the 3D models of the world in Maya.

( 4 ) The awesome process of polishing started, notice the fine lines of pink, those are the physics areas. I experimented with so many textures, for some objects I had a clear idea of what I wanted but for the ground texture, that was tricky. At some point, the game was radioactive, everything was glowing and dizzying lol. I wanted the players to feel slightly disoriented so I integrated optical illusions in the textures and had them move every so slightly. And in the Jack-in-the-Box, the creep factor were the clowns. I used some of these, I wish I know who took them so I can credit them properly. Kudos to whoever did, and to the models. Along with the images, I added sounds the portrays, whisper-y voices and shouts.

( 5 ) Final iteration of the map. I toned down the radioactive-ness by reducing the glow in the world. And ta-da! That’s it.

Download the game here. And for instructions on who to play it on UDK player follow the instructions at the end of this post.


Thanks for reading. =D


G12-iM Playable Online Edition

I figured I ought to release G12-iM on a web player. So, click on the image to launch the web player.

Note: You might be promoted to download the Unity Web Player plugin to your browser, if it wasn’t installed on your browser. 

Click me & Play

Click me & Play

I would prefer playing this game on the standalone version of it, which you can find on my Downloads page, but the web player doesn’t take away from the experience.

If you have any constructive criticism/thoughts regarding this game, please share them. =)


G12-iM Playable Prototype

It’s suffice to say, Ta-Da! hehe

Main Menu Screen

Below is a screen capture of the first in-game level. You may notice the camera distortion effect to emphasis the security camera.

In game screen shot.

Click on this link to download your copy of the game G12-iM, for a Windows platform.  The content is in a Zip file, uncompress it, and open the executable file titled “G12-iM.exe” to open the game.

For Mac users, please use this link. Download, uncompress and play.

Online on a web player, here.

The game menu gives you the option to pick your screen resolution and the quality you want the game to run at. I would strongly recommend to play this game in full screen mode, uncheck “Windowed”, play it on “Fantastic” quality and to the proper size of your screen resolution.

Screen Options Menu

The recommended settings for the optimal intended game play experience for G12-iM – On Windows.


Screen Options Menu

The recommended settings for the optimal intended game play experience for G12-iM – On Mac OS.


Any constructive feedback would be awesome to hear. So, please feel free to try the game out. Go nuts.

If you are interested in the development diaries, as I call it, for this particular project, here is:
Characters creation & concept art post.
Level Design post: part 1, part 2.
Overall aesthetics progression.


Dev Diaries: GRIM Project – Level Design (part 1)

So level design for G12-iM. I quite enjoyed creating levels for this project. It was exciting.

I’ll post the synopsis of G12-iM game, again. For the sake of making this post consistent and thorough.

“An assembly robot that mysteriously gains self-awareness, and is thus curious to discover and explore his surroundings, which is in the factory he, and the other robots were created in. As he progresses, the robot will discover the ‘grim’ nature of his, and his fellow robots, existence. Through this narrative, the player will be indirectly invited to engage with the philosophical questions posed by the game in regards to the nature of life, self-reflection and the big questions of ‘Why?’.

Robots create robots, as it mirrors humans making humans. A factory, a hospital. 

First off, the game presented a few mechanics for the player to learn. So creating smooth tutorial levels was a requirement in order to achieve the optimal learning journey for the player to progress in the game, but in a way that wasn’t condescending nor in-your-face sort of tutorials.

Players needed to learn these game mechanics:

– Movement [how to move the main character],
– Simple Hacking [hacking into one robot],
– Movement + Simple Hacking,
– Advanced Hacking [hacking into multiple robots, G12-iM to robot, robot to robot],
– Pressure Plates Switches,
– Proximity Sensor Switches.

This is an image of my on-paper early level design concepts/my to-do list. Don’t mind the messiness of it. I think it serves the “Dev Diaries” post right to include this, an actual image of my dev notebook. One of many. Some of these are in the final levels, some were scraped off.

From my dev notebook.

A key point in the game was, the robots, Mech, Spy and Janitor bots had a number atop their head, hovering, indicating the number of moves the robot had, if the number was zero the bot would reset. A movement counter. G12-iM bot, because he is the only robot, as far as we know, that has gained self awareness, so he moves freely without a movement counter.

A Movement Counter GIF, notice the color change and the animation.

We did some early tests on the game, to test the level progress. It turned out with very interesting results. Most players didn’t get the movement counter on the bots, they thought it was timer. Therefore, a new tutorial level needed to be introduced solely to make the player connect the number with the movement the hacked robot takes. As well as, we needed to introduce the different robots, Mech, Spy and Janitor bot in separate tutorial levels, as each robot has different function, to an extent, so it would be feasible to use all or some of the robots in later levels. Read more about the characters design for this game here

In the following section of this post, I’ll go over a few of the levels to demonstrate how those game mechanics were achieved in the tutorial levels. Note that the unusual camera point of view on the levels is suppose to be conveying a security camera view.

Teaching Movement, Level 1: 

Teaching movement, by going through obstacles.

The camera angle is overlooking the space, behind the main character, so players can easily see the start, the obstacles, the path they can take, and the exit. By the way, those white drapes by the door, are a physics body, they interact with the bot’s mass when the bot goes through them. It’s just fun, if I may add.

Teaching Simple Hacking, Level 2:

The white line illustrates the optimal path for G12-iM to hack. Distance isn’t a factor to hacking, as long as robots are facing each other.

The camera angle is positioned so that G12-iM bot and the Mech bot and the Pressure Plate Switch, are aligned in the scene, in a way that makes it possible for the player to connect the dots to solve the puzzle. It is designed to drag the player’s attention to the focal points of this level, G12-iM, Switch and Mech bot. I need to mention that, the instruction tool tips, in all of the 3 first tutorial levels, it flicker ever so slightly, as from our testing observations, when the tip was a plain static text, it wasn’t noticeable enough.

In this level, the Mech bot has been introduced first to the player. It triggers Pressure Plate Switches by standing on top of them.

Below was an early [on-paper] iteration of this level. Purple square represents G12-iM, Red = Mech bot, and the dark square = Pressure Plate Switch. Placement of all aforementioned elements were changed in later iterations.

An early level design concept. You may have noticed, the note, it was how I pictured the secondary world to be for this stage.

Teaching Movement Count w/  Simple Hacking + Proximity Sensor Switch, Level 3: 

The X marks the spot of where player’s should position G12-iM to hack Mech bot.

In this level, players still need to use the same bot they used in the previous level. To enforce familiar environment elements.

The camera angle in this scene is overlooking. G12-iM starts in a cornered place, so it urges the player to move to the right, to the marked X spot. A common aesthetic language was implemented to convey what players could and could not do. Blue boxes can hack over them, red boxes cannot hack over/through them. So, the line of the blue boxes makes the player notice, by experimenting they can hack over them to control Mech bot. Notice the movement counter atop Mech bot? When in control of it, the counter is blue, and is slightly popping in place.

The exit door, and the Proximity Sensor Switch are positioned on the same line and light color, to enable the player to connect the dots.

Teaching Movement + Hacking, Level 4: 

Requires movement and a few hacking, back and forth, in order to solve this stage.

The camera angle here, I wanted it to convoy as a small spaced room, and have the floor tiles visible enough. It’s also positioned to visually align the Mech bot and the Pressure Plate Switch to the position of G12-iM. There is a different floor tile around the Mech bot, from the testing observations, players spend more than they should’ve on this level, so this different floor tile is to indicate to the player where they should optimally place the bot(s) to progress.

This post isn’t mean to be a walkthrough, give away the puzzles. It’s just to showcase the level design behind the different stages. All of the previous levels have introduced Mech bot functions, the two switches, simple hacking, movement and hacking. Now, we move on to introducing the other robots’ functions as well.

Teaching Simple Janitor bot functions, Level 5: 

Introducing Janitor bot

This level, G12-iM is stranded on a small space with nowhere to go, opposite of the new bot, the Janitor. There’s a familiar switch, a Pressure Plate Switch, and a new environmental element, the crate with the “This Side Up Arrow”. The player will figure, they need to use the robot, and Janitor bot movement is tied to its occupying space. It takes up 3 blocks, so it needs 3 blocks of empty space to move/turn. So, once the Janitor bot is hacked players might experiment with its movement, and by moving forward, as turning and moving to the left or right doesn’t allow the player to advance in more than one block, and that doesn’t do anything beneficial. By moving forward, towards the switch, it will activate the door to open. But remember the movement counter, it has 6 spaces of movement, when it lands on the switch it should have about 4 moves left, which makes the player think of why the extra moves, and how to get G12-iM to the exit.

The crate with its specific texture, is to aid the player to make the connection between the Janitor bot face plates/”bulldozer face”, the hollow space between the platforms, and the extra moves. So by moving further forward, the player will be able to push the crate into the hollow space to fill it up, making a path for the player to crossover to the Janitor’s platform. But the Janitor bot will  be blocking the way, so by backing up to the switch with the 2 extra moves, it opens the door, and the player should hack back into G12-iM to exit.

The camera angle here is, as well, overlooking the stage, aiding to visually align the environmental elements to solve the puzzle. This tutorial covers the functions of the Janitor bot, its specific movement, it activates Pressure Plate Switches, and it pushes items, in this case a crate.

Teaching Crushers, Level 7: 

Introducing the crushers, a repulsive environmental element. In EDITOR screen shot.

This screen shot of the stage was taken in Unity Editor, it slightly differs in the game. This is a bit zoomed in and I added a light to the scene to make it brighter for the purpose of this post.

Teaching crushers. In GAME screen shot.

In this level, the player is suppose to guide G12-iM through the crushers using its cyan head light to see. The crushers cast a light onto the block they occupy, which makes the crushers easy to spot with the light, in a 3D world with this camera angle. The red light cast expands or scales down as the crusher move up and down. Thus, making it feasible for the player to progress by timing their movement. The crusher’s speed has been slowed for this tutorial level, in order to teach the player in a safe environment. And the white drapes are used for the exit since there aren’t any switches needed for this level to activate the switches metal bars door.

Teaching Simple Spy bot functions, Level 8: 

Introducing the Spy bot.

Spy bots can activate Proximity Sensor Switches, and they can only move in a space of 3-blocks at a time. One Spy bot move = 3 blocks. This spy bot has 3 moves, and it needs to move to the switch in order to open and exit the door. Players should understand that, at this stage of this game. But the tricky part is to get the bot there and back to G12-iM bot.

The player starts at this position, seen in the screen shot, facing the hovering spy with only 3 moves. The spy bot has one block to its right, 2 blocks to its left and blocked from the back, and is facing 3 blocks ahead. The blue boxes are an indicator they can hack over them. The 3 blocks of the blue boxes, the Spy/G12-iM is facing are to give a hint of the Spy’s specific moves. Once the player moves the Spy bot over those 3 blue boxes, its sound effects of movement and the movement animation should solidify the specific movement of the Spy bot to the player.  The space left of the 3-blocks of the blue boxes facing the bots, is intentionally left unoccupied, to showcase the Spy bots movement functions, flying over the floor and blue boxes and so this level isn’t an “easy” one, they need to think about what they learned from earlier levels and apply it here to progress.

I think this should conclude the first part of GRIM Project – Level Design. It seems like a long post, I hope it was thorough, and interesting. I’ll post the second part later today.