Sign in to follow this  

Why does game GUI have to be rectangles?

This topic is 1320 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Why does game GUI buttoins have to be rectangles?, why cant they be abnormal shapes?

Edited by Anddos

Share this post


Link to post
Share on other sites

yes i understand that its easier to implement as a rectangle for easy functionality with the mouse coordinates,but its is possible to make a star button and been able to click it without it being a rectangle point checking.

Share this post


Link to post
Share on other sites

I also feel like an interface that has a regular pattern is easier for the user to process. If you include too many weird shapes and layouts it may be confusing to the user. I'm not saying that irregular button shapes can't be done well so it isn't confusing, but you just need to be careful not to let innovation in the UI to over complicate it. Cool idea though.

Share this post


Link to post
Share on other sites

Well, if you work with non-mouse input, it is very good practice to actually detect selection with an area that is a little bit smaller that what you show graphically (or displaced).

 

If I remember correctly the main menu of Starcraft was a gallactic map. One of the coolest things I've seen in my childhood for game UI :) So, sure, go ahead and do something awesome. Besides, the algorithms for determining whether a point belongs to a closed geometric shape are known, so you don't have to invent anything new. And swiftcoder's idea is even more awesome, because it is simple and fast.

Share this post


Link to post
Share on other sites

 

yes i understand that its easier to implement as a rectangle for easy functionality with the mouse coordinates,but its is possible to make a star button and been able to click it without it being a rectangle point checking.


Of course. Why wouldn't it be possible? It's software - you can make the screen show anything you want and process input any way you want. You can take a mouse position, check if it's contained by any arbitrary shape, and then do whatever the heck you want with that information.

 

 

On the technical side, the shape can be arbitrary. 

 

On the human size, one have to consider how we are procesing shapes. If it's a bit complex we'll lost the purpose of the button and we'll focus on the button itself. That makes it less readable. If it's really complex (for example a really weird concave shape with numerous holes and so on) we'll have problem discerning the button itself, and we won't know where we are supposed to click. 

 

So while we're not limited to rectangle, it's still a good idea to limit ourselves to simple, convex shapes - unless they represent a pattern which is easily understood (such as a country on a world map). Noone wants to make something that is too complex to be parsed by an average humain brain. 

Share this post


Link to post
Share on other sites

One of the easiest ways is to store the hit regions of your icons as 1-bit (i.e. black and white) bitmap images. Then you can supply arbitrary shapes as images, and the hit test is as simple as "is the pixel under the mouse white?".

 

This is the route I'd take, but I'd use the button's alpha channel and check for transparency instead of having a separate bit mask (or, if the texture is in GPU memory, generate the non-GPU bitmask using that channel).

Edited by Servant of the Lord

Share this post


Link to post
Share on other sites
Locking even a single bitmap each frame can cost you precious ticks. Your button will be an image of the button with transparency values. Lock it once when you load it, check the alpha of each pixil, and set an array of bytes (same diminsions as the image) to either 0 or 1, then use that array as a check for "is it on the button"......

Share this post


Link to post
Share on other sites

yes i understand that its easier to implement as a rectangle for easy functionality with the mouse coordinates,but its is possible to make a star button and been able to click it without it being a rectangle point checking.

 

Here's my experience of that.

I tried to implement an arrow-shaped 2D button, to scroll the camera over a side-perspective landscape. I wanted the button to be an arrow to visually indicate right or left. And the detection of whether the user clicked the arrow-shaped button was programmed as a triangle.
- But when I playtested this, it turned out to be difficult as a user to click on the arrow, because it becomes very thin near its points/tips/vertices. When testing, I moved the mouse cursor towards the arrow clicked, and realized I clicked a bit outside, it felt frustrating.
- So I simplified the implementation, making it look like an arrow visually, but detect the user click by programming the arrow as a rectangle. That was a win-win solution, it became easier for the user to click, and it became easier to program (rectangle detection instead of triangle/polygonal)

The conclusion is, keep in mind that we (= or i) move the mouse right/left, or up down, maybe because the screen is rectangular and we see the mouse cursor move in relation to the screen edges (rectangle). So it's slightly harder to move the mouse diagonally with precision. That's how it feels for me at least, when using a computer mouse.

Share this post


Link to post
Share on other sites
Sign in to follow this