Page 1 of 1

Triangle buttons

Posted: Mon Mar 12, 2012 10:25 am
by brozenadenzen
Hi, I have a question about making triangular buttons. How do you make those, do I simply draw the button and check some coordinated when click, or make something like collision detection between the mouse and button?

Re: Triangle buttons

Posted: Mon Mar 12, 2012 10:34 am
by coffee
There isn't much difference from a normal rectangular button. Only a different detection formula.
You draw it with love.graphics.triangle (https://love2d.org/wiki/love.graphics.triangle)
You can then compare if mouse is inside triangle with one of this 2 concept formulas
http://www.blackpawn.com/texts/pointinpoly/default.html

Re: Triangle buttons

Posted: Mon Mar 12, 2012 2:56 pm
by cattail
The method of Triangle buttons is the same like rectangular buttons, that's a demo love in forum.
4 color buttons switch false | true by click.

Triangle buttons is diff for check click-point is in button algorithm .
And if more complex shape buttons will be use , I guess use get-pixel-color to check if click is in will easier.
If button is a weied shape image, use a un-displayable imagedata area to put a pure color shape for easy get-pixel-color.
But I'm new in lua|LOVE, can't write code for 2 layers color select ( image layer & pure color layer)
maybe use framebuffer|cavas something?

Re: Triangle buttons

Posted: Mon Mar 12, 2012 4:17 pm
by coffee
cattail wrote:The method of Triangle buttons is the same like rectangular buttons, that's a demo love in forum.
4 color buttons switch false | true by click.

Triangle buttons is diff for check click-point is in button algorithm .
And if more complex shape buttons will be use , I guess use get-pixel-color to check if click is in will easier.
If button is a weied shape image, use a un-displayable imagedata area to put a pure color shape for easy get-pixel-color.
But I'm new in lua|LOVE, can't write code for 2 layers color select ( image layer & pure color layer)
maybe use framebuffer|cavas something?
Get pixel-color? You are complicating things. That would make fail detection among several buttons if they haven't different colors. The correct method is sweep a table, calculate the correspondent detection algorithm to math check if is inside any of the buttons. As I said and you later repeated the only difference to normal rectangular buttons is just the formula (and draw a triangle of course). For examples of simple area buttons detection check Ensayia's one here (or read all thread)
viewtopic.php?f=4&t=3386&start=20#p34106

Re: Triangle buttons

Posted: Tue Mar 13, 2012 1:56 am
by cattail
coffee wrote:check Ensayia's one here
Yes , this is the sample that I sad, thanks for the URL.
But I guess that's a bug in it, when I test modify it to rectangular button.

Code: Select all

if x > v.x - v.w/2 and x < v.x + v.w/2 and y > v.y - v.w/2 and y < v.y + v.h/2 then
I think it should be (the "w" --> "h")

Code: Select all

if x > v.x - v.w/2 and x < v.x + v.w/2 and y > v.y - v.h/2 and y < v.y + v.h/2 then
Cos it w=h, so when running it, can't feel different.

And the get-pixel-color algorithm is another topic, about a map button.
A map like USA, every state is a button, click on a state then do something(like weather info something)
and the get-pixel-color algorithm maybe useful in state shape buttons...

(If one color layer, each button's color must have a tiny diff, like button1.blue=201 ,button2.blue=202 ...)
maybe write a tool to do this :
step 1: In tool window , put the buttons in right place (whatever is shapes, images with alpha)
step 2: select background color, reverse , delete every button shape area's pixel-color
step 3: select one button area once, give it a id(button1,2,3...) , fill the area a unique color
step 4: save the color array as a table| image file something .(Include color--id relation table)
step 5: in LOVE , require a .lua with some function load ,in mousepressed(), search ( seek) in this color array , use color--id relation table to findout button's id ...
This color array is not button display layer ,I called it color layer.

Re: Triangle buttons

Posted: Tue Mar 13, 2012 10:49 am
by coffee
I skimmed quickly your post. In my last message I should had post my rounded rectangle button library instead of other work link.
Ok, I think this is close what you wanted. This way you could easily add new buttons and configure it with your needs. As you see Rectangle one works well. Now for triangle one you need in update change it to a triangle formula. Sorry I didn't have the time now for do it. I hope in my strip-down didn't make some mistake.

NOTE: Just updated original rectangle code with more buttons just to show how to config. It don't have a clicked state but you could easily add one if needed.

Re: Triangle buttons

Posted: Wed Mar 14, 2012 6:24 am
by cattail
Much more appreciated.
Your code is very clean and clear , easy to add new buttons in it, very nice sample.

Re: Triangle buttons

Posted: Wed Mar 14, 2012 7:24 am
by Ensayia
coffee wrote:check Ensayia's one here
Yay! Someone used my example!

On the other hand, the post you linked to had a Gijsb post right above it and I threw up in my mouth a little. Oh well, whatever helps people learn! :crazy:

Re: Triangle buttons

Posted: Wed Mar 14, 2012 10:38 am
by coffee
cattail wrote:Much more appreciated.
Your code is very clean and clear , easy to add new buttons in it, very nice sample.
No problem! Sorry I got lazy first and give you instead Ensayia's code that was very good to learn point and detection but was image based and not vector/shape oriented.
Ensayia wrote:
coffee wrote:check Ensayia's one here
Yay! Someone used my example!

On the other hand, the post you linked to had a Gijsb post right above it and I threw up in my mouth a little. Oh well, whatever helps people learn! :crazy:
eh eh, don't worry I gave to cattai direct link to your post only. I had your example in my hard drive, so thanks because when I had to learn "how to do buttons" I probably learned something with you :)

Re: Triangle buttons

Posted: Thu Mar 22, 2012 8:58 pm
by Mikeyspike
Quick question, just had a look at Ensayia's example and I've put it into my work and tried it out. Everything works, however, how do to get a function to run once a certain button is pressed?
I have two buttons, one I'd like to go and start the game, the other I'd like to go to a controls screen. How would I check specifically which button is pressed and then call a function?