2D Animation Bone System

Community Forums/Showcase/2D Animation Bone System

therevills

(Posted 2011) [#1]

Over the Christmas holidays Ive converted this C code into BlitzMax and added z order to the bones:

http://gpwiki.org/index.php/OpenGL:Tutorials:Basic_Bones_System

I think Ive got it to a stage where I can actually use it in a game.

http://www.youtube.com/watch?v=hZueOdaqBBg

http://www.youtube.com/watch?v=j2aWC0nwx4o

You see my progress over the few weeks at IndieCodez

http://www.indiecodez.com/forum/index.php/topic,65.0.html

This code uses Ziggy's delta timing code

http://www.blitzmax.com/codearcs/codearcs.php?code=2460

and using the Plants Vs Zombies Zombie graphics.

Bones.bmx

SuperStrict
SeedRnd(MilliSecs())

Const SCREEN_WIDTH:Int = 800
Const SCREEN_HEIGHT:Int = 600

Const MAX_CHCOUNT:Int = 8
Const MAX_BONECOUNT:Int = 20
Const MAX_KFCOUNT:Int = 20

Const DefaultMinimumTimeFactor:Double = 0.25
Const DefaultMaximumTimeFactor:Double = 5

Global flipSyncVar:Int = 1

Global Handler:Int = AddHook(FlipHook, DeltaHook)
Global Paused:Int = False
Global DeltaTime:Double
Global LastTiming:Double = MilliSecs()
Global MinimumTimeFactor:Double = DefaultMinimumTimeFactor
Global MaximumTimeFactor:Double = DefaultMaximumTimeFactor

Global LastMillisecs:Int = Millisecs()
Global Counter:Int = 0

Global FPS:Int = 0'MilliSecs()

Global slow:Int = False
	
Incbin "gfx\Zombie_body.png"
Incbin "gfx\Zombie_head.png"
Incbin "gfx\Zombie_innerarm_lower.png"
Incbin "gfx\Zombie_innerarm_upper.png"
Incbin "gfx\Zombie_innerleg_lower.png"
Incbin "gfx\Zombie_innerleg_upper.png"
Incbin "gfx\Zombie_outerarm_lower.png"
Incbin "gfx\Zombie_outerarm_upper2.png"
Incbin "gfx\Zombie_outerleg_lower.png"
Incbin "gfx\Zombie_outerleg_upper.png"

Global game:TGame = New TGame

game.Setup()
game.Run()

Type TGame
	' all sprites
	Field objectList:TList
	Field waiter:Int = 0
	Field showDebug:Int = 0
	
	Method Setup()
		Graphics SCREEN_WIDTH, SCREEN_HEIGHT
		SetBlend ALPHABLEND
		objectList = CreateList()

		For Local i:Int = 1 To 5
			Local s:TSprite = TSprite.Create(Rand(0, SCREEN_WIDTH), Rand(0, SCREEN_HEIGHT - 100), "zombie.txt")
			objectList.AddLast(s)
		Next
		
		SortList objectList, False, ZOrderSort
	End Method

	Method Run()
		Repeat
			Logic()
			Draw()
		Until AppTerminate() Or KeyHit(KEY_ESCAPE)
	End Method
	
	Method Logic()
		SortList objectList, False, ZOrderSort

		TSprite.UpdateAll()
		If KeyHit(KEY_D)
			showDebug = Not showDebug
		End If
		If KeyHit(KEY_V) Then
			If Not flipSyncVar
				flipSyncVar = 1
			Else
				flipSyncVar = 0
			End If			
			FlushKeys()
		EndIf
		If KeyHit(KEY_P) Then
			If Delta.IsPaused() = True Then
				Delta.ResumeDeltaTiming()
			Else
				Delta.PauseDeltaTiming()
			End If
		EndIf
		If KeyHit(KEY_Q) Then
			waiter:+10
		ElseIf KeyHit(KEY_W) And waiter > 0 Then
			waiter:-10
		EndIf
		If waiter > 0 Then Delay(waiter)

	End Method
	
	Method Draw()
		Cls
			For Local s:TSprite = EachIn objectList
				s.Draw()
			Next
			DrawHUD()
		flipSync()
	End Method
	
	Method DrawHUD()
		DrawText "Delta :" + Delta.Factor(), 0, 0
		DrawText "FPS   :" + Delta.GetFPS(), 0, 10
		DrawText "VSync :" + flipSyncVar, 0, 20
		DrawText "Slow  :" + Delta.IsComputerSlow(), 0, 30
		DrawText "MinimumTimeFactor  :" + Delta.GetMinimumTimeFactor(), 0, 40
		DrawText "MaximumTimeFactor  :" + Delta.GetMaximumTimeFactor(), 0, 50
		DrawText "Paused:" + Delta.IsPaused(), 0, 60
		DrawText "Waiter:" + Self.waiter, 0, 70
	End Method
	
End Type

Function flipSync()
	Flip flipSyncVar
End Function

Type TSprite
	Field x:Float, y:Float, z:Float
	Field boneListDrawOrder:TList
	Field rootBone:TBone
	Field dx:Float, dy:Float
	Field frameNum:Int
	Field frameDelay:Float
	Field maxFrameDelay:Float
		
	Function Create:TSprite(x:Float, y:Float, bonesFile:String)
		Local s:TSprite = New TSprite
		s.boneListDrawOrder = New TList
		s.x = x
		s.y = y
		s.dx = Rnd(-2, -1)
		s.maxFrameDelay = Rand(1, 4)
		s.LoadBones2("data/bones/" + bonesFile)
		Return s
	End Function
	
	Method CreateBone:TBone(x:Float, y:Float, a:Float, l:Float, name:String = "Bone", z:Int = 0)
		Local b:TBone = TBone.CreateBone(x, y, a, l, name, z)
		boneListDrawOrder.AddLast(b)
		Return b
	End Method
	
	Method AddChildBone:TBone(root:TBone, x:Float, y:Float, a:Float, l:Float, name:String = "Bone", z:Int = 0)
		If root = Null Then
			rootBone = CreateBone(x, y, a, l, name, z)
			root = rootBone
		End If
	
		'If we can't fit it, die
		If root.childCount >= root.child.Length Then Return Null

		root.childCount:+1
		root.child[root.childCount - 1] = CreateBone(x, y, a, l, name, z)
		root.child[root.childCount - 1].parent = root
		boneListDrawOrder.AddLast(root.child[root.childCount - 1])
		Return root.child[root.childCount - 1]
	EndMethod
	
	Method LoadBones2(path:String)
		Local x:Float, y:Float, a:Float, l:Float
		Local depth:Int, actualLevel:Int, z:Int, offx:Int, offy:Int
		Local name:String, depthStr:String, buffer:String, image:String, animBuffer:String
		Local bufferString:String[]
		Local animBufferString:String[], animString:String[]
		Local k:TKeyFrame
		
		Local file:TStream = OpenFile(path)

		If Not file RuntimeError "could not open file " + path
		
		actualLevel = 0;
		
		Local root:TBone, temp:TBone

		While Not Eof(file)
			buffer = ReadLine(file)
			Print buffer
			If buffer.Length < 3 Continue
			bufferString = buffer.Split(" ")
			
			depthStr = bufferString[0]
			x = bufferString[1].ToFloat()
			y = bufferString[2].ToFloat()
			a = bufferString[3].ToFloat()
			l = bufferString[4].ToFloat()
			name = bufferString[5]
			z = bufferString[6].ToInt()

			If bufferString.Length > 7
				image = bufferString[7]
				offx = bufferString[8].ToInt()
				offy = bufferString[9].ToInt()
			Else
				image = ""
				offx = 0
				offy = 0
			EndIf
			
			depth = depthStr.Length - 1
			If (depth < 0 Or depth > MAX_CHCOUNT)
				Print "Wrong bone depth " + depthStr
				Exit
			End If
			
			While (actualLevel > depth)
				actualLevel:-1
				temp = temp.parent
			Wend
			
			If (Not root And Not depth)
				root = AddChildBone(Null, x, y, a, l, name, z)
				temp = root
			Else
				temp = AddChildBone(temp, x, y, a, l, name, z)
				If image.Length > 0
					temp.image = LoadImg(image, offx, offy)
				End If
			End If
			
			' check animation data
			' Format: t,a,l t,a,l, t,a,l (time,angle,length<SPACE>time,angle,length<SPACE>)
			animBuffer = ReadLine(file)
			Print animBuffer
			
			If animBuffer.Length > 3
				animBufferString = animBuffer.Split(" ")
				For Local i:Int = 0 To animBufferString.Length - 1
					animString = animBufferString[i].Split(",")
					k = TKeyFrame.CreateKeyFrame(animString[0].ToInt(), animString[1].ToFloat(), animString[2].ToFloat())
					temp.AddKeyFrame(k)
				Next
			End If
			
			actualLevel:+1
					
		Wend
		
		CloseStream file
		
		SortList boneListDrawOrder, False, ZOrderBoneSort
	End Method

	Method LoadImg:TImage(path:String, x:Float = 0, y:Float = 0)
		Local img:TImage = LoadImage(path)
		SetImageHandle img, img.width / 2 - x, 0 - y
		Return img
	End Method
	
	Method DrawBones()
		rootBone.Draw(rootBone, x, y, 0)
	End Method
	
	Method Draw()
		For Local i:TBone = EachIn boneListDrawOrder
			If i.image <> Null
				SetRotation i.realAngle - 90
				DrawImage i.image, i.realX1 + x, i.realY1 + y
				SetRotation 0
			EndIf
		Next
	
		' draw lines
		If game.showDebug
			rootBone.Draw(rootBone, x, y, 0)
			If 1 = 0
				' draw hotspot for images
				For Local i:TBone = EachIn boneListDrawOrder
					If i.image <> Null
						SetRotation i.realAngle - 90
						SetColor 0, 255, 0
						DrawOval i.realX1 + x - 2, i.realY1 + y - 2, 4, 4
						SetColor 255, 255, 255
						SetRotation 0
					End If
				Next
			EndIf
		EndIf
	End Method
	
	Function UpdateAll()
		
		For Local s:TSprite = EachIn game.objectList
			s.Update()
		Next
		
	End Function
	
	Method Update()
		CalcData(rootBone)
		x:+dx * Delta.Factor()

		If x > SCREEN_WIDTH + 50 Then
			x = -50
			y = Rand(0, SCREEN_HEIGHT - 100)
			dx = Rnd(1, 8)
		EndIf

		If x < - 50 Then
			x = SCREEN_WIDTH + 50
			y = Rand(0, SCREEN_HEIGHT - 100)
			dx = -2'Rnd(-8, -1)
		EndIf
				
		frameDelay:+1 * Delta.Factor()
		If frameDelay >= maxFrameDelay
			Animate(rootBone, frameNum)
			frameNum = frameNum + 1
			frameDelay = 0
			If frameNum > 60 Then
				frameNum = 0
			EndIf
		EndIf		
		
	End Method
	
	Method CalcData(root:TBone = Null, xx:Float = 0, yy:Float = 0, angle:Float = 0)

		If root = Null Then root = rootBone
		
		Local x1:Float = root.x + xx
		Local y1:Float = root.y + yy
		
		' find x2, y2 based on length and angle
		Local ang:Float = root.angle + angle - 90
		Local x2:Float = x1 + root.length * Cos(ang) ;
		Local y2:Float = y1 + root.length * Sin(ang) ;
		
		root.realX1 = x1
		root.realY1 = y1
		
		root.realX2 = x2
		root.realY2 = y2
		
		root.realAngle = ang
		
		For Local i:Int = 0 To root.childCount - 1
			calcData(root.child[i], x2, y2, root.angle + angle)
		Next				
	End Method
	
	Method Animate(root:TBone, time:Int)
		Local i:Int
		Local ang:Float, leng:Float, tim:Float

		For i = 0 To root.keyFrameCount - 1
			If root.keyFrame[i].time = time
				If i <> root.keyFrameCount - 1
					tim = root.keyFrame[i + 1].time - root.keyFrame[i].time
					ang = root.keyFrame[i + 1].angle - root.keyFrame[i].angle
					leng = root.keyFrame[i + 1].length - root.keyFrame[i].length
					
					root.offA = ang / tim
					root.offL = leng / tim
				Else
					root.offA = 0
					root.offL = 0
				EndIf
			EndIf
		Next

		root.angle:+root.offA
		root.length:+root.OffL
		
		For i = 0 To root.childCount - 1
			Animate(root.child[i], time)
		Next
		
	End Method
End Type

Type TBone
	Field name:String
	Field x:Float, y:Float, angle:Float, length:Float
	Field z:Int, childCount:Int
	Field child:TBone[MAX_CHCOUNT]
	Field parent:TBone
	Field realX1:Float, realX2:Float
	Field realY1:Float, realY2:Float
	Field realAngle:Float
	Field image:TImage
	Field keyFrameCount:Int
	Field keyFrame:TKeyFrame[MAX_KFCOUNT]
	Field offA:Float, offL:Float
	
	Function CreateBone:TBone(x:Float, y:Float, a:Float, l:Float, name:String = "Bone", z:Int = 0)
		Local b:TBone = New TBone
		b.x = x
		b.y = y
		b.angle = a
		b.length = l
		b.name = name
		b.z = z
		Return b
	EndFunction

	Method draw(root:TBone = Null, xx:Float = 0, yy:Float = 0, angle:Float = 0)
		If root = Null Then root = Self

		Local x1:Float = root.x + xx
		Local y1:Float = root.y + yy
		
		' find x2, y2 based on length and angle
		Local ang:Float = root.angle + angle - 90
		Local x2:Float = x1 + root.length * Cos(ang) ;
		Local y2:Float = y1 + root.length * Sin(ang) ;

		DrawText root.name, x1, y1
		DrawLine x1, y1, x2, y2
		
		For Local i:Int = 0 To root.childCount - 1
			draw(root.child[i], x2, y2, root.angle + angle)
		Next
	End Method
	
	Method AddKeyFrame(kf:TKeyFrame)
		Self.keyFrame[keyFrameCount] = kf
		keyFrameCount:+1
	End Method	
End Type

Type TKeyFrame
	Field time:Int;
	Field angle:Float, length:Float
	
	Function CreateKeyFrame:TKeyFrame(time:Int, angle:Float, length:Float)
		Local kf:TKeyFrame = New TKeyFrame
		kf.time = time
		kf.angle = angle
		kf.length = length
		Return kf
	End Function
End Type

Function ZOrderBoneSort:Int(o1:Object, o2:Object)
	Local s1:TBone = TBone(o1)
	Local s2:TBone = TBone(o2)
	If s1 And s2
		Return s2.z - s1.z
	Else
		Return o1.Compare(o2)
	End if
End Function

Function ZOrderSort:Int(o1:Object, o2:Object)
	Local s1:TSprite = TSprite(o1)
	Local s2:TSprite = TSprite(o2)
	If s1 And s2
		Return s2.y - s1.y
	Else
		Return o1.Compare(o2)
	End if
End Function

Function DeltaHook:Object(id:Int, data:Object, context:Object)
	If Not Paused UpdateTiming()
End Function

Function UpdateTiming()
	Local MLS:Double = MilliSecs()
	DeltaTime = Abs(MLS - LastTiming) / 10.0
	If DeltaTime < MinimumTimeFactor Then
		While DeltaTime < MinimumTimeFactor
			Delay(1)
			MLS = MilliSecs()
			DeltaTime = Abs(MLS - LastTiming) / 10.0
'			Print DeltaTime + ", " + MLS
		Wend
	End If
	LastTiming = MLS
	If DeltaTime > MaximumTimeFactor Then
		DeltaTime = MaximumTimeFactor
		slow = True
	Else
		slow = False
	EndIf
	Counter:+1
	If Abs(LastMillisecs - MLS) > 1000 Then
		FPS = Counter
		Counter = 0
		LastMillisecs = MLS
	End If
End Function

Type Delta Abstract
	Function Factor:Double()
		Return DeltaTime
	End Function

	Function SetMinimumTimeFactor(Factor:Double = DefaultMinimumTimeFactor)
		MinimumTimeFactor = Factor
	End Function

	Function GetMinimumTimeFactor:Double()
		Return MinimumTimeFactor
	End Function

	Function SetMaximumTimeFactor(Factor:Double = DefaultMaximumTimeFactor)
		MaximumTimeFactor = Factor
	End Function

	Function GetMaximumTimeFactor:Double()
		Return MaximumTimeFactor
	End Function

	Function IsComputerSlow:Int()
		Return slow
	End Function

	Function GetFPS:Int()
		Return FPS
	End Function

	Function PauseDeltaTiming()
			Paused = True
	End Function

	Function ResumeDeltaTiming()
		If Paused = True Then
			Self.FlushTiming
			Paused = False
		End If
	End Function
	
	Function FlushTiming()
			LastTiming = MilliSecs()
			LastMillisecs:Int = MilliSecs()
			Counter = 0
	End Function
	
	Function IsPaused:Int()
		Return Paused
	End Function

End Type

And here is an example of the bone/animation structure:

The format is this:
# 0 0 0 0 Name 0 image.png 0 0
0,0,0 30,90,0 60,0,0

boneLevel x y angle length name z-order imageFileName imageOffsetX imageOffsetY
time,angle,length time,angle,length

# 0 0 0 0 Root 0

## 0 0 180 43 head 1 incbin::gfx\Zombie_head.png 0 0

### 25 -7 0 55 back 0 incbin::gfx\Zombie_body.png 0 0

#### 0 5 25 20 lleg -3 incbin::gfx\Zombie_innerleg_upper.png 0 0
0,0,0 30,-10,0 60,0,0
##### 0 0 -20 30 lleg2 -2 incbin::gfx\Zombie_innerleg_lower.png -8 0

#### 10 -5 -45 40 rleg -1 incbin::gfx\Zombie_outerleg_upper.png 0 0
0,0,0 30,80,0 60,0,0
##### 0 0 45 50 rleg2 -1 incbin::gfx\Zombie_outerleg_lower.png 0 -5
0,0,0 30,-90,0 60,0,0
### 10 15 70 25 rarm -4 incbin::gfx\Zombie_innerarm_upper.png 0 0
0,0,0 30,-100,0 60,0,0
#### 0 0 75 28 rarm2 -4 incbin::gfx\Zombie_innerarm_lower.png -3 -4
0,0,0 30,-80,0 60,0,0
### 30 10 -23 25 larm 1 incbin::gfx\Zombie_outerarm_upper2.png 0 0
0,0,0 30,100,0 60,0,0
#### 0 0 25 28 larm2 2 incbin::gfx\Zombie_outerarm_lower.png -8 -5
0,0,0 30,-20,0 60,0,0

Last edited 2011

slenkar

(Posted 2011) [#2]

nice videos

Pengwin

(Posted 2011) [#3]

I like this. It could be well worth looking at further. I can see so many applications for this type of animation, rather than pre-rendered sprites.

Paul "Taiphoz"

(Posted 2011) [#4]

Not to mention the people who sucked at animation but can draw really well will be able to take thier art and make it actually animate nice.