La Vista previa para desarrolladores de Android 11 ya está disponible. Pruébala y comparte tus comentarios.

Responde a eventos táctiles

Hacer que los objetos se muevan de acuerdo con un programa preestablecido como el triángulo que rota es útil para llamar la atención, pero ¿qué sucede si deseas que los usuarios interactúen con tus gráficos de OpenGL ES? La clave para hacer que la aplicación de OpenGL ES sea interactiva y táctil es expandir la implementación de GLSurfaceView a fin de anular el onTouchEvent() para escuchar eventos táctiles.

En esta lección, se muestra cómo escuchar eventos táctiles para permitir que los usuarios roten un objeto de OpenGL ES.

Configura un objeto de escucha táctil

Para que tu aplicación de OpenGL ES responda a eventos táctiles, debes implementar el método onTouchEvent() en tu clase GLSurfaceView. La implementación de ejemplo incluida a continuación muestra cómo escuchar eventos MotionEvent.ACTION_MOVE y traducirlos a un ángulo de rotación de una forma.

Kotlin

    private const val TOUCH_SCALE_FACTOR: Float = 180.0f / 320f
    ...
    private var previousX: Float = 0f
    private var previousY: Float = 0f

    override fun onTouchEvent(e: MotionEvent): Boolean {
        // 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.

        val x: Float = e.x
        val y: Float = e.y

        when (e.action) {
            MotionEvent.ACTION_MOVE -> {

                var dx: Float = x - previousX
                var dy: Float = y - previousY

                // reverse direction of rotation above the mid-line
                if (y > height / 2) {
                    dx *= -1
                }

                // reverse direction of rotation to left of the mid-line
                if (x < width / 2) {
                    dy *= -1
                }

                renderer.angle += (dx + dy) * TOUCH_SCALE_FACTOR
                requestRender()
            }
        }

        previousX = x
        previousY = y
        return true
    }
    

Java

    private final float TOUCH_SCALE_FACTOR = 180.0f / 320;
    private float previousX;
    private float previousY;

    @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 - previousX;
                float dy = y - previousY;

                // 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 ;
                }

                renderer.setAngle(
                        renderer.getAngle() +
                        ((dx + dy) * TOUCH_SCALE_FACTOR));
                requestRender();
        }

        previousX = x;
        previousY = y;
        return true;
    }
    

Ten en cuenta que, después de calcular el ángulo de rotación, este método llama a requestRender() para indicarle al procesador que es hora de procesar el marco. Este enfoque es el más eficiente en este ejemplo porque no es necesario volver a dibujar el marco mientras no haya un cambio en la rotación. Sin embargo, no tiene ningún impacto en la eficiencia, a menos que también solicites que el procesador solo vuelva a dibujar cuando los datos cambien utilizando el método setRenderMode(). Por eso, asegúrate de que esta línea no esté comentada en el procesador:

Kotlin

    class MyGlSurfaceView(context: Context) : GLSurfaceView(context) {

        init {
            // Render the view only when there is a change in the drawing data
            renderMode = GLSurfaceView.RENDERMODE_WHEN_DIRTY
        }
    }
    

Java

    public MyGLSurfaceView(Context context) {
        ...
        // Render the view only when there is a change in the drawing data
        setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
    }
    

Expón el ángulo de rotación

En el código de ejemplo incluido arriba, se requiere que expongas el ángulo de rotación por medio del procesador. Para ello, agrega un miembro público. Debido a que el código del procesador se ejecuta en un subproceso separado del subproceso principal de la interfaz de usuario de tu aplicación, debes declarar esta variable pública como volatile. Aquí está el código para declarar la variable y exponer el par captador y establecedor:

Kotlin

    class MyGLRenderer4 : GLSurfaceView.Renderer {

        @Volatile
        var angle: Float = 0f
    }
    

Java

    public class MyGLRenderer implements GLSurfaceView.Renderer {
        ...

        public volatile float mAngle;

        public float getAngle() {
            return mAngle;
        }

        public void setAngle(float angle) {
            mAngle = angle;
        }
    }
    

Aplica rotación

Para aplicar la rotación generada por la entrada táctil, comenta el código que genera un ángulo y agrega una variable que contenga el ángulo generado por la entrada táctil:

Kotlin

    override fun onDrawFrame(gl: GL10) {
        ...
        val scratch = FloatArray(16)

        // Create a rotation for the triangle
        // long time = SystemClock.uptimeMillis() % 4000L;
        // float angle = 0.090f * ((int) time);
        Matrix.setRotateM(rotationMatrix, 0, angle, 0f, 0f, -1.0f)

        // Combine the rotation matrix with the projection and camera view
        // Note that the mvpMatrix factor *must be first* in order
        // for the matrix multiplication product to be correct.
        Matrix.multiplyMM(scratch, 0, mvpMatrix, 0, rotationMatrix, 0)

        // Draw triangle
        triangle.draw(scratch)
    }
    

Java

    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);
        Matrix.setRotateM(rotationMatrix, 0, mAngle, 0, 0, -1.0f);

        // Combine the rotation matrix with the projection and camera view
        // Note that the vPMatrix factor *must be first* in order
        // for the matrix multiplication product to be correct.
        Matrix.multiplyMM(scratch, 0, vPMatrix, 0, rotationMatrix, 0);

        // Draw triangle
        mTriangle.draw(scratch);
    }
    

Cuando hayas completado los pasos descritos anteriormente, ejecuta el programa y arrastra el dedo por la pantalla para rotar el triángulo:

Figura 1: Triángulo rotado con entrada táctil (el círculo muestra la ubicación táctil)