Sprite

1. Sprite SuphotSawattiwongtohpus@hotmail.com

2. Sprite • ใน XNA นั้น ใช้ตัวแปร Texture2D ในการเก็บรูปภาพที่ใช้งานแต่หากศัพท์ที่นิยมใช้กันทั่วไปในการพัฒนาเกม อาจจะเรียกสิ่งเหล่านี้ว่า “Sprite” • โดยปกติที่ผ่านมาได้มีการโหลดรูปเพื่อใช้ในเกมโดย 1 ภาพ เป็นภาพที่พร้อมใช้งาน แต่หากเกมมีเป็น 100 ภาพ มันก็เสียเวลาที่โหลด content นานเกินไป • ดังนั้นเราจึงมีวิธีการจัดภาพที่มีลักษณะการใช้งานเข้าด้วยกันมาอยู่ในภาพเดียวกัน และเลือกที่จัดการโดยการ Clip

3. การ Clip ของ Sprite • การ Clip เป็นการตัดภาพออกมาเป็นส่วนเพื่อที่ใช้งานเฉพาะส่วนนั้นๆได้ Rectangle(localX,localY,ความกว้างที่ต้องการ, ความยาวที่ต้องการ) แล้วนำไปใส่ใน Draw

4. ตัวอย่างการ Clip • ตัวอย่างจากภาพก่อนหน้าหาก clip ที่กรอบสีแดงของภาพต้องใช้คำสั่งดังนี้ spriteBatch.Draw(t2dSprite, new Vector(10, 20), new Rectangle(0, 0, 64, 64),Color.White);

5. ตัวอย่างการ Clip • หากต้องการ Clip ดังภาพต้องเขียน code ดังต่อไปนี้ spriteBatch.Draw(t2dSprite,new Vector(10, 20), new Rectangle(10, 64, 64, 64),Color.White); • ให้ดู Project ที่ชื่อว่า SpriteClipแล้วลองรันดู

6. Cel Animation หรือ Sprite Animation • จากที่รู้จักการใช้ Clip แล้ว ต่อมาเป็นการเพิ่มขีดความสามารถของ Clip ให้สูงขึ้น โดยการนอกจากทำการ Clip เป็นชิ้นงานแล้ว นำมาทำการต่อเนื่องเป็น Animation กัน ซึ่งสิ่งเหล่านี้เรียกว่า “Cel Animation”

7. ชุดคำสั่งในการใช้งาน SpriteAnimationManager • การประกาศ Instance ทำได้โดยมี parameter ดังนี้ ตัวแปร = newSpriteAnimationManager(Game game,string contentPath); • โดยมี game เป็นตัวที่เรียก Class game ที่เป็นตัวเรียกใช้ sam contentPathเป็นที่อยู่ของที่เก็บภาพใน Folder Contentอีกที

8. ชุดคำสั่งในการใช้งาน SpriteAnimationManager • การประกาศ Instance ทำได้โดยมี parameter ดังนี้ ตัวแปร = newSpriteAnimationManager(Game game,string contentPath); • โดยมี game เป็นตัวที่เรียก Class game ที่เป็นตัวเรียกใช้ sam contentPathเป็นที่อยู่ของที่เก็บภาพใน Folder Contentอีกที

9. การ AddAnimation • ในSpriteAnimationManager ได้มีการ AddAnimationอยู่2 แบบด้วยกันคือ • แบบที่ 1 animationKeyเป็นชื่อ Animation ที่ต้องการใช้ textureName เป็นชื่อไฟล์ Texture SpriteCountเป็น Struct ที่สามารถเรียกใช้โดยใส่ จำนวน frame ต่อแถว และใส่จำนวนแถว เช่น newSpriteCount(6, 3) framesPerSecondเป็น ความเร็วในการเคลื่อนที่ของ Sprite หน่วยเป็น fps AddAnimation(string animationKey, stringtextureName,SpriteCountspriteCount,intframesPerSecond)

10. การ AddAnimation AddAnimation(string animationKey, string textureName, SpriteRangespriteRange,intspriteWidth, intspriteHeight,intnumberOfSprites,intframesPerSecond) • แบบที่ 2 animationKeyเป็นชื่อ Animation ที่ต้องการใช้ textureName เป็นชื่อไฟล์ Texture SpriteRangeเป็น Struct ที่สามารถเรียกใช้ได้โดยการใส่ จุดเริ่มต้นทั้ง x,yหากจุดเริ่มต้นเป็น 1,1 และตามด้วยตำแหน่งท้ายสุดของช่วงเช่น 6,1 เช่น newSpriteRange(1, 1, 6,1) spriteWidthคือความกว้างของ sprite spriteHeightคือความยาวของ sprite numberOfSprites คือจำนวน sprite ในช่วง framesPerSecondเป็น ความเร็วในการเคลื่อนที่ของ Sprite หน่วยเป็น fps

11. การวาด Sprite Animation • มีด้วยกัน 2 แบบ • แบบที่ 1 gameTimeเป็นตัวแปรของเวลาในเกม animationKeyชื่อ ActionของSprite spriteBatch นำ spriteBatchจาก Class game เข้ามาใช้งาน position เป็นตำแหน่งของภาพที่ต้องการให้ draw Draw(GameTimegameTime,string animationKey, SpriteBatchbatch, Vector2 position)

12. การวาด Sprite Animation • แบบที่ 2 gameTimeเป็นตัวแปรของเวลาในเกม animationKeyชื่อ ActionของSprite spriteBatch นำ spriteBatchจาก Class game เข้ามาใช้งาน position เป็นตำแหน่งของภาพที่ต้องการให้ draw Color เป็นสีที่ใช้ในการแสดง Draw(GameTimegameTime,string animationKey, SpriteBatchbatch, Vector2 position, Color color)

13. การใช้งาน SpriteAnimationManager • ดูใน Project Ex15_SpriteAnimate • ให้ addPhotXNALibrary • จากนั้น ให้ประกาศตัวแปร ใน Class Game1 SpriteAnimationManagersam; • จากนั้นใน Method LoadContent sam = new SpriteAnimationManager(this, @"");// new instance โดยให้ใส่ instance game และ folder ที่เก็บภาพ Components.Add(sam); // ทำการ Add samเข้าไปในเกม

14. การใช้งาน SpriteAnimationManager sam.AddAnimation("Bee_All", "Monster_Set_01",new SpriteCount(6, 3),8); // ทำการ Add Animation เป็นการ Play Animation ทั้งหมดใน Texture โดยบอก column และ row รวมถึง จำนวน FramesPerSecond sam.AddAnimation("Bee_Fly", "Monster_Set_01", new SpriteRange(1, 1, 6, 1), 76, 66, 6, 8);//ทำการ Add Animation เป็นการ Play Animation ตั้งแต่ 1,1 ถึง 6,1 ความกว้างยาวของ sprite จำนวนframesในAction 6 frames และ มี ความเร็ว 8 fps

15. การใช้งาน SpriteAnimationManager • ใน Method Draw ให้เพิ่มดังต่อไปนี้ spriteBatch.Begin(); sam.Draw(gameTime, "Bee_All",spriteBatch,new Vector2(30,300)); // ทำการวาด Action Bee_All sam.Draw(gameTime, "Bee_Fly",spriteBatch,new Vector2(300, 300)); spriteBatch.End(); // ทำการวาด Action Bee_Fly

16. Lab8: เกมหยิบของ • เกมนี้จะแบ่งของเป็น 2 ชนิด ลงในพื้นที่กำหนด หากวางผิดที่ก็จะตาย หากวางถูกที่ก็จะได้คะแนน โดยตัวละครต้องเดินไปเดินมาในฉากได้ จากภาพ ตัวละคร จะมีแกะ กับ หมู เดินไปเดินมาในฉาก เราต้องเอาแกะ ไปไว้ ในรั้วของแกะ และหมู เอาไว้ในรั้วของหมู

17. เงื่อนไขเกมหยิบของ • การคิดคะแนนนั้น หากวางให้ถูกที่ ให้ได้ +200 และหากตัวละครตาย ในกรณีวางผิดที่ ให้ -100 • ให้เลือกตัวละครที่มี Animation อะไรก็ได้มา 2 ตัว (ทำขึ้นมาเองก็ได้) ซึ่งต้อง มีภาพ Animation การเดิน และ ภาพ Animation ตอนตาย • ในระหว่างการลากตัวละคร ควรให้ตัวละครเด่นขึ้นมา ไม่ว่าจะใช้การ Scale ขึ้นมา หรือ อื่นแล้วแต่ตามชอบใจ • ต้องมี Mouse Pointer