{Game} PerfectPuzzle ทำง่ายๆ By Skill Android

สวัสดีจ้าา ผู้ที่เข้ามาอ่านทุกคน หลังจากจบเรื่อง ViewPager เจ้าของบทความก็ได้มีโอกาส ได้ทำ Game ขึ้นมาเกมนึง แต่ว่า เกมที่ทำเป็นเกมพื้นๆนะ แต่ว่ารับประกันว่าเอาไปเล่นแล้วสนุกแน่นอน (มั้ง 555+) เป็นเกมที่คงมีหลายๆคนได้เขียนไว้บ้างแล้ว แต่ว่าเราจะแหวกแนวไปนิดนึง ในเมื่อเจ้าของบทความอยู่ในสาย Android เราก็จะมาเขียนเกม โดยใช้ Skill Android กัน เป็นยังไงไปดูกันเลย ?

เริ่มแรก ต้องขอบอกก่อนว่า เกมที่สร้างนี้ชื่อว่า Perfect Puzzle ซึ่งได้แรงบันดาลใจจาก หนังเรื่องหนึ่ง (ไม่ขอบอกนะ อยู่ที่แรงบันดาลใจของแต่ล่ะคน 555+) โดยที่ตัวเกมมันก็คือ เกม Puzzle ที่ทุกคนรู้ แล้วถามว่า เกมนี้เรามี Function ยังไงบ้าง หลายๆคนอาจจะคิดว่า มันเป็เกมตัวต่อ เพราะคำว่า Puzzle แต่จริงๆแล้วเกมนี้เป็นเกมที่ไว้เล่นทายหน้าคนที่เรารู้จักตั้งหาก (เริ่มสนุกแล้วอะสิ 555+) แต่ว่าประเด็นเราจะไม่ได้อยู่ที่ Function แต่อยู่ที่วิธีการทำตั้งหาก

หลายๆคนที่เป็นสายเกม อาจจะทำเกมจาก Engine ที่เขียนเกมโดยเฉพาะ เชน Unity, Unreal พวกนี้ เพราะเป็น Tool ที่ช่วยให้สามารถสร้างเกมได้สะดวก แต่สำหรับเจ้าของบทความจะใช้สิ่งนี้ในการสร้างเกมนะ

Android Studio (IDE)

โดยที่เกมที่เจ้าของบทความสร้างจะใช้ Android Studio เจ้าเก่าเรา(เจ๊งปะล๊าาา 555+) โดยที่เริ่มแรกเราต้องสร้าง Project กันก่อนนะ (จะบอกทำไม 5555+) ต้องสร้างก่อนอยู่แล้วเนอะไม่งั้นจะทำงานได้ยังไง 555+

โดยที่ Concept ของเกมนี้ จะแบ่งออกเป็น 2 ส่วน ตามนี้

  1. Picture — ส่วนของภาพจะเป็นการนำภาพมาแสดงจะแสดงยังไงให้ Work
  2. Array — ส่วน Highlight เลย เราจะใช้ Array เพียง ชั้นเดียวในการสร้าง (ง่อววตื่นเต้น อยู่คนเดียว 5555+)

มาอธิบายในส่วนของ Picture กันก่อนโดยที่เจ้าของบทความจะขอสมมุติภาพขึ้นมา 1 ภาพนะ ขอไปหาใน Google แปป 555+

ลูกแมวน่ารักๆ

สมมุติเจ้าของบทความอยากให้เอาภาพนี้ไปทำเป็น Puzzle ไว้ทายภาพนะ Concept ง่ายๆที่เราจะต้องเข้าใจคือ ทำไงก็ได้ให้ภาพมันถูกบดบังให้มัน แล้วต้องไงก็ได้ให้ผู้เล่นสามารถเปิดภาพได้ทีล่ะส่วน ทีนี้เราก็ต้องมานั่งนึก หลายๆคนอาจจะบอกว่า ทำเป็น Array 2 ชั้นก็ได้นะ แล้วระบุตำแหน่งเวลากดกัน ซึ่งถือว่าเป็น Concept ง่ายๆที่เราทำกันเป็นปกตินะ สำหรับคนที่ไม่รู้เรื่องจะอธิบายจากภาพแทนนะ

จะเห็นว่าปกติ Array 1 ตัวเราจะเรียกเป็น 1 มิติ ถ้าหากมี Array 2 ตัว ก็เรียกว่า 2 มิติ แต่หาก เพิ่มเป็น 3 ตัว เราจะเรียกว่า 3มิติ เอาง่ายๆนะ หากเราต้องการสร้างตารางขึ้นมา เราหากใช้ Array เพียงตัวเดียวเราจะสามารถระบุได้แค่ Col หรือ Row เท่านั้น เช่น หากให้ Array นั้นเป็นตัว loop Object และสร้าง Object นั้นขึ้นมา โดยใช้เป็นแนว ของ Col ตามภาพ เราจะสามารถระบุตำแหน่ง ของ Object นั้นได้แค่แนวCol เท่านั้น แต่ว่าในกรณีที่เราต้องการสร้างเป็นตาราง ในตารางเวลาเราทำ เราจะต้องมองเป็นแนว Col กับ Row ถูกปะ และนี้แหละคือสิ่งที่เราต้องทำให้มันสอดคล้องกัน จึงเป็นที่มาของการใช้ Array 2 ชั้นในการสร้าง ตารางขึ้นมา เนื่องจากตัวนึงจะต้องถูกเอาไปเป็น ตัวกำหนดของแนว Col และอีกตัวต้องกำหนดของแนว Row เพื่อให้ได้ความแม่นยำในการกด ซึ่งเวลากดก็ต้องมาเช็คตำแหน่งอีกหาก ตำแหน่งจาก Array ตัวที่ 1 และ Array ตัวที่ 2 นั้นอยู่ในตำแหน่งเดียวกันให้มันเปิดส่วนนั้นออกมา หรือ ทำลายส่วนนั้นทิ้ง บางคนก็แค่ซ่อนไป อันนี้คือ อธิบายสั้นๆในการสร้างตารางนะขึ้นมาสำหรับ Puzzle นะ

ป.ล. Array ชั้นเดียวก็สามารถสร้างได้นะ แต่จะยากกว่า 2 ชั้น ที่อธิบายเป็น 2 ชั้นจะทำให้เราสามารถเห็นภาพได้มากกว่านะ

ต่อมาถามว่าแล้วทำไมเราต้องไปทำแบบนั้นให้วุ่นวายใช้ปะ เจ้าของบทความเลยจะสร้างObject ขึ้นมาเพื่อปิดภาพพื้นหลัง โดยการใช้ Array ชั้นเดียว และ ใช้ RecylcerView เข้ามาช่วย ฮั่นแน่นี้แหละ Concept ของภาพ 5555+

ไม่ขออธิบายเรื่องของ RecyclerView นะ เพราะเขียนไปแล้วนะ ทีนี้เราต้องทำไง Concept คือ GridLayoutManager มันคือหนึ่งในความสามารถของ RecylcerView ที่ RecyclerView จะมี Layout พื้นฐานให้ใช้อยู่ 3 อันด้วยกันนั้นคือ RelativeLayout, LinearLayout และ ,GridLayout เราจะให้ RecyclerView ทำGrid ขึ้นมา เท่าจนเต็มหน้าจอ ซึ่งถ้าถามว่า กี่ Object บอกไม่ได้นะ อยู่ที่หน้าจอของ Device ที่ทำลงไปนะ ถ้าอยากให้เต็มหน้าจอต้องดูขนาดหน้าจอด้วยนะ แต่ถ้าฟิกขนาดของกรอบเกมไว้แล้ว ก็ตัดปัญาส่วนนั้นทิ้งไปได้เลย และ ถามว่าข้อดีมีอะไรบ้างเวลาเราใช้ RecyclerViewเข้ามาช่วย

  1. Position — ระบุ Position ได้ โดยที่ไม่ต้อง loop ให้เสียเวลา
  2. Custom — ใช้งานง่ายสามารถ Custom ได้ง่ายมากขึ้น

โดยที่เวลาทำเราจะ loop จำนวนช่องที่เราอยากให้มี และ ส่ง array นั้นเข้าไปใน Adapter ของ RecyclerView และถามว่ารูปภาพต้องทำไง อันนี้ขึ้นอยู่กับคนทำว่าต้องการมีความยืดหยุ่นในตัวแอพหรือป่าว หรือทำแค่ใช้เล่นๆ แต่ของเจ้าของบทความใช้ Firebase ในการทำ Database นะ แต่บางคนอาจจะใช้เกมเป็น mipmap ไรงี้ก็ได้นะ (ถ้าภาพไม่เยอะนะ ระวังจะหนักแอพเอานะ 555+) และถ้าหากทำเสร็จหมดแล้วเราจะเห็นหน้าตาเป็นแบบนี้

โดยที่เมื่อเราคลิกแล้ว ก็ให้มัน ซ่อน Object ไป เราก็จะได้การทำงานที่เราบอกไว้ก่อนหน้าแล้ว ง่ายๆเลยเห็นปะ โดยที่เราสามารถ Custom กันภายใน Adapter เลยก็ได้ หรือจะทำเป็น Fragment ไว้ก็ได้ แค่นี้เราก็จะได้หน้าตาของ App Game เราและ 5555+

ต่อมาส่วนของ Array เราจะเอามาทำอะไรนอกจากเอามา loop นับจำนวนช่อง เราจะเอามาใช้ในการทำหมายเลขช่อง ซึ่งเราก็สามารถ add ลงไปได้เลย เพราะ ยังไงเวลา loop มันก็นับให้อยู่แล้วปะ ตอน add ก็ทำ Custom layout ไว้แล้ว ใส่เลขลงไปให้สามารถแสดงเลขในช่องแต่ล่ะช่องได้ โดยที่เมื่อเราคลิก Object ตรงนั้นจะหายไปนั้นเอง (ตรงนี้เป็นเรื่องของ Logic ในการ Handle การกดของ แต่ล่ะคนนะ ว่าทำแบบไหน)

สรุปถ้าหากใครอยากจะทำเกม Puzzle ง่ายๆ ก็ลองเอาไปใช้ดูได้นะ Concept ไม่เยอะ ทำประมาณ 2 ชั่วโมงก็เสร็จแล้ว ถ้าไม่ติดปัญหาอะไรนะ 555+ เพราะเจ้าของบทความเจอปัญหามาแล้ว 555+ ไม่ใช่ปัญหาเรื่องตัวเกมนะ ปัญหาพอร์ต VGA 5555+ แก้กันหัวหมุนเลย สำหรับบทความนี้ก็จบเพียงเท่านี้นะ ช่วงสงกรานต์เล่นน้ำกันให้สนุกน๊าาา ^__^