เขียนเกมส์ Block Bunny ด้วย Libgdx ตอนที่ 6 - การจักการ Resource และการทำอนิเมชัน



หากเราเขียนเกมส์เล็กๆ เรื่องการโหลด Resource อาจจะไม่จำเป็นต้องกังวลมากเท่าใดนัก เนื่องจากโฟล์ Resource ต่างๆ มีไม่เยอะ เกมส์ของเราเลยดูเหมือนโหลดได้เร็ว แต่หากเกมส์ที่เราพัฒนาเริ่มใหญ่ขึ้น และมีไฟล์ที่เราต้องเรียกใช้มากขึ้น ผู้เล่นจะรู้สึกเหมือนว่าเกมส์เราแฮ็งก์หรือโหลดช้า เราจะมาดูวิธีที่ Libgdx ใช้ในการจัดการไฟล์เหล่านั้นกัน

หลังจากนั้น เรามาดูวิธีการเรียกใช้ไฟล์เหล่านั้นมาทำเป็นอนิเมชันเพื่อให้ตัวละครในเกมส์ของเราขยับได้กันครับ

เขียนเกมส์ Block Bunny ด้วย Libgdx ตอนที่ 5 - เรียนรู้การใช้งาน Map Editor ร่วมกับ Box2D



วีดีโอนี้สอนการใช้งาน Map Editor ซึ่งเป็น Map Editor Opensource ใช้งานได้ฟรี และยังประยุกต์ใช้กับเกมส์ต่างๆ นอกเหนือจากแนว Platform ได้เป็นอย่างดี

หลังจากเราสร้าง Map จากโปรแกรม Map Editor แล้ว วีดีโอนี้จะบอกวิธีการโหลดไฟล์ Map ที่เราสร้างมาใช้งานกับ Box2D ใน libGDX

เขียนเกมส์ Block Bunny ด้วย Libgdx ตอนที่ 4 - เรียนรู้การใช้งาน Box2D (ตรวจสอบการชนกันของวัตถุ [ต่อ], Physics ในการกระโดด และ Unit ที่ใช้ในการคำนวณ)



วีดีโอตอนนี้อธิบายเพิ่มเติ่มเกี่ยวกับการตรวจสอบการสัมผัสกันของวัตถุ แก้บั๊กจาก ตอนที่ 3 ในการตรวจสอบจุดสัมผัสของวัตถุ

หลังจากนั้นจะอธิบายเกี่ยวกับหน่วยที่ Box2D ใช้ในการคำนวณ และการแปลงค่าจาก Pixel มาเป็น m-k-s แม้ว่า libgdx จะใช้หน่วยเป็น "เมตร" ก็ตาม แต่เรามักจะกำหนดให้ 1 pixel = 1 meter ดังนั้นเมื่อ Box2D คำนวณค่าทาง Physics จะทำให้การเคลื่อนที่ของวัตถุดูช้ากว่าความเป็นจริงมาก เราจึงต้องทำการแปลงค่าจาก Pixel ไปเป็น Meter โดยตั้งตัวแปร PPM (Pixel Per Meter) ขึ้นมากครับ

เขียนเกมส์ Block Bunny ด้วย Libgdx ตอนที่ 3 - เรียนรู้การใช้งาน Box2D (ตรวจสอบการชนกันของวัตถุ, การสัมผัสกันของวัตถุแต่ละอัน)



ในวีดีโอนี้จะอธิบายการใช้งาน Box2D ในการตรวจสอบการชนกันของวัตถุ เช่นวัตถุ A ชนกับ วัตถุ B หรือไม่หากชนกันให้ตรวจสอบจุดที่ชนกัน ว่าชนกันจุดไหนบ้าง เช่นมุมกล่องด้านล่างทั้งสอง หรือมุมกล่องด้านล่างซ้าย หรือมุมกล่องด้านล่างขวาเพียงอย่างเดียว และการสัมผัสกันของวัตถุ เช่นกระต่ายสามารถยืนบนก้อนอิฐสีแดงได้ แต่ยืนบนอิฐสีเขียวไม่ได้

เขียนเกมส์ Block Bunny ด้วย Libgdx ตอนที่ 2 - เรียนรู้การใช้งาน Box2D (Bodies, Fixtures, Units)



ตอนนี้จะสอนการใช้งาน Libgdx กับ Box2D

เนื้อหาภายในตอนนี้จะอธิบายเกี่ยวกับองค์ประกอบของ Box2D

  • Body คืออะไร
  • Shape พื้นฐานที่ใช้บ่อย
  • อะไรคือ Fixture
  • Unit ที่ใช้ใน Box2D กับ Unit ที่ใช้ใน Libgdx ต่างกันอย่างไร จะมีวิธีการแปลงค่าเหล่านี้ได้อย่างไร

เขียนเกมส์ Block Bunny ด้วย Libgdx ตอนที่ 1 - เกริ่นนำ



วีดีโอสอนการใช้งาน Libgdx ในการเขียนเกมส์ครับ ไว้ผมจะเขียนบทความเกี่ยวกับ Libgdx ให้อ่านกันครับ ตอนนี้ขอทยอยลง วีดีโอชุดนี้ให้ชมกันก่อนครับ

เนื้อหาในตอนแรกนี้จะแนะนำเกมส์ที่เราจะเขียนจะมีรูปร่างเป็นแบบไหนหลังจากเราเขียนเสร็จแล้ว

เนื้อหาภายในวีดีโอชุดนี้ (ทั้งหมด 10 ตอน)


  • สอนการใช้งาน libgdx โดยทั่วไป เช่นการโหลดรูปภาพ Sprite
  • การทำ Animation ให้กับตัวละคร
  • การใช้งาน Tiled Editor (เอาไว้ทำฉากต่างๆ ในเกมส์)
  • การใช้งาน Box2D ด้วย libgdx (Box2D คือ Physics Engine ยอดนิยม ที่ใช้ในเกมส์ดังๆ หลายๆ เกมส์ ตัวอย่างที่ดังๆ เลย ก็เช่น Angry Bird)
  • อธิบายเกี่ยวกับตรวจสอบการชนกันของวัตถุ (Collision Detection)  เช่น ตัวละครกับฉาก โดยให้กระต่ายสามารถยืนอยู่บนก้อนอิฐจากสีที่เราเลือก

App แรกกับ Ionic Framework


หลังจากเราติดตั้ง ionic framework เรียบร้อยแล้ว เรามาทำการสร้างแอพแรกกันครับ

การสร้างโปรเจคใหม่มีด้วยกัน 3 รูปแบบคือ
  • Template แบบว่างเปล่า คือไม่มีอะไรเลยตามรูปด้านบน (ซ้ายมือ)
  • Template แบบ Tabs อันนี้จะเป็นค่าเริ่มต้นหากเราไม่ระบุ template ที่เราจะใช้สร้างโปรเจค
  • Template แบบ sidemenu (หรือใน Android เรียกว่า DrawerLayou)

คำสั่งที่ใช้สร้างโปรเจค

  $ ionic start <ชื่อโปรเจค> (tabs|blank|sidemenu)
ชื่อโปรเจค คือชื่อโฟลเดอร์ที่จะถูกสร้างครับ
(tabs|blank|sidemenu) หากไม่ระบุจะหมายถึง tabs ครับ

ตัวอย่างคำสั่งสร้างโปรเจค

  $ ionic start myApp tabs
คำสั่งด้านบน จะสร้างโฟลเดอร์ชื่อ myApp ขึ้น ณ โฟลเดอร์ที่เราพิมพ์คำสั่ง โดยใช้ template แบบ tabs ครับ

ให้เราเข้าไปในโฟลเดอร์ด้วยคำสั่ง

$ cd myApp

หลังจากนั้น หากเราสามารถทดสอบสามารถใช้คำสั่ง

$ ionic serve
คำสั่งด้านบนจะรัน web server ในโปรเจคที่เรียก โดยจะเรียกไฟล์ที่อยู่ในโฟลเดอร์ www ในโปรเจค myApp ครับ และคำสั่งนี้จะเปิด browser ให้โดยอัตโนมัติ ผมแนะนำให้ใช้ Chrome ครับ ท่านจะสามารถใช้ Developer Tools ได้ง่าย นอกจากนี้ Browser mobile ส่วนใหญ่ยังใช้ Webkit Engine ทำให้การแสดงผลค่อนข้างจะเหมือนกันครับ หากเราใช้ Developer tools เปิด simulate mobile device เราก็จะเห็นหน้าตาที่จะปรากฏบนมือถือรุ่นต่างๆ ได้ทันทีเลยครับโดยไม่จำเป็นต้องรัน Emulator เลย

ทดสอบแอพบน Emulator

หลังจากเราเข้าไปยังโฟลเดอร์แอพแล้วให้เราพิมพ์คำสั่งตามด้านล่างเลยครับ

$ ionic platform add android
$ ionic build android
$ ionic emulate android
คำสั่งด้านบนจะเป็นคำสั่ง Alias ไปยัง PhoneGap หรือ Cordova อีกทีครับ เป็นการบอกว่าเราต้องการต้องให้ Cordova สร้างแอพสำหรับ Platform อะไรบ้างครับ ในที่นี่ผมให้สร้าง Android

คำสั่งถัดมาให้ Cordova build โปรเจคให้ครับ

คำสั่งถัดมาก็ให้รันโปรเจคที่ build เสร็จแล้ว บน Android emulator ครับ

หากต้องการรันบน Device จริงๆ ให้ใช้คำสั่งด้านล่างนี้แทนครับ

ionic run android