MMProg: Praktikum: WiSe 2017/18: Ball02 - Versionsgeschichte

Kowa am 1. März 2023 um 12:51 Uhr

2023-03-01T12:51:56Z

← Nächstältere Version		Version vom 1. März 2023, 12:51 Uhr
Zeile 28:		Zeile 28:

	Erstellen Sie ein neues Projekt <code>praktikum02</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)		Erstellen Sie ein neues Projekt <code>praktikum02</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)
	sowie alle Dateien, die Sie im Wurzelverzeichnis des ~~Projektes~~ <code>WK_Ball02_Empty</code>		sowie alle Dateien, die Sie im Wurzelverzeichnis des Projekts <code>WK_Ball02_Empty</code>
	finden, mittels <code>Ctrl-/Apfel-C</code> <code>Ctrl-/Apfel-V</code> in Ihr eigenes Projekt. (Die Frage, ob WebStorm seinen eigenen File Watcher zum		finden, mittels <code>Ctrl-/Apfel-C</code> <code>Ctrl-/Apfel-V</code> 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.)		Übersetzen von ES6-Code in ES5-Code verwenden soll, beantworten Sie bitte mit „No“. Das erledigt Webpack für Sie.)

Kowa am 13. Dezember 2017 um 10:47 Uhr

2017-12-13T10:47:09Z

← Nächstältere Version		Version vom 13. Dezember 2017, 10:47 Uhr
Zeile 29:		Zeile 29:
	Erstellen Sie ein neues Projekt <code>praktikum02</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)		Erstellen Sie ein neues Projekt <code>praktikum02</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)
	sowie alle Dateien, die Sie im Wurzelverzeichnis des Projektes <code>WK_Ball02_Empty</code>		sowie alle Dateien, die Sie im Wurzelverzeichnis des Projektes <code>WK_Ball02_Empty</code>
	finden, mittels <code>~~Crtl~~-/Apfel-C</code> <code>~~Crtl~~-/Apfel-V</code> in Ihr eigenes Projekt. (Die Frage, ob WebStorm seinen eigenen File Watcher zum		finden, mittels <code>Ctrl-/Apfel-C</code> <code>Ctrl-/Apfel-V</code> 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.)		Übersetzen von ES6-Code in ES5-Code verwenden soll, beantworten Sie bitte mit „No“. Das erledigt Webpack für Sie.)

Kowa am 17. November 2017 um 09:40 Uhr

2017-11-17T09:40:31Z

← Nächstältere Version		Version vom 17. November 2017, 09:40 Uhr
Zeile 31:		Zeile 31:
	finden, mittels <code>Crtl-/Apfel-C</code> <code>Crtl-/Apfel-V</code> in Ihr eigenes Projekt. (Die Frage, ob WebStorm seinen eigenen File Watcher zum		finden, mittels <code>Crtl-/Apfel-C</code> <code>Crtl-/Apfel-V</code> 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.)		Übersetzen von ES6-Code in ES5-Code verwenden soll, beantworten Sie bitte mit „No“. Das erledigt Webpack für Sie.)

			Sie können Ihr Projekt zur Übung auch im Subversion-Repository speichern. Das ist aber nicht so wichtig.

	Nun können Sie in Ihrem eigenen Projekt die benötigten Node.js-Module installieren: <code>npm i</code>.		Nun können Sie in Ihrem eigenen Projekt die benötigten Node.js-Module installieren: <code>npm i</code>.

	~~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: <code>index01.html</code> verwendet die gepackte Version von <code>app01.js</code>,		In Ihrem Projekt finden Sie wiederum mehrere Web-Anwendungen: <code>index01.html</code> verwendet die gepackte Version von <code>app01.js</code>,

Kowa am 3. November 2017 um 18:19 Uhr

2017-11-03T18:19:03Z

← Nächstältere Version		Version vom 3. November 2017, 18:19 Uhr
Zeile 161:		Zeile 161:
	</source>		</source>

	In diesem Parameter wird der Initialisierungsmethode die zuvor ~~deinierte~~ Callback-Funktion übergeben, die aufgerufen weren muss, sobald der Initalisierungsvorgang		In diesem Parameter wird der Initialisierungsmethode die zuvor definierte Callback-Funktion übergeben, die aufgerufen weren muss, sobald der Initalisierungsvorgang
	vollständig abgearbeitet wurde.		vollständig abgearbeitet wurde.

	~~Eine wesentliche Aufgabe~~ der Initialisierungsfunktion ~~ist nun~~, ~~alle~~ benötigten Medien mit Hilfe eines PixiJS-Loaders ~~zu laden~~:		Bislang wird das Bild der Eule synchron geladen und dem View-Objekt zugewiesen.
			Dies soll künfig jedoch asynchron erfolgen. Löschen Sie daher in der Initialisierungsfunktion
			zunächst alle drei Befehle, die mit dem View-Objekt <code>v_ball_view</code> zu tun haben.

			Die benötigten Medien (hier: das Bild der Eule) werden künftig mit Hilfe eines PixiJS-Loaders '''asynchron''' geladen:

	<source lang="javascript">		<source lang="javascript">
Zeile 172:		Zeile 176:
	.load(function(p_loader, p_resources)		.load(function(p_loader, p_resources)
	{		{
	~~<initialize the ball view>~~
	f_ready();		f_ready();
	}		}
Zeile 179:		Zeile 183:

	Der Pixi-Loader <code>p_pixi.loader</code> wird zunächst angewiesen, das Medium, dessen URL in der Variablen		Der Pixi-Loader <code>p_pixi.loader</code> wird zunächst angewiesen, das Medium, dessen URL in der Variablen
	<code>sprite</code> ~~'''asynchron'''~~ zu laden und unter dem (sehr einfaltsreichen) Namen <code>'sprite'</code> in einem JavaScript-Objekt zu speichern.		<code>sprite</code> steht, zu laden und unter dem (sehr einfaltsreichen) Namen <code>'sprite'</code> in einem JavaScript-Objekt zu speichern.
	Es ist durchaus üblich, eine Vielzahl von Medien auf einmal ({{dh}} parallel) zu laden:		Es ist durchaus üblich, eine Vielzahl von Medien auf einmal ({{dh}} parallel) zu laden:

Zeile 197:		Zeile 201:

	Zu guter Letzt wird die Methode <code>p_pixi.loader.load(...)</code> aufgerufen. Diese startet alle erwünschten Ladevorgänge und führt,		Zu guter Letzt wird die Methode <code>p_pixi.loader.load(...)</code> aufgerufen. Diese startet alle erwünschten Ladevorgänge und führt,
	sobald alle Ressourcen geladen wurden, die ihr übergebene Callback-Funktion aus. Dieser Callback-Funktion werden zwei Argumente übergeben:		sobald alle Ressourcen geladen wurden, die ihr übergebene Callback-Funktion aus. Dieser Callback-Funktion werden vom Pixi-Loader
			zwei Argumente übergeben:
	* Das Loader-Objekt, mit dem die Medien geladen wurden. (Dieses Objekt wird allerdings nur in Ausnahmenfällen benötigt.)		* Das Loader-Objekt, mit dem die Medien geladen wurden. (Dieses Objekt wird allerdings nur in Ausnahmenfällen benötigt.)
	* Ein Ressource-Objekt, in dem alle zuvorgeladenen Medien unter den in den Add-Anweisungen angegebenen Namen enthalten sind.		* Ein Ressource-Objekt, in dem alle zuvorgeladenen Medien unter den in den Add-Anweisungen angegebenen Namen enthalten sind.

	Innerhalb dieser Funktion kann nun das View-Objekt des Balls erstellt und in der PixiJS-Bühne gespeichert werden:		Innerhalb dieser Funktion kann nun das View-Objekt des Balls erstellt und in der PixiJS-Bühne gespeichert werden.
			Fügen Sie daher vor dem Befehl <code>f_ready();</code> folgende Befehle ein:

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

Kowa am 3. November 2017 um 09:43 Uhr

2017-11-03T09:43:06Z

← Nächstältere Version		Version vom 3. November 2017, 09:43 Uhr
Zeile 23:		Zeile 23:
	==Aufgaben==		==Aufgaben==

	Laden Sie das leere Projekt [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/empty/~~WK_Ball02_Empty WK_Ball02_Empty~~] auf Ihren Rechner.		Laden Sie das leere Projekt [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/empty/WK_Ball02_empty 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		'''Installieren Sie aber nicht die Node.js-Module''', das machen Sie später. Sie finden das leere Projekt im
	Repository-Pfad <code>https://glossar.hs-augsburg.de/beispiel/tutorium/es6</code> im Unterordner <code>empty</code>.		Repository-Pfad <code>https://glossar.hs-augsburg.de/beispiel/tutorium/es6</code> im Unterordner <code>empty</code>.

Kowa am 2. November 2017 um 17:33 Uhr

2017-11-02T17:33:49Z

← Nächstältere Version		Version vom 2. November 2017, 17:33 Uhr
Zeile 258:		Zeile 258:

	Die eigentliche Update-Methode code>update</code> existiert weiterhin, doch ihre Aufgabe hat sich geändert:		Die eigentliche Update-Methode code>update</code> existiert weiterhin, doch ihre Aufgabe hat sich geändert:
	Sie muss mit Hilfe einer For-Schleife<ref>[https://wiki.selfhtml.org/wiki/JavaScript/Schleife ~~selfhtml~~-Wiki: JavaScript/Schleife]</ref> das Array <code>v_balls</code> durchlaufen und für jedes Element die (Hilfs-)Methode		Sie muss mit Hilfe einer For-Schleife<ref>[https://wiki.selfhtml.org/wiki/JavaScript/Schleife SELFHTML-Wiki: JavaScript/Schleife]</ref> das Array <code>v_balls</code> durchlaufen und für jedes Element die (Hilfs-)Methode
	<code>update_ball</code> aufrufen.		<code>update_ball</code> aufrufen.

Kowa am 2. November 2017 um 17:29 Uhr

2017-11-02T17:29:55Z

← Nächstältere Version		Version vom 2. November 2017, 17:29 Uhr
Zeile 245:		Zeile 245:
	In diesem werden anschließend von der Initialisierungsmethode die zugehörigen View-Objeke abgelegt.		In diesem werden anschließend von der Initialisierungsmethode die zugehörigen View-Objeke abgelegt.

	Alls nächstes müssen Sie die Methode <code>update</code> umbenennen und um ~~einen~~ Parameter erweitern:		Alls nächstes müssen Sie die Methode <code>update</code> umbenennen und um den Parameter <code>p_ball</code> erweitern:

	<source lang="javascript">		<source lang="javascript">
Zeile 258:		Zeile 258:

	Die eigentliche Update-Methode code>update</code> existiert weiterhin, doch ihre Aufgabe hat sich geändert:		Die eigentliche Update-Methode code>update</code> existiert weiterhin, doch ihre Aufgabe hat sich geändert:
	Sie muss mit Hilfe einer For-Schleife das Array <code>v_balls</code> durchlaufen und für jedes Element die (Hilfs-)Methode		Sie muss mit Hilfe einer For-Schleife<ref>[https://wiki.selfhtml.org/wiki/JavaScript/Schleife selfhtml-Wiki: JavaScript/Schleife]</ref> das Array <code>v_balls</code> durchlaufen und für jedes Element die (Hilfs-)Methode
	<code>update_ball</code> aufrufen.		<code>update_ball</code> aufrufen.

	Die Renderfunktion muss analog angepasst werden: Sie muss ebenfalls das Array <code>v_balls</code> durchlaufen.		Die Renderfunktion muss analog angepasst werden: Sie muss ebenfalls das Array <code>v_balls</code> durchlaufen.
	Für jedes Ball-Modell-Objekt muss ~~Sie die~~ aktuelle Position dem zugehörigen Ball-View-Objekt zuweisen.		Für jedes Ball-Modell-Objekt muss dessen aktuelle Position dem zugehörigen Ball-View-Objekt zuweisen werden.
	Das aktuelle View-Objekt findet sie jeweils im Array <code>v_ball_views</code> an derselben Position ~~<code>i</code>~~.		Das aktuelle View-Objekt findet sie jeweils im Array <code>v_ball_views</code> an derselben Position.
	(Sie könnten auch das Array <code>v_ball_views</code> durchlaufen. Das macht keinen Unterschied, weil beide Arrays		(Sie könnten auch das Array <code>v_ball_views</code> durchlaufen. Das macht keinen Unterschied, weil beide Arrays
	gleichviele Elemente enthalten.)		gleichviele Elemente enthalten.)

	Zu guter Letzt muss noch die Callback-Funktion des Pixi-Loaders angepasst werden. Diese muss ebenfalls		Zu guter Letzt muss noch die Callback-Funktion des Pixi-Loaders angepasst werden. Diese muss ebenfalls
	das Array <code>v_balls</code> durchlaufen und für jedes Modell-Objekt ein zugehöriges View-Objekt		das Array <code>v_balls</code> durchlaufen und für jedes Modell-Objekt ein zugehöriges View-Objekt
	erzeugen. Jedes neu erzeugte View-Objekt wird ~~abshcließend~~ mittels		erzeugen. Jedes neu erzeugte View-Objekt wird abschließend mittels

	<source lang="javascript">		<source lang="javascript">
Zeile 276:		Zeile 276:
	</source>		</source>

	sowohl ans Ende des Arrays <code>v_ball_views</code> ~~geschrieben~~ als auch in die PixiJS-Bühne eingefügt.		sowohl ans Ende des Arrays <code>v_ball_views</code> als auch in die PixiJS-Bühne eingefügt.

	Eine Sache ist bei der Erzeugung der Views noch zu beachten. Es gibt zwei Texturen und in jedem Modell-Objekt ist		Eine Sache ist bei der Erzeugung der Views noch zu beachten. Es gibt zwei Texturen und in jedem Modell-Objekt ist
Zeile 288:		Zeile 288:
	</source>		</source>

	und laden sie die zugehörigen ~~Bilde~~ anschließend mit Hilfe des Pixi-Loaders:		und laden sie die zugehörigen Bilder anschließend mit Hilfe des Pixi-Loaders:

	<source lang="javascript">		<source lang="javascript">
Zeile 294:		Zeile 294:
	</source>		</source>

	Beim Erzeugen der ~~View~~ verwenden Sie dann jeweils die im Model-Objekt beschriebene Textur:		Beim Erzeugen der Views (innerhalb der zuvor genannten For-Schleife) verwenden Sie dann jeweils die im Model-Objekt beschriebene Textur:

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

Kowa am 2. November 2017 um 17:15 Uhr

2017-11-02T17:15:35Z

Änderungen zeigen

Kowa am 2. November 2017 um 16:27 Uhr

2017-11-02T16:27:48Z

Kowa am 2. November 2017 um 15:31 Uhr

2017-11-02T15:31:48Z

← Nächstältere Version		Version vom 2. November 2017, 15:31 Uhr
Zeile 298:		Zeile 298:
	<references/>		<references/>
	<ol>		<ol>
	<li value="1"> {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}</li>		<li value="10"> {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}</li>
	</ol>		</ol>

← Nächstältere Version		Version vom 2. November 2017, 16:27 Uhr
Zeile 9:		Zeile 9:

	Mit HTML5 wurde das Canvas-Element (Leinwand-Element) eingeführt.<ref>[https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API MDN web docs: Canvas API]</ref>		Mit HTML5 wurde das Canvas-Element (Leinwand-Element) eingeführt.<ref>[https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API MDN web docs: Canvas API]</ref>
	„“ einem Canvas-Element können Grafiken gezeichnet werden. Aktuelle Browser unterstützen üblicherweise sowohl den <code>CanvasRenderingContext2D</code>		„Auf“ einem Canvas-Element können Grafiken gezeichnet werden. Aktuelle Browser unterstützen üblicherweise sowohl den <code>CanvasRenderingContext2D</code>
	zum Erstellen von 2D-Grafiken<ref>[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D MDN web docs: CanvasRenderingContext2D]</ref>		zum Erstellen von 2D-Grafiken<ref>[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D MDN web docs: CanvasRenderingContext2D]</ref>
	als auch <code>WebGL</code> zum Erstellen von 3D-Grafiken (auf Basis von [[OpenGL]]) <ref>[https://developer.mozilla.org/de/docs/Web/API/WebGL_API/Tutorial/Einf%C3%BChrung_in_WebGL MDN web docs: Einführung in WebGL]</ref>. Die Erstellung von Grafiken mit WebGL ist wesentlich effizienter als die		als auch <code>WebGL</code> zum Erstellen von 3D-Grafiken (auf Basis von [[OpenGL]])<ref>[https://developer.mozilla.org/de/docs/Web/API/WebGL_API/Tutorial/Einf%C3%BChrung_in_WebGL MDN web docs: Einführung in WebGL]</ref>. Die Erstellung von Grafiken mit WebGL ist wesentlich effizienter als die
	Erstellung von Grafiken mit dem <code>CanvasRenderingContext2D</code>, zumindest dann wenn, eine Grafikkarte zur Verfügung steht, deren Prozessor		Erstellung von Grafiken mit dem <code>CanvasRenderingContext2D</code>, 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, {{dh}}, wenn 60 mal pro Sekunde (also		([[GPU]]) OpenGL nativ unterstützt. Dies ist insbesondere dann von Bedeutung, wenn Animationen erstellt werden, {{dh}}, wenn 60 mal pro Sekunde (also
	alle 16,7 ms) eine neue Grafik im Canvas angezeigt werden soll.		alle 16,7 ms) eine neue Grafik auf dem Canvas angezeigt werden soll.

	PixiJS ist als Ersatz für den <code>CanvasRenderingContext2D</code> gedacht. Die Bibliothek stellt im Wesentlichen dieselben Grafik-Befehle		PixiJS ist als Ersatz für den <code>CanvasRenderingContext2D</code> gedacht. Die Bibliothek stellt im Wesentlichen dieselben Grafik-Befehle
Zeile 29:		Zeile 29:
	Erstellen Sie ein neues Projekt <code>praktikum02</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)		Erstellen Sie ein neues Projekt <code>praktikum02</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)
	sowie alle Dateien, die Sie im Wurzelverzeichnis des Projektes <code>WK_Ball02_Empty</code>		sowie alle Dateien, die Sie im Wurzelverzeichnis des Projektes <code>WK_Ball02_Empty</code>
	finden mittels <code>Crtl-/Apfel-C</code> <code>Crtl-/Apfel-V</code> in Ihr eigenes Projekt. (Die Frage, ob WebStorm seinen eigenen File Watcher zum		finden, mittels <code>Crtl-/Apfel-C</code> <code>Crtl-/Apfel-V</code> 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.)		Übersetzen von ES6-Code in ES5-Code verwenden soll, beantworten Sie bitte mit „No“. Das erledigt Webpack für Sie.)