How to create the game with Phaser framework (Part1)

หมวดหมู่ HTML5

บทนำ (Overview)

บทความนี้จะทดลองเขียนเกมส์โดยใช้ “Frame work” ที่ชื่อว่า “Phaser” ซึ่งเป็นไฟล์ “Javascript” และเรานำมาเขียนร่วมกับ “HTML5” ส่งผลให้สามารถเล่นได้บน “Web Browser” ทุก “Platform” ไม่ว่าจะเป็น “Windows” “Android” “iOS” หรือ “Linux” เป็นต้น

ขั้นตอน (Steps)

  1. ดาวน์โหลดไฟล์ “Phaser.js” (https://github.com/photonstorm/phaser/releases/download/v2.3.0/phaser.js)
  2. ดาวน์โหลดตัวอย่าง Source-code (https://github.com/photonstorm/phaser/raw/master/resources/tutorials/02%20Making%20your%20first%20game/phaser_tutorial_02.zip)
  3. เมื่อแตก “zip” ไฟล์ “source-code” ออกมาจะพบโครงสร้างไฟล์ดังรูป
    game1
    โครงสร้างตัวอย่าง Source-code

    /assets ใช้สำหรับเก็บรูป หรือเสียง
    /js ใช้สำหรับเก็บไฟล์ “JavaScript” รวมถึงไฟล์ “Phaser.js” ด้วย

  4. ลองเปิดไฟล์ “part1.html” จะพบ “code” ตามส่วนดังต่อไปนี้ 
    <script type="text/javascript" src="js/phaser.min.js"></script>

    อธิบาย ทำการเรียกไฟล์ “Phaser” ที่เก็บอยู่ในไดเรกทรอรี่ “js/”

  5. และส่วนของ “JavaScript” ที่ใช้สำหรับการเขียน “Game” จะเป็นดังนี้ 
    <script type="text/javascript">

//w, h, canvas type, dom canvas
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
}

function create() {
}

function update() {
}
</script>

    อธิบาย
    บรรทัดที่ 4 สร้าง “object” ของ “Phaser.Game” โดยตั้งชื่อว่า “game” ซึ่งจะใช้สำหรับการเรียกฟังก์ชันต่างของ “Phaser framework” โดย

    “Parameter” แรก คือความกว้างของหน้าจอ “Game” ในที่นี้คือ “800”
    “Parameter” สอง คือความสูงของหน้าจอ “Game” ในที่นี้คือ “600”
    “Parameter” สาม คือส่วนของการ Rander หน้าจอ ประกอบด้วยค่า “Phaser.CANVAS” “Phaser.WEBGL” หรือ “Phaser.AUTO” โดยแนะนำให้ใช้ “Phaser.AUTO” เพราะเมื่อ “Browser” ไม่สามารถใช้ “WebGL” ก็จะเปลี่ยนไปใช้ “Canvas” โดยอัตโนมัติ
    “Parameter” สี่ คือ “id” ของ “DOM element (HTML5)” ที่กำหนดเพื่อให้สามารถบรรจุใน “canvas element” ที่ “Phaser” สร้างขึ้น
    “Parameter” ห้า คือ “function” ที่ใช้อ้างใน “Phasers framework” ประกอบไปด้วย “preload” “create” และ “update”

    บรรทัดที่ 6 ถึง 14 จะเป็นส่วนที่เราจะเขียนโปรแกรมตามที่ถูกอ้างในบรรทัดที่ 4

  6. ลองทดสอบเปิด “part1.html” ใน Browser จะได้ผลดังนี้

    game2
    ผลการทดสอบใน Browser

บทความที่เกี่ยวข้อง

ใส่ความเห็น