MMProg: Praktikum: WiSe 2017/18: Ball02

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3
(zu größeren Teilen überprüft) 		Umfang: 4
(unwichtige Fakten fehlen) 		Quellenangaben: 3
(wichtige Quellen vorhanden) 		Quellenarten: 5
(ausgezeichnet) 		Konformität: 3
(gut)

MMProg-Praktikum

Inhalt | Game Loop 01 | Ball 02 | Ball 03 | Ball 03b | Pong 01

Musterlösung: SVN-Repository

Ziel

Ziel dieser Praktikumsaufgabe ist es, die “HTML5 Creation Engine” PixiJS v4 kennenzulernen.[1] Bei PixiJS handelt es sich um eine sehr mächtige (und damit auch sehr große) JavaScript-Bibliothek zur Realisierung von 2D-Animationen und -Spielen.

Mit HTML5 wurde das Canvas-Element eingeführt.[2] In einem Canvas-Element können Grafiken gezeichnet werden. Aktuelle Browser unterstützen üblicherweise sowohl den CanvasRenderingContext2D zum Erstellen von 2D-Grafiken[3] als auch WebGL zum Erstellen von 3D-Grafiken (auf Basis von OpenGL) [4]. Die Erstellung von Grafiken mit WebGL ist wesentlich effizienter als die Erstellung von Grafiken mit dem CanvasRenderingContext2D, zumindest dann wenn, eine Grafikkarte zur Verfügung steht, deren Prozessor (GPU) OpenGL nativ unterstützt. Die ist insbesondere dann von Bedeutung, wenn Animationen erstellt werden, d. h., wenn 60 mal pro Sekunde (also alle 16,7 ms) eine neue Grafik im Canvas angezeigt werden soll.

PixiJS ist als Ersatz für den CanvasRenderingContext2D gedacht. Die Bibliothek stellt im Wesentlichen dieselben Grafik-Befehle wie der 2D-Kontext zur Verfügung, erstellt aber wann immer möglich, die 2D-Grafiken mit Hilfe von WebGL. Nur wenn diese Schnittstelle vom Browser nicht zur Verfügung gestellt wird, erfolgt als Fallback das Rendering mit Hilfe des 2D-Kontextes. Dies hat allerdings meist einen deutlichen Performanz-Einbruch zur Folge.

Aufgaben

Laden Sie das leere Projekt WK_Ball02_Empty auf Ihren Rechner. Installieren Sie aber nicht die Node.js-Module, das machen Sie später. Sie finden das leere Projekt im Repository-Pfad https://glossar.hs-augsburg.de/beispiel/tutorium/es6 im Unterordner empty.

Erstellen Sie ein neues Projekt praktikum02 und kopieren Sie die Ordner src und web (samt Inhalt) sowie alle Dateien, die Sie im Wurzelverzeichnis des Projektes WK_Ball02_Empty finden mittels Crtl-/Apfel-C Crtl-/Apfel-V in Ihr eigenes Projekt. (Die Frage, ob WebStorm seinen eigenen File Watcher zum Übersetzen von ES6-Code in ES5-Code verwenden soll, beantworten Sie bitte mit „No“. Das erledigt Webpack für Sie.)

Nun können Sie in Ihrem eigenen Projekt die benötigten Node.js-Module installieren: npm i.

Sie können Ihr Projekt zur Übung auch im Subversion-Repository speichern. Das ist aber nicht so wichtig.

In Ihrem Projekt finden Sie wiederum mehrere Web-Anwendungen: index01.html verwendet die gepackte Version von app01.js, die ihrerseits das Spiel game01.js einbindet. Et cetera.

Schreiben Sie Ihre Lösungen der Aufgabe $i$ in die Datei game$i$.js. Am einfachsten ist es, wenn Sie jeweils die Lösung der vorangegangenen Aufgabe kopieren und diese Kopie dann weiterentwickeln.


Aufgabe 1

Diese Aufgabe entspricht Aufgabe 1 der Praktikumsaufgabe MMProg: Praktikum: WiSe 2017/18: GameLoop01: Lassen Sie die Eule horizontal vom linken bis zum rechten Fensterrand des Browsers fliegen.

Im Projekt WK_Ball02_Empty ist eine mögliche Lösung dieser Aufgabe bereits enthalten. Ihre Aufgabe ist es nun, sich die Unterschiede zur Lösung der ersten Praktikumsaufgabe WK_Ball01, die sich durch die Verwendung von PixiJS ergeben, klar zu machen.

app1.js

  • Es wird zusätzlich die JavaScript-Bibliothek pixi.js importiert.
  • Anstelle von GameLoop.js wird GameLoopPixi.js importiert. Dieses Modul verwendet die PixiJS-eigene GameLoop, stellt aber weiterhin sicher, dass Modell-Updates nach Möglichkeit stets genau 60 mal pro Sekunde erfolgen.vgl. Isaac Sukin: A Detailed Explanation of JavaScript Game Loops and Timing. Außerdem verzögert dieses Modul den Start der Modellberechnung um ein paar Frames, da PixiJS hier anscheinend teilweise etwas „warmläuft“ und diese Frames deutlich länger als 16,7 Millisekunden dauern können. Ohne die Verzögerung der Modellberechnung würde die Web-Anwendung etwas „ruckelig“ starten.
  • Das Modell der Bühne (stage) wird bereits in app1.js und nicht erst in game1.js definert, da es bereits bei der Definition des PixiJS-Applikations-Objekts benötigt wird.
  • Das Root-Objekt der PixiJS-Anwendung wird erstellt. Die wichtigsten Argumente sind die Breite und Höhe der Bühne sowie das Canvas-Element, in dem die Grafiken gezeichnet werden. (Wenn man der Anwendung kein Canvas-Element zuteilt, erstellt sie selbst eines, das man anschließend per JavaScript in das HTML-Dokument einfügen muss.) Darüber hinaus gibt es diverse weitere Optionen, wie z. B. die Festlegung, ob der Canvas transparent ist, damit der HTML-Hintergrund durchscheint.[5]
  • Das Spiel wird mit Hilfe einer Methode init initialisiert, bevor die Game-Loop gestartet weren kann. Das ist notwendig, da die Grafikobjekte, die später animiert werden sollen, zunächst erstellt werden müssen. In der ersten Praktikumsaufgabe wurde diese Tätigkeit per CSS (und nicht per JavaScript) erledigt.

game1.js

  • Das Modell der Bühne (v_stage) wird nur teilweise initialisiert. Die Breite und Höhe wird erst später von der Methode init festgelegt.
  • Die Variable v_owl wurde in v_ball umbenannt. Der neue Bezeichner betont den Modellaspekt des Objektes mehr (ein Ball hat einen Mittelpunkt und einen Radius), wohingegen der ursprüngliche Name den View-Aspekt („es wird eine Eule visualisiert“) deutlicher betont.
  • Das Objekt v_ball beinhalte schon die y-Koordinate und die y-Geschwindigkeit des Balls. In der ursprünglichen Aufgabe fehlten diese Attribute noch. Sie wurden erst in der zweiten Aufgabe („Eule vertikal fliegen lassen“) eingeführt. Außerdem wurde die Objektbreite (width) durch den Radius (r) ersetzt.
  • Der Ankerpunkt des Balls wurde von der linken obren Ecke der Eule ins Zentrum des Balls verschoben. Dies hat Auswirkungen auf die Implementierung der Kollissionserkennung und -behandlung.
  • Die Renderfunktion muss angepasst werden. In der ursprünglichen Aufgabe wurden CSS-Attribute des animierten DIV-Elements verändert. Nun müssen die PixiJS-Attribute

Quellen

  1. ↑ PixiJS v4: The HTML5 Creation Engine
  2. ↑ MDN web docs: Canvas API
  3. ↑ MDN web docs: CanvasRenderingContext2D
  4. ↑ MDN web docs: Einführung in WebGL
  5. ↑ PixiJS API Documentation: PIXI.Application
  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=MMProg:_Praktikum:_WiSe_2017/18:_Ball02&oldid=43775“