MMProg: Praktikum: WiSe 2018/19: Ball03 - Versionsgeschichte

Kowa am 2. Oktober 2019 um 06:30 Uhr

2019-10-02T06:30:18Z

← Nächstältere Version		Version vom 2. Oktober 2019, 06:30 Uhr
Zeile 1:		Zeile 1:
	{{MMProg:Praktikum:WiSe 2018/19:Menü}}		{{MMProg:Praktikum:WiSe 2018/19:Menü}}

	'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/ball/WK_Ball03/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Ball03.git Git-Repository])		'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/ball/WK_Ball03/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Ball03.git Git-Repository])
	==Ziel==		==Ziel==

Zeile 12:		Zeile 12:

	==Vorbereitung==		==Vorbereitung==
	Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/Ball03.git Ball03] in WebStorm.		Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de/kowa/Ball03.git Ball03] in WebStorm.
	Laden Sie anschließend mittels <code>npm i</code> alle benötigten Node.js-Module in das Projekt.		Laden Sie anschließend mittels <code>npm i</code> alle benötigten Node.js-Module in das Projekt.

Zeile 20:		Zeile 20:
	<source lang="javascript">		<source lang="javascript">
	git remote remove origin		git remote remove origin
	git remote add origin https://gitlab.multimedia.hs-augsburg.de~~:8888~~/BENUTZER/Ball03.git		git remote add origin https://gitlab.multimedia.hs-augsburg.de/BENUTZER/Ball03.git
	</source>		</source>

Zeile 75:		Zeile 75:

	===Aufgabe 1: Modularisierung ders Game-Moduls===		===Aufgabe 1: Modularisierung ders Game-Moduls===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app01</code>];		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app01</code>];
	unter <code>app01a</code> finden Sie eine Variante, in der das Update- und das Render-Modul nicht als Funktionsmodule, sondern als Klassenmodule realisiert wurden)		unter <code>app01a</code> finden Sie eine Variante, in der das Update- und das Render-Modul nicht als Funktionsmodule, sondern als Klassenmodule realisiert wurden)

Zeile 443:		Zeile 443:

	===Aufgabe 2: Konfiguration der Anwendung mittels JSON===		===Aufgabe 2: Konfiguration der Anwendung mittels JSON===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app02</code>];		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app02</code>];
	unter <code>app02a</code> finden Sie eine Variante, in der die Funktion <code>/wk/lib/util/concretize</code> verwendet wurde, um die Breite und Höhe des Browser-Fensters nachträglich in das JSON-Objekt einzufügen)		unter <code>app02a</code> finden Sie eine Variante, in der die Funktion <code>/wk/lib/util/concretize</code> verwendet wurde, um die Breite und Höhe des Browser-Fensters nachträglich in das JSON-Objekt einzufügen)

Zeile 581:		Zeile 581:

	===Aufgabe 3: Ersetzen der <code>Graphics</code>-View durch eine <code>Sprite</code>-View===		===Aufgabe 3: Ersetzen der <code>Graphics</code>-View durch eine <code>Sprite</code>-View===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app03</code>];		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app03</code>];
	unter <code>app02a</code> finden Sie eine Variante, in der zwar alle erlaubten Bilder in der <code>app.js</code> aufgeführt sind, aber nur diejenigen geladen werden, die in der Konfigurationsdatei unter <code>init.pixiImages</code> aufgelistet werden)		unter <code>app02a</code> finden Sie eine Variante, in der zwar alle erlaubten Bilder in der <code>app.js</code> aufgeführt sind, aber nur diejenigen geladen werden, die in der Konfigurationsdatei unter <code>init.pixiImages</code> aufgelistet werden)

Kowa am 3. Januar 2019 um 12:12 Uhr

2019-01-03T12:12:05Z

← Nächstältere Version		Version vom 3. Januar 2019, 12:12 Uhr
Zeile 386:		Zeile 386:
	In der Klasse <code>ViewCircle</code> muss noch die Methode <code>render</code> implementiert		In der Klasse <code>ViewCircle</code> muss noch die Methode <code>render</code> implementiert
	werden. Hier kann im Prinzip die Renderfunktion übernommen werden, die sich in der Datei		werden. Hier kann im Prinzip die Renderfunktion übernommen werden, die sich in der Datei
	<code>game.js</code> befindet. Man muss nur beachten, dass die Objekte <code>~~v_ball_view~~</code> und <code>v_ball</code>		<code>game.js</code> befindet. Man muss nur beachten, dass die Objekte <code>v_view_ball</code> und <code>v_ball</code>
	hier <code>this.sprite</code> und <code>this.model</code> heißen. Jetzt können und sollten Sie		hier <code>this.sprite</code> und <code>this.model</code> heißen. Jetzt können und sollten Sie
	einen '''Aufruf''' der Funktion <code>render</code> (genauer: <code>this.render</code>) als letzten Befehl in den		einen '''Aufruf''' der Funktion <code>render</code> (genauer: <code>this.render</code>) als letzten Befehl in den
Zeile 395:		Zeile 395:
	<source lang="javascript">		<source lang="javascript">
	const		const
	~~c_ball_view~~ =		c_view_ball =
	new ViewCircle		new ViewCircle
	( c_pixi_app,		( c_pixi_app,
Zeile 425:		Zeile 425:
	Initialisieren Sie in der Datei <code>app.js</code> im Anschluss an		Initialisieren Sie in der Datei <code>app.js</code> im Anschluss an
	die Konstanten-Definition den Renderer. Der Funktion <code>initRender</code>		die Konstanten-Definition den Renderer. Der Funktion <code>initRender</code>
	wird ein Array mit genau einem Element übergeben, das regelmäßig gerendert werden soll: <code>~~c_ball_view~~</code>.		wird ein Array mit genau einem Element übergeben, das regelmäßig gerendert werden soll: <code>c_view_ball</code>.

	<source lang="javascript">		<source lang="javascript">
	initRenderer([~~c_ball_view~~]);		initRenderer([c_view_ball]);
	</source>		</source>

Zeile 498:		Zeile 498:
	</source>		</source>

	Ersetzen Sie nun in den Konstruktoren der Objekte <code>c_model_stage</code>, <code>c_model_ball</code> und <code>~~c_ball_view~~</code> den darin enthaltenen JSON-Code durch den entsprechenden JSON-Code im Objekt <code>config</code>.		Ersetzen Sie nun in den Konstruktoren der Objekte <code>c_model_stage</code>, <code>c_model_ball</code> und <code>c_view_ball</code> den darin enthaltenen JSON-Code durch den entsprechenden JSON-Code im Objekt <code>config</code>.

	Testen Sie Ihre Anwendung und committen Sie die Änderungen, wenn alles läuft.		Testen Sie Ihre Anwendung und committen Sie die Änderungen, wenn alles läuft.
Zeile 596:		Zeile 596:
	** Importierte Bilder zum PixiJS-Loader hinzufügen.		** Importierte Bilder zum PixiJS-Loader hinzufügen.
	** Die Ressourcen asynchron '''im Rumpf''' der Init-Funktion laden.		** Die Ressourcen asynchron '''im Rumpf''' der Init-Funktion laden.
	** '''Danach''' ({{dh}} auch im Rumpf der Init-Funktion), das Objekt <code>~~c_ball_view~~</code> mittels des neuen Konstruktors <code>ViewCircleSprite</code> erzeugen (erst jetzt gibt es das Ressources-Objekt).		** '''Danach''' ({{dh}} auch im Rumpf der Init-Funktion), das Objekt <code>c_view_ball</code> mittels des neuen Konstruktors <code>ViewCircleSprite</code> erzeugen (erst jetzt gibt es das Ressources-Objekt).
	** Danach den Renderer initialisieren (erst jetzt existiert das zugehörige View-Objekt).		** Danach den Renderer initialisieren (erst jetzt existiert das zugehörige View-Objekt).

Kowa am 6. Dezember 2018 um 19:32 Uhr

2018-12-06T19:32:51Z

← Nächstältere Version		Version vom 6. Dezember 2018, 19:32 Uhr
Zeile 449:		Zeile 449:
	* Erstellen Sie eine Kopie des Ordners <code>src/js/app01</code> unter dem Namen <code>src/js/app02</code>.		* Erstellen Sie eine Kopie des Ordners <code>src/js/app01</code> unter dem Namen <code>src/js/app02</code>.
	* Erstellen Sie eine Kopie der Datei <code>src/index01.html</code> unter dem Namen <code>src/index02.html</code> und ändern Sie den Titel in dieser Datei entsprechend.		* Erstellen Sie eine Kopie der Datei <code>src/index01.html</code> unter dem Namen <code>src/index02.html</code> und ändern Sie den Titel in dieser Datei entsprechend.
	* Starten Sie gegebenenfalls <code>npm run watch</code> neu (Abbruch des ~~Watschers~~: <code>Strg-c</code> bzw. <code>Crtl-c</code>).		* Starten Sie gegebenenfalls <code>npm run watch</code> neu (Abbruch des Watchers: <code>Strg-c</code> bzw. <code>Crtl-c</code>).

	Erstellen Sie nun die [[JSON]]-Datei <code>src/js/app02/config/config.json</code>		Erstellen Sie nun die [[JSON]]-Datei <code>src/js/app02/config/config.json</code>

Kowa: /* Aufgabe 2: Konfiguration der Anwendung mittels JSON */

2018-12-06T14:55:37Z

Aufgabe 2: Konfiguration der Anwendung mittels JSON

← Nächstältere Version		Version vom 6. Dezember 2018, 14:55 Uhr
Zeile 447:		Zeile 447:

	Sie sollten zunächst eine Kopie Ihrer Web-App erstellen:		Sie sollten zunächst eine Kopie Ihrer Web-App erstellen:
	* Erstellen Sie eine Kopie des Ordners <code>src/js/app01</code> unter dem ~~Namnen~~ <code>src/js/app02</code>.		* Erstellen Sie eine Kopie des Ordners <code>src/js/app01</code> unter dem Namen <code>src/js/app02</code>.
	* Erstellen Sie eine Kopie der Datei <code>src/index01.html</code> unter dem Namen <code>src/index02.html</code> und ändern Sie den Titel in dieser Datei entsprechend.		* Erstellen Sie eine Kopie der Datei <code>src/index01.html</code> unter dem Namen <code>src/index02.html</code> und ändern Sie den Titel in dieser Datei entsprechend.
	* Starten Sie gegebenenfalls <code>npm run watch</code> neu (Abbruch des Watschers: <code>Strg-c</code> bzw. <code>Crtl-c</code>).		* Starten Sie gegebenenfalls <code>npm run watch</code> neu (Abbruch des Watschers: <code>Strg-c</code> bzw. <code>Crtl-c</code>).

Kowa: /* Aufgabe 3: Ersetzen der Graphics-View durch eine Sprite-View */

2018-12-06T12:37:10Z

Aufgabe 3: Ersetzen der Graphics-View durch eine Sprite-View

← Nächstältere Version		Version vom 6. Dezember 2018, 12:37 Uhr
Zeile 581:		Zeile 581:

	===Aufgabe 3: Ersetzen der <code>Graphics</code>-View durch eine <code>Sprite</code>-View===		===Aufgabe 3: Ersetzen der <code>Graphics</code>-View durch eine <code>Sprite</code>-View===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app03</code>];		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app03</code>];
	unter <code>app02a</code> finden Sie eine Variante, in der zwar alle erlaubten Bilder in der <code>app.js</code> aufgeführt sind, aber nur diejenigen geladen werden, die in der Konfigurationsdatei unter <code>init.pixiImages</code> aufgelistet werden)		unter <code>app02a</code> finden Sie eine Variante, in der zwar alle erlaubten Bilder in der <code>app.js</code> aufgeführt sind, aber nur diejenigen geladen werden, die in der Konfigurationsdatei unter <code>init.pixiImages</code> aufgelistet werden)

Kowa: /* Aufgabe 2: Konfiguration der Anwendung mittels JSON */

2018-12-06T12:36:43Z

Aufgabe 2: Konfiguration der Anwendung mittels JSON

← Nächstältere Version		Version vom 6. Dezember 2018, 12:36 Uhr
Zeile 443:		Zeile 443:

	===Aufgabe 2: Konfiguration der Anwendung mittels JSON===		===Aufgabe 2: Konfiguration der Anwendung mittels JSON===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app02</code>];		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app02</code>];
	unter <code>app02a</code> finden Sie eine Variante, in der die Funktion <code>/wk/lib/util/concretize</code> verwendet wurde, um die Breite und Höhe des Browser-Fensters nachträglich in das JSON-Objekt einzufügen)		unter <code>app02a</code> finden Sie eine Variante, in der die Funktion <code>/wk/lib/util/concretize</code> verwendet wurde, um die Breite und Höhe des Browser-Fensters nachträglich in das JSON-Objekt einzufügen)

Kowa: /* Aufgabe 1: Modularisierung ders Game-Moduls */

2018-12-06T12:35:47Z

Aufgabe 1: Modularisierung ders Game-Moduls

← Nächstältere Version		Version vom 6. Dezember 2018, 12:35 Uhr
Zeile 75:		Zeile 75:

	===Aufgabe 1: Modularisierung ders Game-Moduls===		===Aufgabe 1: Modularisierung ders Game-Moduls===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app01</code>];		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app01</code>];
	unter <code>app01a</code> finden Sie eine Variante, in der das Update- und das Render-Modul nicht als Funktionsmodule, sondern als Klassenmodule realisiert wurden)		unter <code>app01a</code> finden Sie eine Variante, in der das Update- und das Render-Modul nicht als Funktionsmodule, sondern als Klassenmodule realisiert wurden)

Kowa am 6. Dezember 2018 um 12:34 Uhr

2018-12-06T12:34:31Z

← Nächstältere Version		Version vom 6. Dezember 2018, 12:34 Uhr
Zeile 75:		Zeile 75:

	===Aufgabe 1: Modularisierung ders Game-Moduls===		===Aufgabe 1: Modularisierung ders Game-Moduls===
	(Musterlösung: [~~git@~~gitlab.multimedia.hs-augsburg.de:kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app01</code>];		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app01</code>];
	unter <code>app01a</code> finden Sie eine Variante, in der das Update- und das Render-Modul nicht als Funktionsmodule, sondern als Klassenmodule realisiert wurden)		unter <code>app01a</code> finden Sie eine Variante, in der das Update- und das Render-Modul nicht als Funktionsmodule, sondern als Klassenmodule realisiert wurden)

Zeile 443:		Zeile 443:

	===Aufgabe 2: Konfiguration der Anwendung mittels JSON===		===Aufgabe 2: Konfiguration der Anwendung mittels JSON===
	(Musterlösung: [~~git@~~gitlab.multimedia.hs-augsburg.de:kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app02</code>];		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app02</code>];
	unter <code>app02a</code> finden Sie eine Variante, in der die Funktion <code>/wk/lib/util/concretize</code> verwendet wurde, um die Breite und Höhe des Browser-Fensters nachträglich in das JSON-Objekt einzufügen)		unter <code>app02a</code> finden Sie eine Variante, in der die Funktion <code>/wk/lib/util/concretize</code> verwendet wurde, um die Breite und Höhe des Browser-Fensters nachträglich in das JSON-Objekt einzufügen)

Zeile 581:		Zeile 581:

	===Aufgabe 3: Ersetzen der <code>Graphics</code>-View durch eine <code>Sprite</code>-View===		===Aufgabe 3: Ersetzen der <code>Graphics</code>-View durch eine <code>Sprite</code>-View===
	(Musterlösung: [~~git@~~gitlab.multimedia.hs-augsburg.de:kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app03</code>];		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:kowa/WK_Ball03.git Gitlab: <code>WK_Ball03</code>, <code>app03</code>];
	unter <code>app02a</code> finden Sie eine Variante, in der zwar alle erlaubten Bilder in der <code>app.js</code> aufgeführt sind, aber nur diejenigen geladen werden, die in der Konfigurationsdatei unter <code>init.pixiImages</code> aufgelistet werden)		unter <code>app02a</code> finden Sie eine Variante, in der zwar alle erlaubten Bilder in der <code>app.js</code> aufgeführt sind, aber nur diejenigen geladen werden, die in der Konfigurationsdatei unter <code>init.pixiImages</code> aufgelistet werden)

Kowa: /* Aufgabe 2: Konfiguration der Anwendung mittels JSON */

2018-12-06T12:32:46Z

Aufgabe 2: Konfiguration der Anwendung mittels JSON

@@ Zeile 579: / Zeile 579: @@
 Sie sehen, dass hier der Funktion <code>concretize</code> nicht nur das zu modifizierende
 JSON-Objekt übergeben wird, sondern auch ein so genanntes Environment-Objekt (''environment'' = Umgebung, Umwelt, Ausstattung), das festlegt, durch welche Werte die beiden Strings <code>"@right"</code> und <code>"@bottom"</code> ersetzt werden sollen.
 ==Quellen==
 <references/>

Kowa am 6. Dezember 2018 um 11:16 Uhr

2018-12-06T11:16:51Z

Änderungen zeigen