Fare in modo che gli oggetti si muovano in base a un programma predefinito come il triangolo rotante è utile per
attirare l'attenzione, ma cosa puoi fare se vuoi che gli utenti interagiscano con la grafica OpenGL ES?
Il segreto per rendere interattiva la tua applicazione OpenGL ES al tocco è espandere l'implementazione di GLSurfaceView per eseguire l'override di onTouchEvent() e ascoltare gli eventi touch.
Questa lezione spiega come ascoltare gli eventi di tocco per consentire agli utenti di ruotare un oggetto OpenGL ES.
Configura un listener touch
Per fare in modo che la tua applicazione OpenGL ES risponda agli eventi touch, devi implementare il metodo onTouchEvent() nella tua classe GLSurfaceView. L'implementazione di esempio riportata di seguito mostra come rimanere in ascolto degli eventi MotionEvent.ACTION_MOVE e tradurli in un angolo di rotazione per 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;
}
Tieni presente che, dopo aver calcolato l'angolo di rotazione, questo metodo chiama requestRender() per comunicare al renderingr che è il momento di eseguire il rendering del frame. Questo è l'approccio più efficiente dell'esempio, perché non è necessario ritracciare il frame a meno che non vi sia una modifica nella rotazione. Tuttavia, non ha alcun impatto sull'efficienza, a meno che tu non richieda anche che il renderer ridisegnati solo quando i dati cambiano utilizzando il metodo setRenderMode(), quindi assicurati che questa riga sia rimossa dal commento nel renderer:
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);
}
Esporre l'angolo di rotazione
Il codice di esempio riportato sopra richiede l'esposizione dell'angolo di rotazione tramite il renderer
aggiungendo un membro pubblico. Poiché il codice del renderer viene eseguito su un thread separato dal thread dell'interfaccia utente principale della tua applicazione, devi dichiarare questa variabile pubblica come volatile.
Ecco il codice per dichiarare la variabile ed esporre la coppia getter e setter:
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;
}
}
Applica rotazione
Per applicare la rotazione generata dall'input tocco, commenta il codice che genera un angolo e aggiungi una variabile contenente l'angolo generato con l'input tocco:
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);
}
Una volta completati i passaggi descritti sopra, esegui il programma e trascina il dito sullo schermo per ruotare il triangolo:
Figura 1. Triangolo ruotato con input tocco (il cerchio mostra la posizione del tocco).