พัฒนาเกมลง iOS ด้วย Swift และ SpriteKit ตอนที่ 3 Hello, world!

หลังจากอารัมภบทมาแล้วสองตอน มาถึงตอนที่ 3 เรามาเริ่มลงมือกันเลยดีกว่า

เริ่มต้นสำหรับการเขียนโปรแกรมทั่วไป เราก็ต้องมี “Hello, world!” กันก่อน เป็นพื้นฐาน

ในการเขียนเกมเราก็มี “Hello, world!” นะ ซึ่งในที่นี้ก็จะให้มีข้อความ “Hello, world!” มาแสดงในหน้าจอมือถือของเรานั่นเอง

เริ่มต้นเราก็เปิดโปรแกรม Xcode ขึ้นมา ในที่นี้ผู้เขียนใช้ Xcode 9.0 ซึ่งจะมีหน้าจอดังรูปที่ 1

รูปที่ 1 หน้าเริ่มต้น Xcode

เลือก (Click) > Create a new Xcode project
หรือจะไปที่เมนู File > New > Project ก็ได้
ซึ่งจะได้ ดังรูปที่ 2 เราก็เลือก iOS เลือก Game และคลิ๊ก Next

รูปที่ 2 สร้างโปรเจคใหม่จาก Template

จากนั้นจะมีหน้าจอให้เราใส่ข้อมูลโปรเจคของเรา
โดยใส่ชื่อโปรเจค ในที่นี้ให้ชื่อโปรเจคว่า HelloWorld
ใส่ชื่อ Organization Name หรือชื่อบริษัทองค์กรของเรา
ใส่ชื่อ Organization Identifier โดยทั่วไปแล้วจะใส่เป็น com.ชื่อองค์กร ในตัวอย่างนี้เป็น com.softzol
เลือกภาษาที่ใช้เขียน ในที่นี้เลือกเป็น Swift
เลือก Game Technology ในที่นี้เป็นเกมสองมิติ เราเลือกเป็น SpriteKit
ส่วน option อื่น ๆ ให้เอาเครื่องหมายถูกออกไปก่อน
แสดงดังรูปที่ 3 เมื่อกรอกข้อมูลเสร็จแล้ว คลิ๊ก Next

รูปที่ 3 ตั้งชื่อโปรเจค

จากนั้นจะแสดงหน้าจอให้เราเลือกว่าจะสร้างโปรเจคเก็บไว้ที่โฟวเดอร์ไหน ดังรูปที่ 4 เราก็เลือกที่เก็บแล้วก็คลิ๊กที่ Create

รูปที่ 4 กำหนดที่อยู่บันทึกโปรเจค

จากนั้นจะแสดงหน้าจอโปรเจคขึ้นมา ดังรูปที่ 5 โดยมุมซ้ายบน จะมีให้เราเลือกว่าจะรันโปรเจคบน Simulator รู่นไหน ซึ่งในตัวอย่างนี้ขอเลือกเป็น iPhone 7

ตรงส่วนของ Signing จะมีให้เลือก Team เพื่อเอาไว้ทดสอบกับเครื่องจริง ซึ่งขั้นตอนไม่ยุ่งยาก เราสามารถ Add account โดยจะต้องเป็น Apple ID ก็สามารถทดสอบบนเครื่องจริงได้เลย โดยยังไม่จำเป็นจะต้องสมัคร iOS Developer Program ก็ได้ เอาไว้สมัครตอนที่เราจะนำเกมหรือแอพพลิเคชันลง App Store

ตรงส่วน Deployment Info เราก็ปรับแต่งได้ตามความต้องการ ว่าจะให้รันบน iPhone หรือ iPad หรือทั้งสองเลยก็ได้
หรือจะตั้งค่าให้เกมของเรารันแบบไหน แนวตั้ง (Portrait) หรือแนวนอน (Landscape) ก็เลือกได้เลย

รูปที่ 5 ตั้งค่าโปรเจคเบื้องต้น

จากนั้นก็รองรันดู โดยมี 3 วิธีในการรัน คือ
1. กดจากปุ่มสามเหลี่ยมมุมซ้ายบน
2. เลือกเมนู Product > Run
3. กดคีย์บอร์ด Command + R
แล้วแต่ความถนัดของแต่ละคนเลย

ซึ่งเมื่อรันแล้วมันจะเปิดตัว Simulator ขึ้นมา ดังรูปที่ 6 โดยในช่วงแรกจะใช้เวลาสักเล็กน้อยในการจำลองเครื่องรุ่นที่เราเลือก ซึ่งในตัวอย่างนี้เลือกเป็น iPhone 7 แสดงดังรูปที่ 6 ก็ลองใช้เม้าส์คลิ๊กหน้าจอดู หรือจะคลิ๊กแล้วลาก ก็จะมีกราฟิกแสดงผลออกมา

รูปที่ 6 หน้าจอจาก Simulator

จากข้างต้นจะเห็นได้ว่าเรายังไม่ได้ทำอะไรเลยก็มี “Hello, world!” ขึ้นมาแล้ว เนื่องจากมันเป็น Template ที่มีมาให้เบื้องต้นเป็นตัวอย่างก่อนจึงยังไม่ได้ทำอะไรก็แสดงผลมาให้แล้ว

ถ้าเราต้องการหยุดรันโปรเจค เราก็กดปุ่มสี่เหลี่ยม ตรงมุมซ้ายบนได้เลย หรือจะไปที่เมนู Product > Stop ก็ได้เช่นกัน

ทีนี้เรามาลองรันบนเครื่องจริงกันดูบ้าง

ก่อนอื่นเราก็ต่อ iPhone หรือ iPad ที่เรามี เข้ากับ Mac ของเราโดยใช้สาย USB ที่มีแถมมาให้นั่นแหละ

เมื่อเชื่อมต่อแล้ว ก็จะโชว์ชื่อเครื่องของเราด้านบนสุด เราก็เลือกเครื่องของเราที่ใช้สำหรับรัน ดังรูปที่ 7

รูปที่ 7 กำหนดเชื่อมต่อไอโฟน

แล้วเมื่อเรากดรัน เกมก็จะไปรันบนเครื่องที่เราต่อเลย โดยเราจะต้องปลดล็อคเครื่องก่อน ในกรณีที่เราตั้ง Passcode ไว้

(ตรงส่วนนี้ครั้งแรกถ้ายังไม่เคยรันบนเครื่องนี้เลย ในการตั้งค่าโปรเจคตรง Signing เราต้องใส่บัญชี Apple ID ของเรา แล้วในการรันครั้งแรกเครื่องจะต้องยืนยันให้เรายอมรับแอพนี้ให้รันบนเครื่องได้ เนื่องจากเป็นระบบความปลอดภัยของเครื่อง)

เมื่อกดรัน ครั้งแรกจะมีหน้าจอแสดงดังรูปที่ 8 ซึ่งจะใช้เวลาสักพักหนึ่ง (นานเหมือนกัน)

รูปที่ 8 หน้าจอรอการรองรับไอโฟน

และเมื่อรันผ่าน เกมก็จะไปเพิ่มในเครื่องของเราและเปิดรันขึ้นมาเลย โดยแสดงผลดังวิดีโอที่ 1

วิดีโอที่ 1 แสดงผลบนเครื่องไอโฟน

 

แล้วถ้าเราจะเขียน Hello, world! ของเราเองล่ะ

งั้นเราเริ่มจาก เอาข้อความ Hello, world! เดิมออกไปก่อน

โดยด้านซ้ายเราเลือกที่ GameScene.sks แล้วก็เลือก hellolabel แล้วกดปุ่ม delete เพื่อลบออกไปก่อน ดังรูปที่ 9

รูปที่ 9 ลบข้อความเดิม

จากนั้นมาที่ GameScene.swift ลบคำสั่งออกให้เหลือแค่ฟังก์ชัน didMove กับ update ดังรูปที่ 10

รูปที่ 10 ลบคำสั่งเดิมเพื่อเริ่มต้น

จากนั้นเพิ่มคำสั่งให้แสดงข้อความ Hello, world! ดังรูปที่ 11 โดยสามารถเปลี่ยนขนาด และ font ได้ตามต้องการ ซึ่งรายชื่อ font ดังหมด สามารถดูได้จาก http://iosfonts.com จะรวมรายชื่อ font ทั้งหมดไว้ให้

let label = SKLabelNode(fontNamed: "AppleSDGothicNeo-Light")
label.text = "Hello, world!"
label.position = CGPoint(x: 0, y: 0)
label.fontSize = 100
label.fontColor = UIColor.white

self.addChild(label)

 

รูปที่ 11 คำสั่งแสดงข้อความ Hello, world!

จากนั้นกดรัน จะได้ผลลัพธ์ดังรูปที่ 12

รูปที่ 12 หน้าจอแสดงผล Hello, world! ที่เขียนขึ้นใหม่

 

เป็นอันเรียบร้อย สำหรับโปรแจคแรก Hello, world!

Aj.Montri