GlossarWiki:Bücher/Multimedia-Programmierung/WiSe2018
aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Multimedia-Programmierung – Skript zur Vorlesung im WiSe 2018/2019
Autor: Wolfgang Kowarschick
- Vorlesung
- Theorie
- UML-Diagramme: Typische Fehler
- Praktikum
- Einrichten einer Entwicklungsumgebung für Web-Anwendungen
- Hello-World-Tutorium
- Praktikumsaufgaben WiSe 2018/19
- HowTo (eine Liste mit kurzen Anleitungen, um Praktikums-/Tutoriums-Probleme zu lösen)
- Beispiele
- Use Cases und Datenmodell des Spiels Pong
- Implementierung von Pong (index.html)
- Version 2 von Pong, Physics mit matter-js (index.html)
- Implementierung von TicTacToe (index.html)
- Implementierung einer beweglichen Bühne (index.html)
- Implementierung eines interaktiven Spielbretts (index.html)
- WK_Ball04: Erweiterungen der Ball-Aufgabe
- index01.html: Wie index03.html von Teil 3 der Ball-Aufgabe, allerdings mit Hintergrundbild via PixiJS. Hinsichtlich der Modularisierung ist die Implementierung deutlich näher an den Beispielen Pong, TicTacToe und MovingStage – siehe nachfolgend.
- index02.html: Anstelle eines Vogels fliegen viele Vögel, wobei die Größe und die Startposition zufällig gewählt werden. Die Anwendung ist ähnlich zu index04c.html von Teil 2 der Ball-Aufgabe, allerdings modularisiert, aber ohne Kollisionserkennung und -behandlung von zwei Vögeln. Redundanter Code wurde mittels Vererbung aus den View-Modulen entfernt (gemäß dem Motto „Keep yout code DRY“).
- index03.html: Dies ist die gleiche Anwendung wie index02.html, allerdings werden die Vögel nicht mehr statisch mittels der Konfigurationsdatei
config.json
(und der Funktionconcretize
) erzeugt, sondern dynamisch mittels der KlasseItemBuilder
, die inapp03
undapp04
desMovingStage
-Beispiels eingeführt wurde. Damit können Vögel später auch wieder gelöscht werden. - index04.html: Dies ist eine Erweiterung Anwendung wie index03.html. Bei einem Klick auf einen Vogel wird dieser aus der Anwendung mittels der
remove
-Methode der Builderklasse entfernt. Zum Einsatz kommt das PixiJS-Ereignispointerdown
, das auch schon inTicTacToe
verwendet wurde. - index05.html: Dies ist die gleiche Anwendung wie die Anwendung index04.html. Es werden allerdings in den Views nicht nur Tux und Owl, sondern auch „Moorhühner“ angezeigt. Das besondere an den Moorhühnern ist, dass sie nicht einzeln, sondern mittels eines so genannten Spritesheets in die Anwendung geladen werden:
. Dies bietet Performanzvorteile beim Laden der Anwendung, wenn viele Bilder zum Einsatz kommen. Das SpriteSheet wurde samt der zugehörigen JSON-Datei, die die Position der einzelnen Bilder im Sheet beschreibt, mittels TexturePacker erstellt.
- index06.html: Dies ist die gleiche Anwendung wie die Anwendung index05.html. Es werden allerdings nur noch Moorhühner angezeigt. Und diese werden mit Hilfe der PixiJS-Klasse
AnimatedSprite
animiert. (Da PixiJS v5 sich noch im Alpha-Stadion befindet, wird noch die KlassePIXI.extras.AnimatedSprite
verwendet, die erst ab Version 5 als “deprecated” gilt.) Darüber hinaus wurde für die Moorhühner mit Hilfe vonPhysicsEditor
ein Polygon erstellt, das den Rand der Vögel beschreibt. Dieses Polygon wird dem PixiJS-Sprite alshitArea
übergeben. Damit wird erreicht, dass ein Klick auf ein Moorhuhn nur dann von PixiJS registriert wird, wenn man tatsächlich das Huhn (d. h. das Moorhuhn-Bild) mit der Maus anklickt.
- Die aktuelle Version der Bibliothek WKLib (es kann nicht garantiert werden, dass in allen Vorlesungsbeispielen stets die aktuellste Version dieser Bibliothek enthalten ist)