Le immagini vengono pixelate quando lo schermo viene toccato

Question

Sto costruendo un piccolo gioco in HTML/JS su Android. Sto incontrando un problema sul mio HTC Desire (Android 2.2). Quando tocco lo schermo, tutte le immagini sembrano pixelate e diventano non pixelate al termine del tocco.

Ecco uno screenshot:

Sulla destra è quando viene toccato lo schermo. Qualcuno può aiutarmi a capire che cosa sta causando questo problema?

Note:

• Nessun problema durante le animazioni se lo schermo non viene toccato
• Io non ho questo problema sul mio LG 540 Android 2.1
• sembra immagini ottengono un numero ristretto di colori quando è in fase di toccato
• che sto utilizzando PhoneGap

Answer 1

Per quanto posso dire, che il comportamento "pixel" è un opti mization fatta per lo scrolling (in Froyo e sopra). Se il rendering è semplificato, rende le cose come l'animazione di scorrimento lanciare richiedono meno elaborazione.

Se è necessaria la funzionalità completa del browser, non sono sicuro che si possa fare molto.

Dato che hai detto che stai facendo un gioco, tuttavia, potrei avere una soluzione alternativa. Spero che il tuo gioco non abbia bisogno di scorrimento (uno schermo intero), quindi l'ottimizzazione dello scorrimento non è necessaria.

Ho eseguito un semplice test con una WebView. Alla presa, come hai detto, il rendering viene semplificato e le cose sembrano un po 'fuori. Quindi, quando viene fatto clic su qualcosa (la WebView non sa più lo scorrimento), le cose tornano alla normalità.

Ho modificato il mio layout sostituendo una WebView con FrameLayout. FrameLayout contiene la WebView e un pulsante invisibile (in alto). Questo pulsante afferra tutti gli eventi tattili. Quindi, seleziono selettivamente quali tipi di eventi devono avere WebView e li passiamo a WebView. Se un tocco in basso e ritocchi avvengono ravvicinati, senza alcun movimento in mezzo, non c'è motivo di scorrere, quindi non ho visto nessuno di quei comportamenti "pixelati".

Poiché è stato il più semplice per questo esempio, ho scelto di rilevare l'evento "MotionEvent.ACTION_UP" e quando è completo, invio prima un down, in modo che simuli un clic reale. Potresti sicuramente attivarlo su ACTION_DOWN, ma ne riceverai più di uno se l'utente fa un passaggio o qualcosa del genere, e volevo mantenere la logica qui semplice. Puoi personalizzare come ritieni opportuno, e probabilmente con abbastanza lavoro, anche abilitare lo scorrimento in alcuni casi. Spero che il codice qui sotto sia sufficiente per trasmettere ciò che penso funzioni.

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: Se non si desidera modificare fonte PhoneGap, si potrebbe essere in grado di fare qualcosa di simile a quanto segue per modificare il layout PhoneGap ... E 'testato, ma sembra che dovrebbe funzionare:

@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

Mi sto imbattendo in questo stesso problema. Una cosa che potresti provare è aggiungere android: hardwareAccelerated = "true" al manifest della tua app nel tag.Questo ha fermato il problema per me, ma ora l'intera app sembra un po 'più pixelata nel mio dispositivo, quindi questa potrebbe non essere la soluzione migliore.

Answer 3

controllare due volte se le immagini hanno la stessa dimensione in CSS in pixel come i file stessi. Sembra essere in qualche modo correlato. Se prendo un'immagine grande e la ridimensiono con un CSS generato dal dispositivo, vedo il problema. Altrimenti non è presentato o non è visibile. Non sono sicuro che il problema originale sia stato risolto negli ultimi Android, ma supporto ancora il 2.3, quindi spero che sia d'aiuto.