ผ่านมา 6 วัน วันนี้วันสุดท้ายแล้วครับ สำหรับ Blog สไตล์ Reality ตามติดชีวิตเด็กโข่งสร้างเกมส์ เข้าเรื่องกันเลยดีกว่า เมื่อวานถอดใจกับ GREE แล้วไปซบอก OpenShift Cloud Platfrom as a Service และ CakePHP สร้าง RESTFull Web Service ขึ้นมาเพื่อทำหน้าที่แทน GREE ทำหน้าที่เก็บ Score ของเกมส์จากผู้เล่นทั่วโลก (ดูยิ่งใหญ่มากเลย) วันนี้จะมาเชื่อมโยง Mobile App ไปยัง Web Service กันครับ
หน้าที่หลักของ Web Service ของเราตอนนี้คือการรับข้อมูลจาก Mobile App ในกรณีที่ Mobile App ประมวลผลแล้วว่าจะส่งข้อมูลไปยัง Server โดยใช้เงื่อนไข 2 อย่างคือ

• มีคะแนน High Score
• เชื่อมต่อ Internet ได้

เมื่อผู้เล่นรู้ผลคะแนน App จะทำการเชื่อมต่อกับ Web Service และส่งผลคะแนนไปยัง Server โดยอัตโนมัติ กรณีที่ส่งผลคะแนนไม่ได้ก็เสียใจด้วยครับ 🙂 หน้าตาของ World Leaderboard เป็นอย่างนี้ครับ


สำหรับท่านใดอยากลองฝีมือบวกเลขก็ดาวน์โหลด App ไปเล่นได้ที่

เกมส์นี้ใช้สัญญาอนุญาติแบบ GNU/GPL V3 พัฒนาต่อยอดได้ที่ GitHub

ตั้งใจว่าจะดู GREE Social Network Game ต่อแต่ลงทะเบียนสร้าง App บน Cloud PaaS (Platform as a Service) ของ OpenShift ไว้ก็เลยได้กกลับมาตายรัง ขอถอนตัวจาก GREE มาซบอก OpenShift อีกครั้ง (ไปไหนไม่รอด) ในเมื่อตัดสินใจแล้วก็ต้องเดินหน้าต่อครับ แผนคือเราจะมาสร้าง RESTFul Web Service บน OpenShift กัน ซึ่ง Service ที่มีได้แก่

• ลงทะเบียนสมาชิก ~ นักพัฒนาลงทะเบียน จะได้ล็อกอินและรหัสผ่านที่กำหนด
• ล็อกอิน ~ ล็อกอินเพื่อใช้งานระบบ เช่น ลงทะเบียนแอพ เป็นต้น
• ลงทะเบียนแอพลิเคชัน ~ ลงทะเบียนแอพ ได้กุญแจมา 1 ดอก
• ส่งคะแนน ~ ส่งคะแนนโดยใช้กุญแจแอพ
• ขอตารางสรุปคะแนน ~ ขอตารางสรุปคะแนนใช้กุญแจแอพ

ระบบเก็บข้อมูลคร่าวๆ แบบนี้ครับ ถ้าดูเผินๆ จะเหมือนกับ Service อื่นทั่วไป ถ้าใครเคยใช้ GREE ก็คงจะคุ้นกันอยู่ 😛 แฮะๆ ลอก GREE มาอ่ะ การเก็บข้อมูลและฟีเจอร์จะไม่ละเอียดเหมือนกับ GREE ครับ แต่วิธีการใช้งานเหมือนกัน (พยายามลากให้ดูดี จริงๆ กะจะลอกจาก GREE ต่างหาก) หน้าตาจะแบนๆ อย่างนี้
นี่คือ OpenShift Cloud PaaS ที่เราใช้กัน (Cloud ของจริงนะจ๊ะ ไม่ใช่ Hosting)

หน้าตาแบนๆ ของ Service ยังไม่ได้ทำอะไรเพิ่ม และยังใช้ไม่ได้ T_T

ทดสอบบนเครื่อง local ส่งค่าเพื่อลงทะเบียน App ไม่มี pubkey ลงทะเบียนไม่ได้นะจ๊ะ

ผลตารางคะแนนหน้าตาประหลาดๆ

เอาข้อมูลมาทำให้สวยหน่อย

สุดท้ายได้ Mock up ตาราง Leader Board ดังนี้

อ้อลืมบอกไปว่า RESTFull Web Service ผมใช้ CakePHP จริงๆ จะใช้อะไรก็ได้ แต่อยากย้อนความหลังกันนิดหน่อย เลยกลับมาเขียน CakePHP อีกรอบ 🙂 วันนี้มีความคืบหน้าแค่นี่ครับ กำลังสงสัยว่าอาทิตย์นี้ เกมส์จะเสร็จมั๊ยเนี่ย มีคนถามว่าผมใช้เครื่องมืออะไรพัฒนาซอฟต์แวร์ ขอสรุปให้นิดนึงครับ

• Eclipse JDT, ADT, PDT ~ รวมอยู่ในตัวเดียว
• Java ~ ผมเกลียด Java มาก จากใจจริงเลยล่ะ
• PHP ~ บางครั้งใช้ Zend Platform เกาะ Zend Server บน PHP Cloud แล้วแต่อารมณ์จะพาไป
• CakePHP, Zend Framwork, Lanai-Core ~ ว่างๆ ก็ใช้ Framework เขียน App แต่ตัวหลังขายใปละและไม่ได้ทำต่อ
• Git + GitHub ~ ย้ายมาหลายที่ ใช้เครื่องมือจัดการโค้ดมาหลายตัว จบที่ GitHub ไม่ใช่เพราะ GitHub ถูกใจผม แต่เพราะว่าโควต้าของที่อื่นเต็มหมดแล้ว T_T
• MySQL ~ ส่วนใหญ่ใช้ Command Line ไม่รู้เลิกใช้ Command Line ไม่ได้ซักที
• MySQL Workbench + Admin + Browser ~ เป็น MySQL GUI ที่ใช้งานง่าย ไม่ยังไม่เท่า dbDesigner ที่เคยใช้ (เดี๋ยวนี้เขายังทำต่อมั๊ย)
• PHP MyAdmin ~ Web GUI ใช้เฉพาะช่วงย้ายข้อมูลไปที่ Server ที่ไม่ให้ใช้ Command Line พอจบงานก็เอาออก 🙂
• Cloud (IaaS,PaaS) ~ อันนี้แล้วแต่อารมณ์และลักษณะงาน แปรผันตามจำนวนเงินในกระเป๋า บางทีใช้ AWS ไม่ก็ HP Cloud พอเงินเริ่มหมดก็ไปใช้ Cloud Sigma, EngineYard, dotCloud, Zend Developer Cloud ลงท้ายที่ OpenShift

…ติดตามตอนต่อไป

กลับมาเขียน Blog ต่อ เนื่องจากแก้ไขเกมส์อยู่หลายอย่าง ทั้งส่วนตั้งคำถาม เกณฑ์การให้คะแนนแบบใหม่ เพราะคะแนนกระโดดเยอะมากไปหน่อย หันมาใช้ Bonus เป็นเวลาที่เหลือเป็นคะแนนเสริม และแก้ Bug เล็กน้อย เช่น ได้ได้เรื่อยๆ โดยเวลาไม่จำกัด T_T เป็นต้น วันนี้ตั้งใจจะมาลอง OpenFeint ซึ่งเป็นโซเชียลเน็ตเวิร์คของคนเล่นเกมส์ เก็บคะแนนแข่งกันกับเพื่อนๆ ที่เล่นเกมส์เดียวกันได้ แต่ทว่า OpenFeint ถูกซื้อโดย GREE บริษัทยักษ์ใหญ่จากญี่ปุ่นทำให้ ต้องไปใช้ GREE โดยปริยาย ซึ่งจากที่ทดสอบ GREE ในเบื้องต้น พบว่า Package หลักในส่วน GreePlatform ผม Build ไม่ผ่าน เนื่องจากสาเหตุอะไรไม่ทราบ ก็เลยขอพักเรื่อง GREE ไปก่อน

วันนี้ก็เลยได้มาทำส่วน UI เพิ่มอีก 2 ส่วนคือ ส่วนแสดงผลคะแนน หากยังจำกันได้ของเดิมเป็น Dialog Box ธรรมดาๆ ครั้งนี้ก็เลยเปลี่ยนมาเป็น Custom Layout ซะเลย ได้หน้าตาสวยแบบนี้ครับ

ดูใน Tablet จะหน้าตาแบบนี้

อีกส่วนที่เพิ่มเข้ามาเป็นเสียงครับ ผมเลือกเสียง Effect และเพลงอยู่ 10 กว่าเพลง แล้วให้ Game Tester ซึ่งเป็นใครไม่ได้นอกจากคุณมะระมาช่วยฟังช่วยเลือก คำแนะนำที่ได้คือ ควรจะเป็นเสียงโรงเรียน อ็อดเข้าเรียนอะไรประมาณนี้ ก็เลยได้เพลงสบายๆ ก็อกๆ แก็กๆ มา 1 เพลง และเสียงอ็อดเข้าเรียนอีก 1 เสียง ตบท้ายด้วยเสียงที่ผมชอบมากคือ เสียงสมองระเบิด สำหรับผู้เล่นที่บวกเลขไม่คล่อง 😛 เรียกได้ว่าสะใจดีครับ วันนี้ก็เลยได้ใกล้ความเป็นเกมส์มากขึ้นแล้ว สำหรับการเก็บคะแนนผ่านทาง Social Network เกมส์อย่าง GREE นั้น ผมไม่แน่ใจว่าจะได้ใช้บริการ GREE หรือเปล่า ถ้ายังแก้ปัญหาไม่ได้ในอาทิตย์นี้คงไปใช้ตัวอื่นแทน ผมก็เลยทำ Custom Layout ส่วนกรอกชื่อเอาก่อน สำหรับ เก็บคะแนนผ่านทาง Social Network เกมส์ ผมอาจจะเขียน Score Services ขึ้นใช้เอง เอ…รู้สึกจะไม่จบง่ายละ เอาเป็นว่าติดตามตอนต่อไปครับ

เนื่องจากเขียนเกมส์และทดสอบบนโทรศัพท์มือถือของตัวเองหน้าจอ 4 นิ้วเหมาะกับการเล่นเกมส์มาก แต่การแสดงผลบน Tablet ขนาดหน้าจอ 7 นิ้ว 10 นิ้ว การแสดงผลต้องต่างกัน ก็เลยได้ออกแบบ Layout สำหรับหน้าจอขนาดต่างๆ ดังนั้นต้องมีการออกแบบสำหรับหน้าจอขนาดต่างๆ ดังนี้

คุณมะระมาเป็น Game Tester และให้คำแนะนำอีกเช่นเคย เนื่องจาก Game Tester บอกว่าคนใช้ 2 มือจับ Tablet ขนาด 7 นิ้ว ปุ่มเลือกตอบต้องพอดีกับการจับเพื่อให้นิ้วโป้งกดได้ถนัดก็เลยจัด UI แบบที่ต้องการ ได้ผลลัพท์ได้เป็นนี้ครับ


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



อ้อ ลืมบอกผู้สนับสนุนให้ยืม Tablet มาทดสอบ คือ Gadget Plus อยากได้ Tablet 7 นิ้วคุณภาพสูงยี่ห้อ Ainol ก็ติดต่อคุณมะระได้ที่ gumaraa[at]gmail.com ครับ ตอนต่อไปจะทำอะไร เดี่ยว Blog มาให้อ่านอีกครั้งครับเพราะยังไม่จบ ติดตามตอนต่อไป…

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


เพิ่มหน้าวิธีการเล่นและเทคนิคการคิดให้ด้วย

อ้อ ลืมบอกไปว่าเปลี่ยนฟอนต์จาก Roberto ที่เป็นฟอนต์หลักของ Android 4.0 มาเป็น Arabica ฝีมือออกแบบฟอนต์คนไทย เจ้าของเดียวกับฟอนต์ Super Store นั่นเองครับ

หลังจากได้แนวคิดของเกมส์ วิธีการเล่น กติกาการเล่น ไปเมื่อครั้งที่แล้ว ก็มาถึงส่วนที่ยากที่สุดคือ ออกแบบหน้าตา, เขียนเกมส์ และ ทดสอบในแต่ละขั้น ผมเลือกการออกแบบในรูปแบบที่ง่ายต่อการปรับแก้ คือเป็น Text แสดงข้อความ มีปุ่มกดเลือกคำตอบ ตอบถูกก็คิดคะแนนออกมาตามสูตรคำนวณคะแนนที่กำหนดไว้ในครั้งที่แล้ว ถ้าตอบผิดก็แสดงกล่องข้อความบอกคะแนนที่ได้และให้กำลังใจในการเล่นครั้งต่อไป ความยากง่ายของเกมส์ ซึ่งเบื้องต้นจะให้จำนวนตัวเลขก่อน ซึ่งจำนวนตัวเลขจะเพิ่มทีละ 1 หลัก ต่อด่านหลัก เช่น ด่าน 1 มีเลขให้บวก 2 ตัว, ด่าน 2 มีเลขให้บวก 3 ตัว ไปเรื่อยๆ แต่จำนวนตัวเลขสูงสุดจะอยู่ที่ด่าน 9 คือมีตัวเลขให้บวก 10 ตัว และคงที่ไปเรื่อยๆ ซึ่งตัวเลขเหล่านี้จะถูกสุ่มมาตามจำนวนตัวเลขที่ด่านนั้นๆ ต้องการ และตัวจับเวลาจะนับถอยหลัง 20 วินาทีหากหมดเวลาก็เล่นใหม่ ดังที่ได้เขียนไปในตอนที่แล้ว หน้าจอโปรแกรมเป็นแบบนี้ครับ



เพิ่มรายละเอียดเข้าไปอีกหน่อย

ทดลองเล่นเบื้องต้น และได้ Game Tester จำเป็นเพิ่มมาอีกคน คือ คุณมะระ ในฐานะที่นั่งติดกันก็เลยให้ช่วยเล่นหน่อย ปรับตรงไหน แก้ตรงไหนก็ว่ากันไป เอาเป็นว่าได้แก้หลายจุดจนพอใจ Game Tester ล่ะครับ อ้อสำหรับท่านที่อยากเขียน Mobile App หรือ Mobile Game ดูบ้าง ลองศึกษาการเขียน Mobile App ได้ที่http://androidthai.in.th?ได้ครับ ผมก็เรียนกับมาสเตอร์อึ่งผ่านเว็บไซต์และยูทูปนี่แหละครับ (ไม่เคยได้เรียนกับตัวจริงสักที)
… ติดตามตอนต่อไป

นึกเล่นๆ ว่าอยากเขียนเกมส์ เนื่องจากมี App บน Play Store เยอะพิสมควร แต่ยังไม่มีเกมส์เป็นของตัวเองเลยอยากลองเขียนดูบ้าง ก็เลยได้เริ่มคิดว่าจะเขียนเกมส์อะไรดี ใช้เวลาว่างประมาณ 1-2 อาทิตย์ น่าจะทำเสร็จ ก็เลยคิดว่าอยากทำเกมส์คิดเลขเร็ว (ง่ายดี) ซึ่งแนวคิดดังนี้

1. คำตอบมีแค่ บวก, ลบ, คูณ หรือ หาร
2. ไม่ต้องตั้งโจทเองเพราะขี้เกียจ ให้โปรแกรมตั้งให้
3. เล่นไปเรื่อยๆ เก็บคะแนนที่ได้มากที่สุด post ขึ้นระบบสะสมคะแนน
4. ส่งคะแนนผ่าน wall facebook / social network จัด range ได้ + โชว์พาว + ทำ CRM
5. เพิ่มความยากในการคิดขึ้นเรื่อยๆ
6. จัดกิจกรรมแจกของรางวัลผ่านหน้า app fan page

และผมก็ชอบหาแนวร่วมประมาณว่าอยากได้เกมส์แบบนี้หาคนเขียนให้หน่อยอะไรประมาณนั้น ก็เลย post ลงใน Facebook ได้ไอเดียจากคุณ Teera Laiteerapong มาว่าทำเกมส์บวกเลขจดหมดให้เหลือ 1 หลักสิอย่างนี้สนุกดี ด้วยความไม่รู้ว่ามันมีเกมส์อย่างนี้ด้วยเหรอก็เลยขอแนวคิดของเกมส์ วิธีการเล่น เพิ่มเติม ดังภาพ

ก็เลยเป็นที่มาของการเขียนเกมส์อัจฉริยะบวกเลข หรือ Plus Clever ครับ
หลังจากได้แนวคิด วิธีการเล่น ก็เลยเพิ่มกติกาและตัวแปลต่างๆ เพิ่มเข้ามา เช่น ตัวเลข, ด่านหลัก, ด่านย่อย, ความยาก, การให้คะแนน และ การกำหนดเวลา เป็นต้น ตัวเกมส์มีด่านหลักไม่จำกัด แต่มีด่านย่อย 10 ด่าน ต้องเล่นบวกเลขให้ครบ 10 ด่านจึงจะขึ้นด่านหลักต่อไปได้ ในแต่ละด่านหลักจะสัมพันธ์กับความยากง่ายของเกมส์ ซึ่งเบื้องต้นจะให้จำนวนตัวเลขก่อน ซึ่งจำนวนตัวเลขจะเพิ่มทีละ 1 หลัก ต่อด่านหลัก เช่น ด่าน 1 มีเลขให้บวก 2 ตัว, ด่าน 2 มีเลขให้บวก 3 ตัว ไปเรื่อยๆ แต่จำนวนตัวเลขสูงสุดจะอยู่ที่ด่าน 9 คือมีตัวเลขให้บวก 10 ตัว และคงที่ไปเรื่อยๆ การให้คะแนนจะให้คะแนนแต่ละด่านและด่านย่อยไม่เท่ากัน ใช้สูตรคำนวนคือ คะแนนแต่ละด่านย่อย = (เลขด่าน) ยกกำลัง (เลขด่านย่อย) บวกกันไปเรื่อยๆ สำหรับเวลาในการเล่นคือ 20 วินาทีต่อเกม ตอบถูกได้เวลาคืน 20 วินาที กติกาง่ายๆ ตอบถูกได้คะแนนและผ่านด่าน ตอบผิดเริ่มเล่นใหม่ตั้งแต่ต้น เกมส์จะเก็บคะแนนครั้งที่ได้มากที่สุดเท่านั้น ถ้าคะแนนได้น้อยกว่าครั้งที่ผ่านมา ก็ต้องเล่นสะสมคะแนนกันใหม่ ถือว่าโหดมากๆ เมื่อได้แนวคิดแล้วก็ได้ เวลาออกแบบเกมส์ … ติดตามตอนหน้าครับ 🙂
*** เห็นน้องฮง ชอบสร้างเกมส์และเขียน Blog เรื่องสร้างเกมส์อยู่พักหนึ่ง ชื่อ ตามติดชีวิตเด็กสร้างเกมส์ ก็เลยขอลองเขียน Blog อย่างนี้บ้าง ให้ชื่อเรื่องเป็น ตามติดชีวิตเด็กโข่งสร้างเกมส์ ละกันครับ 😛