WP + XNA ทำภาพเคลื่อนไหว
การทำภาพเคลื่อนไหว
1) เริ่มจากต้องมี spritesheet ก่อน
2) สร้างตัวแปรมาเก็บ spritesheet
Texture2D Tmale;
3) ระบุขนาด ของ spritesheet
Point frameSize = new Point(32, 32); หมายถึง หนึ่งรูป กว้าง x ยาว = 32x32 pixels
Point currentFrame = new Point(0, 0); หมายถึง จะแสดงรูปที่เท่าไรระบุเป็น แกน X, Y
Point sheetSize = new Point(3, 3); หมายถึง ขนาดของ spritesheet ว่ากี่ column(X) และ กี่row(Y)
4) ทำการคำนวณภาพที่จะภาพแสดงผล(currentFrame) ใน method update
++currentFrame.X;
if (currentFrame.X >= sheetSize.X)
{
currentFrame.X = 0;
}
5) แสดงภาพ ใน method draw
spriteBatch.Draw(Tmale, new Vector2(200, 100),
new Rectangle(currentFrame.X*frameSize.X,currentFrame.Y*frameSize.Y,
frameSize.X,frameSize.Y),
Color.White, 0, new Vector2(0, 0),
2.0f, SpriteEffects.None, 0);
โดยถ้าสังเกตุจะเห็นได้ว่า การวาดรูป จะมี parameter เพิ่มจากเดิม เช่น rectangle เพื่อกำหนดตำแหน่งของรูปภาพใน spritesheet ได้
6) ตามจริงแค่นี้ก็แสดงผลภาพเคลื่อนไหวได้แล้ว แต่ภาพจะเคลื่อนไหวใน frame rate 60 frame per sec (fps) ถ้าเราต้องการแสดงหลายวัตถุ ที่เคลื่อนไหว ช้าเร็วต่างกัน จึงต้องมีการกำหนดตัวแปรเพิ่มเติม คือ
int timeSinceLastFrame = 0;
int msecPerFrame = 200; กำหนดเวลาความช้าเร็ว
และไปเขียน code เพิ่มใน method update เพื่อตรวจสอบ ก่อนการ คำนวณภาพแสดงผล
timeSinceLastFrame += gameTime.ElapsedGameTime.Milliseconds;
if (timeSinceLastFrame > msecPerFrame)
7) ที่จริงการปรับเวลาการแสดงภาพเคลื่อนไม่ต้องทำยุ่งยากก็ได้โดยการ เปลี่ยนค่าในตัวแปร
TargetElapsedTime = new TimeSpan(0, 0, 0, 0, 100); แต่ข้อเสียคือเวลาการเคลื่อนไหวทุกวัตถุจะเท่ากันหมด
sourcecode ครับ
| Create Date : 19 พฤษภาคม 2556 |
| Last Update : 19 พฤษภาคม 2556 8:28:31 น. |
|
0 comments
|
| Counter : 2058 Pageviews. |
 |
|
|
|
|
ฝากข้อความหลังไมค์
Rss Feed
ผู้ติดตามบล็อก : 8 คน [