How are buttons made to be clicked?

Question

I just want to ask a general question. According to that answer, I'll continue thinking.

You know in games there are lots of clickable items. Play button, exit, combo-boxes, etc.

My question is: Are those buttons drawn in same canvas with background and all other things, or for every different thing there is another canvas object?

My question is a general sense. I'm not asking about a specific game, I'm asking how they are made generally.

I'm planning to start a game on Android, and I'm confused actually how to design buttons, and other object. Probably I'm going to use View/SurfaceView for now. I don't have much experience with OpenGL yet.

Thanks in advance.

Answer 1

If you are going to use the Android APIs (such as Canvas) for graphics and insist on not starting with OpenGL yet (a wise choice for a beginning programmer), you are only going to have one canvas object with multiple images drawn using drawBitmap(). In onTouchEvent() determine if the touch was inside the bounds of your object and, if so, call the necessary method. Good luck!

Answer 2

I think what you are talking about is a GUI Skin. There are a few ways to do this: A common way is for a designer to create all the textures, pack them into a texture atlas (using something like SpriteSheetPacker or TexturePacker) , and generate a text file (called a map) which gives you the coordinates of each frame present in the atlas, which is then used by your GUI system.

Here is an example of a Miyagi skin used with the atlas below (click for full size):

Another workflow when designing GUI skins involves working with 'look and feel' elements - This is when a base design is created, and all GUI controls (eg panels, buttons) you create will use this design. Think of the theme you are used to for Windows/Mac/Linux applications. Scroll through this site for a quick idea on what I mean, and see here for more info. (I don't have much experience with working with look'n'feel). Also read up on look and feel programs for working with WPF if you are interested.

Since you want to make an Android game, I'd also recommend using an existing API for graphics (or a game engine API). Look around for a good GUI API, it will make your life much easier when working on the user interface.

Good luck! :)

Answer 3

There are different techniques for simulating button click and the easiest three which I use are:

1. Have 2 different images - one for normal button and another for pressed button. Then you draw pressed image when TOUCH DOWN event is registered on the button and normal when TOUCH UP is registered on the button or if not clicked at all

2. Draw the button with displaced coordinates when pressed. If you have a button at x = 50, y = 50, when pressed draw it on x+5, y+5 and when normal draw it on x, y. This is the simplest and generally looks good.

3. Scale down the image of the button a little bit when pressed. E.g. normal -> scale = 1, pressed -> scale 0.9 This looks good and provides a nice 3D effect when pressed.