Home / Developer  / Newbie  / Advance  / เขียนเกมบน iPhone ด้วย Sprite Kit กับวิธีควบคุมตัวละคร

เขียนเกมบน iPhone ด้วย Sprite Kit กับวิธีควบคุมตัวละคร

วิธีการเขียนเกมด้วย Sprite Kit บน iPhone สำหรับสร้างเกม 2D กับการควบคุมตำแหน่งของตัวละครให้เคลื่อนไปมาเมื่อมีการแตะหน้าจอในตำแหน่งแนวดิ่งได้อย่างง่ายครับเป็นการเขียนโปรแกรม Objective C ให้สามารถเคลื่อนตำแหน่งของตัวละครได้อย่างง่ายดายครับ เมื่อมีการแตะหน้าจอตำแหน่งต่างๆ ครับ

เริ่มต้นพัฒนา

สร้าง New Project ขึ้นมาใหม่เป็น SpriteKit Game ครับ

Screen Shot 2557-03-18 at 5.26.59 PM

ตั้งชื่อ Project ให้เรียบร้อยหลังจากนั้นก็เริ่มกันได้เลยครับ

player.png

player.png

ในตัวอย่างนี้จะใช้ player.png มาเป็นตัวละครครับ โดยผมไปหาภาพมาจากเว็บไซต์ http://design.tutsplus.com ดังนี้

ต่อมาปรับแนวตั้งแนวนอนของ แอพพลิเคชันของเราครับ ผมจะเน้นไปที่การวางเกมในแนวนอนก่อนแล้วกัน เลือกเครื่องหมายถูกออกไปจาก Portrait ครับ

เกมแนวนอน

เกมแนวนอน

สร้าง ตัว Player หรือตัวละครเกมของเราก่อน เปิดไฟล์ MyScene.h ขึ้นมาครับ ประกาศตัวแปรตามนี้

เพิ่ม Synthesize ตัวแปร hero ที่ MyScene.m ครับ แก้ไขส่วนของ header ใหม่เป็นดังนี้

คำสั่ง initWithSize() ก็จะต้องเป็นแบบนี้นะครับ

ต่อมาประกาศส่วนของ SceneDelegate ขึ้นมาทั้ง Hero และ BG ครับ เป็น Static Const

รอบนี้เราจะเพิ่ม เมธอดมาแทนที่ให้โหลดภาพกราฟิกของ Player เข้าไปเรียกใช้ เมธอด addHero() เพื่อเป็นการเรียกแสดงแบบ OOP ครับ สร้างเมธอด addHero() ดังนี้

เป็นการโหลด ภาพ player.png เข้าไปเก็บไว้ในตัวแปร hero และมีการสร้าง Class ของเมธอดมันโดยเฉพาะใน addHero() ครับ

ไปที่ไฟล์ ViewController.m อีกครั้ง เคลียร์ไฟล์ ViewController ในส่วนของไฟล์ทั้งหมดให้เป็นตามนี้ครับ

กลับมาที่ ไฟล์ MyScene.m ให้แก้ไขส่วนของ

ตามนี้ครับ

ลอง Run ดูรอบแรกก่อนว่ามีอะไรติดขัดไหม

RUN ตัวแอพพลิเคชัน

RUN ตัวแอพพลิเคชัน

ต่อมาเราจะทำให้มันเคลื่อนไหวไปตามตำแหน่งที่ แตะหน้าจอครับ เปิดไฟล์ MyScene.h ขึ้นมา ประกาศตัวแปรเพิ่มดังนี้

กลับไปเพิ่ม Synthesize ใน MyScene.m ตามนี้ครับ

แก้ไข MyScene.m ส่วนของเมธอด addHero() ให้เป็นดังนี้ครับ

เพิ่ม เมธอด -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event ขึ้นมาตามด้วยคำสั่งต่อไปนี้ครับ

ถ้าการแตะหน้าจอนั้น ตำแหน่งของ hero เราในแกน y อยู่น้อยกว่า 270 จะทำให้ตัวละคร hero เราเลื่อนไปข้างบนด้วย Action ที่ชื่อ actionMoveUp ครับ เช่นกันถ้าตำแหน่งสูงกว่า 50 ของความสูงหน้าจอก็จะเลื่อนลงด้วย actionMoveDown ครับ

ทดสอบ Run ตัวแอพพลิเคชันของเราดูครับ

ลองแตะมันดูครับ

ลองแตะมันดูครับ

ไม่ยากอีกแล้วครับ หวังว่าคงจะลองทำตามกันดูได้อย่าง ไหลลื่นนะครับ Source Code นั้นยังไม่ให้ครับ เพราะคิดว่าจะ ทำทีเดียวพร้อมกับฉาก Background เลื่อนในบทความต่อไปเลยดีกว่า

อ่านต่อที่: เขียนเกมบน iPhone ด้วย Sprite Kit การสร้างฉาก Background ให้เลื่อนได้

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.