Jump to content

  • Log In with Google      Sign In   
  • Create Account

Why does game GUI have to be rectangles?


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
13 replies to this topic

#1 Anddos   Members   -  Reputation: 498

Like
0Likes
Like

Posted 25 May 2014 - 11:12 AM

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


Edited by Anddos, 25 May 2014 - 11:41 AM.

:)

Sponsor:

#2 Lactose!   GDNet+   -  Reputation: 3366

Like
7Likes
Like

Posted 25 May 2014 - 11:22 AM

Buttons don't have to be rectangular, but it's generally easier to implement/create a framework for buttons which have a nice geometrical/symmetrical shape.

If you want, you can create buttons which are whatever shape you can think of.

 

Edit: Being a ninja.


Edited by Lactose!, 25 May 2014 - 11:25 AM.


#3 SerialKicked   Members   -  Reputation: 576

Like
7Likes
Like

Posted 25 May 2014 - 11:23 AM

blink.png

 

It doesn't have to. There's plenty of games with round buttons or buttons that look like icons.

 

It's pretty standard though. People immediately recognize a button when it's more or less rectangular, not so much when it looks like a star.

It's also a whole lot easier to code, not only for detecting if the mouse cursor is over said button, but you can inherit from an existing button class (depending on language/framework)

 

edit: Ninja'd :)


Edited by SerialKicked, 25 May 2014 - 11:24 AM.


#4 Anddos   Members   -  Reputation: 498

Like
0Likes
Like

Posted 25 May 2014 - 11:40 AM

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.


:)

#5 HappyCoder   Members   -  Reputation: 2663

Like
0Likes
Like

Posted 25 May 2014 - 11:53 AM

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.



#6 Buckeye   Crossbones+   -  Reputation: 4910

Like
7Likes
Like

Posted 25 May 2014 - 11:54 AM


is possible to make a star button and been able to click it without it being a rectangle point checking.

 

There has to be some means of determining if the user intends to click on the button, or is clicking somewhere else. It doesn't have to be a "rectangle point" check. You can come up with another way to check if the mouse-click location is within the shape of the button - that's just a lot more difficult.


Edited by Buckeye, 25 May 2014 - 11:55 AM.

Please don't PM me with questions. Post them in the forums for everyone's benefit, and I can embarrass myself publicly.


#7 SeanMiddleditch   Members   -  Reputation: 5794

Like
7Likes
Like

Posted 25 May 2014 - 12:28 PM

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.

#8 swiftcoder   Senior Moderators   -  Reputation: 9991

Like
16Likes
Like

Posted 25 May 2014 - 02:17 PM


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.

Sure. Plenty of software does this.

 

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?".


Tristam MacDonald - Software Engineer @Amazon - [swiftcoding]


#9 dilyan_rusev   Members   -  Reputation: 948

Like
0Likes
Like

Posted 25 May 2014 - 03:06 PM

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.



#10 Emmanuel Deloget   Members   -  Reputation: 1381

Like
2Likes
Like

Posted 27 May 2014 - 07:31 AM

 

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. 



#11 Servant of the Lord   Crossbones+   -  Reputation: 19524

Like
4Likes
Like

Posted 27 May 2014 - 12:38 PM

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, 27 May 2014 - 04:23 PM.

It's perfectly fine to abbreviate my username to 'Servant' rather than copy+pasting it all the time.
All glory be to the Man at the right hand... On David's throne the King will reign, and the Government will rest upon His shoulders. All the earth will see the salvation of God.
Of Stranger Flames - [indie turn-based rpg set in a para-historical French colony] | Indie RPG development journal

[Fly with me on Twitter] [Google+] [My broken website]

[Need web hosting? I personally like A Small Orange]


#12 Hawkblood   Members   -  Reputation: 723

Like
2Likes
Like

Posted 30 May 2014 - 10:27 AM

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

#13 zee_ola05   Members   -  Reputation: 323

Like
0Likes
Like

Posted 05 June 2014 - 12:56 PM

You can even use a 3D object as a button and use it's mesh to check the bounds.



#14 Dim_Yimma_H   Members   -  Reputation: 469

Like
3Likes
Like

Posted 07 June 2014 - 04:38 AM

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.






Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS