Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Unity
Gamedevelopment

สร้างเกม Arkanoid โดย Unity: เตรียม Project

Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Build Arkanoid With Unity.
Build Arkanoid With Unity: Player and Ball Mechanics

Thai (ภาษาไทย) translation by Ittipon Teerapruettikulchai (you can also view the original English article)

Final product image
What You'll Be Creating

ใน Tutorial ชุดนี้, เราจะโชว์ให้ดูถึงวิธีเกมคลาสสิกอย่าง Arkanoid (หรือ Breakout) โดยใช้ Unity, โดยจะใช้เครื่องมือสำหรับภาพ 2 มิติของ Unity เลย. ในแต่ละโพสต์, เราจะโฟกัสไปในแต่ละส่วนของเกม; ในโพสต์นี้, เราจะเตรียมโปรเจคและ Assets ต่างๆ.

บทนำ

Tutorial นี้สำหรับใคร?

Tutorial นี้สร้างมาเพื่อคนสองกลุ่ม:

  • คนที่ไม่คุ้นเคยกับ Unity เลย.
  • คนที่คุ้นเคยกับ Unity, แต่ไม่เคยใช้เครื่องมือ 2 มิติของ Unity.

เราจะตั้งสมมติฐานว่าคุณเขียนโปรแกรมเป็นนิดหน่อย, ดังนั้นเราจะไม่มีโค้ดยากๆ ใน Tutorial นี้

แต่ก่อนที่จะทำตาม Tutorial นี้, คุณต้องไป ดาวน์โหลด Unity ก่อน

หัวใจหลักของ Tutorial นี้

ใน Tutorial นี้, เราจะโฟกัสไปที่เครื่องมือใหม่สำหรับภาพ 2 มิติ ของ Unity, แนวคิดคือจะครอบคลุมและให้ความรู้ที่มากพอในการใช้เครื่องมือเหล่านั้น ดังนั้นคุณจะสามารถใช้ Unity ในการสร้างเกมและแอพฯ 2 มิติ ได้, แม้คุณจะไม่เคยใช้ Unity มาก่อนเลยก็ตาม.

Features หลักๆ ของเครื่องมือสำหรับภาพ 2 มิติ ของ Unity คือ:

  • Asset ประเภทใหม่, Sprite, ประกอบด้วย Texture 2 มิติ, สี่เหลี่ยม, และจุดหมุนของภาพ.
  • Renderer component ใหม่ ชื่อว่า SpriteRenderer.
  • View mode ใหม่ แบบ 2 มิติ.
  • Physic engine ชื่อ Box2D และ ชุดของ Physic component ต่างๆ, Rigid-body component ต่างๆ, colliders ต่างๆ สำหรับวัตถุ 2 มิติ.
  • Atlas, หรือ Sprite atlas.

Tutorial นี้จะครอบคลุมทุกอย่าง ยกเว้นพวก Atlas.

ผลของงาน

ลอง Demo นี่ดูแล้วจะเห็นว่าเรากำลังจะทำอะไรกัน:

และนี่คืออะไรที่เราจะได้ตอนจบโพสต์นี้:

เตรียม Project

เปิด Unity และ สร้าง Project ใหม่ โดยไปที่เมนู New Project... จาก เมนู File. แล้วหน้าต่าง Project Wizard จะปรากฏออกมา:

กำหนดว่าจะเก็บไฟล์ Project ไว้ที่ไหน (เอาไว้ที่ไหนก็ได้ที่คุณต้องการ), เลือก 2D ในช่อง Set up defaults for, และไม่ต้องเลือก package template อันไหน. (Package templates เหล่านี้, มันจะ Import ไฟล์ต่างๆ และเตรียม Project ให้เราที่มันกำหนดไว้, Content ด้านในของมันก็จะเป็นไปตามที่ชื่อมันบอก)

คลิก Create Project; ตัว Editor จะเปิดออกมา แล้วคุณน่าจะเห็นหน้าต่าง ต่างๆ คล้ายๆ แบบนี้:

นี่คือ Layout แบบปกติของ Editor. คุณสามารถทำงานกับ Layout แบบไหนก็ได้ที่คุณถนัด, แต่ตามสูตรแล้วควรปรับให้เข้ากับงานที่กำลังจะทำ - มันจะช่วยให้คุณทำงานได้มีประสิทธิภาพมากขึ้น. ถ้าคุณเพิ่งเริ่มใช้ Unity, เราแนะนำให้คุณตั้ง Layout ตามเรา; ถ้าจะไม่ตาม, ข้ามส่วนนี้ไปก่อนได้เลย.

Unity Editor จะประกอบด้วย Tab ต่างๆ, แต่ละ Tab จะมีลักษณะและข้อมูลต่างกัน. Layout ต่างๆ จะเปลี่ยนแปลงการจัดเรียงตำแหน่งของแต่ละ Tab. คุณสามารถมี Tab สำหรับ Console debugging, Assets, Scene, Inspectors และ อื่นๆ.

ที่มุมขวาบนของหน้าจอ, คุณจะเห็นเมนูแบบ Drop-down ชื่อว่า Layout. คลิกมันแล้วเลือก Tall. Editor จะปรับให้แบบอัตโนมัติ, แล้วมันจะดูคล้ายแบบนี้: 

เหตุผลหลักที่ต้องกำหนด Layout เป็นแบบนี้ คือเราจะสามารถใช้เครื่องมือที่ต้องใช้อย่าง Scene hierarchy, Project Assets, Inspector และ Debugging Console. ยังไม่มี Console นี่นา งั้นเพิ่มมันเข้าไป โดย ไปที่ Window > Console

คุณจะเห็นได้ว่าหน้าต่าง Console มันลอยๆ อยู่เหนือ Editor. ในการที่จะทำให้มันยึดติดกับ Editor คือ, ลากมันไปข้างใต้ Tab Scene:

ตอนนี้คุณมีทุกอย่างที่ต้องใช้แล้ว, คุณควร Save Layout นี้ไว้แล้วคุณจะสามารถใช้มันได้อีกใน Project ต่อๆ ไป หรือ เพื่อให้ง่ายต่อการตั้ง Layout ให้กลับมาเป็นแบบนี้ในกรณีที่คุณจำเป็นต้องเปลี่ยน Layout ระหว่างการพัฒนาเกม

ในการ Save Layout นั้น ทำได้โดยการ,คลิกเมนู Layout > Save Layout. มันจะถามให้ใส่ชื่อ; เราได้กำหนด Layout นี้สำหรับใช้ทำเกม 2 มิติ งั้นควรตั้งชื่อมันว่า My2DLayout. คลิก Save ตอนนี้คุณก็ได้ Layout ที่สามารถใช้งานภายหลังได้แล้ว.

ถ้าคุณต้องการ, คุณสามารถไล่ดูแต่ละ Layout ว่ามันแตกต่างกันอย่างไร.

จัดระเบียบ Project และ Import Assets ต่างๆ เข้ามาใน Project

ตอนนี้เราก็มี Editor ที่พร้อมใช้ทำงานกันละ, ถึงเวลาที่จะ Import และ จัดระเบียบ Asset. ตอนนี้สำคัญนะ เพื่อการทำงานจากมีประสิทธิภาพ. การจัดระเบียบ Project เราจะทำมันใน Tab Project กัน. ในตอนนี้, มันว่างๆ, มีแต่ Folder Assets อันเดียว.

แม้ว่าขั้นตอนนี้จะไม่ได้จำเป็นสักเท่าไร, แต่เราจะแนะนำให้คุณจัดระเบียบ Assets ต่างๆ ให้ใช้งานง่าย, โดยเฉพาะอย่างยิ่งถ้าคุณทำงานกับ Project ใหญ่ๆ. เริ่มโดยการสร้าง Folder ต่างๆ ตามชื่อเหล่านี้ (คลิกขวาที่ Folder Assets แล้วเลือก Create > Folder):

  • Sprites
  • Scripts
  • Sounds
  • Music
  • Levels

ตอนนี้คุณก็จะมี Folder Project ที่จัดระเบียบไว้แล้ว, ได้เวลาที่จะ Import Assets ต่างๆ เข้าสู่ Project แล้ว. คุณสามารถหามันได้ใน Folder tutorial_assets ของ Github repo นี้ (คุณสามารถคลิก Download ZIP ในหน้านี้ถ้าคุณไม่ถนัด GitHub.) สังเกตุจะเห็นว่า Folder นี้ประกอบด้วย Assets ทั้งหมดสำหรับ Tutorial ชุดนี้, ดังนั้นมันจะมีบาง Assets ที่จะยังไม่ได้ใช้ในตอนนี้

ในการ Import คุณต้องทำแค่ ลาก Asset เข้าไปใน Unity Editor ใน Folder ที่คุณต้องการเพิ่ม Asset นั้นๆ. ดังนั้น, เข้าไปในดู File ที่เพิ่ง Download มา, เลือกไฟล์ใน Folder Sprites ลากเข้าไปใน Folder Sprites ใน Unity ตัว Editor จะโหลดไฟล์ต่างๆ. ทำแบบเดิมซ้ำอีกกับ Folder Music และ Sounds; หลังจากที่ทำเสร็จหมดแล้ว, คุณควรจะมีสิ่งต่างๆ แบบนี้:

เตรียม Scene สำหรับ ด่านแรก

ตอนนี้เราได้เตรียม Layout, จัดระเบียบ Project และดึง Assets เข้ามาใน Project แล้ว, ถึงเวลาที่เราจะสร้างด่านแรก

Unity ทำงานกับ Scene ต่างๆ. Scene สามารถมี Game object ต่างๆ, Menu, Level หรือ Game object แบบอื่นๆ. ทางที่ง่ายในการเข้าใจ Concept ของ Scene คือ ให้มองว่า แต่ละ Scene คือ ด่านแต่ละด่าน ที่ๆ คุณจะใส่สิ่งต่างๆ ลงไป, สร้างสภาพแวดล้อม, ศัตรู, และอื่นๆ อีกมากมาย. คิดแบบนี้ไว้ในใจ, แล้สมาเริ่มสร้าง Scene แรกกัน.

โดยปกติ, ตอนเราสร้าง Project ใหม่, Unity จะสร้าง Scene ใหม่ให้อัตโนมัติ. ในกรณีนี้, คุณจะมี Scene ที่มี Object อันเดียวคือ Main Camera. คุณสามารถดูได้ว่ามี Object อะไรบ้างใน Scene ใน Tab Hierarchy

คุณยังสามารถใช้ Hierarchy ในการจัดระเบียบ Game object ทั้งหลายใน Scene ได้. เมื่อคุณเลือก Game object จาก Scene, คุณสามารถเปลี่ยนค่าต่างๆ ใน Inspector

เพิ่ม Sprite เป็น Background ของด่านโดย: คลิก Create > Sprite ใน Tab Hierarchy. ตอนนี้ เปลี่ยนชื่อของมันเป็น Background (กด Enter หรือ แก้ไขค่านี้ในช่องแรกใน Tab Inspector)

คุณจะเห็นได้ว่าช่อง Sprite ใน Component Sprite Renderer ยังว่างอยู่. หมายความว่ายังไม่ได้กำหนด Sprite ให้กับ Object นี้ มาเปลี่ยนมันกัน: ลาก background1.png จาก Folder Background มีใส่ที่ช่องนี้. Texture จะแสดงใน Scene.

ถ้าตอนนี้คุณสลับไปที่ Tab Game, คุณจะสามารถดูได้ว่า Scene นี้จะออกมาเป็นยังไงตอนที่เป็นเกมแล้ว. คุณยังสามารถเปลี่ยน Resolution ใน Tab นี้ได้ ใน Tutorial นี้, เราจะใช้ Resolution เป็น Standalone (1024x768) 

อย่างที่คุณเห็น, Background ตอนนี้ล้อมไปด้วยสีน้ำเงิน. มันเป็นเพราะรูปไม่ได้ครอบคลุมจอทั้งหมด, ดังนั้นคุณจะต้องขยายขนาดของมัน. ใน Tab Inspector, เปลี่ยน Scale ของ Background เป็น 4 ทั้งแกน X และ Y. มันจะทำให้ Background ครอบคลุมจอทั้งหมด แล้วก็, ตรวจสอบให้ดีว่าได้ตั้งค่า Order in Layer เป็น 0: ตอนทำงานกับ Sprite ต่างๆ, Unity ใช้ Layer ต่างๆ ในการวาดมันออกมา, เลจ Layer ยิ่งต่ำ มันจะยิ่งถูกวาดออกมาก่อน (ภาพจะปรากฏข้างหลัง), เลขที่สูงกว่ามันจะถูกวาดทีหลัง (ภาพจะปรากฏข้างหน้า) เมื่อตั้ง Sprite เป็น Background, คุณต้องตั้ง Position เป็น 0 เพื่อให้เป็นภาพแรกที่ถูกวาด

ขั้นตอนต่อไปคือการสร้างกรอบต่างๆ; เราจะสร้าง Sprite มาสามอัน (Top, Left และ Right) มันจะถูกใช้เป็นกำแพงของเกม. เพิ่ม Sprite สามอันนี้ แบบเดียวกับที่ทำกับ Background, และใช้ bar1.png และ bar2.png เป็นรูปกำแพงส่วนต่างๆ เพื่อปรับตำแหน่งและขนาดของ Bar แต่ละอัน, เปลี่ยนไป Tab Scene แล้วตั้งค่าแต่ละอันตามต้องการ. อย่าลืมเปลี่ยน Order in Layer เป็น 1 สำหรับแต่ละ Bar

และตอนนี้เราจะได้อะไรแบบนี้:

Bar ต่างๆ จะเป็น Object ที่ไม่เคลื่อนไหว, และมันถูกใช้ในลักษณะที่เหมือนๆ กัน, ดังนั้นเราจะรวมมันเข้ามาใน Game object อันนึง. วิธีการคือ, สร้าง Game object เปล่าๆ มาใหม่อันนึง โดย คลิกที่ Game Object > Create Empty ที่เมนูด้านบน

ตัว Editor จะสร้าง Game object เปล่ามาใน Scene แล้ว, ลาก Bar ทั้งสามทันใน Tab Hierarchy แล้ววางมันข้างใน Game object เปล่าๆ ที่เราเพิ่งสร้างไป Bar ต่างๆ ตอนนี้ จะเป็น Sub-object ของ Object ใหม่ที่เราเพิ่งสร้าง ตั้งชื่อมันว่า Bars ดังนั้นตอนนี้จะสามารถรู้ได้ว่าอะไรอยู่ข้างในนั้น

Object ที่ยังเหลือคือบอล, แท่นของผู้เล่น (Paddle), และ อิฐ (Block) ต่างๆ. ในตอนนี้, ได้จะแต่ละอย่างไปอย่างละอัน. ตามเดิม, สร้าง Sprite สำหรับแต่ละ Object และ ตั้ง Order in Layer เป็น 1

คุณควรจะมีอะไรๆ คล้ายๆ แบบนี้:

ตอนนี้เราจะทำการ Save Scene ของเรา เป็น ด่านแรก. เลือกเมนู File > Save Scene as..., ตั้งชื่อว่า Level1, แล้วเอาไว้ใน Folder ชื่อ Levels

ตอนต่อไป

นี่สรุปได้ว่าตอนแรกของซีรีย์นี้. คุณจะมี Project Unity, ที่มี Asset ต่างๆ ที่จำเป็น, และ โครงสร้างสำหรับด่าน ต่างๆ. ตอนต่อไป, เราจะทำให้ แท่น และ บอลเคลื่อนที่ได้.

ถ้าคุณมีคำถามอะไรหรือคำแนะนำอะไร, คอมเมนท์ข้างล่างได้เลยตามสบาย.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.