SpriteKit Advanced - วิธีสร้างเกม 2,5D (ตอนที่ 1)

Intro

บทความนี้เกี่ยวกับวิวัฒนาการกราฟิกของ Raft Challenge ตั้งแต่ต้นแบบจนถึงผลิตภัณฑ์สุดท้าย เป็น AIM-ed สำหรับผู้ที่กำลังคิดจะสร้างเกมของตัวเองด้วยกราฟิกอย่าง Raft แต่ไม่ทราบว่าจะเริ่มอย่างไร

จุดเริ่มต้นที่ท้าทายของ Raft

Raft Challenge ถือกำเนิดขึ้นในช่วงแฮ็คฮ็อตแรกที่ All In Mobile จัดขึ้น ความคิดคือการสร้างเกมที่ผู้เล่นหลีกเลี่ยงอุปสรรค เราต้องการให้สิ่งต่าง ๆ เรียบง่ายที่สุดเท่าที่จะทำได้

หลังจากสุดสัปดาห์เรามีต้นแบบที่มีลักษณะเช่นนี้:

Raft Challenge ชนะการแข่งขัน Hackathon บริษัท ประกาศว่าจะให้ทรัพยากรเพื่อปรับปรุงเกม

มาทำให้มันเป็น 2,5D!

ในช่วงเริ่มต้นของโครงการแพมีกราฟิกที่ง่ายที่สุดเท่าที่จะทำได้ มุมมองอยู่เหนือพื้นราบโดยมีวงกลมสีที่ระบุผู้เล่นและศัตรู มันสวยงามและเรียบง่ายเหมือนรหัสที่อยู่ข้างใต้ จากนั้นผู้ออกแบบกราฟิกของเราก็มายุ่งกันทุกอย่าง เขากล่าวว่า“ มาทำให้เป็น 2,5D กันเถอะ!” ความท้าทายได้รับการยอมรับและภาพเคลื่อนไหวด้านบนเป็นผลลัพธ์

หลังจากที่แฮ็คฮ็อตเขาปรากฏตัวอีกครั้ง ครั้งนี้มันเป็นอะไรที่มากกว่าหนึ่งประโยค

มันเป็นรอยยิ้มที่ชั่วร้ายและวิดีโอนี้:

อธิบายมุมมอง

ตกลงมาลงมือทำกัน :-) ฉันต้องการให้ความรู้สึกกับเขาในความดูแล แต่ฉันเป็นเจ้านายที่นี่! มุมมองนั้นใช้งานง่ายในโค้ดโดยไม่คำนึงถึงเอ็นจิ้น 2D ที่เราใช้

ก่อนอื่นเราต้องกำหนดตำแหน่งที่เราต้องการวางจุดหาย ตัวอย่างด้านล่างแสดงจุดนี้ที่กึ่งกลางผืนผ้าใบ

Raft Challenge มีจุดนี้ในครึ่งบนของหน้าจอเนื่องจากท้องฟ้าและทุกสิ่งที่อยู่เหนือศีรษะไม่สำคัญเท่ากับอุปสรรคในแม่น้ำ

สไปรต์ทำเองได้อย่างไร แม้ว่าอาจจะเห็นได้ชัดสำหรับผู้ที่มีพื้นฐานด้านศิลปะ แต่ก็ไม่จำเป็นสำหรับนักวิชาการ

มีกฎสองข้อ:

  • ชิ้นส่วนที่เคลื่อนที่ได้นั้นจะต้องวาดตามเส้นของผู้ช่วยตามที่แสดงด้านบน
    เส้นทั้งหมดเหล่านี้ตัดกันในจุดที่หายไป

หมายเหตุ: ส่วนชายฝั่งไม่ถึงจุดหายไป มันหยุดอยู่ตรงกลางโดยทิ้งพื้นที่โปร่งใสไว้ด้านหลัง

  • พื้นที่ว่างระหว่างกราฟิกและจุดหายไปนั้นมีจุดประสงค์สำคัญ
    มันจะมีองค์ประกอบที่อยู่ไกลออกไป

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

การประกอบฉาก

หลังจากที่เราเตรียมสินทรัพย์ทั้งหมดของเราแล้วเราจำเป็นต้องนำพวกเขาทั้งหมดเข้าไปในที่เกิดเหตุ

เรามาดูกันว่ามันมีลักษณะอย่างไรใน Raft Challenge

เริ่มต้นจากด้านล่าง:

  1. เลเยอร์พื้นหลัง
    พื้นหลัง
    หญ้า
    หมอกด้านล่าง
    ดวงอาทิตย์
    ภูเขา
    เส้นขอบฟ้า
  • เลเยอร์เหล่านี้เป็นแบบคงที่พวกมันไม่เคลื่อนไหว
  • พื้นหลังทำหน้าที่ทั้งท้องฟ้าและน้ำ
  • พื้นหลังเป็นแบบไล่ระดับสีธรรมดา
    ยืดให้เต็มหน้าจอของอุปกรณ์ทั้งหมด
    อัตราส่วนภาพจะถูกละเว้น
  • เราอาจรวมเลเยอร์อื่นที่ไม่ใช่พื้นหลังเพื่อเพิ่มประสิทธิภาพเว้นแต่ว่าเราต้องการเปลี่ยนคุณสมบัติบางอย่าง
  • เราอาจย้ายดวงอาทิตย์ในระหว่างการเล่นเกม
     หรือแทนที่ภูเขาสำหรับสิ่งที่แตกต่าง

2. เลเยอร์มุมมอง
ต้นไม้ที่มีภาพสะท้อน
ชายฝั่ง
อุปสรรค

  • เพื่อความชัดเจนของภาพด้านบนจะมีการจัดกลุ่มเลเยอร์ที่มีเนื้อหาคล้ายกัน
    มี:
    อุปสรรค 2 ชั้น
    ชายฝั่ง 8 ชั้น
    ต้นไม้ 8 ชั้นพร้อมการสะท้อน
  • เลเยอร์เหล่านี้จะเพิ่มขนาดขึ้น 2 เมื่อผู้เล่นเคลื่อนที่ไปข้างหน้า
  • คำสั่งของเลเยอร์เหล่านี้ขึ้นอยู่กับ
    ระยะทาง
    ใกล้ชิดอยู่ด้านบน
    จัดลำดับความสำคัญ
    อุปสรรค> ชายฝั่ง> ต้นไม้

3. ตัวละคร

  • หากอุปสรรคอยู่ในตำแหน่งที่ใกล้ที่สุดที่เป็นไปได้มันอาจมีตำแหน่ง z สูงกว่าตัวละครเอง
    ในกรณีนี้อุปสรรคจะครอบคลุมตัวละครซึ่งเป็นสิ่งที่ต้องการ

4. GUI

  • กราฟิกที่ดีควรขึ้นอยู่กับภาพลวงตาและลูกเล่นแทนที่จะใช้ฮาร์ดแวร์

สรุป

บทความนี้ควรให้แนวคิดแก่เราเกี่ยวกับวิธีแก้ไขปัญหาในการสร้างสินทรัพย์ให้กับเกม 2,5D และจัดระเบียบให้เป็นฉาก

คุณสามารถอ่านส่วนที่ 2 ของซีรี่ส์นี้ได้ที่นี่

เกี่ยวกับผู้แต่ง: Kamil Ziętekเป็นผู้พัฒนา iOS ที่ www.allinmobile.co