MMProg: Praktikum: WiSe 2017/18: Ball02
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) |
Inhalt | Game Loop 01 | Ball 02 | Ball 03 | Ball 03b | Pong 01
Musterlösung: SVN-Repository
Ziel
Ziel dieser Prktikumsaufgabe ist es, die “HTML5 Creation Engine” PixiJS v4 kennenzulernen. 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.[1]
In einem Canvas-Element können Grafiken gezeichnet werden. Von aktuellen Browsern werden üblicherweise der CanvasRenderingContext2D
zum Erstellen von 2D-Grafiken[2] und
WebGL zur Erstellung von 3D-Grafiken (auf Basis von OpenGL) [3] unterstützt. 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.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
