Suphot Sawattiwong tohpus@hotmail.com Sprite Suphot Sawattiwong tohpus@hotmail.com

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

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

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

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

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

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

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

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

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

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

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

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

การใช้งาน 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

การใช้งาน 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

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

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