XNA Game Studio 3.0

1. XNA Game Studio 3.0 SuphotSawattiwongtohpus@hotmail.com

2. XNA Game Studio 3.0 • XNA Game Studio เป็น Framework ที่ใช้สำหรับพัฒนาเกมลงบนผลิตภัณฑ์ ของ Microsoft • โดยในปัจจุบัน XNAGS3.0 นั้นสามารถพัฒนาเกมลงบน PC, XBOX360 และ Zune ได้

3. XNA Game Studio 3.0 • แหล่งความรู้เกี่ยวกับ XNA Game Studio 3.0 • www.creators.xna.com • http://www.thaixna.com/ • http://www.xnanoob.com/ • สามารถ download XNA GS 3.0 ได้จาก http://creators.xna.com/en-US/downloads

4. ความต้องการระบบของ XNA GS 3.0 • การรันเกมที่ใช้ XNA Framework จำเป็นต้องมีการ์ดจอที่สนับสนุนShader Model 1.1 แต่ควรสนับสนุน Shader Model 2.0 จะดีกว่า • ต้องมี Windows XP Service Pack 2 ขึ้นไป • ต้องมี DirectX 9.0c • ต้องมั่นใจว่า Driver การ์ดจอของเราอยู่ใน Version ล่าสุด • ต้องมี Visual Studio 2008 เป็นอย่างต่ำ ในการอบรมครั้งนี้ เราจะใช้ Visual Studio Express 2008เท่านั้น • ต้องการ .Net Framework 3.5 • เครื่องมือที่ใช้ตัวตรวจสอบว่าเครื่องสามารถรัน XNA ได้หรือไม่ อยู่ใน DVD(XNA 3\Utilities\ตัวตรวจสอบ XNA)

5. ขั้นตอนการติดตั้ง XNA GS 3.0 • ก่อนอื่นให้ทำการยกเลิกการติดตั้ง Visual Studio 2005 และ XNA GS 2.0 ออกจากเครื่อง (ถ้ามี) • ทำการติดตั้ง Visual C# 2008 Express Edition ในแผ่น DVD หรือ download จาก http://www.microsoft.com/express/download/default.aspx • ทำการติดตั้ง DirectX Runtime • ทำการติดตั้ง XNA Game Studio 3.0

6. MyFirstGame • ก่อนอื่นให้ทำการเปิด Visual C# Express 2008 • กดเลือก New Project • ทำการเลือก Windows Game (3.0) • ตั้งชื่อ Project ว่า MyFirstGame กด ok จนกว่าจะเสร็จ

7. MyFirstGame • หลังจากเสร็จแล้ว ให้กด F5เพื่อทำการรันเกม

8. Method ใน XNA • เรามาเริ่มจาก Class Game ในไฟล์ game1.cs กันก่อน จะเห็นได้ว่า Method หลัก ใน XNA มีดังต่อไปนี้

9. XNA Game Loop

10. XNA Game Loop • เปิด Project ที่ชื่อ XNAGameLoop แล้วลองรันดูว่าผลลัพธ์เป็นอย่างไร

11. การชี้วัดประสิทธิภาพของเครื่องการชี้วัดประสิทธิภาพของเครื่อง • สิ่งที่เราใช้ชี้วัดประสิทธิภาพการวาดของเครื่องนั้นๆ มีหลายวิธีที่เราจะวัดได้ โดยวิธีที่ใช้ง่ายสุดเห็นจะหนีไม่พ้น Frames Per Second หรือ FPS • FPS เป็นการวัดใน 1 วินาที เราทำการเข้าใช้การวาดไปทั้งหมดกี่ครั้ง • เปิด Project ที่ชื่อว่า FPSTest

12. 2D Basic Programming for XNA SuphotSawattiwongtohpus@hotmail.com

13. Display Resolution • Display Resolution เป็นเรื่องที่ต้องทำความเข้าใจกันก่อน โดยปกติ Resolution ของ PC จะขึ้นอยู่กับ Computer ที่ใช้ โดยมาตรฐานปัจจุบัน อยู่ที่ 1024x768 แต่ถ้าหากเป็น WideScreen ก็จะมีจุดที่แตกต่างกันออกไปตาม ratio ที่เปลี่ยนไป • สำหรับ XBOX360 เนื่องจากเครื่องเกมได้ถูกใช้มาตรฐาน HD(High Definition) ซึ่งจะมีตั้งแต่ 480i, 480p, 720i,720p จนถึง 1080i • การที่เราทำเกมเราอาจจะต้องระวังเรื่อง Resolution ไว้ด้วยเช่นกัน

14. ความกว้างxยาวของจอภาพใน XNA • ความกว้างยาวของจอภาพ แบ่งเป็น 3 ลักษณะดังนี้ – Display Mode เป็นขอบเขตของหน้าจอของระบบ ซึ่งแตกต่างกับหน้าจอ หน้าต่างของเกม – Back Buffer เป็นขอบเขตเฉพาะในการแสดงผล ซึ่งใช้ในการคำนวณ next render โดยใน Windows Back Buffer จะมีค่าเดียวกับหน้าจอของเกม แต่สำหรับใน XBOX360 ถูกสร้างตาม User กำหนด และเมื่อ Fullscreen Mode บน Windows Back Buffer จะเป็นไปตาม Display Modeทันที – ViewPortเป็นหน้าจอที่ใช้แสดงผล เป็นลักษณะของกล้อง ซึ่งความกว้าง และ ความยาว เป็นความกว้างความยาวของกล้องด้วยเช่นกัน โดย viewport ไม่มีความเกี่ยวข้องกับ ขนาดของ Game Windows แต่ viewport สัมพันธ์กับค่า Display Mode

15. ความกว้างxยาวของจอภาพใน XNA

16. การทำงานกับ GraphicsDevice ใน XNA • การตั้งค่าหน้าจอ Windows graphics.PreferredBackBufferWidth = <ความกว้าง>; graphics.PreferredBackBufferHeight = <ความยาว>; • การทำให้ Windows เป็น โหมด Full Screen graphics.IsFullScreen = <true|false>; • การสลับโหมด Windows จาก Windows เป็น Full Screen หรือ Full Screen เป็น Windows Mode graphics.ToggleFullScreen(); • ดูตัวอย่างใน Project ScreenWidthHeight

17. GameComponent ใน XNA • ใน XNA มีการสร้าง Component เพื่อเรียกใช้ในเกม ใน Class Game Component โดยใน Class ดังกล่าวมีโครงสร้างในการแยก logic ในการใช้งานออกจากตัว Class Game หลักได้ และสามารถเพิ่ม class GameComponent ใส่ไว้ใน project อื่นๆ ได้ด้วยเช่นกัน • แต่ GameComponent มีแค่ Method Update เท่านั้น หากต้องการให้มีการควบคุมการ Draw ด้วยให้ใช้ DrawableGameComponent

18. DrawableGameComponent • จากก่อนหน้านี้ ได้มีการใช้วิธีคำนวณ fps ตอนนี้มาทำ fps DrawableGameComponent ขึ้นมา • เริ่มแรกสร้าง Project ที่ชื่อ FPSDrawable • กด Add New Item โดยการ click ขวา ใน Solution Explorer • เลือก GameComponent แล้วตั้งชื่อว่า FPS

19. ตัวอย่างการเปลี่ยน GameComponentเป็น DrawableGameComponent จาก public class FPS :Microsoft.Xna.Framework.GameComponent เป็น public class FPS :Microsoft.Xna.Framework.DrawableGameComponent ให้ดูใน Project ที่ชื่อว่า FPSDrawable

20. ตัวอย่างการ add GameComponentลงใน Game1.cs • ประกาศตัวแปร ที่เป็นชื่อของ GameComponent นั้น เช่นในที่นี้ private FPS fps; เพิ่ม code ในส่วนของ Initialize หรือ Method ที่เหมาะสมแล้วแต่กรณีให้มีการเรียก instance แล้วทำการ add เข้าไป เช่น fps = new FPS(this, true, true,this.TargetElapsedTime); Components.Add(fps);

21. Resouce ที่ใช้ในเกม • File รูปภาพ ใน XNA สามารถอนุญาตให้ใช้รูปภาพเป็น jpg, gif, และ png ก็ได้ โดยปกติ เพื่อความสะดวกเราจะใช้ format pngในการทาภาพในเกม เนื่องจากว่าสะดวกในการเจาะ Transparent • Sound ที่ใช้ Support มี wav, aifและaiffแต่หากจะนามาใช้ต้องผ่าน tools ที่ชื่อว่า Microsoft Cross-Platform Audio Creation Tool (XACT)

22. Content Pipeline • โดยปกติ Game Resource จะถูก Load เก็บมาไว้ใน memory ก่อนที่จะทำการใช้งาน โดยที่ Content Pipeline จะเป็นตัวช่วยในการ load เข้ามา ซึ่งเป็นการนำ File ที่มีคุณสมบัติต่างกัน ไม่ว่าจะเป็น รูปภาพ หรือว่าเสียงจะถูกเก็บใน format ที่ง่ายต่อการโหลดเพื่อมาใช้ในเกมเมื่อเกม start • ขั้นแรกรู้จักตัวแปร ที่ชื่อ “Content” ใน Content.RootDirectory = "Content"; • เป็นตัวแปรที่ XNA กำหนดมาใน Class game ของ XNA เพื่อให้สะดวกต่อการใช้งาน • Content.RootDirectoryเป็นการบอกว่า Folder ที่ Content อยู่นั้น อยู่ใน Folder “Content” นั่นเอง

23. การนำภาพเข้า Project • Click ที่ Folder Content ใน Solution Explorer • เลือก Add>Add Exist Item แล้วไปยัง Folder ที่เรา Save ไฟล์ ภาพไว้ (ในแผ่น DVD Folder “Resource Example”)Fileภาพจะถูก copy เข้ามาไว้ใน Content ทันที

24. การวาดภาพใน XNA • ก่อนอื่นมาทำความเข้าใจของคำว่า Sprite คือรูปภาพนั่นเอง XNA ทำการอ้างถึงรูปภาพผ่านทาง Texture2D Object ซึ่งเราจะทำการวาดภาพเหล่านี้ลงบนหน้าจอโดยตรง • การวาดภาพใน XNA ต้องทำความรู้จักกับระบบ 2D Coordinate เสียก่อน เพื่อเข้าใจในตำแหน่งการวางภาพแบบ 2D • โดยในโลกของ 2D จะมีแค่ แกน x,yเท่านั้น ซึ่งต่างจาก 3D ที่ใช้ x, y, และ z • origin ของ XNA อยู่บนซ้ายสุดของหน้าจอ (0,0) คือ x= 0 และ y= 0

25. จอภาพ x+ Origin(0,0) y+ 2D Coordinate System

26. 2D Coordinate System • จะเห็นได้ว่า หากหน้าจอมี Resolution 1024x768 จุดจะเริ่มจาก 0-1023 ในแนวแกน x และ 0-767 ในแนวแกน y และมุมขวาล่างสุดจะมีจุด (1023, 767) • ซึ่งใน XNA จะเก็บค่าตำแหน่งเหล่านี้ในตัวแปร Vector2 และตัวแปรแกน xและ y ในรูปแบบ int

27. จอภาพ Origin(0,0) Vector(100,60) y-offset=60 Position(100,60) x-offset=100 ตัวอย่างการวาดภาพในตำแหน่งที่ (100,60)

28. 2D Transformation • ในโลก 2D นั้นนอกจากตำแหน่งของภาพแล้ว ยังสามารถทำการย้ายตำแหน่งของภาพได้ รวมถึง ย่อ/ขยาย และ หมุนภาพได้ สิ่งเหล่านี้เรียกรวมๆ ว่า “2D Transformation”

29. หากต้องการเลื่อนจากจุดเดิมไปอีก 120, 40 จุด

30. การหมุน (Rotate) • ใน XNA มีการสร้างจุด Origin ของ Sprite เพื่ออำนวย ความสะดวกใน Rotate หากเราใช้จุดเดิมในการหมุนจะออกมาเป็น แบบนี้

31. การใช้จุดOrigin ของ Sprite เพื่อใช้ในการหมุน • ใน XNA สามารถกำหนดจุด Origin ของ Sprite ได้ว่าต้องการให้อยู่ในจุดใดของภาพเพื่อสะดวกในการหมุน

32. การย่อ/ขยาย(scale) • การทำให้ Sprite มีขนาดใหญ่ขึ้นในการวาด ซึ่งใช้จุด origin ในการขยายเช่นกัน

33. Vector2 • Vector2 เป็นตัวแปรที่เก็บค่า 2 ตัว เรามักใช้กับการเก็บตำแหน่ง มี parameter ดังต่อไปนี้ Vector2 <ชื่อตัวแปร> = new Vector2(<จุดPositionX>,<จุด PositionY>);

34. Rectangle • เป็นตัวแปรที่เก็บขนาด สี่เหลี่ยม โดยมี parameter ใน Constructor ดังนี้ Rectangle <ชื่อตัวแปร> = new Rectangle(<จุดPosition X>, <จุด Position Y>, <กว้าง>,<สูง>);

35. SpriteBatch • ในเกมในปัจจุบันมีการใช้รูปภาพหลายรูปในหลายๆ ตำแหน่งของหน้าจอ มันเป็นเรื่องที่ยุ่งยากในการส่งผ่านข้อมูลของตำแหน่งและจัดการภาพเหล่านี้ให้มีประสิทธิภาพ • โดย XNA มี Class พิเศษสำหรับจัดการนี้โดยตรงนั่นคือ SpriteBatch • กำหนด SpriteBatch ไว้ใน Class Game ดังนี้ <private|public> SpriteBatch <ชื่อตัวแปร>; เช่น private SpriteBatch spriteBatch; • วางใน LoadContent ก็ได้ ให้ใส่การกำหนดค่าลงไปดังนี้ <ชื่อตัวแปร> = new SpriteBatch(<ตัวแปรGraphics>.GraphicsDevice); เช่น spriteBatch = new SpriteBatch(GraphicsDevice);

36. SpriteBatch • การทำงานของ Method SpriteBatch ในส่วนการ Draw ใน Draw Method นั้นแบ่งเป็นหลาย Method ดังนี้ • Begin() เป็นการบอกจุดเริ่มต้นของ SpriteBatch และยังมีการ set ค่าต่างๆ เช่น SpriteBlendMode, SpriteSortMode • Draw() ไว้สำหรับ Draw ภาพปกติโดยใช้ Texture2D • DrawString() ไว้สำหรับ Draw ข้อความที่ใช้ในเกม • End() เป็นการบอกจุดสิ้นสุดของ SpriteBatch

37. การ Draw ใน SpriteBatch

38. การ Draw ใน SpriteBatch

39. การ Draw ใน SpriteBatch

40. การ Draw ใน SpriteBatch

41. SpriteEffects • เป็น Effects ของ Sprite ที่ทำได้ในคำสั่ง Draw มีดังต่อไปนี้ • SpriteEffects.FlipHorizontally ไว้พลิกด้านแนวนอน • SpriteEffects.FlipVertically ไว้พลิกด้านแนวตั้ง • SpriteEffects.None ไม่มี Effect

42. ตัวอย่างการวาดภาพBackgroundตัวอย่างการวาดภาพBackground • สร้าง Project ชื่อ DrawBackground ขึ้นมา • นำภาพ Background ใดก็ได้ไปใส่ใน โดยทำตามวิธีการนำไฟล์เข้า Project • พิมพ์ Code ในส่วนต่อไปนี้ประกาศตัวแปรใน Class Game1 ดังต่อไปนี้ GraphicsDeviceManager graphics; SpriteBatch spriteBatch; Rectangle bgRect;//เป็นการประกาศตัวแปรที่เก็บตำแหน่งและขนาดของ Background Texture2D bgTexture;//ตัวแปรภาพที่เราใช้เป็นพื้นหลัง

43. ใน Constructor Game1 public Game1() { graphics = new GraphicsDeviceManager(this); graphics.PreferredBackBufferWidth =1024;// เป็นการกำหนดความกว้างของหน้าจอ graphics.PreferredBackBufferHeight =768;// เป็นการกำหนดความยาวของหน้าจอ Content.RootDirectory ="Content"; }

44. ใน Method Initialize protected override void Initialize() { bgRect = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); //graphics.GraphicsDevice.Viewport.Width เป็นค่าความกว้างของ ViewPort หรือหน้าจอ //graphics.GraphicsDevice.Viewport.Height เป็นค่าความยาวของ ViewPort หรือหน้าจอ base.Initialize(); }

45. ใน Method LoadContent protected override void LoadContent() { // Create a new SpriteBatch, which can be used to draw textures. spriteBatch = new SpriteBatch(GraphicsDevice); bgTexture =Content.Load<Texture2D>("Matching_bg"); //การเรียกใช้ Background }

46. ใน Method Draw protected override void Draw(GameTime gameTime) { GraphicsDevice.Clear(Color.CornflowerBlue); //การเติมสี Background spriteBatch.Begin(); // เริ่มการใช้ spriteBatch spriteBatch.Draw(bgTexture, bgRect, Color.White); // ทำการวาดรูป Background spriteBatch.End(); // จบการใช้ spriteBatch base.Draw(gameTime); }

47. การใช้ SpriteFont ในXNA • ใน XNA มีวิธีการแนบ Font จาก Windows เข้ามาในเกมได้เลย โดยสามารถใช้ TrueType Font ในเกม • การ Add SpriteFont เข้ามายัง project ก่อนมีขั้นตอนดังนี้ • Click ขวาที่ Folder Content ใน Solution Explorer • เลือกที่Add> Add New Item เลือก SpriteFont แล้วตั้งชื่อให้ตรงกับfont แต่ไม่ควรมี space แล้วตามด้วย Size เช่น Angsana14 • จากนั้นให้เปิด sprite font แล้วดูที่บรรทัดตรงที่เขียนว่า<FontName> <FontName>ชื่อFont</FontName> เช่น <FontName>AngsanaUPC</FontName> • จากนั้น ให้ดู บรรทัด <Size>ขนาด</Size> แก้ขนาดตามต้องการ

48. การใช้ SpriteFont ในXNA • สร้างตัวแปร SpriteFont ไว้ใน Class Game1 ดังนี้ private SpriteFont font; • ให้ใส่ Code ลงใน Method LoadContent font = Content.Load<SpriteFont>(@"AngsanaUPC14");

49. DrawString

50. DrawString