2D Pixel * Tile Figurenanimation

Übersicht

BlitzBasic

FAQ und Tutorials

	DivineDominion Betreff: 2D Pixel * Tile Figurenanimation	Do, Jan 20, 2005 19:34 Antworten mit Zitat
Animationen sind wichtig. Vor allem, wenn man das neueste Gothic-3-Killer-RPG basteln will Das Problem daran ist nur, dass man nicht jede Frame mit For-Next durchrattern kann (das hält das Programm ja an) sondern sich was anderes überlegen muss. Außerdem muss das ganze ja noch irgendwie passen etc. und so landet man bei einem rauchenden Kopf und einer noch immer nicht animierten Figur. Ich habe mir damals bei meinem QuickRPG die Gedanken nicht sehr lange gemacht sondern einfach die schnellste Lösung genommen: Von Tile zu Tile laufen und den Übergang pixelweise vollziehen UND dabei animieren! Das ging wirklich sehr einfach und ich sehe das eigentliche Animationsproblem heute nur noch bei pixelgenauer Bewegung. Natürlich sehe ich das Problem nicht für mich, sondern für euch, weil das einfach noch ein Stückchen schwerer ist, denn man muss die Animation abbrechen und an passender Stelle fortsetzen (nicht immer der linke Fuß zuerst, das sähe ja bekloppt aus). Und das ganze dann noch schön sauber zu Programmieren, eine anständige Kollision einzubauen und am Ende noch so wenig Prozessorlast zu schaffen, dass man auch mal Grafik anzeigen kann, ist ein ganzes Stück Arbeit für jeden Anfänger. Darum rate ich davon shclichtweg erstmal ab - das könnt ihr ja nächste Woche noch machen. Heute wird erst einmal "Pixel * Tile" bewegt, also pixelweise von Tile zu Tile. Der Grundgedanke ist, dass man um die tilegröße (hier 16x16) bewegt, also 16 Pixel laufen muss. Das wären, bei 1 Pixel pro Schleifendurchlauf, 16 Schritte. bei 2px/Frame wären es 8 Schritte, womit sich auch gut arbeiten lässt, vor allem weil der Spieler dann in einer guten Geschwindigkeit rumläuft. Orientiert an den Final Fantasy Teilen für das SNES, die noch 16x16 Figuren hatten, also FF2, 4, 5 und Mystic Quest, nehme ich daher meine QuickRPG-Grafik mit nur 2 Frames pro Animationsrichtung. Hübscher sind 3, hatte da aber keine passende zur Hand. Wohl an, wir müssen eigentlich nur eine Richtung bestimmen (am besten mit globaler Variable und Konstanten): Code: [AUSKLAPPEN] [EINKLAPPEN] global richtung const OBEN = 0 ;usw Damit können wir unsere Bewegung schon mal koordinieren, also welche Variable, x oder y, verändert werden soll. Dann bauen wir eine Variable für die Schritte zwischen den Tiles an, die in unserem Falle einfach pixelweise von statten geht und so zwischen 0 und 15 sein soll. Damit koordinieren wir die Animation später. Wichtig ist jetzt nicht nur eine Variable für die Frame zu nehmen, die angezeigt werden soll. Grund dafür ist, dass man mit einer Basis (erste Frame der Bewegungsrichtung) und einem relativen Animationswert besser arbeiten kann. Bei 2 Frames pro Animation betrüge der relative Wert immer 0 oder 1. Mehr ist das ganze schon nicht mehr, drum habe ich auch einfach nur mal den kompletten Code unten drangehangen und wünsche euch viel Spaß mit euren neuen sich bewegenden Figuren! Das Bild: Code: [AUSKLAPPEN] [EINKLAPPEN] Graphics 640, 480, 0, 2 SetBuffer BackBuffer( ) ;Große der Tiles (und zufälligerweise meiner figur) Const TILESIZE = 16 ;den netten Cutter laden Global cutter = LoadAnimImage( "cutter.bmp", 16, 16, 0, 19 ) ;Framekram und Fortschritt der Animation Global frameBase, frame, schritt ;Richtungen Const OBEN = 0 Const RECHTS = 1 Const UNTEN = 2 Const LINKS = 3 Global richtung ;Koordinaten Global playerX, playerY ;Blockade der Tastatur Global animieren = False ;Für euch anti-VSyncer hab ich hier einfach geblockt... t = CreateTimer( 40 ) While Not KeyHit( 1 ) WaitTimer( t ) Cls playerInput( ) main( ) draw( ) Flip Wend Function playerInput( ) If animieren = False If KeyDown( 200 ) ;Rauf ;Richtung festlegen richtung = OBEN ;Basisframe (von 0 zählen!) frameBase = 4 ;darauf zu addierende Animationsstufe frame = 0 ;Animationsfortschritt schritt = 0 ;Tastatur blockieren animieren = True ElseIf KeyDown( 208 ) ;Runter richtung = UNTEN frameBase = 0 frame = 0 schritt = 0 animieren = True ElseIf KeyDown( 203 ) ;Links richtung = LINKS frameBase = 6 frame = 0 schritt = 0 animieren = True ElseIf KeyDown( 205 ) ;Rechts richtung = RECHTS frameBase = 2 frame = 0 schritt = 0 animieren = True EndIf EndIf End Function Function main( ) If animieren ;Die "Phasen" sind die Abschnitte, zu deren Anfang ;die Frame geändert werden soll. Haben ja nur 2 pro ;Richtung: ; ;Schritt : 0 1 2 3 4 5 6 7 8 9 0 A B C D E F ;Phase : se 1 \| phase 2 \| pha If schritt = 4 frame = 1 ElseIf schritt = 12 frame = 0 EndIf ;Spieler in passende Richtung bewegen Select richtung Case OBEN playerY = playerY - 1 Case RECHTS playerX = playerX + 1 Case UNTEN playerY = playerY + 1 Case LINKS playerX = playerX - 1 End Select ;Schritt machen - 0-15 = 16, unsere Tilebreite schritt = schritt + 1 If schritt = TILESIZE Then animieren = False EndIf End Function Function draw( ) ;Malen! :) DrawImage cutter, playerX, playerY, frameBase + frame End Function Edit: Damit ich es selber wiederfinde, mal ein paar Suchbegriffe: Pixel by Tile, P*T
christian.tietze@gmail.com - https://christiantietze.de macOS

DivineDominion

Betreff: 2D Pixel * Tile Figurenanimation

Do, Jan 20, 2005 19:34
Antworten mit Zitat

Animationen sind wichtig. Vor allem, wenn man das neueste Gothic-3-Killer-RPG basteln will Wink

Das Problem daran ist nur, dass man nicht jede Frame mit For-Next durchrattern kann (das hält das Programm ja an) sondern sich was anderes überlegen muss. Außerdem muss das ganze ja noch irgendwie passen etc. und so landet man bei einem rauchenden Kopf und einer noch immer nicht animierten Figur.

Ich habe mir damals bei meinem QuickRPG die Gedanken nicht sehr lange gemacht sondern einfach die schnellste Lösung genommen: Von Tile zu Tile laufen und den Übergang pixelweise vollziehen UND dabei animieren!
Das ging wirklich sehr einfach und ich sehe das eigentliche Animationsproblem heute nur noch bei pixelgenauer Bewegung. Natürlich sehe ich das Problem nicht für mich, sondern für euch, weil das einfach noch ein Stückchen schwerer ist, denn man muss die Animation abbrechen und an passender Stelle fortsetzen (nicht immer der linke Fuß zuerst, das sähe ja bekloppt aus). Und das ganze dann noch schön sauber zu Programmieren, eine anständige Kollision einzubauen und am Ende noch so wenig Prozessorlast zu schaffen, dass man auch mal Grafik anzeigen kann, ist ein ganzes Stück Arbeit für jeden Anfänger.

Darum rate ich davon shclichtweg erstmal ab - das könnt ihr ja nächste Woche noch machen.

Heute wird erst einmal "Pixel * Tile" bewegt, also pixelweise von Tile zu Tile.

Der Grundgedanke ist, dass man um die tilegröße (hier 16x16) bewegt, also 16 Pixel laufen muss.
Das wären, bei 1 Pixel pro Schleifendurchlauf, 16 Schritte. bei 2px/Frame wären es 8 Schritte, womit sich auch gut arbeiten lässt, vor allem weil der Spieler dann in einer guten Geschwindigkeit rumläuft.

Orientiert an den Final Fantasy Teilen für das SNES, die noch 16x16 Figuren hatten, also FF2, 4, 5 und Mystic Quest, nehme ich daher meine QuickRPG-Grafik mit nur 2 Frames pro Animationsrichtung. Hübscher sind 3, hatte da aber keine passende zur Hand.

Wohl an, wir müssen eigentlich nur eine Richtung bestimmen (am besten mit globaler Variable und Konstanten):
Code: [AUSKLAPPEN]

global richtung
const OBEN = 0 ;usw

Damit können wir unsere Bewegung schon mal koordinieren, also welche Variable, x oder y, verändert werden soll. Dann bauen wir eine Variable für die Schritte zwischen den Tiles an, die in unserem Falle einfach pixelweise von statten geht und so zwischen 0 und 15 sein soll. Damit koordinieren wir die Animation später.

Wichtig ist jetzt nicht nur eine Variable für die Frame zu nehmen, die angezeigt werden soll.
Grund dafür ist, dass man mit einer Basis (erste Frame der Bewegungsrichtung) und einem relativen Animationswert besser arbeiten kann. Bei 2 Frames pro Animation betrüge der relative Wert immer 0 oder 1.

Mehr ist das ganze schon nicht mehr, drum habe ich auch einfach nur mal den kompletten Code unten drangehangen und wünsche euch viel Spaß mit euren neuen sich bewegenden Figuren!

Das Bild:
user posted image

Code: [AUSKLAPPEN]

Graphics 640, 480, 0, 2
SetBuffer BackBuffer( )

;Große der Tiles (und zufälligerweise meiner figur)
Const TILESIZE = 16

;den netten Cutter laden
Global cutter = LoadAnimImage( "cutter.bmp", 16, 16, 0, 19 )

;Framekram und Fortschritt der Animation
Global frameBase, frame, schritt

;Richtungen
Const OBEN = 0
Const RECHTS = 1
Const UNTEN = 2
Const LINKS = 3
Global richtung

;Koordinaten
Global playerX, playerY

;Blockade der Tastatur
Global animieren = False

;Für euch anti-VSyncer hab ich hier einfach geblockt...
t = CreateTimer( 40 )
While Not KeyHit( 1 )
WaitTimer( t )
Cls

playerInput( )
main( )
draw( )

Flip

Wend

Function playerInput( )

If animieren = False

   If KeyDown( 200 ) ;Rauf

      ;Richtung festlegen
      richtung = OBEN

      ;Basisframe (von 0 zählen!)
      frameBase = 4

      ;darauf zu addierende Animationsstufe
      frame = 0

      ;Animationsfortschritt
      schritt = 0

      ;Tastatur blockieren
      animieren = True

   ElseIf KeyDown( 208 ) ;Runter

      richtung = UNTEN
      frameBase = 0
      frame = 0
      schritt = 0

      animieren = True

   ElseIf KeyDown( 203 ) ;Links

      richtung = LINKS
      frameBase = 6
      frame = 0
      schritt = 0

      animieren = True

   ElseIf KeyDown( 205 ) ;Rechts

      richtung = RECHTS
      frameBase = 2
      frame = 0
      schritt = 0

      animieren = True

   EndIf

EndIf

End Function

Function main( )

If animieren

   ;Die "Phasen" sind die Abschnitte, zu deren Anfang
   ;die Frame geändert werden soll. Haben ja nur 2 pro
   ;Richtung:
   ;
   ;Schritt : 0 1 2 3 4 5 6 7 8 9 0 A B C D E F
   ;Phase    : se 1 | phase 2 | pha

   If schritt = 4

      frame = 1

   ElseIf schritt = 12

      frame = 0

   EndIf

   ;Spieler in passende Richtung bewegen
   Select richtung

      Case OBEN

         playerY = playerY - 1

      Case RECHTS

         playerX = playerX + 1

      Case UNTEN

         playerY = playerY + 1

      Case LINKS

         playerX = playerX - 1

   End Select

   ;Schritt machen - 0-15 = 16, unsere Tilebreite
   schritt = schritt + 1
   If schritt = TILESIZE Then animieren = False

EndIf

End Function

Function draw( )

;Malen! :)
DrawImage cutter, playerX, playerY, frameBase + frame

End Function

Edit: Damit ich es selber wiederfinde, mal ein paar Suchbegriffe: Pixel by Tile, P*T

christian.tietze@gmail.com - https://christiantietze.de
macOS