Merespons peristiwa sentuh

Membuat objek bergerak sesuai dengan program preset seperti segitiga berputar akan sangat berguna untuk mendapatkan perhatian, tetapi bagaimana jika Anda ingin pengguna berinteraksi dengan grafis OpenGL ES Anda? Kunci untuk membuat aplikasi OpenGL ES interaktif sentuh adalah dengan memperluas implementasi GLSurfaceView untuk mengganti onTouchEvent() guna memproses peristiwa sentuh.

Tutorial ini menunjukkan cara memproses peristiwa sentuh agar memungkinkan pengguna memutar objek OpenGL ES.

Menyiapkan pemroses sentuhan

Agar aplikasi OpenGL ES merespons peristiwa sentuh, Anda harus mengimplementasikan metode onTouchEvent() di class GLSurfaceView Anda. Contoh implementasi di bawah ini menunjukkan cara memproses peristiwa MotionEvent.ACTION_MOVE dan menerjemahkannya ke sudut rotasi untuk suatu bentuk.

    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
    }
    

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

Perhatikan bahwa setelah menghitung sudut rotasi, metode ini akan memanggil requestRender() untuk memberi tahu perender bahwa sudah waktunya untuk merender frame. Pendekatan ini tergolong paling efisien dalam contoh ini karena frame tidak perlu digambar ulang kecuali jika ada perubahan dalam rotasi. Namun, hal ini tidak berdampak pada efisiensi kecuali jika Anda juga meminta perender agar hanya menggambar ulang ketika data berubah menggunakan metode setRenderMode(), jadi pastikan baris ini tidak dikomentari di perender:

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

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

Menampilkan sudut rotasi

Kode contoh di atas mengharuskan Anda menampilkan sudut rotasi melalui perender dengan menambahkan anggota publik. Karena kode perender berjalan pada thread terpisah dari antarmuka pengguna utama aplikasi, Anda harus mendeklarasikan variabel publik ini sebagai volatile. Berikut adalah kode untuk mendeklarasikan variabel serta menampilkan pasangan getter dan setter:

    class MyGLRenderer4 : GLSurfaceView.Renderer {

        @Volatile
        var angle: Float = 0f
    }
    

    public class MyGLRenderer implements GLSurfaceView.Renderer {
        ...

        public volatile float mAngle;

        public float getAngle() {
            return mAngle;
        }

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

Menerapkan rotasi

Untuk menerapkan rotasi yang dihasilkan oleh input sentuh, komentari kode yang menghasilkan sudut dan tambahkan variabel yang berisi sudut yang dihasilkan input sentuh:

    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)
    }
    

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

Setelah menyelesaikan langkah-langkah yang dijelaskan di atas, jalankan program dan tarik jari Anda di atas layar untuk memutar segitiga:

Gambar 1. Segitiga diputar dengan input sentuh (lingkaran menunjukkan lokasi sentuh).