สร้างเกมจากเทมเพลตเกม: 7 ขั้นตอนสำหรับมือใหม่

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

คู่มือนี้พาเดินตามเส้นทางนั้นใน 7 ขั้นตอน โดยใช้ชื่อไฟล์จริงจากหน้าสินค้าและคู่มือของเทมเพลตของเราเอง เพื่อให้คุณเห็นว่า "แก้ด่าน" หน้าตาเป็นอย่างไรก่อนจะซื้ออะไร เขียนสำหรับคนที่ยังไม่เคยปล่อยเกม เช่น ครู นักการตลาด หรือนักพัฒนาเว็บที่เพิ่งลองทำเกมครั้งแรก ขั้นตอนไหนต้องใช้ Node.js หรือโปรแกรมแก้โค้ด เราจะบอกไว้ชัดเจน

สร้างเกมจากเทมเพลตเกม: 7 ขั้นตอน

1. เลือกเทมเพลตที่ใกล้เคียงกับเกมที่คุณอยากได้
2. เล่นเดโมจนรู้จักทุกหน้าจอ
3. อ่านคู่มือและหาไฟล์ที่คู่มือระบุ
4. แก้ข้อความและภาษา
5. เปลี่ยนภาพและแบรนด์
6. แก้ด่าน คำศัพท์ หรือกติกา
7. ทดสอบ แล้วนำเกมขึ้นโฮสต์หรือห่อเป็นแอป

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

ดูเทมเพลตเกมสำหรับเริ่มต้น

ขั้นที่ 1: เลือกเทมเพลตที่ใกล้กับไอเดียของคุณ

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

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

ราคาตั้งในร้านของเราอยู่ระหว่าง 5 ถึง 59 ดอลลาร์สหรัฐ และทุกหน้าสินค้ามีเดโมให้ลองเล่นกับรายการชื่อ "ไม่รวมในรุ่นนี้" อ่านรายการนั้นให้ละเอียดพอๆ กับรายการฟีเจอร์

ขั้นที่ 2: เล่นเดโมแบบคนทดสอบ

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

ลองเล่นบนมือถือด้วย ถ้าผู้เล่นของคุณใช้มือถือ เดโมบนมือถือคือบททดสอบจริงของเทมเพลต ไม่ใช่เดโมบนแล็ปท็อป

ลองเดโม Tenguin เกมพัซเซิลจับคู่ตัวเลข

ขั้นที่ 3: เปิดแพ็กเกจและอ่านคู่มือ

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

• game/: เกมพร้อมขึ้นโฮสต์ มี index.html ภาพ เสียง และฟอนต์ ส่วนนี้คือสิ่งที่ขึ้นออนไลน์
• ซอร์สโค้ด: โค้ดอ่านง่ายที่คุณแก้ไข บางรุ่นอย่าง Ricopop ไฟล์ใน game/ ก็คือซอร์สโค้ดเลย ไม่มีขั้นตอนบิลด์ ส่วนรุ่นอื่นอย่าง Gridspark มีโฟลเดอร์ซอร์สแยก ซึ่งคุณต้องบิลด์ใหม่ลงใน game/
• เอกสาร: คู่มือพร้อมภาพประกอบ ของ Gridspark ครอบคลุมการติดตั้ง การปรับแต่ง คำถามที่พบบ่อย 20 ข้อ และการแก้ปัญหา ส่วน Ricopop และ Zabum มีไฟล์ START-HERE.txt มาด้วย
• THIRD-PARTY-LICENSES: ประกาศสิทธิ์ของฟอนต์และไลบรารี เงื่อนไขของเรากำหนดให้เก็บไว้กับผลิตภัณฑ์ของคุณ

อ่านบทการติดตั้งและการปรับแต่งในคู่มือก่อนแตะอะไรทั้งนั้น บทเหล่านั้นระบุชื่อไฟล์ และการแก้แต่ละอย่างด้านล่างเริ่มจากชื่อใดชื่อหนึ่งในนั้น

ขั้นที่ 4: แก้ข้อความและภาษาก่อน

ข้อความช่วยให้เข้าใจโครงสร้างไฟล์โดยเสี่ยงน้อย ตัวอย่างจริงจากหน้าสินค้าของเรา:

• Gridspark: ข้อความอินเทอร์เฟซอยู่ใน src/locales.js
• Pinloop, Trimora และ Twirldrop: ข้อความอินเทอร์เฟซอยู่ใน i18n.ts ส่วนชื่อเกมอยู่ใน brand.ts
• Bodoku: ข้อความอยู่ในดิกชันนารี src/i18n และหน้าสินค้าเตือนให้คงตัวแทนค่า (placeholder) ไว้ตามเดิม
• Golazo: ข้อความอยู่ในดิกชันนารีภาษา ส่วนทีมอยู่ใน teams.js

กับดักคือ placeholder บรรทัดอย่าง "Level {n} complete" ต้องคง {n} ไว้ตามเดิมในทุกภาษา แก้คำรอบๆ ได้ แต่ห้ามแตะวงเล็บปีกกา

ภาษาก็เป็นส่วนหนึ่งของการเลือก รุ่นส่วนใหญ่ของเรามีภาษาอินเทอร์เฟซ 14 ภาษา ส่วน Letter River, Plop และ Zabum มี 3 ภาษา การตัดภาษาออกง่ายกว่าการเพิ่ม และการเพิ่มภาษาหมายถึงต้องแปลทุกบรรทัด ไม่ใช่แค่เมนู

ขั้นที่ 5: เปลี่ยนภาพและแบรนด์

ไลเซนส์อนุญาตให้ทำ white label คุณเปลี่ยนชื่อและโลโก้ Polar Games เป็นของคุณได้ และแก้โค้ด ภาพ และเสียงภายในผลิตภัณฑ์ได้ วิธีทำขึ้นอยู่กับแต่ละรุ่น

• Tenguin: การตั้งค่าส่วนใหญ่อยู่ในไฟล์เดียวคือ tenguin.config.js ข้าง index.html ได้แก่ ชื่อเกม พาธโลโก้ สีเน้น ภาษาเริ่มต้น รางวัล และราคา แก้ค่า อัปโหลดไฟล์ แล้วรีโหลด ไม่ต้องบิลด์
• Bodoku และ Frogdoku: ภาพถูกประกาศไว้ใน src/art/manifest.ts
• Pinloop: brand.ts เก็บชื่อเกม สี เป้า 30 แบบ และฉากหลัง 12 แบบ ส่วนเสียงและเพลงอยู่ใน public/audio
• Ricopop: เพลงและเอฟเฟกต์เป็นไฟล์ MP3 ที่สลับได้ ส่วน ricopop.config.js ควบคุมหน้าจอแตะเพื่อเริ่มและปุ่มเต็มจอ

ใช้ขนาดและรูปแบบภาพเดียวกับไฟล์ที่แทนที่ โลโก้ที่กว้างกว่าต้นฉบับสองเท่าจะดันเมนูเพี้ยนในแบบที่โค้ดไม่ได้คาดไว้

ดู Pinloop และไฟล์ brand.ts

ขั้นที่ 6: แก้ด่าน คำศัพท์ หรือกติกา

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

• Ricopop: 50 ด่านเป็นแผนที่แบบข้อความใน src/levels.js เครื่องมือเสริม node tools/validate.mjs ตรวจว่าทุกด่านยังเล่นชนะได้หลังคุณแก้แผนที่
• Letter River: คำและคำใบ้อยู่ใน source/words/en.js, pt.js และ es.js ส่วนการสร้างปริศนาอยู่ใน source/js/levels.js คำสั่ง node test/check.js ตรวจรายการคำและ 80 ด่านต่อภาษา
• Deepforge: ห้อง อีเตอร์ สมดุลเกม และข้อความอยู่ใน source/src/data/chambers.ts
• Gridspark: ค่าคงที่ของกติกาและชุดสีอยู่ใน src/config.js ส่วนกติกาพัซเซิลอยู่ใน game.js, board.js, generator.js และ shapes.js

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

ดู Letter River เกมปริศนาคำที่แก้รายการคำได้

ขั้นที่ 7: ทดสอบ แล้วขึ้นโฮสต์หรือห่อเป็นแอป

ทดสอบบนเซิร์ฟเวอร์ในเครื่อง ไม่ใช่ดับเบิลคลิก

หลายหน้าสินค้าของเราบอกชัดว่าเกมไม่ทำงานจาก file:// ซึ่งเป็นที่อยู่ที่ได้เมื่อดับเบิลคลิก index.html ให้ทดสอบผ่านเว็บเซิร์ฟเวอร์ในเครื่องแทน โปรแกรมแก้โค้ดหลายตัวมีให้ในตัว และเครื่องมือนักพัฒนา (ไม่บังคับ) ของ Ricopop ก็มีมาด้วย รุ่นที่เขียนด้วย TypeScript ต้องใช้ Node.js เพื่อบิลด์ใหม่ เช่น Gridspark รัน npm test และ npm run build เพื่อคัดลอกไฟล์ที่เล่นได้ลง game/ ส่วน Pinloop บิลด์ออกมาที่ dist/ แล้วคุณคัดลอกไปไว้ใน game/

ขึ้นโฮสต์

อัปโหลดเนื้อหาในโฟลเดอร์ game/ ไปยังโฮสต์ HTTP(S) แบบสแตติกใดก็ได้ รุ่นของเราไม่ต้องใช้ PHP หรือฐานข้อมูลในการเล่น Zabum และ Ricopop มีลีดเดอร์บอร์ด PHP แบบเลือกใช้ ซึ่งปิดไว้เป็นค่าเริ่มต้น เก็บทุกโฟลเดอร์ไว้ข้าง index.html ตามที่คู่มือบอก

หรือห่อเป็นแอป

เครื่องมืออย่าง Capacitor นำเกมเว็บไปใส่ในโปรเจกต์ Android หรือ iOS หน้าเริ่มต้นของ Capacitor ต้องการโฟลเดอร์ไฟล์เว็บที่บิลด์แล้วซึ่งมี index.html อยู่ที่ราก เพิ่มแพลตฟอร์มด้วย npx cap add android และ npx cap add ios แล้วคัดลอกไฟล์ด้วย npx cap sync ขั้นนี้เกินสัปดาห์แรกของมือใหม่ไปแล้ว และไม่มีรุ่นใดของเรารวมการบิลด์เนทีฟหรือการเผยแพร่บนสโตร์ เราเสนอราคางานส่วนนี้แยกต่างหาก

1. ทุกหน้าจอในรายการจากขั้นที่ 2 แสดงข้อความและภาพของคุณ
2. ความคืบหน้ายังอยู่หลังรีโหลด
3. เกมทำงานบนมือถือในแนวจอที่คุณต้องการ
4. ประกาศ THIRD-PARTY-LICENSES ยังอยู่กับไฟล์
5. คุณอธิบายได้ว่าเปลี่ยนอะไรไปบ้างทีละไฟล์

ไลเซนส์อนุญาตให้ทำอะไรกับเกมของคุณได้บ้าง

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

อ่านเงื่อนไขไลเซนส์ฉบับเต็ม

คำถามที่พบบ่อย

สร้างเกมได้ไหมถ้าเขียนโค้ดไม่เป็น?

แก้ได้หลายอย่างโดยไม่ต้องเขียนโค้ด ข้อความ สี ภาพ และการตั้งค่าบางอย่างอยู่ในไฟล์ธรรมดา Tenguin เก็บการตั้งค่าส่วนใหญ่ไว้ในไฟล์คอนฟิกไฟล์เดียว การแก้กติกาหรือด่านในรุ่น TypeScript ต้องอ่านโค้ดขั้นพื้นฐานเป็นและใช้ Node.js เพื่อบิลด์ใหม่

ต้องติดตั้งอะไรบ้าง?

สำหรับรุ่นที่ไม่มีขั้นตอนบิลด์อย่าง Ricopop และ Golazo แค่โปรแกรมแก้โค้ดกับเบราว์เซอร์ก็พอ รุ่น TypeScript ต้องใช้ Node.js และ npm เพื่อบิลด์ใหม่ แต่ละหน้าสินค้าระบุเวอร์ชันไว้

ขายหรือเผยแพร่เกมที่ทำจากเทมเพลตได้ไหม?

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

ทำไมเปิด index.html แล้วเกมขึ้นหน้าว่าง?

ส่วนใหญ่เป็นเพราะเปิดจาก file:// ให้รันจากเว็บเซิร์ฟเวอร์ในเครื่องหรืออัปโหลดขึ้นโฮสต์ตามที่คู่มืออธิบาย

ใช้เวลานานแค่ไหน?

ขึ้นอยู่กับว่าคุณแก้มากแค่ไหน ข้อความกับโลโก้อาจใช้แค่วันเดียว ด่านใหม่ ภาพ และกติกาใช้เวลานานกว่า เริ่มจากข้อความ ปล่อยเวอร์ชันทดสอบ แล้วค่อยเพิ่มส่วนที่เหลือเป็นรอบๆ

เริ่มจากเกมเดียว

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

ดูเทมเพลตเกมทั้งหมด

ขอใบเสนอราคาสำหรับการแก้ไข