| Tutorials | Titles | Descriptions |
|---|---|---|
| Tutorials-1 | How to create the game with Phaser framework (Part1) – Start Game World | บทความนี้จะทดลองเขียนเกมส์โดยใช้ “Frame work” ที่ชื่อว่า “Phaser” ซึ่งเป็นไฟล์ “Javascript” และเรานำมาเขียนร่วมกับ “HTML5” ส่งผลให้สามารถเล่นได้บน “Web Browser” ทุก “Platform” ไม่ว่าจะเป็น “Windows” “Android” “iOS” หรือ “Linux” เป็นต้น |
| Tutorials-2 | How to create the game with Phaser framework (Part2) – Function preload() | บทความนี้จะทำการโหลดรูปต่าง ๆ ที่อยู่ในโฟลเดอร์ “/assets” ที่จำเป็นต่อการสร้าง “Game” ของเราเข้ามาก่อน โดยการโหลดนั้นจะยังไม่ถูกแสดงบนหน้าจอ “Web Browser” |
| Tutorials-3 | How to create the game with Phaser framework (Part3) – Display Images | บทความที่แล้วกล่าวถึงการโหลด “/assets” เข้าไปใน “Game World” ของเรา มาในคราวนี้เราจะลองทดสอบเรียกรูปภาพดังกล่าวที่โหลดไว้ผ่านหน้า “Web Browser |
| Tutorials-4 | How to create the game with Phaser framework (Part4) – Function create() | บทความที่แล้วเราสามารถโหลดรูป และนำมาแสดงผลใน Game World ของเราได้แล้ว มาในบทความนี้จะทำการโหลดและแสดง “Background” ของ “Game” ขึ้นมา โดยทั้งหมดจะถูกเขียนในส่วนของ “function create()” |
| Tutorials-5 | How to create the game with Phaser framework (Part5) – Physics | บทความที่แล้วเราสามารถสร้างฉากหลังพร้อมกับแท่นหินไว้สำหรับกระโดด มาในบทความนี้เราจะสร้างตัวละคร 1 ตัวเข้ามาในเกมส์และมีการใช้งาน “physics” ด้วย เช่น แรงโน้มถ่วงเป็นต้น |
| Tutorials-6 | How to create the game with Phaser framework (Part6) – Collide | คราวที่แล้วเรานำเสนอการสร้างพระเอกของเราขึ้นโดยเรียกใช้ physic ทั้งแรงดึงดูด (gravity) การไม่ให้ตัววัตถุออกนอก “Game World” (collideWorldBounds) และการเด้งดึ๊ง ๆ ของวัตถุชนกัน (bounce) มาในบทความนี้เราจะสร้างให้พระเอกของเราสามารถยืนบนพื้นหญ้า และแท่นหินทั้ง 3 ได้ |
| Tutorials-7 | How to create the game with Phaser framework (Part7) – Control | บทความที่แล้วนำเสนอให้ตัวละครพระเอกของเราสามารถยืนบนพื้นหญ้าโดยไม่ทะลุได้ (รวมถึงแท่นหิน) และเมื่อตัวละครลงมาพื้นหญ้าแล้ว พื้นหญ้าจะต้องไม่ยุบหายไปด้วย และท้ายสุดเมื่อพระเอกของเราลงมาจากที่สูงแล้วสามารถกระโดด ดึ๊งๆ มาต่อในบทความนี้เราจะมาลองทดสอบบังคับตัวละครให้ไปซ้ายและขวา และสามารถกระโดดดึ๊ง ๆ ได้กัน |
| Tutorials-8 | How to create the game with Phaser framework (Part8) – Animation | จากบทความที่แล้วเราสามารถบังคับให้ตัวพระเอกของเราสามารถไปทางซ้ายและไปทางขวา รวมถึงกระโดดดึ๊ง ๆ ได้ แต่อย่างไรก็ตาม เวลาเคลื่อนที่ไปด้านขวาพระเอกของเราดันหันไปด้านซ้าย และดูนิ่งๆ ไม่ยอมก้าวเดิน เราจะมาแก้ปัญหานี้กัน |
| Tutorials-9 | How to create the game with Phaser framework (Part9) – Star Shines | จากบทควาที่แล้วเราสามารถสร้างภาพเคลื่อนไหว (Animation) สำหรับพระเอกของเราไม่ว่าจะเป็นการเดินไปทางซ้ายหรือเดินทางขวา มาในบทความนี้เราจะสร้างดาวให้ตกมาจากฟ้า และสามารถเด้งดึ๊ง ๆ ได้ด้วยตามแรงโนมถ่วง เพื่อที่จะสามารถให้พระเอกของเราเก็บสะสมแต้มได้… |
| Tutorials-10 | How to create the game with Phaser framework (Part10) – Keep Star | คราวที่แล้วเราสร้างดาวออกมาเพื่อให้พระเอกของเราจะได้เก็บ แต่ดูแล้วพระเอกของเรา ไม่สนใจดาวซะอย่างนั้น เดินผ่านไปเฉยเลยเราจะมาทำให้เวลาพระเอกของเราเดินชนดาวแล้ว แล้วดาวหายไป |
| Tutorials-11 | How to create the game with Phaser framework (Part11) – Count Score | พระเอกของเราเก็บดาวได้แล้ว คราวนี้เราลองนับแต้มของการเก็บดาวกัน |
| Tutorials-12 | How to display HTML5 with Phaser framework on iOS8 | สำหรับท่านที่ลองนำ โปรแกรม หรือเกมส์ ที่เขียนด้วย “Phaser” แล้วไม่สามารถมองเห็น “iOS 8″ ได้ใน”safari” สามารถแก้ไขโดยการโหลด “Phaser” ใหม่แล้วติดตั้ง |
| Tutorials-13 | How to create Flappy Bird (Part 1) – Create game world | เราจะมาลองเขียนนกข้ามท่อ (Flappy Bird) จากนั้นจะดัดแปลงเป็นนกแนวประหลาด ๆ ก็สนุกดี |
| Tutorials-14 | How to create Flappy Bird (Part 2) – Add Physics to the Bird | จากบทความที่แล้วเราได้เตรียมพื้นที่ ที่จะแสดง “game” ของเรา รวมทั้งทดลองสร้างสีของ “background” มาในขั้นตอนนี้เราลองสร้างตัวนกกัน (แต่ลองสร้างเป็นกล่องสี่เหลี่ยมแทนตัวนกก่อน) จากนั้นใส่ “physics” ให้กับตัวนก เพื่อที่สามารถบินโฉบตามแรงโน้มถ่วงได้ เริ่มน่าสนุกแหะ !!! มาลองกันเถอะครับ |
| Tutorials-15 | How to create Flappy Bird (Part 3) – Control the bird | จากบทความที่เราแล้วเราสามารถสร้างนก (กล่องสี่เหลี่ยม) ให้ล่วงลงมาตามแรงโน้มถ่วงของโลกได้ มาคราวนี้เราลองใส่ปุ่มบังคับ คือ “spacebar” ให้ตัวนกสามารถบินโฉบขึ้นไปได้… |
| Tutorials-16 | How to create Flappy Bird (Part 4) – Create pipes | จากคราวที่แล้ว เราสามารถบังคับให้ตัวนกสามารถบินโฉบขึ้นได้ มาในบทความนี้เราจะมาสร้างท่อให้นกสามารถข้ามผ่านกันได้ โดยหลักการคือท่อจะเกิดจากขอบจอด้านขวาและเลื่อนไปสิ้นสุดขอบจอด้านซ้าย |
| Tutorials-17 | How to create Flappy Bird (Part 5) – Scoring and Overlapping | ความเดิม เราสามารถสร้างท่อให้นกกระโดดข้าม ได้แล้วมาคราวนี้เราจะสร้างการนับคะแนนกันเมื่อมีท่อใหม่สร้างขึ้นมา และให้มีการเริ่มเกมใหม่เมื่อมีการชนกันระหว่างนกกับท่อ |
| Tutorials-18 | How to create Flappy Bird (Part 6) – Flappy | เมื่อเรานับแต้มได้ ส่วนของแกนหลักของก็จบสิ้น เพียงแต่เพื่อเพิ่มสนุก ก็จะตบแต่งเล็ก ๆ น้อยต่อไป จากบทความนี้ เราจะให้เวลานกบินขึ้นก็เงยหน้าขึ้น บินโฉบลงก็ก้มหน้าลง หลักการคือ กำหนดจุดหมุดของตัวนก ถ้าจะบินลงให้เพิ่มองศาการหมุด และเมื่อเปิดใช้ physics แรงโน้มถ่วงด้วยจะดูเหมือนนกบินลงมาพร้อมก้ม ส่วนบินเงยหน้า เราจะลดองศาลง จากนั้นสั่งให้สร้าง animation และทำการเล่น เมื่อเวลากดปุ่มกระโดด จะดูเหมือนนกบินเงยหน้าขึ้น… |
| Tutorials-19 | How to create Flappy Bird (Part 7) – Dead animation | คราวที่แล้วเราสามารถกำหนดจุดหมุนให้นกสามารถเงยหน้าเวลาบินขึ้นและก้มหน้าเวลาบินโฉบลง ในตอนนี้เราจะทำให้เกมส์ของเราหยุดและนกก็ล่วงลงมา ก่อนที่จะเริ่มเกมส์ใหม่อีกครั้งเพื่อเพิ่มสีสันต์ให้กับเกมส์นั้นเอง |
| Tutorials-20 | How to create Flappy Bird (Part 8) – Jumping sound | จากบทความที่แล้วเราทำให้นกหล่นเมื่อชนท่อ เมื่อภาพเคลื่อนไหวก็จะต้องเสียงเพื่อเพิ่มสนุก ในบทความนี้เราจะเพิ่มเสียงเมื่อนกกระโดดหรือบินขึ้น |
| Tutorials-21 | How to create Flappy Bird (Part 9) – Bird animation | เมื่อส่วนประกอบหลักต่าง ๆ ของเกมส์เสร็จสิ้นจากนั้นเราเริ่ม ล่าสุดเราสามารถใส่เสียงให้กับเกมส์ได้ ต่อไปเราจะมาทำรูปนกแทนภาพสี่เหลี่ยมกันทำให้ดูน่าสนใจยิ่งขึ้น |
| Tutorials-22 | How to create Flappy Bird (Part 10) – Image background | เมื่อได้รูปนกแล้ว เราก็มาต่อกันที่ Background ท้องฟ้าและทดลองปรับขอบของ “Game World” ให้พอดีกับ “Background” ดังนี้ |
| Tutorials-23 | How to create Flappy Bird (Part 11) – Adding the ground | จากบทความก่อนหน้าเราได้ใส่พื้นหลังประกอบไปด้วยท้องฟ้า เมฆ มาครั้งนี้เราจะใส่พื้นด้วย แต่ไม่ใช่แค่พื้นธรรมดานะครับ ต้องทำให้มมันดูเหมือนว่ามีการเคลื่อนไหวด้วย |