Customization GUI video

As a little holiday present we have whipped up a little video of the customization menu we created hooked up and working in the game. View it on Vimeo for better quality.


Zero Gear player customization video from marshmonkey on Vimeo.

Happy Holidays from NimbleBit!

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.

a few wheels

Here are a couple different wheel variations I did this morning. I also added some color on the wheel to be customizable.

I wanna pick the color

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);

  $('plugHEX').innerHTML=v;
  $S('plugCUR').background='#'+v;
  $S('plugID').background='#'+v;

  $ND('HandleEvent', {LUAFUNC: 'SetKartColor', Color: v}).send();

  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)

  local colorValue = GetNaviMultiValue(guiArgs, "Color")
  local color = colorValue:str()
  local colorNum = hex.to_dec("0x" .. color)

  local red = bit.brshift(colorNum, 16) / 255
  local green = bit.brshift(colorNum, 8)
  green = bit.band(green, 255) / 255
  local blue = bit.band(colorNum, 255) / 255
  local alpha = 1
  kart:SetColor(red, green, blue, alpha)

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.

NimbleBit website goes live

If you check out http://www.NimbleBit.com you will see that I have added some much needed content. It's not much, but it will do for our first little homestead on the world wide web. A word of advice: don't ride the elephant!

if you can read this, tip me over

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

saftey first

Just a quick post to show what the new character I did looks like modeling the default helmet and goggles.

more color customization examples

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.

hot rod classic

I finished up a new kart today, obviously inspired by a famous classic car.

colors!

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.

Webify your GUI!

Alright, enough of this "art" nonsense. Time for some code updates!

I was looking for a good solution to creating a GUI system and found Navi. We have been using it for our GUI elements inside the in-game editor we are developing and I wanted to show my praise for the beauty that is a web-based GUI.

Navi is a GUI library for Ogre that allows somebody to create the look and feel of a GUI element entirely in HTML + CSS + JS and whatever else Gecko (Firefox's renderer) supports. Check out the Screenshots to see what this looks like.

Using Navi + Lua has allowed Dave to design GUI elements in Dreamweaver and me to code all the logic associated with it in Lua. This means that I only have to touch about 10% of the GUI related code which makes me a very happy programmer.

meet little guy

I wanted to create a new player character that had a little more personality than the one I already had. This little guy says hello.

rimlighting test 2

Here is another test of rimlighting, this time on our spaghetti west track. If you view it on Vimeo, I think you can see it higher resolution.


ZeroGear rimlighting test 2 from marshmonkey on Vimeo.

It works much better on this track. One thing I discovered is that applying this effect requires a lot of tweaking the amount of rimlighting for individual materials. For instance, a lot of shading might look neat on the cacti to make them pop out, but the same amount on the ground would look quite odd. A lot of time could be spent adjusting. I imagine that Nintendo spent a lot of time tweaking the specific amount of rimlighting on all the objects in Super Mario Galaxy. Here is also an image showing the difference with the rimlighting effect on and off.

rimlighting is awesome

Inspired by Super Mario Galaxy, I wanted to see how rim lighting would look on one of our track environments. I was already planning on using rim lighting on the characters and karts but this might look nifty too.


ZeroGear rimlighting test from marshmonkey on Vimeo.

I think it would look better on the tracks that aren't so white already, I'll have to try it on a different track next.

oh god how did this get here I'm not good with compu

Time to put another pot on, I just recently took an opportunity to become un-employed, which means I'm going to be busting my butt a lot more on ZeroGear and any other freelance work that happens to walk my way. As the first act of my new non-job, I have hacked together this blog to share our progress and keep us motivated.