Phaser
อันนี้เป็น game engine ที่ใช้ javascript หรือ typescript ( คำแนะนำ)นะครับ ซึ่งหลักๆ คือใช้งาน 2D นะครับ (มีปลั๊กอิน 3D แล้วละ แต่ยังไม่เคยลอง) ก่อนอื่นหน้าเว็บของ phaser นะครับ (รองรับการคอมไพล์ไปยัง android และ ios) และดาวน์โหลดตัวไฟล์ของ phaser ได้ ที่นี้ โดยตัว ide ที่ผมจะใช้เป็นตัว Brackets ร่วมกับ javascript นะครับ เหตุเพราะมันอัพเดตเห็นง่ายดี ( html, css อัพเดตทันที ส่วน js กดรีเฟรชเว็บได้ จำลองเซิฟเวอร์ไม่ยุ่งยาก กดปุ่มเดียว)
- ติดตั้ง Brackets ด้วยคำสั่ง sudo snap install brackets --classic (ถอนด้วยคำสั่ง sudo snap remove brackets) ( window)
- เปิด Brackets ขึ้นมา แล้วไปที่เมนู View >> Themes.. >> น่นอนเลือก current Themes เป็น Bracket Dark ครับ สบายตาดีจุง 555 กด Done จบ
- ทีนี้เราค่อยมาเปิดไฟล์งานกันนะครับ ไปที่เมนู File >> Open Folder... แล้วเลือกโฟลเดอร์ที่เราโหลดมาจากเว็บของ phaser นะครับ
- ตัว ide จะยังไม่ได้ดึงไฟล์ในโฟลเดอร์ของเราเข้ามาในทันทีนะครับ (ของ window 10 ดึงให้เลย) เราจะต้องเปิดเพิ่มเอง ไปที่เมนู File >> Open... มันจะอยู่ในโฟลเดอร์ที่เราเลือกไว้แล้ว ให้เลือกไฟล์ที่จะแก้ไขได้เลยครับ (ถ้าอยากดูตัวอย่างสุดท้ายก็เลือก part10.html)
- ทางขวาของ ide จะมีรูปไอคอนสายฟ้า (คล้ายไอคอนตอนเราชาร์จแบตมือถือนั้นละครับ) ชื่อว่า "Live Preview" หรือจะเปิดเมนู File >> Live Preview ก็ได้ครับ มันจะขึ้นหน้าต่างใหม่ที่เป็น chrome และมีหน้าเว็บของเราในนั้น (จำลองเซิฟเวอร์) เท่านี้ก็ใช้ทดลองเขียนเกมบนเว็บได้แล้วครับ
- กรณีใครอยากใช้ร่วมกับ ionic เพื่อให้สามารถใช้งานบนมือถือได้นะครับก่อนอื่นต้อง
- การใช้งานร่วมกับ svelte นะครับ (ต้องติดตั้ง nodejs ก่อนนะครับ)
- npm install -g degit อันนี้ไว้โหลดโปรเจ็คจาก git
- เริ่มติดตั้ง svelte
- npx degit sveltejs/template svelte_phaser (บางครั้งถ้ามันเออเรอร์ ก็ไปโหลด zip จากที่นี้มาแตกเอาเองนะครับ)
- สำหรับคนที่ไปโหลดมาเองเป็น zip ให้ sudo apt install unzip -> unzip template-master.zip ที่โฟลเดอร์มันนะครับ ตามปกติก็อยู่ใน Download แล้ว mv ไปไว้ในที่เราต้องการนะครับ
- cd NameFolderYourProject
- yarn หรือ npm i (yarn จำลองเซิฟเวอร์ไวกว่านะ)
- ถ้าใครต้องการใช้ tailwind ให้ใส่ <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> ไว้ใน App.svelte นะครับ
- หรือใช้ daisyui ใส่
<link href="https://cdn.jsdelivr.net/npm/daisyui@1.25.4/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" /> ไว้ใน App.svelte นะครับ - yarn run dev หรือ npm run dev (install ตัวไหนก็ใช้ตัวนั้นนะ) จะทำการจำลองเซิฟเวอร์ขึ้นมาให้เราคลิกเข้าไปที่ Local: http://localhost:port ก็จะขึ้นหน้าเว็บของ svelte มาให้ แต่ทีนี้ให้เรา ctrl+c ใน terminal ปิดเซิฟเวอร์ไปก่อน
- ต่อด้วยติดตั้ง phaser การใช้งานจะต่างจากปกตินะครับ ดูได้ที่นี้
- npm install phaser svelte-phaser
- เข้าไปที่ src ไปแก้ไขไฟล์ App.svelte นะครับ เปลี่ยนทั้งหมดตามนี้
<script>
import { Game, Scene, Text } from 'svelte-phaser'
</script>
<Game width={800} height={600}>
<Scene key="main">
<Text x={350} y={300} text="valenteer" />
</Scene>
</Game> - แล้ว npm run dev อีกทีนะครับ เราจะมีหน้าจอเกมบนเว็บแล้ว
- ตามด้วยติดตั้ง ionic (แต่เขียนติดกันดูยากไปหน่อย แยกเป็นคำสั่งตามนี้)
- cd NameFolderYourProject (ถ้าอยู่ในโฟลเดอร์อยู่แล้วก็ข้ามเลยครับ)
- npm i (หรือ yarn)
- npm run build (หรือ yarn run build)
- npm i @capacitor/core @capacitor/cli @capacitor/android (ถ้าจะใช้ ios กะเพิ่ม @capacitor/ios ไป) (หรือใช้ yarn add @capacitor/core @capacitor/cli @capacitor/android แทน npm ก็ได้)
- npx cap init
- npx cap add android (ถ้ามีการแก้ไขโปรเจ็ค อย่าลืมลบโฟลเดอร์ android อันเก่าทิ้งก่อนนะครับ มันจะได้ build ใหม่)
- npx cap open android (ต้องมี android studio ก่อนนะครับ บางทีเราติดตั้งแล้วมันไปลงที่อื่น ให้ cd / แล้วค้นหาด้วย sudo find . -name studio.sh แล้วก็อปปี้ด้วย sudo cp -r /path/android-studio /usr/local/)
- ไปที่ android studio => Build => Build Bundle(s) / APK(s) => Build APK(s)
- ไฟล์ apk จะอยู่ในพาธ ../android/app/build/outputs/apk/debug/app-debug.apk
- จบเพียงเท่านี้ละครับ สรุปการใช้งาน phaser กับ web นี้ import ได้เลย การใช้ร่วมกับ web framework นี้ก็แทบไม่ต่างกัน จะมายุ่งยากตอนใช้ร่วมกับ ionic ซึ่งจะมีสองแบบ คือ
- ลง ionic ก่อนแล้วให้มันตั้งโปรเจ็ค framework ต่างๆ ให้เรา (แต่ยังไม่มีให้สร้าง svelte นะ) แล้วเพิ่ม phaser (มายุ่งตอนเพิ่ม phaser)
- สร้างโปรเจ็คตาม framework ต่างๆ ก่อน เพิ่ม phaser แล้วตามด้วย ionic (อันนี้ยุ่งตอนเพิ่ม ionic แทน)
ความคิดเห็น
แสดงความคิดเห็น