[TH] Node.js&Phaser.js

บทความนี้กล่าวถึงการติดตั้ง Phaser.js สำหรับเป็นเฟรมเวิร์กของเกมและใช้ Node.js เป็นตัวให้บริการทรัพยากรเว็บเพื่อใช้กับบอร์ด Raspberry pi 4 ทำให้บอร์ดเป็นเครื่องให้บริการเว็บของเกมที่เราพัฒนาขึ้น โดยในบทความกล่าวถึงการสร้างโครงงาน การติดตั้งไลบรารี การเขียนโค้ดต้นแบบ และการรันเครื่องบริการเพื่อให้เครื่องลูกข่ายรันเกมผ่านบราวเซอร์

Phaser

Phaser เป็นเฟรมเวิร์กทำเกมสำหรับ HTML5 ที่ถูกออกแบบมาเน้นการทำงานกับระบบโมไบล์เป็นสำคัญ แต่ทำงานได้ทั้งโมไบล์และเดสท็อป โดยคุณสมบัติของ Phaser เป็นดังนี้

แสดงผลผ่าน WebGL หรือ Canvas และสามารถปรับขยายขนาดตามประเภทของอุปกรณ์
รองรับการทำ Preload, Physics, Sprites, Groups, Animation, Particles, Sounds, Tilemaps
รองรับการควบคุมมุมกล้อง (Camera)
การนำเข้าผ่านทางจอสัมผัส แป้นพิมพ์หรือเมาส์

ขั้นตอน

สร้างโครงงาน

ก่อนอื่นต้องสร้างไดเร็กทอรีสำหรับเก็บโครงงาน โดยในที่นี้กำหนดชื่อเป็น firstApp หลังจากนั้นเข้าไปยังไดเร็กทอรีและเริ่มต้นโครงงานด้วยคำสั่งของ npm ดังนี้

mkdir ~/firstApp
cd ~/firstApp
npm init -y

ภาพที่ 1 ตัวอย่างผลลัพธ์จากการสร้างโครงงาน

ติดตั้ง

เมื่อการสร้างโครงงานสำเร็จให้ดำเนินการติดตั้งไลบรารี phaser ผ่านทาง npm ต่อไปนี้ โดยให้ติดตั้งโปรแกรม hs (http-server) เพื่อให้ไดเร็กทอรีของโครงงานเป็นที่เก็บหน้าเว็บและทรัพยากรของเว็บ (ถ้ามีโปรแกรมอยู่แล้วไม่จำเป็นต้องทำซ้ำ) ดังต่อไปนี้ และตัวอย่างผลการสั่งงานเป็นตามภาพที่ 2 และ 3 ตามลำดับ

npm install phaser
sudo npm install -g http-server

ภาพที่ 2 ตัวอย่างผลลัพธ์จากการติดตั้งเฟรมเวิร์ก

ภาพที่ 3 ตัวอย่างผลลัพธ์การติดตั้งโปรแกรมเว็บเซิร์ฟเวอร์

โค้ดต้นแบบ

ตัวอย่างโปรแกรมในบทความนี้เป็นการสร้างหน้าจอแสดงผลกว้าง 800 และสูง 600 ที่มีพื้นหลังสีดำ และมีข้อความสีขาวว่าHello!

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="node_modules/phaser/build/phaser.js"></script>
</head>
<body>
<script>
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: {
        preload: preload,
        create: create
    }
};
var game = new Phaser.Game(config);
function preload () { }
function create () {
    this.add.text(16, 16, 'Hello!', 
    {fontSize: '32px', fill: '#ffffff' });
}
</script>
</body>
</html>

ทดสอบ

เมื่อบันทึกโปรแกรมเป็นไฟล์ index.html เป็นที่เรียบร้อยให้เรียกคำสั่งต่อไปนี้เพื่อเริ่มการทำงานของเว็บเซิร์ฟเวอร์ โดยโปรแกรมแสดงผลลัพธ์ให้ดังภาพที่ 4 คือ ถ้าทดสอบเข้าเว็บด้วยบอร์ด Raspberry Pi ให้เข้าจาก 127.0.0.1:8080 หรือ localhost:8080 หรือจาก ipaddress เป็น 10.1.234.123:8080 และออกจากโปรแกรมด้วยการกดแป้น ctrl+C ซึ่งตัวอย่างโปรแกรมให้ผลลัพธ์ดังภาพที่ 5

hs

ภาพที่ 4 ตัวอย่างหน้าจอผลลัพธ์จากการเรียกโปรแกรม hs

สรุป

จากบทความนี้จะได้ว่า ผู้อ่านสามารถใช้ Node.js เพื่อเป้นตัวทำงานเป็นตัวให้บริการเว็บ โดยมองไดเร็กทอรีของโครงการเป็นโฮมไดเร็กทอรี และการติดตั้งไลบรารีหรือเฟรมเวิร์กต่าง ๆ สามารถเรียกใช้งานผ่านโปรแกรม npm โดยในบทความนี้ได้ติดตั้งเฟรมเวิร์ก Phaser อใช้ในด้านการทำเกมหรือมัลติมีเดียผ่านเว็บที่สร้างขึ้น

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

(C) 2020, โดย อ.ดนัย เจษฎาฐิติกุล/อ.จารุต บุศราทิจ
ปรับปรุงเมื่อ 2020-12-24
ปรับปรุงเมื่อ 2021-09-11