1 page.title= Responding to Touch Events 2 parent.title=Displaying Graphics with OpenGL ES 3 parent.link=index.html 4 5 trainingnavtop=true 6 previous.title=Adding Motion 7 previous.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" 28 class="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 36 getting some attention, but what if you want to have users interact with your OpenGL ES graphics? 37 The key to making your OpenGL ES application touch interactive is expanding your implementation of 38 {@link android.opengl.GLSurfaceView} to override the {@link 39 android.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 50 an angle of rotation for a shape.</p> 51 52 <pre> 53 private final float TOUCH_SCALE_FACTOR = 180.0f / 320; 54 private float mPreviousX; 55 private float mPreviousY; 56 57 @Override 58 public 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 > getHeight() / 2) { 74 dx = dx * -1 ; 75 } 76 77 // reverse direction of rotation to left of the mid-line 78 if (x < 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 95 android.opengl.GLSurfaceView#requestRender requestRender()} to tell the 96 renderer that it is time to render the frame. This approach is the most efficient in this example 97 because the frame does not need to be redrawn unless there is a change in the rotation. However, it 98 does not have any impact on efficiency unless you also request that the renderer only redraw when 99 the data changes using the {@link android.opengl.GLSurfaceView#setRenderMode setRenderMode()} 100 method, so make sure this line is uncommented in the renderer:</p> 101 102 <pre> 103 public 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 113 adding a public member. Since the renderer code is running on a separate thread from the main user 114 interface thread of your application, you must declare this public variable as {@code volatile}. 115 Here is the code to declare the variable and expose the getter and setter pair:</p> 116 117 <pre> 118 public 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 137 add {@code mAngle}, which contains the touch input generated angle:</p> 138 139 <pre> 140 public 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 160 screen 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 165 location).</p> 166
