Home / Developer  / iOS Game Developer Tutorial: สร้างเมนู และหน้า Title ของเกมบน Cocos2D

iOS Game Developer Tutorial: สร้างเมนู และหน้า Title ของเกมบน Cocos2D

ขั้นตอนการพัฒนาแอพพลิเคชันเกมบน XCode และ Cocos2D สำหรับการสร้างฉากเปิดเกม และแมนูสำหรับเลือกเข้าสู่เกมเบื้องต้นสำหรับ iOS Developer มือใหม่ในบทสำหรับการสร้างเมนูนั้น ผมได้ขอยืมบทความ และชุด Source Code บางตัวจากเว็บไซต์ http://www.thaiiosdev.com/node/155 มาประยุกต์เล็กน้อยสำหรับบทความนี้ครับ (ยังไงก็ขอขอบคุณเว็บไซต์ ThaiiOSDev มากครับ)

หลังจากที่ได้รู้จักกับชุดพัฒนาเกมแบบ 2 มิติบน iOS อย่าง Cocos2D และได้เรียนรู้วิธีติดตั้งไปแล้ว ต่อมาจะเป็นขั้นตอนการพัฒนาเกมด้วย Cocos2D เกมแรกของคุณ

เริ่มต้นพัฒนา XCode และ Cocos2D

ให้ทำการสร้าง New Project ขึ้นมาใหม่ โดยเลือก Template เป็น Cocos2d-iphone (Cocos2D iOS)

New Project ขึ้นมาใหม่เป็น cocos2d iOS

New Project ขึ้นมาใหม่เป็น cocos2d iOS

ทำการ “Run” ทดสอบก่อนว่ามีปัญหาอะไรหรือไม่ ด้วยSource Code เบื้องต้นถ้่าไม่มีปัญหาจะพบหน้าจอ Hello World! ถ้าไม่มีปัญหาให้ปิด iOS Simulator ที่กำลังทดลอง แอพพลิเคชันของเราออก ในชุด Source Code เบื้องต้นนั้นเราจะไม่ไปยุ่งกับมัน ให้ทำการ New File เข้าไปใน Project โดยเลือกเป็น CCNode Class

สร้าง New File เป็น CCNode Class

สร้าง New File เป็น CCNode Class

เลือก Subclass เป็น CCLayer

เลือก Subclass เป็น CCLayer

ไฟล์ที่สร้างขึ้นมาใหม่

ไฟล์ที่สร้างขึ้นมาใหม่

ให้เราเลือก Subclass ของNew File ให้เป็น CCLayer ขึ้นมาใหม่ แล้วตั้งชื่อว่า MenuScene เพื่อสร้างหน้าเมนูของเกม

เปิดไฟล์ MenuScene.h ขึ้นมาเพิ่มฟังก์ชัน scene เข้าไป

หลังจากนั้นให้ไปแก้ไขที่ไฟล์ MenuScene.m โดยเพิ่มคำสั่งให้อยู่ในรูปแบบนี้

ต่อมาให้สร้างคำสั่ง Init เพื่อแสดงผล หน้าเมนูสำหรับเข้าเล่นเกมของเรา

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

รูปแบบข้างต้นเป็นรูปแบบของการเรียกใช้เมนูสำหรับ สร้างเกม ต่อมาเพิ่มคำสั่งในไฟล์  MenuScene.m ลงไปว่า

ต่อมาเพิ่ม คำสั่งสำหรับตรวจสอบว่า เราทัชหน้าจอตรงกับ ตำแหน่งพิกัดที่วางเมนู “Play” บนหน้าจอหรือไม่

และเพิ่มคำสั่งสำหรับกิจกรรมหลังจากทำการทัช เสร็จแล้ว หรือปล่อยนิ้วออกจากหน้าจอ

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

ต่อมาให้สร้าง New File ขึ้นมาใหม่ เป็น CCLayer เช่นเดียวกับไฟล์ MenuScene ตั้งชื่อว่า PlayScene
ทำการเพิ่มคำสั่งลงไปในไฟล์ PlayScene.h ดังนี้

ต่อมาให้เพิ่มคำสั่งเข้าไปที่ไฟล์ PlayScene.m

ต่อมาให้เพิ่มคำสั่ง Init ลงไปในไฟล์ PlayScene.m ต่อจากคำสั่ง scene เมื่อครู่ ก่อนปิด @end

สุดท้ายให้เพิ่มคำสั่งคืนความจำลงไปปิดท้าย

กลับไปแก้ไข MenuScene.m ที่ส่วนของ Header ให้รู้จักกับคำสั่งของหน้า PlayScene โดยเพิ่ม

และเพิ่มคำสั่งเพิ่มเติมที่ ฟังก์ชัน -(void) ccTouchesEnded:(NSSet *) touches withEvent:(UIEvent *) event
ดังนี้

จากเดิมคือ

ให้เป็น

เพื่อเป็นการเปลี่ยนให้เราสามารถกดปุ่ม “Play” แล้วเปลี่ยนหน้าไปเป็นไฟล์ PlayScene

ต่อมาให้ไปแก้ไขที่ไฟล์ IntroLayer.m โดยให้เพิ่ม #import “MenuScene.h” ลงในส่วน Header ดังนี้

แล้วให้เลื่อนไปที่ฟังก์ชัน makeTransition ข้างล่าง
ให้ทำการเปลี่ยน คำสั่งจากเดิมคือ

เปลี่ยนให้เป็น

เพื่อเป็นการเรียกหน้า MenuScene  ที่เป็นหน้าเมนูแรกของเราปรากฏขึ้นมา โดยลอง “Run” ตัวแอพพลิเคชันของเราก่อน จะได้หน้าจอดังนี้

ขั้นตอนการรันแอพพลิเคชัน มีหน้าจอเมนู เมื่อกดจะเจอหน้า "Play”

ขั้นตอนการรันแอพพลิเคชัน มีหน้าจอเมนู เมื่อกดจะเจอหน้า “Play”

ขั้นตอนการรันแอพพลิเคชัน มีหน้าจอเมนู เมื่อกดจะเจอหน้า "Play”

ขั้นตอนการรันแอพพลิเคชัน มีหน้าจอเมนู เมื่อกดจะเจอหน้า “Play”

เปิด Project ก่อนหน้านี่ที่ได้สร้างขึ้นมาแล้ว อย่างตัว Project ของผมคือ “FirstGame” ให้ทำการเปิด Project ขึ้นมาสิ่งแรกที่เราจะทำคือตกแต่งหน้าจอ Title และเมนูของเกมเราให้ดูน่าสนใจก่อน ดังนั้นเราต้องเตรียมภาพฉากหลังของเกมขึ้นมา 1 ภาพตั้งชื่อว่า BG.png ซึ่งตัวอย่างที่ผมจะใช้คือภาพด้านล่าง ให้คัดลอก import นำไปไว้ใน Project ของเรา

ตั้งชื่อภาพว่า BG.png

ตั้งชื่อภาพว่า BG.png

ต่อมาให้เราไปที่ไฟล์  MenuScene.m เพิ่มเติมคำสั่งลงไปเล็กน้อยในฟังก์ชัน init() ซึ่งคำสั่งสำหรับเรียกภาพกราฟิกของ Cocos2D นั้นก็คือคำสั่ง CCSprite นั่นเอง ให้แทรกคำสั่งนี้ลงไปตามนี้ ก่อนบรรทัดประกาศเมนู

ส่วนของ //Background คือคำสั่งในการเรียกไฟล์ BG.png เมื่อแทรกคำสั่งลงไปแล้วต้องทำการ add Object ลงไปเหมือน เมนู ให้เพิ่ม คำสั่งในกา add ตัวแปล bg ลงไปก่อนบรรทัดของการ add เมนู หากวางบรรทัดล่างสุด ระบบจะเข้าใจว่าเป็น Layerหรือชั้นข้อมูลที่สูงที่สุด Background จะบังเมนูที่เราสร้างไว้ ดังนั้นต้องไว้บรรทัดบนสุด

ทำการแก้ไข บรรทัดของเมนูแรกของเราให้เป็นค่าว่าง โดยแก้ไขจากเดิม

ให้กลายเป็น

แล้วทดลอง “Run” แอพพลิเคชันของเรา เพื่อดูผลลัพธ์ ผลลัพธ์จะปรากฏดังตัวอย่างข้างล่าง

หน้าจอ Title ของเกมของคุณ

หน้าจอ Title ของเกมของคุณ

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

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

POST A COMMENT