Graphics Programs Reference
In-Depth Information
Figure 2-4 . Translation using UI: Buttons
Graphic rendering APIs allow us to associate matrices with objects to animate them,
and, for such a movement along the x-axis, APIs allow constant updating to the
translate matrix associated with the object. For translation along the x-axis, we only
need a measure of the (number of) moves along the x-axis. Hence, it should only re-
quire a UI design consisting of buttons for moves along the positive x-axis and the
negative x-axis. Two buttons, one for left move and one for right move, are enough
to dodge the incoming rocks in this case.
Note Throughout this topic, we work in landscape mode, especially
when working with game layout, so we can stay focused on one ap-
proach, instead of choosing between landscape and portrait modes.
Moreover, landscape mode provides a wider view so UI elements,
such as button-views and seekbars, can be widely laid out for a spa-
cious look to the game.
Unlike gaming consoles, handhelds do not have controllers. Most games on hand-
helds use the screen to place the visual elements used as inputs for gameplay. Unlike
the spacious screen of a tablet, space on a mobile screen is very limited. This is
why we focus on the UI design on mobiles, rather than on tablets. Therefore, after
designing the game UI, we need to reduce the area occupied by visual elements, such
as button-views, to avoid cluttering UI and GPU rendered 3D graphics. You may
wonder about the relationship between the rendering of game UI (visual elements
like button-views and seekbars) and OpenGL's GPU rendering. Chapter 3 provides
in-depth insight regarding that relationship. The examples in the following section,
however, should help you understand the practical difference between game UI and
OpenGL rendering.
In Figure 2-4 , two buttons were used to translate objects separately along the positive
x-axis and the negative x-axis. These buttons can easily be eliminated, by logically
dividing the screen (or the widget layout occupying the entire width of the screen if
not the entire height) into two equal parts (as shown in Figure 2-5 ). We can get the x-
coordinate of the touch using MotionEvent.getX() . If this value is less than the
x-coordinate of the mid-point of the screen, it imitates a left button touch for trans-
lating the object to the left, and a right button touch in the other case. This imitation
is under our control, because the conditional block for half screen touches can now
Search WWH ::

Custom Search