หนึ่งประโยค หนึ่งบ่าย: วิธีที่ Codex ช่วยให้ฉันสร้างเกมที่สมบูรณ์ได้ตั้งแต่ต้น

เมื่อเช้านี้ ผมมีเวลาว่างและอยากจะทำเกมไพ่แนว roguelike คล้ายกับ Slay the Spire

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

หนึ่งชั่วโมงต่อมา เกม roguelike แนวตำนานจีนชื่อ "Night Patrol: Desolate Temple" ก็พร้อมเล่นได้แล้ว

ตั้งแต่หน้าปก แผนที่ ผ่านการต่อสู้ต่อสู้ปกติ เอลิท อีเวนต์ ร้านค้า การพักผ่อน ไปจนถึงบอสในห้องโถงใหญ่ของ Desolate Temple

มอนสเตอร์เจ็ดตัว การ์ดประมาณยี่สิบใบ และชุดคอมโบสี่ชุด—ซีล ธูป เผาตะกรุด และอัญเชิญเทพ—ทั้งหมดทำงานได้

เวลาที่เหลืออีกไม่กี่ชั่วโมงคือการทำให้มันดูไม่เหมือนเดโม

ฟีดแบ็คการโจมตี เสียงเอฟเฟกต์ ดนตรี อาร์ตการ์ด แอนิเมชันตอนหยุดนิ่ง และวิดีโอจบเกม—รายละเอียดเล็กๆ เหล่านี้กำหนดว่าผู้เล่นจะเชื่อหรือไม่ว่า "นี่คือเกมจริงๆ"

<video preload="none" tabindex="-1" playsinline="" aria-label="Embedded video" poster="https://pbs.twimg.com/amplify_video_thumb/2049902752332148736/img/UYqr6qERhvORGBJP.jpg" src="https://video.twimg.com/amplify_video/2049902752332148736/pl/o3zbWtmjJ3875EPf.m3u8?tag=27&amp;v=cfc&amp;variant_version=1" style="width: 100%; height: 100%; position: absolute; background-color: black; top: 0%; left: 0%; transform: rotate(0deg) scale(1.005);"></video>

0:22

โปรเจกต์นี้เป็นโอเพนซอร์สแล้ว โดยมีตัวติดตั้งสำหรับทั้ง macOS และ Windows พร้อมแล้ว:

https://github.com/op7418/Night-Patrol/releases

มีหลายช่วงเวลาตลอดบ่ายที่ทำให้ผมตกใจจริงๆ

ความสามารถของโมเดล Codex ไม่ใช่ข่าวใหม่อีกต่อไป

สิ่งที่ดึงดูดความสนใจของผมคือเบราว์เซอร์ในตัว, GPT-Image 2.0 ที่รวมอยู่, และไดรฟ์การดำเนินงานที่ไม่หยุดยั้งเพื่อบรรลุเป้าหมาย

เมื่อรวมสามสิ่งนี้เข้าด้วยกัน ความสามารถของมันก็แตกต่างจาก Claude Code โดยสิ้นเชิง

ต่อไป ผมจะพูดถึงวิธีการพัฒนาร่วมกับ AI และสิ่งที่น่าตกใจที่เกิดขึ้นระหว่างกระบวนการ:

1. ผมพูดแค่เจ็ดคำ มันก็สร้างไปป์ไลน์ตัวละครทั้งหมด

!Image

ผมแค่คุยกับมันเรื่อง Slay the Spire และถามว่ามันช่วยผมสร้างเกมที่คล้ายกันได้ไหม

!Image

ผลที่ได้คือ มันใช้ทรัพยากรที่มีอยู่โดยตรงเพื่อสร้างเดโมที่คล้ายกันมากผ่านโค้ด

ผมไม่ได้ขอ green screen แต่มันสร้างภาพที่มีพื้นหลัง green screen โดยตรง

หลังจากนั้น ผมให้ Codex ใช้ GPT-Image 2ในตัวสร้างแอสเซทภาพ

ผมไม่ได้ระบุสไตล์ มอนสเตอร์ตัวไหน หรือต้องใช้แอสเซทอะไร

พอภาพออกมา ผมอึ้งไปชั่วขณะ

ตัวละครยืนอยู่บนพื้นหลังสีเขียวทึบ—green screen มาตรฐานในวงการภาพยนตร์และโทรทัศน์: สม่ำเสมอ สะอาด มีขอบชัดเจน

ไม่มีหมอก ไม่มีภูเขาไกล ไม่มีองค์ประกอบภาพอื่นๆ

!Image

ส่วนที่น่ากลัวคือมันรู้ตั้งแต่แรกแล้วว่าต้องสร้างภาพ green screen เพื่อให้การประมวลผลภายหลังง่าย

ผมไม่เคยบอกมันว่า "ภาพประกอบตัวละครที่ใช้ในเกมต้องเป็น PNG โปร่งใส" หรือ "กรุณาสร้างพื้นหลัง green screen เพื่อจะได้ลบทีหลัง" มันวางแผนไปป์ไลน์นี้เอง

ตั้งแต่จะสร้างตัวละครแบบไหน วางบนเวทีต่อสู้อย่างไร ต้องประมวลผลอะไรก่อนวาง—มันคิดทุกอย่างเรียบร้อยตั้งแต่ตอนที่เรียก GPT-Image และ reverse-engineer พรอมต์

มันยังหาเครื่องมือลบพื้นหลังเองด้วย

ผมไม่ได้ติดตั้งเครื่องมือประมวลผลภาพให้มัน ไม่ได้ให้ rembg หรือ dependencies พิเศษใดๆ ใน Python environment

มันค้นหา ติดตั้ง และกำหนดค่าด้วยตัวเอง แล้ววางไฟล์ที่ประมวลผลแล้วไว้ใน tmp/imagegen/ อย่างเป็นระเบียบ

การใช้ green screen ในการสร้าง หาเครื่องมือเอง และจัดหมวดหมู่ตามชื่อไฟล์—สามสิ่งนี้รวมกันเป็นไปป์ไลน์แอสเซทตัวละครที่สมบูรณ์

ตั้งแต่ต้นจนจบ ผมแค่พูดคำว่า "ใช้ GPT-Image 2.0 สร้างแอสเซท"

!Image

เมื่อก่อน ความรู้สึกคือ "โมเดลเขียนโค้ดได้ แต่ผมต้องเตรียมเครื่องมือและบริบทให้"

ตอนนี้ เหมือนคุณแค่บอกเป้าหมาย แล้วมันก็เดินเส้นทางให้สำเร็จเอง

ผมรับผิดชอบแค่ความสวยงามเท่านั้น มันจัดการห่วงโซ่อุปทาน

2. เพื่อดาวน์โหลดไอคอนไม่กี่อัน มันเกือบแฮ็กไซต์ stock asset

ซื้อสมาชิกยังไม่พอ มันเริ่มวิเคราะห์โครงสร้างเว็บไซต์

การสร้างภาพหลัก เช่น อาร์ตตัวละครด้วย image model ก็ใช้ได้

แต่เกมมีของเล็กๆ มากมาย—ขอบการ์ด, อัญมณีค่าใช้จ่าย, พื้นหลังเด็ค, ยาเติมพลัง, ปุ่มปากั๋ว, แผงตะกรุด—การสร้างทีละชิ้นด้วย image model จะแพง ช้า และ texture ไม่สม่ำเสมอ

ผมบอกมันว่า ทำไมไม่หาแอสเซทที่มีอยู่แล้วในเน็ตด้วยตัวเองล่ะ

มันเริ่มค้นหาอย่างจริงจัง มันเจอไซต์ stock ที่ชอบ ผมก็ซื้อสมาชิกและให้บัญชีมัน

!Image

สิบนาทีต่อมาเหมือนเหตุการณ์เหนือธรรมชาติ

มันล็อกอิน หาแอสเซทที่ต้องการ และเตรียมคลิกดาวน์โหลด แต่มีแคปต์ชาก่อนปุ่มดาวน์โหลด—ครั้ง สองครั้ง สามครั้ง มันผ่านไม่ได้

โมเดลทั่วไปจะกลับมาบอกว่า "ฉันจัดการแคปต์ชาไม่ได้ ช่วยดาวน์โหลดให้หน่อย"

Codex เริ่มวิเคราะห์โครงสร้างเว็บไซต์ พยายามเลี่ยงข้อจำกัดการคลิก front-end และสร้าง requests โดยตรงเพื่อดึง static resources

แล้วราวกั้นความปลอดภัยของ Codex ก็เข้ามาแทรกแซง

GPT รุ่นปัจจุบันจะยุติงานทันทีหากเกี่ยวข้องกับการข้ามเส้นความปลอดภัยทางไซเบอร์ที่อาจเกิดขึ้น พร้อมป๊อปอัปขอการรับรององค์กรเพื่อพิสูจน์ว่าคุณเป็นผู้ใช้ที่ถูกกฎหมาย

!Image

ผมนั่งจ้องหน้าจอสองสามวินาที

AI ที่ขอให้คุณช่วยหาบัตรสมาชิกให้ แล้วพยายามเขียน crawler ของตัวเอง พูดตรงๆ มันบ้าไปหน่อย

มันไม่ใช่ "ชั่วร้าย" มันแค่ถือว่า "การได้แอสเซทเหล่านี้" เป็นงานแบบ closed-loop ที่ต้องทำให้เสร็จ

เมื่อเจออุปสรรค มันอัปเกรดวิธีการเองโดยอัตโนมัติ จนกว่าจะถึงเส้นแดงด้านความปลอดภัย

วิธีแก้สุดท้ายคือ: มันส่งลิงก์แอสเซทที่ชอบมาให้ผม ผมคลิกดาวน์โหลดแล้วลากให้มัน วินาทีนั้น ผมรู้สึกเหมือนเป็นเด็กฝึกงานของ AI

!Image

3. มันรวมแอสเซทหลายร้อยชิ้นเป็นภาพใหญ่ภาพเดียว—นี่คือการเคลื่อนไหวที่ฉลาดที่สุด

โฟลเดอร์ที่มีภาพร้อยภาพ—โมเดลจะเลือกอย่างไร?

การลบพื้นหลังและการ crawling เป็นการสาธิตความสามารถมากกว่า

ส่วนต่อไปนี้ ผมเชื่อว่าเป็น "ความเข้าใจในการแก้ปัญหา" ที่แท้จริง—เป็นท่าที่ทำให้คุณปิดแล็ปท็อปและปรบมือเงียบๆ

ผมหาไฟล์ zip แอสเซทเกมขนาดใหญ่ส่งให้มัน

ข้างในมีภาพหลายพันภาพ แบ่งคร่าวๆ เป็น "UI Interface", "Magic Treasure Icons", "Characters", และ "Badges"

ปัญหาคือ:

• โฟลเดอร์หมวดหมู่มักจะมี PNG เป็นสิบหรือร้อย
• ชื่อไฟล์ส่วนใหญ่ไม่มีข้อมูล เช่น ui_001.png หรือ icon_047.png
• บริบทของ multimodal model ไม่สามารถป้อนทีละตัวได้

!Image

เดิมทีมีสองวิธี:

• อ่านทีละตัว: ส่งเข้าโมเดลทีละตัว บริบทระเบิดหลังจากหลายสิบ
• เดาจากชื่อ: ชื่อไฟล์ไม่มีข้อมูล การเดาจึงไร้ประโยชน์

Codex ใช้เส้นทางที่สาม

มันเขียนสคริปต์เล็กๆ เพื่อจัดเรียงและรวมภาพเล็กในโฟลเดอร์เป็นภาพกริดขนาดใหญ่ภาพเดียว

ภาพเล็กแต่ละภาพมีชื่อไฟล์เดิมกำกับข้างล่าง เหมือนแคตตาล็อก

แล้วมันก็อ่านแค่ภาพใหญ่ภาพนี้เท่านั้น

multimodal model สามารถเห็นหน้าตาของแอสเซทร้อยชิ้นในพริบตาเดียว

เมื่อมันชอบชิ้นไหน ก็แค่อ่านชื่อไฟล์ข้างล่างแล้วอ้างอิงด้วยชื่อในโฟลเดอร์เดิม

!Image

การบริโภคภาพครั้งเดียวแทนที่การเรียกคืนร้อยครั้ง

มันตระหนักถึงคอขวดของตัวเอง

เมื่อแผ่นรวมขนาดยักษ์นั้นถูกสร้างขึ้น ผมจ้องมันเป็นเวลานาน

การกระทำนั้นไม่ซับซ้อน

มันเป็นตรรกะเดียวกับ contact sheet ของช่างภาพ หรือกำแพงภาพขนาดย่อของห้องสมุดฟิล์มเก่า

กุญแจสำคัญคือโมเดลตระหนักว่า "แบนด์วิดท์ทางสายตาของฉันจำกัด ฉันต้องบีบอัดปัญหาให้เป็นภาพเดียว"—และมันทำสิ่งนี้ได้อย่างอิสระ

เมื่อตระหนักถึงข้อจำกัดของเครื่องมือตัวเอง แล้วสร้างอินพุตที่ดีกว่าให้ตัวเอง—นี่ใกล้เคียงกับการเป็นวิศวกรที่สร้างเครื่องมือของตัวเองได้

ในฐานะผู้ใช้ ผมไม่ได้มีส่วนร่วมเลย แค่เห็นปริศนาปรากฏบนโต๊ะ

ในที่สุด UI มากมายในเกม—อัญมณีค่าใช้จ่าย, เด็ค, ยาเติมพลัง, ปุ่ม, และขอบตะกรุด—ถูกเลือกผ่านกระบวนการนี้

เมื่อมองดูไฟล์ที่ตัดอย่างเรียบร้อยภายใต้ assets/vendor/aigei/ ทีหลัง ผมรู้สึกว่า contact sheet นั้นคือขั้นตอนที่มีค่าที่สุดของทั้งโปรเจกต์

4. Seedance 2.0 สร้างแอนิเมชันการสังหารสำหรับบอสเจ็ดตัว

เมื่อภาพได้รับการขัดเกลาถึงระดับหนึ่ง ผมอยากเพิ่มความรู้สึกพิธีกรรมให้จบการต่อสู้

แผนสุดท้าย: ทุกครั้งที่ปราบมอนสเตอร์ได้ จะมี cutscene เล่นด้วยแอนิเมชันสังหารไม่กี่วินาที

งานนี้ปัจจุบันจัดการได้ดีที่สุดด้วย Seedance 2.0

!Image

Process

• GPT-Image สร้างภาพหยุดนิ่งชัยชนะสำหรับมอนสเตอร์ทั้งเจ็ดตัว
• โปสเตอร์เหล่านี้ถูกป้อนให้ Seedance 2.0 เพื่อสร้างวิดีโอสั้นที่สอดคล้องกัน
• วิดีโอถูกวางใน assets/generated/cinematics/ และเล่นอัตโนมัติหลังจากชนะการต่อสู้

!Image

5. หลังจากเวอร์ชันที่เล่นได้ครั้งแรก งานจริงจึงเริ่มขึ้น

เวอร์ชันแรกนั้น "เล่นได้" จริงๆ

เมื่อต้นแบบเสร็จในสามชั่วโมง เกมมีทุกอย่างที่จำเป็น

หน้าปก แผนที่ การต่อสู้ รางวัล อีเวนต์ ร้านค้า การพักผ่อน บอส และผลลัพธ์—ลูปสมบูรณ์อยู่แล้ว และองค์ประกอบที่ทำให้ผู้เล่นติดก็มี

ตามมาตรฐานก่อนหน้านี้ เวอร์ชันนี้สามารถปล่อยเพื่อหลอกให้คนเล่นได้แล้ว

!Image

แต่เวอร์ชันนี้ให้ความรู้สึกเหมือน flow chart มากกว่าเกม ทุกขั้นตอนทำงานได้ แต่ทุกขั้นตอนแห้งแล้ง

เวลาที่เหลือถูกใช้ไปกับรายละเอียดที่ยากจะเรียกชื่อทีละอย่าง แต่รวมกันแล้วกำหนดว่า "นี่ให้ความรู้สึกเหมือนเกมจริงๆ" หรือไม่

ดนตรีจาก Suno v5.5

เพลงประกอบทั้งหมดถูกสร้างโดย Suno v5.5 ไม่ได้ใช้แอสเซทสต็อกเลย

ผมให้คำอธิบายทิศทาง—"ถนนกลางคืนแนวตำนานจีน ปลาไม้ ระฆัง drone ความถี่ต่ำ บันได pentatonic จำกัดและไม่โอเวอร์"

มันรันสองสามเวอร์ชัน และผมเลือกมาใช้ในเกม โทนหน้าปกหนักกว่า ส่วนพื้นหลังการต่อสู้เบากว่าเพื่อไม่ให้รบกวนสมาธิ

!Image

ผมยังเพิ่มการประมวลผลรายละเอียด: เสียงดนตรีดังกว่าบนหน้าคอย; เมื่อคลิก "เริ่มเกม" แล้ว ระดับเสียงลดลงและกลายเป็นเสียงพื้นหลัง

แอนิเมชันโจมตีและเสียงกระทบ

ในการต่อสู้ช่วงแรก เมื่อเล่นการ์ด มอนสเตอร์แค่ตัวเลขลดลง ไม่มีฟีดแบ็ค ไม่มีน้ำหนัก

Codex ลงรายละเอียดเต็มที่:

• ตัวละครสั่นเมื่อโดนโจมตี กล้องสั่นเล็กน้อย และหน้าจอกระพริบสีแดงสั้นๆ
• การโจมตีแต่ละประเภทมีเสียงกระทบีเวอร์—ดาบ ตะกรุด สายฟ้า และหมัด มีพื้นผิวเสียงต่างกัน
• การบล็อกและการแก้ซีลมีเสียงของตัวเองเพื่อไม่ให้กลืนกัน
• มีภาพหยุดนิ่งสั้นๆ ในวินาทีที่ศัตรูตายก่อนเข้าสู่วิดีโอสังหาร

สิ่งเหล่านี้เล็กทีละอย่าง แต่รวมกันแล้วเปลี่ยน "ความรู้สึก" ของการต่อสู้จากฟอร์มเว็บเป็นเกมไพ่

!Image

Seedance 2.0 ยังสร้าง idle animations

ขั้นตอนนี้คือการใช้เครื่องมือที่ผมชอบที่สุดในช่วงขัดเกลา

นอกจากวิดีโอสังหารบอส ผมยังให้มันสร้างพื้นหลังหน้าปก—ไฟลุกไหม้ในสิ่งแวดล้อม โคมไฟแกว่ง และเมฆไหลในระยะไกล

Seedance 2.0 โดยค่าเริ่มต้นจะสร้างวิดีโอที่มีจุดเริ่มต้นและจุดสิ้นสุด ซึ่งจะกระโดดที่รอยต่อถ้าลูป

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

!Image

แอนิเมชันพื้นหลังหน้าปกถูกสร้างด้วยวิธีนี้ ไฟลุก โคมแกว่ง เมฆไหลตลอดกาล—คุณสามารถจ้องมันสามนาทีและไม่เห็นรอยต่อ

เทคนิคนี้มีมาก่อน video generation; มันคือวิธีสร้างฉากลูปในแอนิเมชัันเก่า

!Image

สรุป: บ่ายนี้ทำให้ผมตกใจหลายครั้ง

ทั้งโปรเจกต์เสร็จในเซสชั่น Codex เดียว ผมไม่เคยเปิดหน้าต่างที่สอง

ต้นแบบเกม, เครื่องสถานะ, สถาปัตยกรรม React + Phaser, ท่อส่งแอสเซท, การลบพื้นหลัง, การขูดแอสเซท, การสร้าง contact sheet, การปรับแต่ง GPT-Image, การรัน Seedance 2.0, การรวม Suno v5.5, การแพ็กเกจด้วย Electron, การสร้าง Release บน GitHub Actions, README, ไอค่อน, สื่อส่งเสริมการขาย—ทั้งหมดอยู่ในนั้น

ผมทำน้อยมากด้วยตัวเอง:

• เลือกทิศทาง: แนวตำนานจีน เน้นซีลและธูป
• ให้ข้อเสนอแนะด้านสุนทรียภาพ: ตรงไหนหยาบ ตรงไหนเหมือนฟอร์มเว็บ ตรงไหนแสงขัดกัน
• ทำหน้าที่เป็นผู้คัดกรอง: แอสเซทไหนใช้ได้ crawler ไหนควรหลีกเลี่ยง สิทธิ์ไหนควรปฏิเสธ

Codex จัดการที่เหลือ และทุกขั้นตอนมีช่วงเวลาที่ทำให้ผมหยุดและจ้อง

มันสร้างภาพ green screen ตั้งแต่แรกเพราะมันรู้ว่าตัวละครต้องลบพื้นหลังก่อนเข้าเกม

มันพยายามเขียน crawler เพื่อเลี่ยงแคปต์ชา แต่ถูกหยุดโดยนโยบายความปลอดภัยของตัวเอง

มันรวมแอสเซทนับพันเป็นภาพดัชนีขนาดยักษ์ เพื่อใช้การบริโภคภาพครั้งเดียวแทนที่การเรียกคืนร้อยครั้ง

ไม่มีสิ่งใดเป็นสิ่งประดิษฐ์ที่เปลี่ยนโลกด้วยตัวของมันเอง แต่ทั้งหมดชี้ไปที่การเปลี่ยนแปลงเดียวกัน:

เมื่อก่อน คุณต้องตั้งค่าเครื่องมือให้มัน และมันมีหน้าที่เขียนโค้ด; ตอนนี้คุณแค่บอกเป้าหมาย แล้วมันก็หา กำหนดค่า และสร้างเครื่องมือเอง

ความรู้สึกนี้ก้าวข้ามขอบเขตของผู้ช่วยเขียนโค้ดแล้ว

ให้ความรู้สึกเหมือนต้นแบบของซอฟต์แวร์ AGI ที่ทำงาน

ควรแพ็กกระบวนการนี้เป็นสกิลไหม?

หลังจากรันโปรเจกต์นี้ ผมมีกระบวนการที่ค่อนข้างคงที่ในใจ:

ผมกำลังคิดว่าจะห่อหุ้มกระบวนการนี้เป็น Codex Skill ที่ออกแบบมาโดยเฉพาะสำหรับทำเดโมเกมอินดี้

คุณแค่ป้อนไอเดียเกมเพลย์เข้าไป แล้วมันจะรันเวอร์ชันที่เล่นได้ แพ็กเกจได้ และแจกจ่ายได้ให้คุณภายในไม่กี่ชั่วโมง

ถ้าใครสนใจ ผมจะสละเวลาสร้างสกิลนี้และโอเพนซอร์สมัน ยังไงผมก็ใช้มันเองอยู่แล้ว

เดโมเกม

โค้ดเป็นโอเพนซอร์ส และชุดติดตั้งพร้อมแล้ว:

https://github.com/op7418/Night-Patrol/releases