Las imágenes se pixelan cuando se toca la pantalla

Question

Estoy construyendo un pequeño juego en HTML/JS en Android. Tengo un problema en mi HTC Desire (Android 2.2). Cuando toco la pantalla, todas las imágenes se ven pixeladas y se des-pixelan cuando el toque finaliza.

Aquí está una captura de pantalla:

A la derecha es cuando se toca la pantalla. ¿Alguien me puede ayudar a descubrir qué está causando este problema?

Notas:

• No hay problemas durante las animaciones si la pantalla no se toca
• que no tienen este problema en mi LG 540 Android 2.1
• parece imágenes reciben un número restringido de colores cuando está siendo tocado
• que estoy usando Phonegap

Answer 1

Por lo que yo puedo decir, que el comportamiento "pixelada" es una Opti se hizo para desplazarse (en Froyo y arriba). Si la representación se simplifica, hace que las cosas como la animación de desplazamiento fling requieran menos procesamiento.

Si necesita la funcionalidad completa del navegador, no estoy seguro de que pueda ayudarlo mucho.

Como ya dijiste que estás haciendo un juego, es posible que tenga una solución alternativa. Espero que su juego no necesite desplazamiento (una pantalla completa), por lo que la optimización de desplazamiento no es necesaria.

Hice una prueba simple con WebView. De barril, como mencionaste, la representación se simplifica y las cosas se ven un poco apagadas. Luego, una vez que se hace clic en algo (la WebView sabe que no se está realizando ningún desplazamiento), las cosas vuelven a la normalidad.

Modifiqué mi diseño reemplazando un WebView, con un FrameLayout. FrameLayout contiene WebView y un botón invisible (en la parte superior). Este botón captura todos los eventos táctiles. Luego, elijo selectivamente qué tipos de eventos necesita WebView y los paso a WebView. Si un toque y un toque se juntan, sin movimiento entre ellos, no hay razón para desplazarse, así que no he visto nada de ese comportamiento "pixelado".

Como fue el más simple para este ejemplo, he elegido detectar el evento "MotionEvent.ACTION_UP", y cuando está completo, primero envío un down para que simule un clic real. Ciertamente puedes disparar en ACTION_DOWN, pero obtendrás más de uno si el usuario se desliza o algo así, y yo quería mantener la lógica aquí simple. Puede personalizar como mejor le parezca, y probablemente con suficiente trabajo, incluso habilitar el desplazamiento en algunos casos. Espero que el siguiente código sea suficiente para transmitir lo que creo que funciona.

WebView wv = new WebView(this); 
View dummyView = new Button(this); 
dummyView.setBackgroundColor(0x00000000); 
dummyView.setOnTouchListener(new OnTouchListener() { 
    @Override 
    public boolean onTouch(View v, MotionEvent event) { 
     if (event.getAction() == MotionEvent.ACTION_UP) { 
      MotionEvent down = MotionEvent.obtain(100, 100, 
       MotionEvent.ACTION_DOWN, event.getX(), 
       event.getY(), 0); 
      wv.onTouchEvent(down); 
      wv.onTouchEvent(event); 
     } 
     return false; 
    } 
}); 
FrameLayout fl = new FrameLayout(this); 
fl.addView(wv); 
fl.addView(dummyView); 
topLayout.addView(fl); 

EDIT: Si no desea editar fuente PhoneGap, usted podría ser capaz de hacer algo como lo siguiente para cambiar el diseño de PhoneGap ... Es no probado, pero parece que debería funcionar:

@Override 
public void onCreate(Bundle arg0) { 
    super.onCreate(arg0); 
    super.loadUrl("file:///android_asset/www/index.html"); 
    // Get the "root" view from PhoneGap 
    LinearLayout droidGapRoot = super.root; 
    // Create a new "root" that we can use. 
    final LinearLayout newRoot = new LinearLayout(this); 
    for (int i = 0; i < droidGapRoot.getChildCount(); i++) { 
     // Move all views from phoneGap's LinearLayout to ours. 
     View moveMe = droidGapRoot.getChildAt(i); 
     droidGapRoot.removeView(moveMe); 
     newRoot.addView(moveMe); 
    } 
    // Create an invisible button to overlay all other views, and pass 
    // clicks through. 
    View dummyView = new Button(this); 
    dummyView.setBackgroundColor(0x00000000); 
    dummyView.setOnTouchListener(new OnTouchListener() { 
     @Override 
     public boolean onTouch(View v, MotionEvent event) { 
      // Only pass "UP" events to the specific view we care about, but 
      // be sure to simulate a valid "DOWN" press first, so that the 
      // click makes sense. 
      if (event.getAction() == MotionEvent.ACTION_UP) { 
       MotionEvent down = MotionEvent.obtain(100, 100, 
         MotionEvent.ACTION_DOWN, event.getX(), 
         event.getY(), 0); 
       newRoot.onTouchEvent(down); 
       newRoot.onTouchEvent(event); 
      } 
      return false; 
     } 
    }); 
    // Layer the views properly 
    FrameLayout frameLayout = new FrameLayout(this); 
    frameLayout.addView(newRoot); 
    frameLayout.addView(dummyView); 
    // Add our new customized layout back to the PhoneGap "root" view. 
    droidGapRoot.addView(frameLayout); 
} 

Answer 2

Me encuentro con este mismo problema. Una cosa que podría intentar es agregar android: hardwareAccelerated = "true" al manifiesto de su aplicación en la etiqueta.Esto detuvo el problema para mí, sin embargo, ahora toda la aplicación parece un poco más pixelada en general en mi dispositivo, por lo que esta podría no ser la mejor solución.

Answer 3

Compruebe dos veces si sus imágenes tienen el mismo tamaño en CSS en píxeles que los propios archivos. Parece estar relacionado de alguna manera. Si tomo una imagen grande y la vuelvo a escalar con un CSS generado dependiente del dispositivo, veo el problema. De lo contrario, no se presenta o no es visible. No estoy seguro de si el problema original se ha solucionado en los últimos Android, pero todavía soporte 2.3, así que espero que ayude.