NimbleBit

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.

In taking the kart color concept a bit further, we spent some time last night working on a color picker GUI. You can see the results of our work in this video.

ZeroGear color picker from marshmonkey on Vimeo

Now here is why this is cool. We did this using Navi + Lua. The C++ framework only needed slight modifications. I feel this was done extremely quick and has a nice, clean result. Here is how we did it.

We got the color picker html + javascript code from here.

And here is the part that I added to the color picker javascript:

function HSVupdate(v)
{
  var tempColor = HSV=v?v:slideHSV;
  v = hsv2hex(tempColor);

  return(v);
}


This function is called whenever the user changes the color in the GUI. The line that starts with “$ND” is the message from the Navi GUI to Lua. “$ND” is the javascript code included with Navi that sends the message. “HandleEvent” is the function that Navi calls in C++ and LUAFUNC is the Lua function that “HandleEvent” will call when this event happens. “SetKartColor” is the name of the Lua function and it is passed the new color as a parameter.

Here is that Lua function:

function SetKartColor(guiArgs)

end


It is basically just a conversion function. The javascript code gives the color as a hex value in this format “4499FF”. So I do some conversion with this lua bit library to get the color as red, green, and blue float values to pass to the C++ code.

And here is the SetColor C++ code that changes the color of the kart:


void OGREPlayerKart::SetColor(float red, float green, float blue, float alpha)
{
  Ogre::Entity * testEnt = kart->GetEntity();
  for (unsigned int i = 0; i <>getNumSubEntities(); i++)
  {
    Ogre::SubEntity * testSubEnt = testEnt->getSubEntity(i);
    Ogre::MaterialPtr testMatPtr = testSubEnt->getMaterial();
    Ogre::Technique * testTech = testMatPtr->getBestTechnique();
    Ogre::Pass * testPass = testTech->getPass("ColorTweak");
    Ogre::TextureUnitState * testTUS = testPass->getTextureUnitState("ColorTweak");
    testTUS->setColourOperationEx(Ogre::LBX_BLEND_TEXTURE_ALPHA, Ogre::LBS_MANUAL, Ogre::LBS_CURRENT,     Ogre::ColourValue(red, green, blue, alpha), Ogre::ColourValue(1, 1, 1, 1), 0);
  }
}


This C++ function is where I want to improve. I want to support changing colors on different parts of the player and karts (shirt, skin, paint, windshield, whatever). Also, different karts will have different parts that you can change the color of.

As you can see, this was all done in only a few lines of code. I bet you can see how easy something like a color picker is when you are using HTML/JS/CSS and Lua for your GUI.

This one is in memory of the dune buggy we used to have when I was a kid.

The hotrod kart is a great example of how the color customization system could really shine, so I added a customizable color for the flames and took some pictures of a few combinations.

Customization is very near and dear to both Brian’s and my own heart, so it’s no surprise that a high level of customization is a big goal of ours in ZeroGear. While Brian has been working on our physics and camera system, I had some time to play with Ogre’s material system. After a little bit of poking around I developed a system to let us have user-customizable color on most anything we wish. After implementing it on most of our existing assets I spent a while time trying out different color combinations. Here are a compilation of some straight out of the Ogre model viewer.

I start out by making sure that all the areas that are going to be re-colored in the material system are desaturated. Things that are not going to change color (such as the tail lights or mud splatters in this example) remain full color.

Then I make a solid white color mask of the parts of the texture I am going to be filling with an RGB value. Then in the material file I tell the engine to fill the mask color with the desired color and then combine it with the black and white base texture.

We will hook up a color picker widget in the game gui to supply the material with whatever color the user wishes to use for his kart or character or other accessories.