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

Kowa am 2. Oktober 2019 um 06:39 Uhr

2019-10-02T06:39:58Z

← Nächstältere Version		Version vom 2. Oktober 2019, 06:39 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_Ball02/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Ball02.git Git-Repository])		'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/ball/WK_Ball02/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Ball02.git Git-Repository])
	==Vorbereitung==		==Vorbereitung==
	Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/Ball02.git Ball02] in WebStorm.		Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de/kowa/Ball02.git Ball02] 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 11:		Zeile 11:
	<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/Ball02.git		git remote add origin https://gitlab.multimedia.hs-augsburg.de/BENUTZER/Ball02.git
	</source>		</source>

Franzih: /* Aufgabe 2 */

2018-11-30T10:30:00Z

Aufgabe 2

← Nächstältere Version		Version vom 30. November 2018, 10:30 Uhr
Zeile 81:		Zeile 81:

	Lösen Sie Aufgabe 2 der [[MMProg: Praktikum: WiSe 2018/19: Ball01#Aufgabe 2\|ersten Praktikumsaufgabe]] mit Hilfe von PixiJS. Das heißt, ändern Sie Ihre Version von		Lösen Sie Aufgabe 2 der [[MMProg: Praktikum: WiSe 2018/19: Ball01#Aufgabe 2\|ersten Praktikumsaufgabe]] mit Hilfe von PixiJS. Das heißt, ändern Sie Ihre Version von
	Aufgabe 2, die Sie gerade durch Kopieren erstellt haben, so ba, dass Folgendes passiert:		Aufgabe 2, die Sie gerade durch Kopieren erstellt haben so ab, dass Folgendes passiert:
	''Lassen Sie den Ball nicht waagerecht, sondern in der horizontalen Mitte des Browserfensters senkrecht von Fensterrand zu Fensterrand fliegen.'' Anstelle einer Eule verwenden Sie bitte analog zu Aufgabe 1 einen farbigen „Ball“ mit Rand.		''Lassen Sie den Ball nicht waagerecht, sondern in der horizontalen Mitte des Browserfensters senkrecht von Fensterrand zu Fensterrand fliegen.'' Anstelle einer Eule verwenden Sie bitte analog zu Aufgabe 1 einen farbigen „Ball“ mit Rand.

Kowa am 28. November 2018 um 18:36 Uhr

2018-11-28T18:36:56Z

← Nächstältere Version		Version vom 28. November 2018, 18:36 Uhr
Zeile 7:		Zeile 7:

	Sie können Ihr Projekt zur Übung auch in Ihrem Git-Repository speichern. Das ist aber nicht so wichtig.		Sie können Ihr Projekt zur Übung auch in Ihrem Git-Repository speichern. Das ist aber nicht so wichtig.
	Falls Sie da machen möchten, müssen Sie es zuvor von meinem (schreibgeschützten) Repository lösen:		Falls Sie dies machen möchten, müssen Sie es zuvor von meinem (schreibgeschützten) Repository lösen:

	<source lang="javascript">		<source lang="javascript">

Kowa am 28. November 2018 um 16:19 Uhr

2018-11-28T16:19:00Z

← Nächstältere Version		Version vom 28. November 2018, 16:19 Uhr
Zeile 97:		Zeile 97:

	<source lang="javascript">		<source lang="javascript">
	import ~~img_ball~~ from '../../img/owl-150.png';		import imgBall from '../../img/owl-150.png';
	</source>		</source>
	oder		oder
	<source lang="javascript">		<source lang="javascript">
	import ~~img_ball~~ from '../../img/tux-150.png';		import imgBall from '../../img/tux-150.png';
	</source>		</source>

	(Genau genommen weisen Sie webpack mit dieser Anweisung an, das Grafikobjekt im Ordner <code>web/img</code> zu erzeugen und die zugehörige URL in der		(Genau genommen weisen Sie webpack mit dieser Anweisung an, das Grafikobjekt im Ordner <code>web/img</code> zu erzeugen und die zugehörige URL in der
	Variablen <code>~~img_ball~~</code> zu speichern. Ohne webpack müssten Sie das Bild von Hand in diesem Ordner ablegen und dem Spriteobjekt – siehe unten – die korrekte URL übergeben.)		Variablen <code>imgBall</code> zu speichern. Ohne webpack müssten Sie das Bild von Hand in diesem Ordner ablegen und dem Spriteobjekt – siehe unten – die korrekte URL übergeben.)

	Darüber hinaus müssen Sie dafür sorgen, das von <code>pixi.js</code> nicht mehr die Klasse <code>Graphics</code>,		Darüber hinaus müssen Sie dafür sorgen, das von <code>pixi.js</code> nicht mehr die Klasse <code>Graphics</code>,
Zeile 116:		Zeile 116:
	let		let
	...		...
	v_ball_view = Sprite.fromImage(~~img_ball~~); // ~~img_ball~~ contains the URL of the image		v_ball_view = Sprite.fromImage(imgBall); // imgBall contains the URL of the image
	</source>		</source>

Zeile 248:		Zeile 248:
	Fügen Sie außerdem folgenden Import-Befehl in die Datei <code>app03.js</code> ein:		Fügen Sie außerdem folgenden Import-Befehl in die Datei <code>app03.js</code> ein:
	<source lang="javascript">		<source lang="javascript">
	import ~~img_ball~~ from '/img/tux-150.png';		import imgBall from '/img/tux-150.png';
	</source>		</source>

Zeile 255:		Zeile 255:
	Wie Sie wissen, bewirkt dieser Import-Befehl, dass die		Wie Sie wissen, bewirkt dieser Import-Befehl, dass die
	URL des Bildes <code>/img/tux-150.png</code> in der Variablen		URL des Bildes <code>/img/tux-150.png</code> in der Variablen
	<code>~~img_ball~~</code> gespeichert ist (und das Bild in den		<code>imgBall</code> gespeichert ist (und das Bild in den
	Web-Ordner kopiert wird).		Web-Ordner kopiert wird).

	Fügen Sie nun vor der Initfunktion den folgenden Befehl ein.		Fügen Sie nun vor der Initfunktion den folgenden Befehl ein.
	<source lang="javascript">		<source lang="javascript">
	loader.add('~~img_ball~~', ~~img_ball~~);		loader.add('imgBall', imgBall);
	</source>		</source>

Zeile 335:		Zeile 335:
	den Befehl		den Befehl
	<source lang="javascript">		<source lang="javascript">
	v_ball_view = new Sprite(p_resources['~~img_ball~~'].texture);		v_ball_view = new Sprite(p_resources['imgBall'].texture);
	</source>		</source>

	Es wird, wie auch schon in den Aufgaben 2a und 3, ein <code>Sprite</code>-Objekt		Es wird, wie auch schon in den Aufgaben 2a und 3, ein <code>Sprite</code>-Objekt
	erstellt. Diesmal wird jedoch das Bild nicht aus einer Datei gelesen (<code>Sprite.fromImage...)</code>)		erstellt. Diesmal wird jedoch das Bild nicht aus einer Datei gelesen (<code>Sprite.fromImage...)</code>)
	sondern aus dem vom Loader erstellten Ressourcen-Objekt unter dem Namen <code>'~~img_ball~~'</code>		sondern aus dem vom Loader erstellten Ressourcen-Objekt unter dem Namen <code>'imgBall'</code>
	extrahiert. Warum man nicht direkt das Objekt <code>p_resources['~~img_ball~~']</code> verwenden kann, sondern dessen Textur verwenden muss,		extrahiert. Warum man nicht direkt das Objekt <code>p_resources['imgBall']</code> verwenden kann, sondern dessen Textur verwenden muss,
	ist eines von den unergründlichen Geheimnissen von PixiJS.		ist eines von den unergründlichen Geheimnissen von PixiJS.

Kowa: /* Aufgabe 3a */

2018-11-23T20:27:37Z

Aufgabe 3a

← Nächstältere Version		Version vom 23. November 2018, 20:27 Uhr
Zeile 148:		Zeile 148:
	([http://pixijs.download/dev/docs/PIXI.loaders.Loader.html MDN web doc: PIXI.loaders.Loader ], [https://github.com/englercj/resource-loader GitHub: resource-loader])<ref>[http://pixijs.download/dev/docs/PIXI.loaders.Loader.html PixiJS API Documentation: PIXI.loaders.Loader]</ref><ref>[https://github.com/englercj/resource-loader GitHub: resource-loader		([http://pixijs.download/dev/docs/PIXI.loaders.Loader.html MDN web doc: PIXI.loaders.Loader ], [https://github.com/englercj/resource-loader GitHub: resource-loader])<ref>[http://pixijs.download/dev/docs/PIXI.loaders.Loader.html PixiJS API Documentation: PIXI.loaders.Loader]</ref><ref>[https://github.com/englercj/resource-loader GitHub: resource-loader
	]</ref>.		]</ref>.

			Zunächst ein wenige Theorie:

	====Asynchronität in EcmaScript 2017====		====Asynchronität in EcmaScript 2017====
	~~Zunächst ein wenige Theorie:~~

	Eine wesentliche Änderung, die sich wegen der Asynchronität ergibt, ist, dass der Ladevorgang später endet als die Ausführung der Initialisierungsfunktion.		Eine wesentliche Änderung, die sich wegen der Asynchronität ergibt, ist, dass der Ladevorgang später endet als die Ausführung der Initialisierungsfunktion.

Kowa: /* Aufgabe 2 */

2018-11-23T18:01:15Z

Aufgabe 2

← Nächstältere Version		Version vom 23. November 2018, 18:01 Uhr
Zeile 77:		Zeile 77:
	* Kopieren Sie <code>src/js/game/game01.js</code> nach <code>src/js/game/game02.js</code>		* Kopieren Sie <code>src/js/game/game01.js</code> nach <code>src/js/game/game02.js</code>
	* Kopieren Sie <code>src/js/app01.js</code> nach <code>src/js/app02.js</code> und ersetzen Sie in dieser Datei <code>'./game/game01.js'</code> durch <code>'./game/game02.js'</code>.		* Kopieren Sie <code>src/js/app01.js</code> nach <code>src/js/app02.js</code> und ersetzen Sie in dieser Datei <code>'./game/game01.js'</code> durch <code>'./game/game02.js'</code>.
	* Kopieren Sie <code>src/index01.js</code> nach <code>src/index02.js</code> und ersetzen Sie in dieser Datei <code><title>Ball02 (app01)</title></code> durch <code><title>Ball02 (app02)</title></code>. (Einen ~~verweis~~ auf die JavaScript-Datei <code>app02.js</code> gibt es in dieser Datei nicht. Der korrekte Verweis wird von webpack automatisch beim Erstellen der Dateien des Web-Ordners injiziert.)		* Kopieren Sie <code>src/index01.html</code> nach <code>src/index02.html</code> und ersetzen Sie in dieser Datei <code><title>Ball02 (app01)</title></code> durch <code><title>Ball02 (app02)</title></code>. (Einen Verweis auf die JavaScript-Datei <code>app02.js</code> gibt es in dieser Datei nicht. Der korrekte Verweis wird von webpack automatisch beim Erstellen der Dateien des Web-Ordners injiziert.)
	* Starten Sie <code>npm run watch</code> neu, damit auch die neu erstellten Dateien automatisch von webpack übersetzt werden.		* Starten Sie <code>npm run watch</code> neu, damit auch die neu erstellten Dateien automatisch von webpack übersetzt werden.

Kowa am 23. November 2018 um 17:16 Uhr

2018-11-23T17:16:37Z

← Nächstältere Version		Version vom 23. November 2018, 17:16 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_Ball02/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Ball02.git Git-Repository]~~, '''noch nicht online'''~~)		'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/ball/WK_Ball02/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Ball02.git Git-Repository])
	==Vorbereitung==		==Vorbereitung==
	Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/Ball02.git Ball02] in WebStorm.		Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/Ball02.git Ball02] in WebStorm.

Kowa am 23. November 2018 um 09:17 Uhr

2018-11-23T09:17:53Z

← Nächstältere Version		Version vom 23. November 2018, 09:17 Uhr
Zeile 120:		Zeile 120:

	In der Initfunktion wird nur noch der Ankerpunkt in die Mitte des Viewobjekts verschoben.		In der Initfunktion wird nur noch der Ankerpunkt in die Mitte des Viewobjekts verschoben.
			Sie müssen die vier Befehle zur ERzeugung des Grafikobjektes also löschen.
	Dieses Objekt wird dann wieder zur PixiJS-Bühne hinzugefügt.		Dieses Objekt wird dann wieder zur PixiJS-Bühne hinzugefügt.

	<source lang="javascript">		<source lang="javascript">
	v_ball_view.anchor.set(0.5); // center the anchor		v_ball_view.anchor.set(0.5); // center the anchor
	p_pixi_app.addChild(v_ball_view);		p_pixi_app.stage.addChild(v_ball_view);
	</source>		</source>

Kowa: /* Aufgabe 2a */

2018-11-23T09:13:05Z

Aufgabe 2a

← Nächstältere Version		Version vom 23. November 2018, 09:13 Uhr
Zeile 124:		Zeile 124:
	<source lang="javascript">		<source lang="javascript">
	v_ball_view.anchor.set(0.5); // center the anchor		v_ball_view.anchor.set(0.5); // center the anchor
	p_pixi_app..addChild(v_ball_view);		p_pixi_app.addChild(v_ball_view);
	</source>		</source>

Kowa: /* Aufgabe 2a */

2018-11-23T09:12:32Z

Aufgabe 2a

← Nächstältere Version		Version vom 23. November 2018, 09:12 Uhr
Zeile 124:		Zeile 124:
	<source lang="javascript">		<source lang="javascript">
	v_ball_view.anchor.set(0.5); // center the anchor		v_ball_view.anchor.set(0.5); // center the anchor
	~~p_stage_view~~.addChild(v_ball_view);		p_pixi_app..addChild(v_ball_view);
	</source>		</source>