Obrazy są pikselowane po dotknięciu ekranu

Question

Buduję małą grę w HTML/JS na Androida. Występuje problem w moim HTC Desire (Android 2.2). Kiedy dotykam ekranu, wszystkie obrazy wyglądają jak piksele i zostają pozbawione pikseli, gdy kończy się dotyk.

Oto zrzut ekranu:

Na prawo to jest, gdy ekran jest dotykany. Czy ktoś może mi pomóc dowiedzieć się, co jest przyczyną tego problemu?

Uwagi:

• Żadnych problemów podczas animacji, jeśli ekran nie zostanie dotknięty
• nie mam tego problemu na moim LG 540 Android 2.1
• wydaje zdjęć dostać ograniczoną liczbę kolory, kiedy to dotknięcie
• Używam PhoneGap

Answer 1

O ile mogę powiedzieć, że „piksele” zachowanie jest Opti Mizacja wykonana do przewijania (w Froyo i wyżej). Jeśli renderowanie jest uproszczone, sprawia, że ​​takie animacje, jak animacja przewijania, wymagają mniejszego przetwarzania.

Jeśli potrzebujesz pełnej funkcjonalności przeglądarki, nie jestem pewien, czy możesz w tym pomóc.

Odkąd powiedziałeś, że robisz grę, mogę mieć obejście. Mam nadzieję, że twoja gra nie wymaga przewijania (jeden pełny ekran), więc przewijanie nie jest konieczne.

Zrobiłem prosty test z WebView. Po dotknięciu, jak wspomniałeś, renderowanie zostanie uproszczone, a rzeczy wyglądają trochę na luzie. Następnie, gdy coś zostanie kliknięte (WebView wie, że nie ma już miejsca przewijanie), wszystko wraca do normy.

Zmodyfikowałem układ, zastępując WebView za pomocą FrameLayout. FrameLayout zawiera WebView i niewidoczny przycisk (u góry). Ten przycisk chwyta wszystkie zdarzenia dotykowe. Następnie wybieram wybiórczo typy zdarzeń, które powinny być potrzebne WebView, i przekazuję je do WebView. Jeśli dotykanie i dotykanie są blisko siebie, bez żadnego ruchu, nie ma powodu do przewijania, więc nie widziałem żadnego z tych "pikselowych" zachowań.

Ponieważ był to najprostszy przykład, zdecydowałem się wykryć zdarzenie "MotionEvent.ACTION_UP", a po jego zakończeniu wysyłam najpierw wiadomość, która symuluje prawdziwe kliknięcie. Z pewnością możesz wywołać ACTION_DOWN, ale dostaniesz więcej niż jeden z nich, jeśli użytkownik przeciągnie lub coś takiego, a ja chciałem zachować logikę tutaj prostą. Możesz dostosować według własnego uznania i prawdopodobnie wystarczającą ilość pracy, a nawet włączyć przewijanie w niektórych przypadkach. Mam nadzieję, że poniższy kod wystarczy, aby przekazać to, co moim zdaniem działa.

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: Jeśli nie chcesz zmieniać źródło PhoneGap, może być w stanie coś zrobić jak poniżej, aby zmienić układ PhoneGap ... To niesprawdzone, ale wydaje się, że powinna działać:

@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

Zajmuję się tym samym problemem. Jedną rzeczą, którą możesz wypróbować, jest dodanie do tagu pliku android: hardwareAccelerated = "true" do manifestu aplikacji.To powstrzymało problem, ale teraz cała aplikacja wydaje się nieco bardziej podzielona na piksele na moim urządzeniu, więc może to nie być najlepsze rozwiązanie.

Answer 3

Sprawdź dwa razy, czy obrazy mają taki sam rozmiar w CSS w pikselach, jak same pliki. Wydaje się być w jakiś sposób spokrewniony. Jeśli wykonam duży obraz i skaluję go za pomocą generowanego przez urządzenie CSS, widzę problem. W przeciwnym razie nie jest wyświetlany lub nie jest widoczny. Nie jestem pewien, czy pierwotny problem został naprawiony w najnowszych Androidach, ale nadal obsługuję 2.3, więc mam nadzieję, że to pomoże.