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