บันทึกการเรียนรู้การทำเกมกับ AI
Table of contents
เกมชื่อ ตลาดแตก - ตลาดไทยสงบๆ อยู่ดีๆ มีข่าวว่า zombie จะบุกต้องรีบเตรียมรับมือให้พร้อม ผู้เล่นห้องละ 10 คนต้องเอาตัวรอดให้ครบ 5 นาที และรอดอย่างเดียวไม่พอ ต้องรอดแบบรวยที่สุด ลองเล่นได้ที่ taladtaek.com
รอบเล่นจริงบน taladtaek.com: ขนเหรียญเข้าเครื่องย้อนเวลาให้ทัน ก่อนโดนซอมบี้กัด
เกมเป็นสื่อที่ไม่สมบูรณ์จนกว่าจะมีคนเล่น และในตัวเกมมีหลายศาสตร์ประกอบกัน ทั้งภาพ เสียง gameplay และ story คำถามคือยุคนี้ AI ช่วยอะไรได้บ้าง บทความนี้สรุปสิ่งที่ได้เรียนรู้จากการลงมือจริง บทเรียนไม่ได้มาจากตลาดแตกเกมเดียว แต่สะสมจากการลองทำเกมร่วมกับ AI มาหลายโปรเจกต์ ทั้งหมดเป็นประสบการณ์และความเห็นส่วนตัว ลองปรับใช้ตามบริบทของแต่ละคนครับ
ข้อสรุปที่พบ: AI ช่วยงาน build ได้มากจริง หลายอย่าง AI ทำได้แล้ว ณ ตอนนี้ โจทย์ของเราคือหาวิธีสื่อสารกับ AI ให้ตรง บทบาทที่ลงตัวคือเพื่อนคู่คิดที่ทำเกมไปด้วยกัน: AI ลงมือทำ เราดูผลแล้วให้ความเห็น สั่งปรับจนตรงเป้า วนแบบนี้ไปเรื่อยๆ ตัวเร่งของ loop นี้คือให้ AI สร้างเครื่องมือมาช่วยการสื่อสารเสียเอง จะได้ไม่ต้องพิมพ์ prompt ยาวๆ ทุกรอบ และเก็บต้นแบบที่ทำแล้วเป็น template ไว้ตั้งต้น รอบถัดไปจะง่ายขึ้นทันที
ส่วนที่ยังเป็นหน้าที่ของเราเต็มๆ คือความสนุก สิ่งที่ต้องตรวจในเกมไม่ใช่แค่ความถูกต้องของโค้ด แต่คือความรู้สึกตอนเล่น ซึ่ง AI ตอบแทนเราไม่ได้ว่า “แบบนี้สนุกหรือยัง” เราเลยต้องอยู่ตรงกลางเสมอ: เล่นเอง รู้สึกเอง แล้วสั่งแก้ให้ตรงจุด
เริ่มจากสิ่งที่ตัวเองอิน แล้วตกผลึกเป็นเอกสาร
ความอินกับแกนของเกมคือแรงที่พาเราทำจนจบ และคนเล่นสัมผัสได้จากตัวเกม พอได้แกนแล้ว อย่าสั่ง AI ปากเปล่า เพราะภาพในหัวเรายังไม่ชัดพอจะถ่ายทอด ตกผลึกเป็นเอกสารออกแบบ 1 ฉบับที่ตอบ 4 ข้อ:
- เกมคืออะไรใน 1 ประโยค
- 1 รอบของเกมเกิดอะไรขึ้น ผู้เล่นตัดสินใจอะไร
- เวอร์ชันแรกมีแค่ไหน อะไรยังไม่ต้องทำ
- รู้ได้ยังไงว่าเกมนี้ “เวิร์ก”
AI จะช่วยเราในช่วงนี้คือ ช่วยระดมสมอง ช่วยแย้ง และสร้างภาพคอนเซ็ปต์ให้เห็นโลกของเกมก่อนลงมือ
เลือกสนาม: Game Engine หรือเทคโนโลยีเว็บ
ทางเลือกมี 2 สาย: Game Engine (Unity, Unreal) กับ เทคโนโลยีเว็บ (HTML + JS ผ่านตัวช่วยอย่าง Phaser หรือ Three.js) ความต่างสำคัญในยุค AI: ฝั่งเว็บทั้งเกมเป็น text 100% และ AI ถูกเทรนมากับโค้ดเว็บมหาศาล เลยเขียนแม่นแก้ไว ส่วน Game Engine ออกแบบให้ทำงานผ่าน UI มี state ฝังใน scene file ที่คนต้องคลิกเอง AI เข้าถึงยากกว่า
แกนของฝั่งเว็บคือ JSON: ฉาก แมพ ตำแหน่งวางของ เฟรม animation ตัวเลข balance เก็บเป็นข้อมูลที่อ่านง่ายได้หมด ตัวเลขเกมแยกเป็นไฟล์ config แก้เลขแล้วเห็นผลทันทีผ่าน hot reload และเราสร้างเครื่องมือ import, export, preview มาครอบได้ เครื่องมือชุดนี้ไม่ตายไปกับโปรเจกต์ เกมถัดไปหยิบไปใช้ต่อได้เลย
ความเห็นส่วนตัว: เกมที่ต้องการความฉับไวไปทาง Game Engine และใช้ AI รวมกับ MCP ส่วนเกมสาย UX/UI อย่าง Card, Idle, Turn-based หรือเกมการศึกษา มาทางเว็บได้เลย
ภาพ: AI ช่วยได้มาก แต่ต้องคุมมากที่สุด
ถ้าสั่งแบบปกติ AI จะออกแบบ UI ออกมาเป็นหน้าตาเว็บ การ์ดขาวมุมโค้ง ปุ่มแบนเรียบ เพราะถูกเทรนมากับงานเว็บมหาศาล ทางแก้คือสั่งให้ชัดว่า UI ทุกชิ้นคือ “ของในโลกเกม” และแนบภาพ reference หรือ assets แยกชิ้นที่เราเตรียมมาแล้วให้ไปครับ
จุดเปลี่ยนของงานภาพในมุมผมคือโมเดลภาพรุ่นล่าสุดอย่าง GPT Image 2: prompt ได้ละเอียดขึ้นมากและโมเดลเชื่อตามที่เราสั่งจริง ปัญหาเก่าอย่าง sprite ขนาดไม่เท่ากันระหว่างเฟรม หรือส่ง reference ไปแล้วได้ตัวละครหน้าใหม่ ลดลงจนงานภาพเกมเริ่มพึ่ง AI เป็นหลักได้
เคล็ดที่ช่วยได้มาก:
- คำศัพท์เฉพาะทาง เช่น tileset, seamless, parallax background, 2.5D isometric ระบุคำที่ตรงลงไปใน prompt แล้ว AI จะเก่งขึ้นทันที ถ้ายังไม่รู้ว่าสิ่งที่อยากได้เรียกว่าอะไร แคปภาพจากเกมที่ทำได้ดีส่งให้ AI วิเคราะห์ AI จะบอกเองว่าควรใช้ keyword ไหน และเราเริ่มสั่งงานต่อครับ
- animation คือจุดที่ AI เพี้ยนง่ายที่สุด เฟรมเดินอาจหน้าเปลี่ยน ขาสลับข้าง ขนาดไม่เท่ากัน ดูทีละภาพเหมือนปกติ แต่เล่นจริงรู้สึกทันที ต้อง monitor เองเกือบทั้งหมด ตัวช่วยคือทำเครื่องมือ preview ของตัวเอง กับใช้เทคนิคแสดงผลง่ายแทน animation ที่วาดยาก (เดินแล้วมีฝุ่นใต้เท้า ตัวดีดตอนเก็บของ)
- เครื่องมือเฉพาะทางก็มี เช่น PixelLab สำหรับสาย pixel art เทรนมากับ sprite และ tileset โดยตรง ต่อกับ AI agent ผ่าน MCP ได้เช่นกัน
เครื่องมือ preview ที่ให้ AI สร้าง: เล่น animation ทีละเฟรม เช็คขนาดและ baseline ก่อนเอาเข้าเกม
ส่วนงาน 3D ผมยังไม่ได้ลองจริง ถ้าลองแล้วจะมาเล่าอีกครั้งครับ
เสียง: อีกครึ่งหนึ่งของบรรยากาศ
ส่วนนี้ผมมีประสบการณ์ไม่มาก หลักๆ คือบอกแนวเกมกับอารมณ์เสียงที่อยากได้ แล้วให้ AI ช่วยสร้างครับ เสียง action อย่างเสียงเก็บของ เสียงโดนตี ก็บอกตรงๆ ได้เลย เครื่องมือที่ใช้:
- Suno ทำเพลงประกอบ ความเห็นส่วนตัวคืออันดับ 1 ณ กลางปี 2026 ข้อเสียคือไม่มี MCP ให้ต่อตรง ต้องเขียน skill คุม browser หรือ gen มือเอง
- ElevenLabs มี MCP ให้ AI agent สั่งงานได้ตรงๆ ทำได้ทั้ง sound effect และเพลง ส่วน Ludo เทรนมาเพื่องานเกมโดยเฉพาะ และมี MCP เช่นกัน
- ซื้อจากตลาด asset ก็ได้ แต่ต้องเช็ค license ให้ดี
juice: สิ่งที่ทำให้เกม “รู้สึกสนุก”
juice คือฟีดแบ็กเล็กๆ ทุกครั้งที่กด: จอสั่นตอนโดนตี ตัวเลขเด้งตอนเก็บเงิน เสียงติ๊งตอนสำเร็จ เกมเดียวกันเป๊ะ มีกับไม่มี juice สนุกต่างกันคนละเกม juice พื้นฐาน AI ทำได้ไว สั่งเป็นรายการให้ไล่ใส่ได้เลย แต่จังหวะละเอียดอย่างความหน่วงตอนดาบกระทบ AI ทำตามสั่งได้ แต่บอกไม่ได้ว่าเท่าไหร่ถึงพอดี ต้องจูนมือจนใช่ แล้วค่อยส่งตัวเลขชุดนั้นให้ AI
ตรงนี้ฝั่ง Game Engine ได้เปรียบมาก เพราะมีระบบ particle สำเร็จรูปให้จูน และมี assets กับ effect ให้โหลดเยอะ เช่น effect ตอนฟัน ส่วนฝั่งเว็บต้องขับเคลื่อนด้วย Image + CSS + HTML เอง สิ่งที่ผมเรียนรู้คือให้ AI สร้างเครื่องมือกลางขึ้นมา 1 ตัว: เราเปิด preview ปรับแต่งจนพอใจ แล้วส่งค่าเป็น JSON กลับไปให้ AI ใส่ในเกมครับ
เครื่องมือกลางสำหรับจูน juice: กดยิง effect ลาก slider จนมือบอกว่าใช่ แล้ว copy ค่าเป็น JSON ส่งให้ AI
Backend
ถามตั้งแต่แรกว่าเกมนี้ online ไหม ถ้าใช่ งานจะเพิ่มมาอีกชุด: API สำหรับข้อมูลทั่วไป และ WebSocket สำหรับ realtime ส่วนนี้ให้ AI ช่วยเขียนได้ตรงๆ ครับ
- อะไรที่โกงได้ ให้ server ตัดสิน อย่าเชื่อ client
- สร้างเป็นชิ้นใช้ซ้ำได้ guest login, ระบบห้อง, แชท - เกม online แทบทุกเกมต้องมี แยกเป็นระบบละชิ้น ทำครั้งเดียวให้ดี แล้วเก็บเป็น template เกมหน้าไปไวกว่านี้มาก
- ตัวเลขเกมทั้งหมดเป็นไฟล์ config ปรับ balance โดยไม่แตะโค้ด
- ติดตั้งชุด skills ให้ AI ทำงานแบบ software engineer เช่น superpowers ของ Jesse Vincent ที่พา AI ทำงานเป็น workflow จริงจัง มี unit test ก่อนแก้โค้ด ช่วยลดข้อผิดพลาดได้มากครับ
หน้าเข้าเกม: guest login คือชิ้นที่ทำครั้งเดียวแล้วเกมต่อไปหยิบไปใช้ได้เลย
ทำตัวทดลองเล่นจบรอบให้ได้ก่อน แล้วค่อยขยาย
เป้าแรกไม่ใช่เกมเสร็จ แต่เป็นตัวทดลองที่ เล่นจบ 1 รอบได้จริง กราฟิกเป็นสี่เหลี่ยมก็ได้ ขอแค่ loop ครบ ตอนจูน สั่ง AI ให้เจาะจง: “ช่วงท้ายรอบ ศัตรูเร็วขึ้นอีก 20%” ไม่ใช่ “ทำให้สนุกขึ้นหน่อย”
รอบแรกจะช้า เพราะเครื่องมือมีหลายชิ้น กว่าจะประกอบภาพ เสียง ระบบเกม หลังบ้าน เข้าด้วยกันครบ 1 เกม อ่านมาถึงตรงนี้อาจรู้สึกว่าต้องรู้เยอะ ข่าวดีคือทุกอย่างที่ลงแรงรอบแรกกลายเป็นต้นทุน เราจะเรียนรู้และสร้าง template workflow ของเราเองครับ รอบถัดไป เกมที่สองจะไวขึ้นแบบรู้สึกได้ครับ
Testing
ฝั่งเว็บได้เปรียบเรื่องเทสอีกอย่าง: ต่อ AI เข้ากับ Playwright แล้วให้ spawn agent หลายตัวควบคุมเบราว์เซอร์ เข้าไปคลิกเล่นเกมจริงแล้วทำ report กลับมาให้ เอาไว้ดู feedback เบื้องต้น และดักบั๊กร้ายแรงอย่างจอดับก่อนถึงมือคนเล่นครับ
Claude หรือ Codex
หมายเหตุ: ความเห็นหมวดนี้อิงการใช้งานจริงช่วงกลางปี 2026 (ฝั่ง Claude: Opus และ Fable, ฝั่ง Codex: GPT-5.6 หรือชื่อเรียก Sol และโมเดลภาพ GPT Image 2) เครื่องมือกลุ่มนี้เปลี่ยนเร็วมาก อ่านเมื่อไหร่ควรเช็ครุ่นล่าสุดประกอบ
โมเดลรุ่นท็อปตอนนี้ทำให้การใช้ AI ทำเกมง่ายขึ้นแบบเห็นผลจริง ความเห็นส่วนตัวมองว่ามาจากสองแรง: งานเกมเป็นโดเมนที่โมเดลไม่ถูกจำกัดความสามารถ ต่างจากสายเคมี ชีววิทยา หรือ security ที่มีมาตรการความปลอดภัยครอบไว้ (ตัวอย่างประกาศจริง: ASL-3 ของ Anthropic) กับความสามารถด้านการใช้เหตุผลและการมองเห็นภาพที่พัฒนาขึ้นมาก ถึงขั้นเข้าใจระบบ 2D กับ 3D ลึกถึงระดับคณิตศาสตร์
จุดต่างชัดสุดคืองานภาพ: Codex สร้างภาพได้โดยตรงในตัว ส่วน Claude ไม่มีโมเดลภาพของตัวเอง ถ้าขอให้วาดจะได้ vector ที่สร้างจากโค้ด ซึ่งให้คนละความรู้สึกกับภาพวาด ทางแก้ที่ผมใช้: สร้าง skill ให้ Claude ส่งงานภาพไปให้ Codex ทำ ได้จุดแข็งของทั้งคู่ในเวิร์กโฟลว์เดียว
คำตอบที่ลงตัวสำหรับผม: ใช้คู่ แบ่งหน้าที่ให้ชัด
| งาน | ตัวที่ใช้ | เหตุผล |
|---|---|---|
| ออกแบบระบบ เอกสาร โค้ดต่อเนื่อง | Claude Code | ถนัดงานหลายขั้นต่อเนื่อง เอกสารไทยอ่านรู้เรื่อง |
| ภาพ sprite ฉาก ไอคอน | Codex | สร้างภาพได้ในตัว จบในเครื่องมือเดียว |
| review โค้ด | ตัวที่ไม่ได้เขียนชิ้นนั้น | คนละโมเดลเจอบั๊กคนละแบบ |
มีงบทั้งสองตัว = perfect แต่อย่าให้สองตัวทำงานชิ้นเดียวกันพร้อมกัน เปลืองและต้องมารวมงานเอง ถ้างบจำกัดต้องเลือกตัวเดียวสำหรับทำเกม คิดว่า Codex เพราะ gen ภาพได้ในตัว และงาน visualize หนักๆ ใช้โมเดลตัวท็อปได้โดยกิน token เบากว่า Fable แต่ความเห็นส่วนตัว Claude Code ทำงานลื่นไหลกว่าและจบงานไวกว่าครับ
ข้อสังเกต
- ทุกคำสั่งต้องมีตัว verify - ตัวอย่างจริง: tile พื้น isometric ที่สั่งวาด พอนำมาต่อกันขอบอาจไม่ประกบพอดี ส่วนที่ต้องเป๊ะแบบนี้เราให้ AI เขียนสคริปต์ Python มา verify ได้ครับ ให้ AI สร้างเครื่องมือมาตรวจงานของ AI แล้วเราเป็นคนตัดสินขั้นสุดท้าย
- รอบแรกที่ AI ประกอบเกมออกมา คือช่วงที่ใช้เวลานานที่สุด - เพราะต้องปรับหลายอย่างให้งานของ AI ตรงกับภาพในหัวเรา ตรงนี้ภาพคอนเซ็ปต์และ art ที่เตรียมไว้ตอนวางแผนแรกมีผลมากครับ เพราะเราต้องพยายามให้ AI ทำเกมออกมาใกล้เคียงกับที่เราออกแบบไว้
- ฉาก 2D ประกอบได้หลายแบบ - แบบที่ผมใช้คือแยกชิ้น: พื้นเป็น tile ของวางเป็น sprite แยก แล้วให้เกมประกอบจาก map.json ข้อดีคือแก้ทีละจุดได้ ขยายแมพง่าย คุมพื้นที่ชนละเอียด แลกกับต้องจัดการรอยต่อระหว่างชิ้นเอง อีกแบบคือ gen ฉากทั้งภาพเป็น background ชิ้นเดียวแล้ววางตัวละครทับ ได้บรรยากาศแบบภาพวาดเต็มตาและเสร็จไว แต่แก้จุดเดียวต้อง gen ใหม่ทั้งภาพ และพื้นที่ชนต้อง mark เอง แต่ละแบบให้ความรู้สึกร่วมต่างกัน อยู่ที่เราออกแบบครับ ตัวที่แจกในบทความนี้เป็นแบบแยกชิ้น
สองแบบในเกมเดียว: หน้า lobby ใช้ฉากแบบภาพวาดทั้งภาพเป็นพื้นหลัง ส่วนในเกมเป็นแบบแยกชิ้นเพราะต้องเดินจริงชนจริง
ของแจก
เครื่องมือที่เล่าในบทความนี้ ผมสกัดจากโปรเจกต์จริงเป็นชุดแจกที่ github.com/ntpon/web-game-kit เปิดเว็บเดียวใช้ได้ครบ หรือลองบนเว็บได้เลยที่ kit.ntpon.com ไม่ต้องติดตั้ง:
- starter โครงเกม React + Phaser เดินได้ทันที ตัวเลขทุกตัวเป็นไฟล์ JSON
- Map editor วางของบนแมพ ระบายช่องกันชน export เป็น map.json
- Sprite preview เช็ค animation เพี้ยนก่อนเข้าเกม
- Particle juice จูน juice ด้วยมือ แล้ว copy ตัวเลขให้ AI
- Design doc template เอกสารออกแบบ 1 หน้า ตอบให้ครบก่อนเริ่มสั่ง AI
- skills สร้างภาพและ asset เกม สำหรับต่อ AI agent เข้ากับโมเดลภาพ
Map editor ในชุดแจก: วางของแล้วสลับโหมด collision ระบายพื้นที่กันชน export เป็น map.json
ส่วนที่กำลังตามมาคือวิดีโอเล่าขั้นตอนการทำทั้งหมด ตั้งแต่ยังไม่มีอะไรจนเปิดให้เล่นจริง ใครสนใจแนวนี้ฝากติดตามได้ครับ
ลองเล่นตลาดแตกได้ที่ taladtaek.com
อ้างอิง
- เครื่องมือที่ใช้จริงในโปรเจกต์นี้: Claude Code, Codex
- เครื่องมือเสียงและภาพที่พูดถึงเป็นทางเลือก: Suno, ElevenLabs, Ludo, PixelLab
- ตัวอย่างและเอกสาร: Three.js examples, Phaser examples
- มาตรการความปลอดภัยของโมเดลรายโดเมน: Activating AI Safety Level 3 protections (Anthropic)