Schicht um Schicht: Lassen Sie es schneien...

IEBlog Deutsch

Blog des Internet Explorer-Entwicklerteams

Schicht um Schicht: Lassen Sie es schneien...

  • Comments 0

Da heute in Seattle einer der seltenen Schneestürme tobt, nutze ich die Gelegenheit, um eine Beschreibung unserer Holiday 2011 Test Drive-Demo „Let It Snow“ zu veröffentlichen. — Redakteur

Die Möglichkeiten sind unbegrenzt, sofern der Browser die zugrunde liegende Hardware effizient nutzt. Zur Weihnachtszeit haben wir eine Demo veröffentlicht, in der die Vorteile des vollständig hardwarebeschleunigten Touch-First-Browsing mit Internet Explorer 10 vorgeführt werden. In diesem Beitrag sehen wir uns an, wie die Let It Snow-Demo erstellt wurde. Bei den Mustern in dieser Demo handelt es sich um typisches HTML5, das derzeit überall im Internet eingesetzt wird, sowie um frühe Anwendungen im Metro-Stil. Unsere Sichtweise ist eher an der Funktionsweise orientiert als an den graphischen Effekten.

Da energiesparende Mobilgeräte und Touch-First-Benutzeroberflächen bald zum Standard gehören, steigen auch die Ansprüche der Kunden in Bezug auf die Browserleistung rasant an. Die Browserleistung wird nun auch daran gemessen, wie gut eine Website mit dem Finger bewegt werden kann, wie schnell eine Reaktion auf die Touchbedienung erfolgt und wie effizient der Akkuverbrauch des Browsers ist. Bei Internet Explorer 10 und Windows 8 war es unser Ziel, den schnellsten Browser für tatsächliche Szenarien zu entwickeln.

Die Entwicklung von „Let It Snow“

Grundlage war eine Motto-Postkarte, auf der ein Bereich für Weihnachtsgrüße vorgesehen ist.

Weihnachtskarte

Grundlage war eine Motto-Postkarte, auf der ein Bereich für Weihnachtsgrüße vorgesehen ist. Die Postkarte wird zur Laufzeit mithilfe von HTML5-Canvas erstellt. Dabei kommen diverse häufig eingesetzte Zeichenfunktionen wie das Malen von Bildern, das Mischen von Farbverläufen, das Bearbeiten von Deckkraft und Neigung und mehr zum Einsatz.

Anschließend wurden viele Schneeflocken hinzugefügt, um das Schneegestöber zu erstellen.

Animiertes Schneegestöber

Anschließend wurden viele Schneeflocken hinzugefügt, um das Schneegestöber zu erstellen. Hierzu wurde ein zweiter Zeichenbereich verwendet, der als Ebene über die Grußkarte gelegt wurde. Jede Schneeflocke befindet sich als Objekt in einer JavaScript-Sammlung, die den Status der Schneeflocke auflistet, z. B. den aktuellen Ort, die Geschwindigkeit und das zu zeichnende Bild. Der Zeichenbereich wird nach jedem Frame gelöscht und die Szene gemäß dem zugrunde liegenden Modell neu erstellt.

Mit der Zeit sammeln sich die Schneelocken auf dem Schild.

Ansammlung von Schneeflocken

Mit der Zeit sammeln sich die Schneelocken auf dem Schild. Durch Treffertests wird ermittelt, wann sich eine Schneeflocke über dem Schild befindet. Anschließend wird der Schneeflocke ein zufälliges Ziel auf dem Schild zugewiesen. Wenn sich die Schneeflocke dem Ziel nähert, wird mithilfe der zusammengesetzten Modi von HTML5-Canvas eine Schneeflocke im Zeichenbereich erstellt.

Die Postkarte kann mit dem Finger oder der Maus vom Schnee befreit werden.

Wegfegen von Schnee

Die Postkarte kann mit dem Finger oder der Maus vom Schnee befreit werden. Die Eingabe des Benutzers wird mit dem neuen MSPointer-Ereignis nachverfolgt, das eine einheitliche API für verschiedene Zeigermodelle bietet. Dadurch wird die Mehrfingereingabe für Internet Explorer 10 unter Windows 8 ermöglicht. Mithilfe der erfassten Punkte werden Teile des Zeichenbereichs gelöscht, und es entsteht der Eindruck, dass der Schnee weggewischt wird.

Durch Kombination der Ebenen entsteht die interaktive Weihnachtsszene.

Die fertige Szene

Durch Kombination der Ebenen entsteht die interaktive Weihnachtsszene. In dieser Demo werden Funktionen verwendet, die häufig in Spielen wie Angry Birds oder Cut The Rope vorkommen. Dazu gehören skriptbasierte Animationen, komplexe Benutzereingaben, physikbasierte Spiellogik und mehr.

Wir freuen uns, diese schnelle und flüssige Interaktion in Internet Explorer 10 und Windows 8 auf einer vollständig hardwarebeschleunigten HTML5-Plattform mit Touchfunktion bereitstellen zu können. Den besten Überblick über diese Vorteile erhalten Sie aus erster Hand in der Windows 8 Developer Preview.

– Bogdan Brinza‎, Program Manager, Internet Explorer