mymiuu
sparkeducation.co
Published in
3 min readApr 29, 2022

--

[TH : working story] Coding Game กับวรรณคดีไทย ไปด้วยกันได้ ?

-

เรื่องราวนี้ เป็นเรื่องราวที่เกิดขึ้นจริง บุคคลในเหตุการณ์นี้ก็มีตัวตนจริง เดดไลน์ที่จ่อหัวอยู่ในขณะที่อิฉันกำลังพิมพ์ Blog นี้ ก็เกิดขึ้นอยู่จริง ๆ TT

ต่อจาก Blog ครั้งก่อน ที่ทางพี่ ๆ เขาอยากจะสร้างเกมใหม่ ในหัวข้อเกม.

ชื่อว่า เรียนวิธีคิด x รามเกียรติ์

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

ทีนี้เลยเข้ามาสู่ขั้นตอนการหาข้อมูลเพื่อออกแบบเนื้อเรื่องของเกม…

คือด้วยความที่พวกเราอยากลองทำ Mini Game เล็ก ๆ จะให้สร้างทั้งเรื่องรามเกียรติ์ก็ดูจะเป็นการสร้างงานสร้างอาชีพจนเกินไป เลยตกลงกันว่าจะเอาเนื้อเรื่องบางส่วนมาเล่นก็พอ

แต่จะรู้ได้ยังไงละ ว่าช่วงไหนมันน่าสนใจ?

เจ้าก็ต้องอ่านตั้งเเต่ต้นจนจบเรื่องยังไงล่ะสาวน้อยย ~

ก็ในเมื่อเราไม่อยากให้เด็ก ๆ มานั่งอ่านวรรณคดีเรื่องรามเกียรติ์เเบบหูตาไหม้เนอะเพราะงั้นพี่จะเสียสละตัวของพี่เองค่ะ 555555

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

คุณวิว จาก ช่อง Youtube : Point Of View

ขอขอบคุณสรุปเนื้อหาดีดี แบบกระชับถึงแก่น ของ คุณวิว จากช่อง Point Of View มา ณ ที่นี้ด้วยนะคะ กราบบ TT

จำนวนตอนทั้งหมด ที่ Point Of View สรุปมาให้ฟัง

ขนาดสรุปแล้วก็ปาไป 119 ตอนเชียวนะ (ก็คือดูกันจนฉันหลอนไปเป็นอาทิตย์) ซึ่งก็มีการถกเถียงหารือกันจนในที่สุดก็ตกลงกันเป็นมติเอกฉันท์ว่าาา…

เราจะหยิบตอน ทศกัณฑ์ลักนางสีดา มาใช้ในการสร้าง Mini Game 3 ขึ้นมา!

พอเราได้เนื้อเรื่องที่จะเอามาใช้ในเกมเเล้ว ที่นี้ทางเราเลยจับเนื้อเรื่องรามเกียรติ์มาผสมกับเกม BLOCKY (หรือในเว็บไซต์บทเรียนของเรียน Codingthailand จะเป็นบทเรียนที่ชื่อว่า ฝึกอัลกอริทึมด้วย Icon Block)

สเก็ตสรุปเนื้อเรื่อง ที่จะเอามาใช้ในเกมเเต่ละด่าน

คอนเซ็ปของเกม BLOCKY นี้ก็คือ จะเป็นการให้น้อง ๆ พาตัวละครไปยังจุดหมาย ซึ่งเมื่อผ่านเเต่ละด่าน จะเป็นการเล่าเนื้อเรื่องรามเกียรติ์ ผ่านรูปภาพที่เข้าใจได้อย่างง่ายดาย ซึ่งจะมีทั้งหมด 10 ด่าน

สเก็ตด่านทั้ง 10 ด่านในเกม (1st sketch)

ทีนี้ก็มาสู่ขั้นตอนการออกแบบตัวเกม ซึ่งเราจะได้รับมอบหมายให้ออกแบบ Visual ต่าง ๆ ในเกม ไม่ว่าจะเป็นตัว UI ของเกม, Chatacter, Story Picture ซึ่งใน ส่วนของ UI เราต้องรอทางพี่ ๆ เขาเตรียม Wireframe มาก่อน เราถึงจะไปส่วนนี้กันได้เนอะ

งั้นเราจะขอพูดในส่วนการออกแบบคาเเรคเตอร์ก่อนนะ..

อยากจะบอกเลยว่า เรฟคาเเรคเตอร์ในเรื่องรามเกียรติ์นี้มีเยอะมากกกกก เเละส่วนตัวเราเป็นคนที่ไม่ค่อยชอบวาดตัวละครที่ออกไทย ๆ ซักเท่าไหร่ เพราะกลัวทำได้ไม่ดี

ตัวละครทั้ง 6 ตัว และรายละเอียดของเกม BLOCKY ในรูปแบบสเก็ต
1st draft on Illustration

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

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

ภาพประกอบบางส่วนจากเนื้อเรื่อง จาก 10 ตอน

แค่พาร์ทดีไซน์ก็คือหลังหักแล้ว 55555

ซึ่งจริง ๆ ในพาร์ทดีไซน์คาเเรคเตอร์และฉากที่เราเอาให้ดูเป็นเเค่ส่วนหนึ่ง เพราะก็ต้องมีการปรับให้มันกลมกล่อมขึ้น สื่อถึงตัวเนื้อหาจริง ๆ มีลูกเล่นต่าง ๆ มากขึ้นเพื่อความสาแกใจคนวาด (ลองไปดูได้ในเกมจริงเลยนะ ฮู่เล่ ๆ )

ในส่วนของโลโก้เกม

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

โลโก้เกม ที่ลองสเก็ตออกมา
Logo final.finallll.finalllllagain.png

สุดท้ายแล้วก็ได้ตัวน้องคนนี้มา โดยมีการเพิ่มตัวละครเข้ามาให้เป็นกิมมิก

ซึ่งโลโก้ตัวนี้ก็สามารถปรับเปลี่ยนไปได้เรื่อย ๆ ตามธีมที่จะสร้างในอนาคตด้วยนะ

ทีนี้ก็ถึงเวลาในส่วนของ UI..

เมื่อ wireframe มาเสิร์ฟคุณถึงหน้าโต๊ะ ก็ถึงเวลารับบทคนออกแบบหน้าเกมให้ทุกคนเห็นถึงความบ้าพลังของทีมดีไซน์!!

Flow ยาวประมาณแปดเมตร 555

เราอยากบอกว่า ตั้งเเต่ Minigame 1 หรือ Minigame 2 ที่เราเคยได้ออกแบบมา เราดีไซน์ออกมาแบบหลุดโลก ไม่สนทีม Dev ที่ถือไม้รอทุบหลังอยู่เลยจริง ๆ (ขอบคุณพวกพี่จริง ๆ ที่ยังจ้างหนูอยู่ 55555555)

พอมาเกมนี้เลยแบบ เอ้อออ มินิมอล มินิมอยซักนิก เผื่อทีม Dev จะไม่ทุบหลังฉันนน คือเน้นเรียบง่าย User Friendly สุด ๆ ใช้โทนสีของบริษัท มีภาพประกอบที่มีการอนิเมทนิดๆหน่อย ๆให้ตื่นตาตื่นใจจ

ส่วนหนึ่งของ UI design หน้า Game play

แต่อยากจะบอกว่าพาร์ทนี้คือเราทำเองไม่ได้หรอกนะ เราไม่ใช่ UI designer แบบมากประสบการณ์ เพราะเรายังอยู่ในช่วงเก็บเกี่ยวความรู้อยู่เลยย

เราได้น้องในทีมที่เก่ง UI มาก ๆ มาคอยแบบช่วยดูความเรียบร้อย นู่นนี่นั่นต่าง ๆ ขอบคุณมากจริง ๆ ที่ทำให้ ดีไซน์นี้มันเกิดขึ้นแบบรวดเร็วและสุดแสนจะเป๊ะ 5555

Final flow ที่ยาวเกิน 8 เมตร by mindmintt

และในขั้นตอนสุดท้ายก็จะเป็นหน้าที่ของพี่ ๆ ทีม Dev และน้อง ๆ ฝึกงานที่จะเป็นคนสร้างสิ่งที่พวกเราดีไซน์ออกมาให้น้อง ๆ เล่นกันได้จริง ๆ (ณ ตอนที่พิมอยู่ก็ยังเเก้กันไม่เสร็จเลยเเม๊!!)

แก้วนไปจ่ะ

แล้วก็สุดท้ายนี้ ถึงผู้อ่านที่หลงเข้ามาอ่านเรื่องราวเเกมบ่น ๆ นี้ ก็อยากให้ลองเข้าไปทักทายเหล่าน้อง ๆ ในเกมที่พวกเราตั้งใจสร้างขึ้นมาซักนิดนึงนะฮะ (เเค่เข้าไปหน้า Landing (http://codingthailand.app/) เฉย ๆ น้ำตาก็ไหลเเล้วนะ 5555)

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

ขอฝาก เพจ เรียนวิธีคิด ผ่านวิธีโค้ด ไว้ในอ้อมอกอ้อมใจด้วยน้าาา

ขอบคุณทุกท่านที่อ่านมาจนถึงตรงนี้นะฮะ ไว้มีอะไรมาเหลาอีก จะกลับมาาา !

กอดดดด

(:

--

--

mymiuu
sparkeducation.co

𝘼𝙩𝙘𝙝𝙖𝙧𝙖 𝙅𝙖𝙣𝙩𝙖𝙩𝙞𝙥 - 𝘈 𝘨𝘳𝘢𝘱𝘩𝘪𝘤 𝘥𝘦𝘴𝘪𝘨𝘯𝘦𝘳, 𝘪𝘭𝘭𝘶𝘴𝘵𝘳𝘢𝘵𝘰𝘳 𝘢𝘯𝘥 𝘢 𝘯𝘦𝘸 𝘭𝘦𝘢𝘳𝘯𝘦𝘳 𝘧𝘰𝘳 𝘜𝘐 𝘥𝘦𝘴𝘪𝘨𝘯. 🧸🌷🤍