Home / Technology  / Mobile Technology  / Article for Mobile  / iOS Game Developer Tutorial: วางภาพ Spriteตัวละครลงในเกมด้วย Cocos2D

iOS Game Developer Tutorial: วางภาพ Spriteตัวละครลงในเกมด้วย Cocos2D

ศัตรูมาเป็น 100 เลยทำไงดี

Tutorial ขั้นตอนการแทรกภาพกราฟิก Sprite ตัวละครลงใน Background ด้วย Cocos2D บน XCode สำหรับนักพัฒนาแอพพลิเคชันบน iOS หรือ iPhone เบื้องต้นจากขั้นตอนที่แล้วที่เราได้หน้าจอ Title และ Menu สำหรับเปลี่ยนหน้าเกมบน iPhone ต่อมาก็จะเป็นขั้นตอนสร้าง ฉากสำหรับเล่นเกมขึ้นมาซึ่งเบื้องต้นเราจะต้องเตรียมภาพของตัวละครที่เราจะนำไปเป็นตัวดำเนินเรื่องของเกมของเรา ผมได้เลือกภาพกราฟิกประเภท PNG ที่เป็นประเภท Transparent Background มาขนาดความกว้าง 100 pixels และความสูง 100 pixels มาประกอบตั้งชื่อว่า “Player.png”

ตัวละคร ตั้งชืื่อไฟล์ว่า Player.png

ตัวละคร ตั้งชืื่อไฟล์ว่า Player.png

ต่อมาให้ทำการแก้ไขไฟล์ PlayScene.m ใหม่ในส่วนของฟังก์ชัน init() โดยแก้ไขให้เป็นคำสั่งดังนี้

ทดลองทำการ “Run” ดูก่อนเบื้องต้น

หน้าจอการ "Run” แอพพลิเคชันของเรา

หน้าจอการ “Run” แอพพลิเคชันของเรา

ทำการเพิ่มฉากหลังของเกมลงไปโดยหาภาพฉากหลังที่เหมาะสมสำหรับเกมของเรา ตั้งชื่อว่า “BGGame.png” แล้วนำไปไว้ใน Project ของเรา

หาภาพฉากหลังตั้งชื่อว่า "BGGame.png”

หาภาพฉากหลังตั้งชื่อว่า “BGGame.png”

เพิ่มคำสั่งในการโหลดภาพฉากหลังลงไปในหน้า PlayScene แทรกลงไปก่อนหน้า การโหลด Player ตำแหน่งต่อไปนี้

และไปทำการ add Object ลงในเกมของเราที่บรรทัดก่อน return self; ดังนี้

ลองทำการ “Run” ตัวแอพพลิเคชันของเราดูอีกครั้ง

ผลลัพธ์จากการ "Run” ตัวแอพพลิเคชันของเรา

ผลลัพธ์จากการ “Run” ตัวแอพพลิเคชันของเรา

ต่อมาให้เราหา ศัตรูของเกมนี้ โดยใช้ไฟล์นามสกุล PNG และมี Background เป็น Transparent เช่นกันตั้งชื่อว่า “Enemy.png”

ไฟล์ศัตรูตั้งชื่อว่า "Enemy.png”

ไฟล์ศัตรูตั้งชื่อว่า “Enemy.png”

ไปที่ไฟล์ PlayScene.m แล้วเพิ่มฟังก์ชันต่อไปนี้ลงไป เพื่อเป็นการประกาศตัวแปลและสร้าง ศัตรูขึ้นมา

เพิ่มคำสั่ง ให้ตัวศัตรูเคลื่อนที่จากขวาไปซ้าย ถ้าหลุดออกพิกัดความกว้างหน้าจอให้เคลียร์ค่าของศัตรูออกไป

กลับไปที่ฟังก์ชัน init() เพิ่มคำสั่งต่อไปนี้ต่อจากการ add ตัว Player ของเราเป็นการใช้เวลานับถอยหลังเพื่อให้ศัตรูปรากฏตัว

เพิ่มฟังก์ชันเข้าไปใหม่ เพื่อให้ระบบนับเวลาถอยหลังเพื่อโหลคตัวศัตรูของเกมให้ปรากฏขึ้นมา

ทดสอบ “Run” ตัวแอพพลิเคชันเกมของเราจะพบว่าตัวศัตรูจะพุ่งเข้าหาเรามากมาย

ศัตรูมาเป็น 100 เลยทำไงดี

ศัตรูมาเป็น 100 เลยทำไงดี

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

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

POST A COMMENT

%d bloggers like this: