Canvas Buttons for people who are tired of image buttons

Post here your demos and examples with the source files.
Forum rules
Always post the games with a screenshot.
The file must have the ged and data files (complete game source)
Use the forum attachment to post the files.
It is always better to use the first post to put the game files

Canvas Buttons for people who are tired of image buttons

Postby Hblade » Sun Dec 06, 2009 1:49 pm

Hi everyone, I've found out a way to make a canvas button thanks to the help of someone reminding me that I had the transparency and the pensize mixed up :P Anyways, no images are needed for making these buttons, and I commented the code so you can see how it was done.
Code: Select all
if (colorh == 0)
{
//Base color of the button
erase(81, 132, 172, 0);

//Set the color of the border for the top and left sides
setpen(105, 200, 200, 0, 2);

// Make the top and left borders
moveto(0, 0);
lineto(width-1, 0);
moveto(0, 0);
lineto(0, height-1);


//Set the color of the border for the botom and right sides
setpen(49, 100, 100, 0, 2);

//Make the botom and right borders
moveto(0, height-1);
lineto(width-1, height-1);
lineto(width-1, 0);
}
if (colorh == 1)
{
//Base color of the button
erase(81, 166, 211, 0);

//Set the color of the border for the top and left sides
setpen(105, 200, 200, 0, 2);

// Make the top and left borders
moveto(0, 0);
lineto(width-1, 0);
moveto(0, 0);
lineto(0, height-1);


//Set the color of the border for the botom and right sides
setpen(49, 100, 100, 0, 2);

//Make the botom and right borders
moveto(0, height-1);
lineto(width-1, height-1);
lineto(width-1, 0);
}
if (colorh == 2)
{
    //Base color of the button
erase(81, 132, 172, 0);

//Set the color of the border for the top and left sides
setpen(49, 100, 100, 0, 2);

// Make the top and left borders
moveto(0, 0);
lineto(width-1, 0);
moveto(0, 0);
lineto(0, height-1);


//Set the color of the border for the botom and right sides
setpen(105, 200, 200, 0, 2);

//Make the botom and right borders
moveto(0, height-1);
lineto(width-1, height-1);
lineto(width-1, 0);
}

Here's a screenshot
picy.png


There is no data folder needed since you wont be using images.


How to do it yourself:

You can do this yourself by making a variable called colorh. It has to be an actor variable Now inside of draw actor where your button is, make a code saying...
Code: Select all
if (colorh == 0) // 0 is unhovered and unpressed, meaning the normal button color
{
         erase(your color / transparency);
         setpen(your color / transparency / size);
}

You get the point, after that make your border. Also, read the code at the top for more information on how to make the border.

Attachments
Canvas Buttons.zip
(2.37 KiB) Downloaded 143 times
Subscribe to my YouTube? - Yes| No
User avatar
Hblade
 
Posts: 4455
Joined: Fri Dec 08, 2006 11:14 pm
Score: 181 Give a positive score

Re: Canvas Buttons for people who are tired of image buttons

Postby BloodRaven » Sun Dec 06, 2009 3:43 pm

Wow, Great work, i like it, I can really use it for my new game.
Actually i'm trying to do something like that, nice timing, you posted nice buttons.

Thanks Blade :mrgreen:
blooDRaven
User avatar
BloodRaven
 
Posts: 52
Joined: Sun Jul 26, 2009 11:53 am
Location: India
Score: 1 Give a positive score

Re: Canvas Buttons for people who are tired of image buttons

Postby Hblade » Sun Dec 06, 2009 5:29 pm

Sure no prob, check out my HP bars too :D
Subscribe to my YouTube? - Yes| No
User avatar
Hblade
 
Posts: 4455
Joined: Fri Dec 08, 2006 11:14 pm
Score: 181 Give a positive score


Return to Game Demos

Who is online

Users browsing this forum: No registered users and 1 guest