XNA 人物移動與跳躍(Moving and Jumping)
前面學會了使用虛擬按鍵,讓我們應用在操控人物的移動跟跳躍吧。
先看看完成後的樣子
接下來我們開始來實作這個範例,在專案新增以下三個檔案,包含VirtualDpad.vb類別檔以及人物動畫分割圖片以及一張背景圖 (按這下載)
新增完畢後如下圖所示
再來把Game1的命名空間改為TouchThumbsticks,也就是把Game1裡的程式碼放入下面程式碼之間。
Namespace TouchThumbsticks
.
.
.
End Namespace
在Game1宣告變數
Public Class Game1
Inherits Microsoft.Xna.Framework.Game
Private WithEvents graphics As GraphicsDeviceManager
Private WithEvents spriteBatch As SpriteBatch
Dim spritBatch As SpriteBatch
Dim background As Texture2D '背景圖
Dim player As Texture2D '人物動畫分割圖
Dim position As Vector2 = New Vector2(57, 337) '人物位置
Dim frameSheet As Point = New Point(8, 2) '人物動畫圖片個數 (欄x列) 陣列從0開始
Dim frameSize As Point = New Point(40, 48) '每張動畫小圖的大小 (寬x高)
Dim currentFrame As Point = New Point(0, 0) '當前小圖片位置 (i,j)
Dim animSpeed As Integer = 50 '調整動畫速度:每隔50毫秒換下一張動畫圖片
Dim animCount As Integer = 0 '調整動畫速度:累積時間用
Dim isJumping As Boolean = False '人物跳躍狀態旗標
Dim V As Vector2 = New Vector2(0, -300) '跳躍時 Y方向的速度
Dim a As Integer = 500 '重力加度 500 pixel/秒平方
End Class
LoadContent()載入圖片
Protected Overrides Sub LoadContent()
' Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = New SpriteBatch(GraphicsDevice)
' TODO: use Me.Content to load your game content here
player = Content.Load(Of Texture2D)("lucas")
background = Content.Load(Of Texture2D)("stage")
End Sub
在Update()裡撰寫主要按鍵控制人物的程式碼,在這裡用到了直線運動、2D動畫、拋物線運動、虛擬按鍵等技術。
Protected Overrides Sub Update(ByVal gameTime As GameTime)
' Allows the game to exit
If GamePad.GetState(PlayerIndex.One).Buttons.Back = ButtonState.Pressed Then
Me.Exit()
End If
' TODO: Add your update logic here
VirtualDpad.Update() '更新按鍵狀態
If VirtualDpad.LeftMoveVector.Length > 0.2 Then '按下左鍵
position.X += VirtualDpad.LeftMoveVector.X * 5 '移動人物
animCount += gameTime.ElapsedGameTime.Milliseconds '播放人物跑步動畫
If animCount > animSpeed Then
animCount = 0
currentFrame.Y = 1
currentFrame.X += 1
If currentFrame.X >= 8 Then
currentFrame.X = 0
End If
End If
Else
animCount += gameTime.ElapsedGameTime.Milliseconds '播放人物站立動畫
If animCount > animSpeed Then
animCount = 0
currentFrame.Y = 0
currentFrame.X += 1
If currentFrame.X >= 3 Then
currentFrame.X = 0
End If
End If
End If
If VirtualDpad.RightTouch Then '按下右鍵
isJumping = True
End If
If isJumping Then '執行跳躍程式碼
If VirtualDpad.LeftMoveVector.X = 0 Then '跳躍中放掉左鍵
currentFrame.Y = 2 '設定人物圖片為原地掉落
currentFrame.X = 2
End If
V.Y = V.Y + CInt(a * gameTime.ElapsedGameTime.TotalSeconds) '拋物線運動公式
position.Y = position.Y + CInt(V.Y * gameTime.ElapsedGameTime.TotalSeconds) + CInt(0.5 * a * (gameTime.ElapsedGameTime.TotalSeconds) ^ 2)
If position.Y > 337 Then '落到地面時初始化相關變數
position.Y = 337
V.Y = -300
isJumping = False
End If
End If
MyBase.Update(gameTime)
End Sub
Draw()繪製人物圖片,這邊要注意往左的圖片是往右圖片的鏡射,參數為 SpriteEffects.FlipHorizontally
Protected Overrides Sub Draw(ByVal gameTime As GameTime)
GraphicsDevice.Clear(Color.CornflowerBlue)
' TODO: Add your drawing code here
spritBatch.Begin()
spritBatch.Draw(background, Vector2.Zero, Color.White)
If VirtualDpad.LeftMoveVector.X < 0 Then '往左移動時,繪製圖面採鏡射(SpriteEffects.FlipHorizontally)
spritBatch.Draw(player, New Rectangle(CInt(position.X), CInt(position.Y), frameSize.X, frameSize.Y), New Rectangle(currentFrame.X * frameSize.X, currentFrame.Y * frameSize.Y, frameSize.X, frameSize.Y), Color.White, 0, New Vector2(0, 0), SpriteEffects.FlipHorizontally, 0)
Else
spritBatch.Draw(player, position, New Rectangle(currentFrame.X * frameSize.X, currentFrame.Y * frameSize.Y, frameSize.X, frameSize.Y), Color.White)
End If
spritBatch.End()
MyBase.Draw(gameTime)
End Sub
程式執行結果如下,期待下次的修練 (範例下載)