Ich mache ein kleines HTML5-Spiel, und während ich meine Sprites am Anfang der Map lade, mache ich etwas mit GetImageData () / looping über das Bild / PutImageData ().
Das funktioniert fantastisch großartig auf meinem PC, aber auf meinen Handys ist es schrecklich langsam.
%Vor%Ich habe einige sehr grundlegende Benchmarks gemacht, und sowohl GetImageData als auch PutImageData laufen sehr schnell, was lange dauert, ist das Durchlaufen der Inhalte.
Nun erwarte ich offensichtlich eine Verlangsamung am Telefon, aber 1000x klingt etwas übertrieben, und das Laden dauert ungefähr vier Minuten auf meinem HTC, damit es nicht funktioniert. Außerdem funktioniert alles andere im Spiel mit sehr vernünftiger Geschwindigkeit (hauptsächlich weil der Bildschirm lächerlich kleiner ist, aber trotzdem funktioniert es erstaunlich gut für JS auf einem Handy)
Was ich bei dieser Verarbeitung mache, ist das "Verdunkeln" des Sprites auf ein bestimmtes Level. Ich durchlaufe einfach alle Pixel und multipliziere sie mit einem Wert & lt; 1. Das ist alles.
Da dies zu langsam ist ... Gibt es einen besseren Weg, die Canvas-Funktionalität (Compositing, Opacity, was auch immer) zu verwenden, ohne alle Pixel nacheinander durchzulaufen?
HINWEIS: Diese Ebene enthält einige 100% transparente Pixel und einige 100% undurchsichtige Pixel. Beide müssen entweder 100% opak oder 100% transparent bleiben.
Dinge, an die ich gedacht habe, würden nicht funktionieren:
1) Malen der Sprites in einer neuen Leinwand mit geringerer Deckkraft. Das wird nicht funktionieren, weil die Sprites opak bleiben müssen, nur dunkler
2) Bemale die Sprites und male einen halbtransparenten schwarzen Rect darauf. Dadurch werden sie dunkler, aber es macht auch meine transparenten Pixel nicht mehr transparent ...
Irgendwelche Ideen?
Dies ist der Code, den ich benutze, nur für den Fall, dass Sie etwas schrecklich idiotisch darin sehen:
%Vor% BEARBEITEN: Dies ist ein Beispiel dafür, was ich mit dem Bild machen möchte:
Original: Ссылка
Verdunkelt: Ссылка
Danke!
Daniel
Phrogz hat die richtige Idee. Sie wollen wirklich nur ein halbtransparentes (oder Verhältnis-transparentes) Schwarz über das Ganze mit 'source-atop' globalCompositeOperation malen.
Wie folgt: Ссылка
Es gab tatsächlich eine gute Frage zu raffinierter Verdunkelung, aber der Autor hat es gelöscht, was wirklich eine Schande ist. Es ist sicherlich möglich, dunkle Masken auf gezeichneten Objekten zu erstellen, selbst mit ausgeklügelten Formen. Sie können Ihnen vielleicht nicht helfen, aber der Vollständigkeit halber und für jeden, der nach "verdunkelter Leinwand" sucht, wo einige Teile hell gehalten werden (Ausschlusszonen), kann das mit der 'xor' globalCompositeOperation wie folgt gemacht werden:
Tags und Links javascript html5 canvas performance getimagedata
