Realistic character design - Versionsgeschichte

Fabian am 10. Juni 2020 um 15:30 Uhr

2020-06-10T15:30:27Z

← Nächstältere Version		Version vom 10. Juni 2020, 15:30 Uhr
Zeile 1:		Zeile 1:
	Dieser Artikel beschreibt, wie mit Hilfe einer Code-Grundlage eine Character-Animation gelingt.		Dieser Artikel beschreibt, wie mit Hilfe einer Code-Grundlage eine Character-Animation für das [[Online Multiplayer]]-Projekt gelingt.

	== Spritesheet Character Animation==		== Spritesheet Character Animation==

Fabian am 10. Juni 2020 um 15:29 Uhr

2020-06-10T15:29:23Z

← Nächstältere Version		Version vom 10. Juni 2020, 15:29 Uhr
Zeile 8:		Zeile 8:
	[[Datei:Walkcycle_side.png\|300px\|center\|Der Walk-Cycle in der Seit-Perspektive.]]		[[Datei:Walkcycle_side.png\|300px\|center\|Der Walk-Cycle in der Seit-Perspektive.]]
	*3. Die einzelnen Bilder freistellen. Dies funktioniert in einer Bildbearbeitungssoftware mit dem Lasso-Tool hervorragend. Hiermit den Teil auswählen, der freigestellt werden soll. Anschließend einen neuen Layer erstellen ('''Gimp''': Rechtsklick auf den ausgewählten Ausschnitt --> Select-> Float anklicken --> in der Layerübersicht das Float-Layer auswählen -> Rechtsklick -> To new Layer anklicken. '''Photoshop''': Rechtsklick auf den ausgewählten Ausschnitt --> Layer via Copy). Nun hat man den ausgewählten Ausschnitt als Layer ohne Hintergrund.		*3. Die einzelnen Bilder freistellen. Dies funktioniert in einer Bildbearbeitungssoftware mit dem Lasso-Tool hervorragend. Hiermit den Teil auswählen, der freigestellt werden soll. Anschließend einen neuen Layer erstellen ('''Gimp''': Rechtsklick auf den ausgewählten Ausschnitt --> Select-> Float anklicken --> in der Layerübersicht das Float-Layer auswählen -> Rechtsklick -> To new Layer anklicken. '''Photoshop''': Rechtsklick auf den ausgewählten Ausschnitt --> Layer via Copy). Nun hat man den ausgewählten Ausschnitt als Layer ohne Hintergrund.
	*4. In der Bildbearbeitungssoftware ein neues Projekt in 144px x 144px anlegen. In dieses neue Projekt die rechts eingefügte Vorlage ~~einfügen~~. [[Datei:Friedrich_character.png\|144px\|thumb\|right\|Vorlage Character Animation]]		*4. In der Bildbearbeitungssoftware ein neues Projekt in 144px x 144px anlegen. In dieses neue Projekt die auf dieser Wiki-Seite rechts eingefügte Vorlage hinzufügen. [[Datei:Friedrich_character.png\|144px\|thumb\|right\|Vorlage Character Animation]]
	*5. Nun den ausgeschnittenen Layer aus Schritt 3 an die richtige Stelle im neue Projekt, also dort, wo die entsprechende Vorlagen-Figur zu finden ist, einfügen. Nun die Vorlagen-Figur löschen und die eigene Figur die richtige Größe skalieren. Je größer die Figur in der Datei ist, umso größer ist sie später im Spiel. 50x25px ist ein solider Richtwert für unsere Figuren und kann als Layergröße ausgewählt werden.		*5. Nun den ausgeschnittenen Layer aus Schritt 3 an die richtige Stelle im neue Projekt, also dort, wo die entsprechende Vorlagen-Figur zu finden ist, einfügen. Im Beispiel wurde der Vorlagen-Character links unten, seitlich aufgenommen, mit Fuß in der Luft, durch den neuen Character, seitlich aufgenommen, mit Fuß in der Luft, ersetzt. Nun die Vorlagen-Figur löschen und die eigene Figur die richtige Größe skalieren. Je größer die Figur in der Datei ist, umso größer ist sie später im Spiel. 50x25px ist ein solider Richtwert für unsere Figuren und kann als Layergröße ausgewählt werden. Diesen Schritt nun mit allen Posen wiederholen und Perspektiven wiederholen.
	[[Datei:Walkcycle_replace.png\|288px\|thumb\|right\|Hier wurde eine von Friedrichs Figuren bereits ersetzt]]		[[Datei:Walkcycle_replace.png\|288px\|thumb\|right\|Hier wurde eine von Friedrichs Figuren bereits ersetzt]]
	*6. Anschließend die Datei unter "yourcharactername_character" als .png mit transparentem Hintergrund speichern.		*6. Anschließend die Datei unter "yourcharactername_character" als .png mit transparentem Hintergrund speichern.

Fabian am 10. Juni 2020 um 15:22 Uhr

2020-06-10T15:22:25Z

← Nächstältere Version		Version vom 10. Juni 2020, 15:22 Uhr
Zeile 1:		Zeile 1:
			Dieser Artikel beschreibt, wie mit Hilfe einer Code-Grundlage eine Character-Animation gelingt.

	== Spritesheet Character Animation==		== Spritesheet Character Animation==
	Im Zuge des Seminars [[Vernetzte Räume]] wurde mit diesem [https://github.com/spielundobjekt/Unity-Basic-Multiplayer github repository] gearbeitet.		Im Zuge des Seminars [[Vernetzte Räume]] wurde mit diesem [https://github.com/spielundobjekt/Unity-Basic-Multiplayer github repository] gearbeitet.

Fabian: /* Spritesheet Character Animation */

2020-06-10T15:16:25Z

Spritesheet Character Animation

← Nächstältere Version		Version vom 10. Juni 2020, 15:16 Uhr
Zeile 3:		Zeile 3:

	*1. Dieses Projekt herunterladen und in Unity öffnen.		*1. Dieses Projekt herunterladen und in Unity öffnen.
	*2. Um einen Character in Unity zum gehen zu animieren, müssen wir einen walk cycle erstellen. In unserer Version besteht er aus drei Fotos. Diese drei Fotos bilden unterschiedliche Momente eines Schrittes ab: Stehend, ein Fuß vorwärts ~~mti~~ dem zweiten stehend und ein Fuß vorwärts mit dem zweiten Bein in der Luft. Diese drei Fotos nimmt man in einer Frontal, Seit- und Rückansicht auf. Insgesamt werden also neun Bilder erstellt.		*2. Um einen Character in Unity zum gehen zu animieren, müssen wir einen walk cycle erstellen. In unserer Version besteht er aus drei Fotos. Diese drei Fotos bilden unterschiedliche Momente eines Schrittes ab: Stehend, ein Fuß vorwärts mit dem zweiten stehend und ein Fuß vorwärts mit dem zweiten Bein in der Luft. Diese drei Fotos nimmt man in einer Frontal, Seit- und Rückansicht auf. Insgesamt werden also neun Bilder erstellt.
	[[Datei:Walkcycle_side.png\|300px\|center\|Der Walk-Cycle in der Seit-Perspektive.]]		[[Datei:Walkcycle_side.png\|300px\|center\|Der Walk-Cycle in der Seit-Perspektive.]]
	*3. Die einzelnen Bilder freistellen ~~und mit transparentem Hintergrund speichern~~. Dies funktioniert in einer Bildbearbeitungssoftware mit dem Lasso-Tool. Hiermit den Teil auswählen, der freigestellt werden soll. Anschließend einen neuen Layer erstellen ('''Gimp''': Rechtsklick auf den ausgewählten Ausschnitt --> Select-> Float anklicken --> in der Layerübersicht das Float-Layer auswählen -> Rechtsklick -> To new Layer anklicken. '''Photoshop''': Rechtsklick auf den ausgewählten Ausschnitt --> Layer via Copy). Nun hat man den ausgewählten Ausschnitt als Layer ohne Hintergrund.		*3. Die einzelnen Bilder freistellen. Dies funktioniert in einer Bildbearbeitungssoftware mit dem Lasso-Tool hervorragend. Hiermit den Teil auswählen, der freigestellt werden soll. Anschließend einen neuen Layer erstellen ('''Gimp''': Rechtsklick auf den ausgewählten Ausschnitt --> Select-> Float anklicken --> in der Layerübersicht das Float-Layer auswählen -> Rechtsklick -> To new Layer anklicken. '''Photoshop''': Rechtsklick auf den ausgewählten Ausschnitt --> Layer via Copy). Nun hat man den ausgewählten Ausschnitt als Layer ohne Hintergrund.
	*4. In der Bildbearbeitungssoftware ein neues Projekt in 144px x 144px anlegen. In dieses neue Projekt die rechts eingefügte Vorlage einfügen. [[Datei:Friedrich_character.png\|144px\|thumb\|right\|Vorlage Character Animation]]		*4. In der Bildbearbeitungssoftware ein neues Projekt in 144px x 144px anlegen. In dieses neue Projekt die rechts eingefügte Vorlage einfügen. [[Datei:Friedrich_character.png\|144px\|thumb\|right\|Vorlage Character Animation]]
	*5. Nun den ausgeschnittenen Layer aus Schritt 3 an die richtige Stelle im neue Projekt, also dort, wo die entsprechende Vorlagen-Figur zu finden ist, einfügen. Nun die Vorlagen-Figur löschen und die eigene Figur die richtige Größe skalieren. Je größer die Figur in der Datei ist, umso größer ist sie später im Spiel. 50x25px ist ein solider Richtwert für unsere Figuren und kann als Layergröße ausgewählt werden.		*5. Nun den ausgeschnittenen Layer aus Schritt 3 an die richtige Stelle im neue Projekt, also dort, wo die entsprechende Vorlagen-Figur zu finden ist, einfügen. Nun die Vorlagen-Figur löschen und die eigene Figur die richtige Größe skalieren. Je größer die Figur in der Datei ist, umso größer ist sie später im Spiel. 50x25px ist ein solider Richtwert für unsere Figuren und kann als Layergröße ausgewählt werden.

Fabian: /* Spritesheet Character Animation */

2020-06-10T15:13:52Z

Spritesheet Character Animation

@@ Zeile 3: / Zeile 3: @@
 *1. Dieses Projekt herunterladen und in Unity öffnen.
 *2. Um einen Character in Unity zum gehen zu animieren, müssen wir einen walk cycle erstellen. In unserer Version besteht er aus drei Fotos. Diese drei Fotos bilden unterschiedliche Momente eines Schrittes ab: Stehend, ein Fuß vorwärts mti dem zweiten stehend und ein Fuß vorwärts mit dem zweiten Bein in der Luft. Diese drei Fotos nimmt man in einer Frontal, Seit- und Rückansicht auf. Insgesamt werden also neun Bilder erstellt.
-*3.
+[[Datei:Walkcycle_side.png|300px|center|Der Walk-Cycle in der Seit-Perspektive.]]
- [[Datei:Friedrich_character.png|144px|thumb|right|Vorlage Character Animation]]
+Der Code zur Character-Animation ist [https://github.com/spielundobjekt/Unity-Basic-Multiplayer/blob/dev/Assets/SundO_Multiplay/Scripts/Player_Scripts/AnimationScript2D.cs hier zu finden]. Falls also der Walkcycle erweitert und detaillierter werden soll, ist dieser Code der Place to be!

Fabian: /* Spritesheet Character Animation */

2020-06-10T14:09:10Z

Spritesheet Character Animation

← Nächstältere Version		Version vom 10. Juni 2020, 14:09 Uhr
Zeile 1:		Zeile 1:
	== Spritesheet Character Animation==		== Spritesheet Character Animation==
	Im Zuge des Seminars Vernetzte Räume wurde mit diesem [https://github.com/spielundobjekt/Unity-Basic-Multiplayer github repository] gearbeitet~~. Zuallererst also dieses Projekt herunterladen und einmal öffnen~~.		Im Zuge des Seminars [[Vernetzte Räume]] wurde mit diesem [https://github.com/spielundobjekt/Unity-Basic-Multiplayer github repository] gearbeitet.

	Um einen Character in in Unity zum gehen zu animieren, müssen wir einen walk cycle erstellen. In unserer Version besteht er aus drei Fotos. Diese drei Fotos bilden unterschiedliche Momente eines Schrittes ab: Stehend, ein Fuß vorwärts mti dem zweiten stehend und ein Fuß vorwärts mit dem zweiten Bein in der Luft. Diese drei Fotos nimmt man in einer Frontal, Seit- und Rückansicht auf. Insgesamt werden also neun Bilder erstellt. [[Datei:~~friedrich_character~~.png\|144px\|thumb\|right\|Vorlage Character Animation]]		*1. Dieses Projekt herunterladen und in Unity öffnen.
			*2. Um einen Character in Unity zum gehen zu animieren, müssen wir einen walk cycle erstellen. In unserer Version besteht er aus drei Fotos. Diese drei Fotos bilden unterschiedliche Momente eines Schrittes ab: Stehend, ein Fuß vorwärts mti dem zweiten stehend und ein Fuß vorwärts mit dem zweiten Bein in der Luft. Diese drei Fotos nimmt man in einer Frontal, Seit- und Rückansicht auf. Insgesamt werden also neun Bilder erstellt.
			*3.

			[[Datei:Friedrich_character.png\|144px\|thumb\|right\|Vorlage Character Animation]]

	Diese werden in Photoshop (oder GIMP oder Paint.NET) bearbeitet um die Charaktere freizustellen. Dies funktioniert mit dem Lasso-Tool hervorragend. Anschließend die Figur ohne Hintergrund speichern, am besten bereits in einer kleineren Größe (in unserem Beispiel sind dies 50Px Hoch x 25 Pixel weit), und die 9 Fotos in einer Datei zusammenführen. Diese wird anschließend mit dem Titel "yourcharactername_character" als .png-Datei gespeichert.		Diese werden in Photoshop (oder GIMP oder Paint.NET) bearbeitet um die Charaktere freizustellen. Dies funktioniert mit dem Lasso-Tool hervorragend. Anschließend die Figur ohne Hintergrund speichern, am besten bereits in einer kleineren Größe (in unserem Beispiel sind dies 50Px Hoch x 25 Pixel weit), und die 9 Fotos in einer Datei zusammenführen. Diese wird anschließend mit dem Titel "yourcharactername_character" als .png-Datei gespeichert.

Fkirschner am 5. Mai 2020 um 12:54 Uhr

2020-05-05T12:54:36Z

← Nächstältere Version		Version vom 5. Mai 2020, 12:54 Uhr
Zeile 10:		Zeile 10:

	Nun diese Datei im Unity-Projektordner unter /Assets/Ressources/SundO_Multiplay/characters importieren. Anschließend kann der Character ausgewählt werden.		Nun diese Datei im Unity-Projektordner unter /Assets/Ressources/SundO_Multiplay/characters importieren. Anschließend kann der Character ausgewählt werden.
	ACHTUNG die Datei muss am Ende exakt 144x144px gross sein, als png gespeichert werden, und der Hintergrund muss transparent gestellt sein!		*ACHTUNG: die Datei muss am Ende exakt 144x144px gross sein, als png gespeichert werden, und der Hintergrund muss transparent gestellt sein!

Fkirschner am 5. Mai 2020 um 12:54 Uhr

2020-05-05T12:54:26Z

← Nächstältere Version		Version vom 5. Mai 2020, 12:54 Uhr
Zeile 1:		Zeile 1:
	Character Animation		== Spritesheet Character Animation==
	Im Zuge des Seminars Vernetzte Räume wurde mit diesem [https://github.com/spielundobjekt/Unity-Basic-Multiplayer github repository] gearbeitet. Zuallererst also dieses Projekt herunterladen und einmal öffnen.		Im Zuge des Seminars Vernetzte Räume wurde mit diesem [https://github.com/spielundobjekt/Unity-Basic-Multiplayer github repository] gearbeitet. Zuallererst also dieses Projekt herunterladen und einmal öffnen.

	Um einen Character in in Unity zum gehen zu animieren, müssen wir einen walk cycle erstellen. In unserer Version besteht er aus drei Fotos. Diese drei Fotos bilden unterschiedliche Momente eines Schrittes ab: Stehend, ein Fuß vorwärts mti dem zweiten stehend und ein Fuß vorwärts mit dem zweiten Bein in der Luft. Diese drei Fotos nimmt man in einer Frontal, Seit- und Rückansicht auf. Insgesamt werden also neun Bilder erstellt. [[Datei:friedrich_character.png\|144px\|thumb\|right\|Vorlage Character Animation]]		Um einen Character in in Unity zum gehen zu animieren, müssen wir einen walk cycle erstellen. In unserer Version besteht er aus drei Fotos. Diese drei Fotos bilden unterschiedliche Momente eines Schrittes ab: Stehend, ein Fuß vorwärts mti dem zweiten stehend und ein Fuß vorwärts mit dem zweiten Bein in der Luft. Diese drei Fotos nimmt man in einer Frontal, Seit- und Rückansicht auf. Insgesamt werden also neun Bilder erstellt. [[Datei:friedrich_character.png\|144px\|thumb\|right\|Vorlage Character Animation]]

	Diese werden in Photoshop bearbeitet um die Charaktere freizustellen. Dies funktioniert mit dem Lasso-Tool hervorragend. Anschließend die Figur ohne Hintergrund speichern, am besten bereits in einer kleineren Größe (in unserem Beispiel sind dies 50Px Hoch x 25 Pixel weit), und die 9 Fotos in einer Datei zusammenführen. Diese wird anschließend mit dem Titel "yourcharactername_character" als .png-Datei gespeichert.		Diese werden in Photoshop (oder GIMP oder Paint.NET) bearbeitet um die Charaktere freizustellen. Dies funktioniert mit dem Lasso-Tool hervorragend. Anschließend die Figur ohne Hintergrund speichern, am besten bereits in einer kleineren Größe (in unserem Beispiel sind dies 50Px Hoch x 25 Pixel weit), und die 9 Fotos in einer Datei zusammenführen. Diese wird anschließend mit dem Titel "yourcharactername_character" als .png-Datei gespeichert.
	Der Code zur Animation der Fotos ist [https://github.com/spielundobjekt/Unity-Basic-Multiplayer/blob/dev/Assets/SundO_Multiplay/Scripts/Player_Scripts/AnimationScript2D.cs hier zu finden].		Der Code zur Animation der Fotos ist [https://github.com/spielundobjekt/Unity-Basic-Multiplayer/blob/dev/Assets/SundO_Multiplay/Scripts/Player_Scripts/AnimationScript2D.cs hier zu finden].

Zeile 10:		Zeile 10:

	Nun diese Datei im Unity-Projektordner unter /Assets/Ressources/SundO_Multiplay/characters importieren. Anschließend kann der Character ausgewählt werden.		Nun diese Datei im Unity-Projektordner unter /Assets/Ressources/SundO_Multiplay/characters importieren. Anschließend kann der Character ausgewählt werden.
			ACHTUNG die Datei muss am Ende exakt 144x144px gross sein, als png gespeichert werden, und der Hintergrund muss transparent gestellt sein!

Fkirschner am 5. Mai 2020 um 12:01 Uhr

2020-05-05T12:01:17Z

← Nächstältere Version		Version vom 5. Mai 2020, 12:01 Uhr
Zeile 9:		Zeile 9:
	Hier sind auch die notwendigen Speicherorte vermerkt- diese könnten hier also auch angepasst und verändert werden. Dabei ist es wichtig, die Charaktere an der Position des Bildes zu platzieren, die anschließend im Code ausgelesen wird- hierfür kann man sich gut an der Vorlage orientieren.		Hier sind auch die notwendigen Speicherorte vermerkt- diese könnten hier also auch angepasst und verändert werden. Dabei ist es wichtig, die Charaktere an der Position des Bildes zu platzieren, die anschließend im Code ausgelesen wird- hierfür kann man sich gut an der Vorlage orientieren.

	Nun diese Datei im Unity-Projektordner unter /~~assets~~/~~ressources~~/characters importieren. Anschließend kann der Character ausgewählt werden.		Nun diese Datei im Unity-Projektordner unter /Assets/Ressources/SundO_Multiplay/characters importieren. Anschließend kann der Character ausgewählt werden.

Fabian am 27. April 2020 um 17:44 Uhr

2020-04-27T17:44:34Z

← Nächstältere Version		Version vom 27. April 2020, 17:44 Uhr
Zeile 2:		Zeile 2:
	Im Zuge des Seminars Vernetzte Räume wurde mit diesem [https://github.com/spielundobjekt/Unity-Basic-Multiplayer github repository] gearbeitet. Zuallererst also dieses Projekt herunterladen und einmal öffnen.		Im Zuge des Seminars Vernetzte Räume wurde mit diesem [https://github.com/spielundobjekt/Unity-Basic-Multiplayer github repository] gearbeitet. Zuallererst also dieses Projekt herunterladen und einmal öffnen.

	Um einen Character in in Unity zum gehen zu animieren, müssen wir einen walk cycle erstellen. In unserer Version besteht er aus drei Fotos. Diese drei Fotos bilden unterschiedliche Momente eines Schrittes ab: Stehend, ein Fuß vorwärts mti dem zweiten stehend und ein Fuß vorwärts mit dem zweiten Bein in der Luft. Diese drei Fotos nimmt man in einer Frontal, Seit- und Rückansicht auf. Insgesamt werden also neun Bilder erstellt. [[Datei:~~Animation1~~.png\|~~400px~~\|thumb\|right\|Vorlage Character Animation]]		Um einen Character in in Unity zum gehen zu animieren, müssen wir einen walk cycle erstellen. In unserer Version besteht er aus drei Fotos. Diese drei Fotos bilden unterschiedliche Momente eines Schrittes ab: Stehend, ein Fuß vorwärts mti dem zweiten stehend und ein Fuß vorwärts mit dem zweiten Bein in der Luft. Diese drei Fotos nimmt man in einer Frontal, Seit- und Rückansicht auf. Insgesamt werden also neun Bilder erstellt. [[Datei:friedrich_character.png\|144px\|thumb\|right\|Vorlage Character Animation]]

	Diese werden in Photoshop bearbeitet um die Charaktere freizustellen. Dies funktioniert mit dem Lasso-Tool hervorragend. Anschließend die Figur ohne Hintergrund speichern, am besten bereits in einer kleineren Größe (in unserem Beispiel sind dies 50Px Hoch x 25 Pixel weit), und die 9 Fotos in einer Datei zusammenführen. Diese wird anschließend mit dem Titel "yourcharactername_character" als .png-Datei gespeichert.		Diese werden in Photoshop bearbeitet um die Charaktere freizustellen. Dies funktioniert mit dem Lasso-Tool hervorragend. Anschließend die Figur ohne Hintergrund speichern, am besten bereits in einer kleineren Größe (in unserem Beispiel sind dies 50Px Hoch x 25 Pixel weit), und die 9 Fotos in einer Datei zusammenführen. Diese wird anschließend mit dem Titel "yourcharactername_character" als .png-Datei gespeichert.