Triangle buttons

[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?

[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

[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?

[coffee]

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

[cattail]

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.

[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.

[cattail]

Much more appreciated.
Your code is very clean and clear , easy to add new buttons in it, very nice sample.

[Ensayia]

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!

[coffee]

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.

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!

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

[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?