1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
page.title= Responding to Touch Events
parent.title=Displaying Graphics with OpenGL ES
parent.link=index.html
trainingnavtop=true
previous.title=Adding Motion
previous.link=motion.html
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>This lesson teaches you to</h2>
<ol>
<li><a href="#listener">Setup a Touch Listener</a></li>
<li><a href="#angle">Expose the Rotation Angle</a></li>
<li><a href="#rotate">Apply Rotation</a></li>
</ol>
<h2>You should also read</h2>
<ul>
<li><a href="{@docRoot}guide/topics/graphics/opengl.html">OpenGL</a></li>
</ul>
<div class="download-box">
<a href="http://developer.android.com/shareables/training/OpenGLES.zip"
class="button">Download the sample</a>
<p class="filename">OpenGLES.zip</p>
</div>
</div>
</div>
<p>Making objects move according to a preset program like the rotating triangle is useful for
getting some attention, but what if you want to have users interact with your OpenGL ES graphics?
The key to making your OpenGL ES application touch interactive is expanding your implementation of
{@link android.opengl.GLSurfaceView} to override the {@link
android.opengl.GLSurfaceView#onTouchEvent onTouchEvent()} to listen for touch events.</p>
<p>This lesson shows you how to listen for touch events to let users rotate an OpenGL ES object.</p>
<h2 id="listener">Setup a Touch Listener</h2>
<p>In order to make your OpenGL ES application respond to touch events, you must implement the
{@link android.opengl.GLSurfaceView#onTouchEvent onTouchEvent()} method in your
{@link android.opengl.GLSurfaceView} class. The example implementation below shows how to listen for
{@link android.view.MotionEvent#ACTION_MOVE MotionEvent.ACTION_MOVE} events and translate them to
an angle of rotation for a shape.</p>
<pre>
@Override
public boolean onTouchEvent(MotionEvent e) {
// MotionEvent reports input details from the touch screen
// and other input controls. In this case, you are only
// interested in events where the touch position changed.
float x = e.getX();
float y = e.getY();
switch (e.getAction()) {
case MotionEvent.ACTION_MOVE:
float dx = x - mPreviousX;
float dy = y - mPreviousY;
// reverse direction of rotation above the mid-line
if (y > getHeight() / 2) {
dx = dx * -1 ;
}
// reverse direction of rotation to left of the mid-line
if (x < getWidth() / 2) {
dy = dy * -1 ;
}
mRenderer.setAngle(
mRenderer.getAngle() +
((dx + dy) * TOUCH_SCALE_FACTOR); // = 180.0f / 320
requestRender();
}
mPreviousX = x;
mPreviousY = y;
return true;
}
</pre>
<p>Notice that after calculating the rotation angle, this method calls {@link
android.opengl.GLSurfaceView#requestRender requestRender()} to tell the
renderer that it is time to render the frame. This approach is the most efficient in this example
because the frame does not need to be redrawn unless there is a change in the rotation. However, it
does not have any impact on efficiency unless you also request that the renderer only redraw when
the data changes using the {@link android.opengl.GLSurfaceView#setRenderMode setRenderMode()}
method, so make sure this line is uncommented in the renderer:</p>
<pre>
public MyGLSurfaceView(Context context) {
...
// Render the view only when there is a change in the drawing data
<strong>setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);</strong>
}
</pre>
<h2 id="angle">Expose the Rotation Angle</h2>
<p>The example code above requires that you expose the rotation angle through your renderer by
adding a public member. Since the renderer code is running on a separate thread from the main user
interface thread of your application, you must declare this public variable as {@code volatile}.
Here is the code to do that:</p>
<pre>
public class MyGLRenderer implements GLSurfaceView.Renderer {
...
public volatile float mAngle;
</pre>
<h2 id="rotate">Apply Rotation</h2>
<p>To apply the rotation generated by touch input, comment out the code that generates an angle and
add {@code mAngle}, which contains the touch input generated angle:</p>
<pre>
public void onDrawFrame(GL10 gl) {
...
float[] scratch = new float[16];
// Create a rotation for the triangle
// long time = SystemClock.uptimeMillis() % 4000L;
// float angle = 0.090f * ((int) time);
<strong>Matrix.setRotateM(mRotationMatrix, 0, mAngle, 0, 0, -1.0f);</strong>
// Combine the rotation matrix with the projection and camera view
// Note that the mMVPMatrix factor *must be first* in order
// for the matrix multiplication product to be correct.
Matrix.multiplyMM(scratch, 0, mMVPMatrix, 0, mRotationMatrix, 0);
// Draw triangle
mTriangle.draw(scratch);
}
</pre>
<p>When you have completed the steps described above, run the program and drag your finger over the
screen to rotate the triangle:</p>
<img src="{@docRoot}images/opengl/ogl-triangle-touch.png">
<p class="img-caption">
<strong>Figure 1.</strong> Triangle being rotated with touch input (circle shows touch
location).</p>
|
