HTML

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