Thursday, November 8, 2007

Main menu

Ok, so this isn't a huge update, but there's some interesting things to say.

I changed my main menu from using plain old buttons to shiny bitmap buttons, and then had the brilliant idea to add a sprite animation just because I could. I made some little sprites of my box man walking (from the side, flipped horizontally instead of rendering twice for each step) and standing still (facing forward), so I could make him walk to the button you were hovering over.

Actually, I started out wanting to make an animated cursor. So that he would "walk" as you moved left and right. But the only way I could get the mouse position was to place a GuiMouseEventCtrl over the entire gui, which effectively blocks all other items. That's when I decide to just have him walk at the bottom by the buttons.

To do this, I needed some of those GuiMouseEventCtrls to tell me when I moused over the buttons (the buttons themselves don't lend you any events). I found that if I nested the buttons inside the controls, I could get them both to work just fine. So, I used the controls to set the desired x position of the boxman (it's relative to the screensize, so it won't go nuts if you use a different resolution).

For the animation, I have a scheduled function that runs every 50 miliseconds (shown below) that checks the sprite's x position (held in a global variable, oh my!) to the desired x position and decides whether he should be walking somewhere or not. The animation is done via numbered sprites and string concatenation, and a counter. Since I only have 4 sprites per animation, I crafted another counter so that the sprite step would occur every 10 times this function runs.

Anyway, here's the code and a picture.


$mouseAnim = 1;
$mouseXPos = 60;
$animCounter = 10;

function mouseUpdate() {
if ($mouseXPos > 0) {
%boxPos = GetWord(BoxManBitmap.position,0);
%boxYPos = GetWord(BoxManBitmap.position,1);
if (mAbs(%boxPos - $mouseXPos) < position =" SetWord(BoxManBitmap.position,0,%boxPos+5);"> $mouseXPos) {
BoxManBitmap.position = SetWord(BoxManBitmap.position,0,%boxPos-5);
BoxManBitmap.setBitmap("ChadGame/client/ui/gfx/BoxManWalk_L"@$mouseAnim@".png",false);
}

$animCounter -= 1;
if ($animCounter < animcounter =" 10;" mouseanim =" ($mouseAnim-1)%4+1;" mousexpos =" 60;" mousexpos =" -1;" pos =" VectorAdd(playArea.position,VectorScale(playArea.extent,.5));" mousexpos =" GetWord(%Pos,0)-60;" pos =" VectorAdd(optionArea.position,VectorScale(optionArea.extent,.5));" mousexpos =" GetWord(%Pos,0)-55;" pos =" VectorAdd(quitArea.position,VectorScale(quitArea.extent,.5));" mousexpos =" GetWord(%Pos,0)-40;">

No comments: