Welcome! Log In Create A New Profile

Advanced

[RESOLVED] grrlib: elastic button

Posted by prampa 
[RESOLVED] grrlib: elastic button
December 13, 2009 01:10AM
Hi,
I'd like make a elastic button for my homebrew using grrlib library. I'd to copy the idea used to styling the html button with the "sliding doors" technique. Two images (left side and right side) and one of them that slide inside the other one. With this technique, I can make a button with a variable width depending on the size of the text showed.
How can I join more images in a single image? Does it exist a grrlib function of "stretch"? How can I make the mouseover effects on the new image? (perhaps with others images using the same technique....).
Thank



Edited 1 time(s). Last edit at 12/19/2009 02:41PM by prampa.
Re: grrlib: elastic button
December 13, 2009 04:11AM
GRRLIB_DrawImg has a parameter called scaleX.

By the way in the 4.1.1 zip file, in the examples folder check the example called nonameno03.
Re: grrlib: elastic button
December 13, 2009 06:37AM
To join more images into a single image just create your image with all the sprites you would need evenly spaced out... then you can tile that image using:

GRRLIB_InitTileSet(image, 24, 24, 0);
where image is the name, 24 x 24 is the dimensions of each tile within the image (all your sprites would have to be laid out in a 24 x 24 grid (or whatever dimensions you wanted)
and 0 is the starting tile.

Then use

GRRLIB_DrawTile(x,y,image,rotate, zoomx, zoomy, color, TILE NUMBER)
where tile number is what tile you want displaced (0 being the first)

depending on what the buttons looked like you could overlay them and just move their relative x positions to be bigger or smaller. pretty simple actually.

GRRLIB Point In Rectangle will be good for you mouseover effects:

if(GRRLIB_PtInRect(x, y, w, h, ir1.x, ir1.y) {
     do whatever you want to happen while hovering in rectangle (mouseover)
     if(a button is press) {
          do whatever you want to happen while in rectangle AND a button is pressed
     }
}

x and y are start points for your rectangle (mouseover box) w and h are dimensions of your box, ir1.x and ir1.y is the pointer (assuming you wanted to use the pointer, you can use an offset (ir1.x-20 etc to account for your pointer not being exactly lined up))

I use GRRLIB a lot and love it so if you got any questions on how to do stuff with it, I would be happy to help.
Re: [RESOLVED] grrlib: elastic button
December 19, 2009 02:55PM
Thank for the help. Today I have done some test and now the button is a very "elastic button". It has a variable width depending on the width of the text. I used the same technique for mouseover effects, too. My button works fine.
I divided a single image in three tiles: left, middle (variables in width) and right.
Now I'm doing some test with the "scaleX" in the afternoon.
Regard
Sorry, only registered users may post in this forum.

Click here to login