A Mini Map With Maximum Enjoyment

After getting Hikari working, we wanted to test it.

We wanted to create something we could use in game. Something that would be difficult or time consuming to create manually. We also wanted to see how well it held up. What better test than a Mini Map?

First, here is the Mini Map in action:


It was created by Dave's brother Ian and supports rotating, zooming, and any number of icons on the map. It was written in ActionScript 3 and is a Flash element that is being rendering in our game using Hikari.

It performs quite well. There is barely a FPS drop and it is pretty smooth.

You can see the full source here and the data file here.

Here is a quick summery of what I needed to do to get it working in game.

I call the ActionScript
loadMap(imageUrl:String, mapWidth:Number, mapHeight:Number):void
function from Lua, passing in the name of the mini map image, the width of the map in game units (1 unit is a meter), and the height (or depth in 3D).

I can then call the ActionScript
setPlayerPosition(x:Number, y:Number, rot:Number, zoom:Number):void
function, passing in the x position, y position (or z in 3D), the degrees rotated around the y axis, and a zoom amount (based on speed of the player).

There is a similar function for setting data related to other players called setObjectPosition().

From there Ian takes care of the rest and that means I have time to watch an episode of Dexter instead of writing a Mini Map in C++. Yay!

Hikari - In Game Flash GUI

It seems lately the Holy Grail of game GUIs has been Flash. Scaleform is an example of a commercial GUI based on Flash. This does not work for indies because of the cost.

Hikari is a great option for Ogre users. It was just released yesterday and I already have it integrated into Zero Gear. It is still new and needs a little work but thanks to it being open source (LGPL), we should start seeing a lot of support from the community.

P.S. One thing to mention is Hikari only works on Windows.

MVC LUA GUI FTW!!!

This is a more technical post but don't run away!

When designing a game (or any application) we tend to want to separate the graphical user interface (GUI) from the game logic. A way of doing this is called Model-View-Controller (or MVC). Here is a summery of what this means:

MODEL: This is the code and data that controls your game. An example could be setting the color of the player.
VIEW: This is your GUI. An example is a GUI widget to select a color and a button to apply that color to the player.
CONTROLLER: This is what ties the MODEL and the VIEW together. It is some logic that takes the color selected from the GUI and applies it to the Player in game.

The reason for doing this is that is separates the MODEL from the VIEW. This means we can easily change the VIEW without changing the MODEL and vice versa by only changing the CONTROLLER. And most the time we don't even need to change the CONTROLLER.

Here is the way I am handling this:
MODEL: In C++ I have code that sets a player's color Player::SetColor(colorVal)
VIEW: Using Navi, we have created a simple GUI to pick a color. This has some code in JavaScript that gets called when you change the color which sends an event telling us the color has changed and what color it changed to.
CONTROLLER: This is where Lua comes into play. Lua is the CONTROLLER that receives this event from the VIEW. The Lua code calls the C++ code Player::SetColor(colorVal) with the color from the event. This modifies the MODEL which changes the color of the player on screen.

It might seem complicated but it actually simplified things greatly and allows us to change one aspect of the game without affecting other things.

I like GUI things

I spent the last week immersing myself in css and hacking together some javascript in order to make our GUIs that are rendered in Navi. After learning a little bit and checking out what kind of neat javascript stuff is out there, I put together a tabbed scrolling menu that will allow the user to browse through different models to customize their kart / character.



click on the window above to launch a working popup version of the gui.

The neat thing about using the Gecko engine to render your gui in your game is that if you are using the Firefox browser, you are using the same rendering technology as you are seeing the gui with now. The only difference will be that the things that don't do anything when you click on them in your browser, will be tirggering functions in the game through Lua.