MMProg: Praktikum: WiSe 2017/18: GameLoop01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 99: | Zeile 99: | ||
v_owl.vx = Math.abs(v_owl.vx); | v_owl.vx = Math.abs(v_owl.vx); | ||
} | } | ||
if (v_owl.x >= v_stage.right) | if (v_owl.x >= v_stage.right - v_owl.width) | ||
{ | { | ||
v_owl.vx = -Math.abs(v_owl.vx); | v_owl.vx = -Math.abs(v_owl.vx); | ||
Zeile 123: | Zeile 123: | ||
v_owl.vx = Math.abs(v_owl.vx); | v_owl.vx = Math.abs(v_owl.vx); | ||
} | } | ||
if (v_owl.x >= v_stage.right) | if (v_owl.x >= v_stage.right - v_owl.width) | ||
{ | { | ||
v_owl.x = v_stage.right - v_owl.width; | v_owl.x = v_stage.right - v_owl.width; |
Version vom 26. Oktober 2017, 14:11 Uhr
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
Vorbereitung
Im SVN-Repository finden Sie zwei WebStorm-Projekte zum Thema GameLoop:
Sie können diese Projekte folgendermaßen auf Ihrem Rechner installieren:
VCS
→Checkout from Version Control
→Subversion
- Sofern noch nicht geschehen: Klick auf das grüne Plus-Symbol → Repository URL:
https://glossar.hs-augsburg.de/beispiel/tutorium/es6
- Klick auf die Pfeilspitze vor diesem Pfad → Klick auf die Pfeilspitze vor
game_loop
→ Klick aufWK_GameLoop01
bzw.WK_GameLoop02
Checkout
- Speichern Sie das Projekt irgendwo auf Ihrem Rechner. Achtung: Speichern Sie das Projekt nicht innerhalb eines anderen Projektes oder innerhalb eines Ordners, der bereits unter SVN-Kontrolle steht.
- Öffnen Sie das Projekt und geben Sie im WebStorm-Terminal
npm install
(oder kurznpm i
) ein, um alle benötigten Node.js-Module zu installieren.
Machen Sie sich mit den Projekten vertraut. Die Web-Anwendung src/js/app
des zweiten Projektes dient als Ausgangsbasis für diese Praktikumsaufgabe.
Im ersten Beispiel finden Sie diverse Game-Loop-Varianten. Schrittweise werden potentielle Probleme behoben. Dieses Projekt verfolgt das didaktische Ziel, Ihnen die Probleme und potentielle Lösungen im Zusammenhang mit JavaScript-Animationen zu verdeutlichen.
Im zweiten Beispiel wurde eine einfache Game-Loop-Klasse realisiert, die sie für dieses Praktikum nutzen können und sollten. Diese Klasse basiert auf den Ergebnissen des ersten Projektes, stellt aber – im Gegensatz zu einigen Web-Anwendungen des ersten Projekt – bislang keine Informationen über die aktuelle Frame-Rate bereit. Dies ist aber für diese Praktikumsaufgabe nicht von Interesse.
Aufgaben
Laden Sie das leere Projekt WK_GameLoop02_Empty auf IHren Rechner.
Installieren Sie diesmal aber nicht die Node.js-Module, das machen Sie später. Sie finden das leere Projekt im zuvor aktivierten
Repository-Pfad https://glossar.hs-augsburg.de/beispiel/tutorium/es6
im Unterordner empty
.
Erstellen Sie ein neues Projekt praktikum01
und kopieren Sie alle Dateien, die Sie im Projekt WK_GameLoop02_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 nit so wichtig.
In Ihrem Projekt finden Sie nun 10 Web-Anwendungen vor: index01.html
verwendet die gepackte Version von app01.js
,
die ihrerseits das Spiel game01.js
einbindet. index02.html
, index03.html
etc. sind analog aufgebaut.
Wenn Sie irgendeine dieser Anwendungen im Browser öffnen, sehen Sie eine Eule in der linken oberen Bildschirmecke. Diese sollen
sie auf unterschiedliche Art und Weise animieren. Lösen Sie jede der folgenden Aufgaben in einer der vorgegebenen Apps.
Scheuen Sie sich nicht davor, eigene Experimente durchzuführen. Wenn die vorgegebenen Apps nicht ausreichen. legen Sie einfach
noch ein paar an. (Vergessen Sie in diesem Fall nicht, webpack.config.js
entsprechend zu erweitern.)
Aufgabe 1
Lassen Sie die Eule horizontal vom linken bis zum rechten Fensterrand des Browsers fliegen.
Tipp: http://ryanve.com/lab/dimensions/
Berücksichtigen Sie, dass die Eule 150 Pixel breit ist und das der Ankerpunkt im linken oberen Eck des zugehörigen Bildes liegt. Sie müssen daher im Eulen-Objekt auch die Breite der Eule speichern und diese Breite bei der Kollissionserkennung und -behandlung berücksichtigen.
Beachten Sie bitte, dass Sie zur Lösung dieser Aufgabe einfach die Datei game01.js
anpassen müssen.
Lassen Sie sich durch den Code der Datei owl.js
aus dem Beispiel WK_GameLoop02
inspirieren.
(Sie können auch owl_interpolate.js
verwenden, aber das verwirrt Sie vermutlich zurzeit mehr, als dass es
Inhen nützt.) Eine Reset-Funktion, wie sie im genannten Beispiel definiert wird, brauchen Sie nicht zu implementieren,
da Sie das „Spiel“ nicht mit Hilfe von irgendwelchen Buttons anhalten und zurücksetzen werden. Dies gilt auch für alle folgenden
Aufgaben.
Vergessen Sie grunt
oder besser noch grunt watch nicht. :-)
Aufgabe 2
Lassen Sie die Eule nicht waagerecht, sondern in der horizontalen Mitte des Browserfesnters senkrecht von Fenstrrand zu Festerrand fliegen.
Um die Aufgabe zu lösen, müssen Sie für die Eule zusätzlich eine y-Position und eine y-Geschwindigkeit definieren. Die Berechnung der aktuellen y-Position funktioniert anlaog zur Berechnung der aktuellen x-Position.
Vergessen Sie nicht auch die Kollissionserkennung und -behandlung für die beiden Bildschirmseiten top
und botton
zu implementieren.
Und Sie müssen natürlich die Render-Funktion anpassen, sodass die aktuelle y-Position beim Rendern auch berücksichtigt wird.
Aufgabe 3
Lassen Sie die Eule von der Brwosersmitte aus schräg über den Bildschirm fliegen. In x-Richtung soll sie doppelt so schnell sein (200 Pixel/s) wie in y-Richtung (100 Pixel/s).
Aufgabe 4
Setzen Sie die x-Start-Position der Eule auf -100
und starten Sie die Web-App. Den Effekt, den Sie sehen, nennt
man Penetration. Die Eule hängt in der Wand fest, da Sie in einem Schritt nicht den Kollissionsbereich
(die linke Wand verässt). Daher besteht die kollission fort und im nächsten Schritt ändert sie wieder IHre Flugrichtung.
Verbessern Sie das, indem Sie die Kollisionserkennung und -behandlung verbessern:
if (v_owl.x <= v_stage.left)
{
v_owl.vx = Math.abs(v_owl.vx);
}
if (v_owl.x >= v_stage.right - v_owl.width)
{
v_owl.vx = -Math.abs(v_owl.vx);
}
Passen Sie die Kollisionserkennung und -behandlung in y-Richtung analog an.
Sie können und sollten sogar noch einen Schritt weiter gehen und die Eule wieder zurück auf die Bühne schieben, wenn Sie in die Wand eingedrungen ist. In die Wand einzudringen ist zwar physikalisch nicht möglich, aber leider in einer Simulation der physikalischen Welt nur schwer zu vermeiden, da die Position nur alle 16,7 ms berechnet wird. War die Eule zu einem Zeitpunkt noch vor der Mauer, kann Sie beim nächsten Schritt schon drinnen stecken. Insbesondere bei sehr schnellen Objekten kann das dann zu PEnetrations-Effekten führen.
Also schieben Sie die Eule besser zurück auf die Bühne.
if (v_owl.x <= v_stage.left)
{
v_owl.x = v_stage.left;
v_owl.vx = Math.abs(v_owl.vx);
}
if (v_owl.x >= v_stage.right - v_owl.width)
{
v_owl.x = v_stage.right - v_owl.width;
v_owl.vx = -Math.abs(v_owl.vx);
}
Passen Sie die Kollisionserkennung und -behandlung in y-Richtung wiederum analog an.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)