Main Menu Interface Design

The Interface Design was hard, because neither Zopokx or I had experience with that.

Using my abilities as a web designer, I tried to make the menu easy and cool.

Menu MockUp

This was the first mock-up of the main menu. It’s simply, the logo at the top and the buttons with the options at the front.

MainMenuGuru

And this is the final result ingame without the logo (we’re still working on that). The background is like the wall-paper of a kids room and the clouds give some life because they are moving all the time.

The music also helps to give a child enviroment. Incompetech has done a very good work with this song.

OnRail Enemies

Today we are going to introduce you our OnRail Enemies designs. They are vectorial images (SVG) and have been made using Inkscape.

We decided that every enemy should be simple: no shadows, no gradients. Plain colors with a dark colored edge.
But each enemy should have variants, like an evolution. In game, the variants will result into more strength or speed.

The artist did a first design attempt with handwritten edges, but the design was remade using a steady line.
enemiesEvolution



Here’s the rest of our family of monsters.
Each one of them will have a special ability: harder, faster, sneak factor…
enemies


Do you like them? Who is your favorite one?

Coin Drop System

To design the drop system, we decided to wink to other videogame series. In this case, we are using the same colors and values that exists in The Legend of Zelda with the rupees.

Although there are some differences between them, the most common values used in tLoZ games are these:

  • WW_GreenRupee Value: 1
  • WW_BlueRupee Value: 5
  • WW_YellowRupee Value: 10
  • WW_RedRupee Value: 20
  • Purple_Rupee_TWW Value: 50

In this game we decided to use a button as currency.
button-coin

The Coin Drop System works in the following way:

  • Aggro Enemies drops coins.
  • Each Aggro Enemy has 2 variables that determine the minimum and maximum value of the coins that can be dropped.
  • The coins are generated automatically taking the value randomly among the 2 previous variables (minLootValue, maxLootValue). The color is also assigned automatically.

You can check the code here (Unity3D C#):

int[] coinValues = new int[5] {50, 20, 10, 5, 1};
 
int lootDrop = Random.Range(minLootValue, maxLootValue + 1);
 
for (int i = 0; i < coinValues.Length; i++){
	if(lootDrop >= coinValues[i]){
		for (int j = 0; j < (lootDrop/coinValues[i]); j++){
			coinPrefab.GetComponent<Coins>().moneyValue = coinValues[i];
			Instantiate(coinPrefab, this.transform.position, Quaternion.identity);
		}
		lootDrop = lootDrop%coinValues[i];
	}
}

With the coins, the player can build towers or buy improvements in the shop.

Models: Fir & Bush

As you should already know, the entire game is made in very low poly, so we committed to make each prop with as few triangles as we can.

Fir: Main Design [78 Polygons | 120 Triangles]
fir

We started trying to give a fabric appearance, but we have discovered that is much more difficult that we expected, so in the end, we decided to use a cartoon texture for it.



Bush: Main Design [54 Polygons | 126 Triangles]
bush

Bush: Alternative Design [54 Polygons | 126 Triangles]
bush2

The shrub texture was made thinking about a 3-layer-carton (corrugated).

Color Scheme

From the start we decided to choose the pastel colors as the main game palette. Pastels are the family of colors which have low to intermediate saturation. The colors of this family are usually described as “soft” or “desaturated”, lacking strong chromatic content.
pastel_midring_3.09-1

Although it is difficult to be strictly correct in the choice of color, we have tried to keep the same color scheme throughout the game.
colores

Pathfinding

Thanks to new Unity 4.0 version, we can use a feature that was only available in the Unity Pro version: NavMesh
pathgeneral


After some research, we discovered how to let Unity3D to manage, in a very good way, the pathfinding of our AggroEnemies: they can recognise the entire map design and we don’t need to care about the programming. We don’t even know what algorithm is being used by Unity3D, but it works!
pathtop2

To make it work, you need to add a new component called ‘NavhMesh Agent‘ to a GameObject. This is the ‘controller’ that automagically moves the GameObject through the NavMesh baked.
navhmeshagent

But before, you should define every game prefab that could collide with the GameObject (in practice, the entire map) with the NavMesh Agent as ‘static’.
navhmeshstatic
Later, you can individually disable it in the Navigation Menu: for example, a zone that you don’t want an Enemy to go through.
disablenavmesh


However, we have faced some problems related to NavMesh Bake general configuration:

    • Some slopes were not totally covered with NavMesh. Although our slopes have a 45ยบ angle, we had to adjust the ‘Max Slope‘ value to 55 to get them completely cover by the NavMesh.
      erro1
    • When adding some new prop (big tree), the new NavMesh Bake covers totally or partially the prop. We did not test it, but that means that the Aggro Enemies could walk over the top of the tree.
      erro2
    • You can also observe that sometimes, the NavMesh triangulation gets corrupted or overlaps itself. This is, by far, the most difficult problem to solve without changing the map design.



Luckily, we have resolved them by trial and error, adjusting NavMesh values.

Map Design

This is the final design of the map 1-1. It remains to add several minor props to give some variety to the map distribution.
map11

The first sketch was made using Pixen, an open-source pixel graphics editor for OS X. Each color represents some basic guidelines in the map design.
map11design

The map is built with quads (not cubes) from various sizes to optimize the triangle count.
topwireframema

You can check every collision in the map, and the torch light area too.
We have also decided to use Box Colliders instead Mesh Colliders in every main prop to optimize the collision calculation.
mapelements

Each stage is designed as an entire day, compound by 3 different maps, each one with a special ambient light: dawn, twilight and night.
We have calculate that the entire stage gameplay should last 30 minutes.
daycycle

Prototyping

The prototype of the game is complete, and with that, the first stage of game development is done.


There is so much work to do with the game, and the final look will be very different, but the basic game mechanics can now be appreciated:

  • Rail enemies move through waypoints to a finish point.
  • Towers attack the rail enemies, and you can see how their life decreases by 5 with each shoot.
  • Aggressive enemies spawn and attack the towers.
  • There is a Player that shoots continuously in the background of the stage, with a dual-shooter gameplay.

Here we go!

We have finally decided our logo, so we are ready to report the game progress here, in our development blog.
Our love for retro games has clearly tipped the balance at the time of its design.

Why Loop Games? It is well known that both developers loves Sonic the Hedgehog. Furthermore, Elendow’s cat is called Loop. So we thought it was an appropiate name to our own games company.

LoopGamesLogo

Do you like the design?