Summary
วันนี้เราจะมาเรียนรู้ Unity2D Essentials กัน โดยเนื้อหาจะได้ไปต่อจากนี้คือ
Work with GameObjects in a 2D Scene
- Create a new Sprite
- Change a Sprite image using the Sprite Renderer component.
- Select 2D Objects in both the Hierarchy and Scene view windows of the Unity Editor.
- Move, rotate, and scale 2D objects using numerical values using the Transform Component in the Inspector window.
- Move, rotate, and scale 2D objects in the Scene view using the Unity transform tools.
- Identify the relationship between the properties displayed in the Inspector and the display of GameObjects in the Scene.
- Use the Rect Transform tool to manipulate a Sprite in the Scene.
- Change a Sprite’s Tint colors.
Add components to 2D Game Objects
- Position the Main Camera to display action in the Game view.
- Add physical properties to a 2D Game Object by applying the Rigid Body 2D component.
- Experiment with 2D physics in Unity.
Get 2D assets.
- Explain the content creation tools that support real-time 2D production
- Navigate to the Asset Store in a web browser
- Search and filter a search in the Asset Store
- Import an asset from the Asset Store automatically via a Unity account
Challenge: Sprite pachinko
Work with Game Object in a 2D scene
มาเริ่มสร้างโปรเจ็คแรกกัน!
เปิดโปรแกรม Unity Hub ขึ้นมา และสร้าง New project โดยใช้ Template เป็น 2D Template
เมื่อสร้างเรียบร้อยแล้วจะมีโฟลเดอร์ Scenes ที่อยู่ใน Asset เอาไว้สำหรับเก็บ Scene ของเกมที่เราจะสร้างโดยเมื่อกดเข้าไปที่ Scene ชื่อ SampleScene แล้วจะโชว์ข้อมูล Object ที่อยู่ใน Hierarchy ของ ไฟล์ SampleScene ที่เปิดว่ามี Object อะไรบ้างในนั้นและจัดวาง Object ใน หน้า Scene ตรงไหน
Essential ที่ควรรู้เมื่อสร้างโปรเจ็คตอนแรก
- Hierarchy เอาไว้สำหรับจัดการ Object, Camera, UI, Light และสิ่งต่างๆที่จะไปโชว์ใน Scene
- Scene เป็นส่วนที่ใช้แสดงภาพองค์ประกอบต่างๆ ของ scene ใช้เลือกเคลื่อนย้ายแก้ไข object ต่างๆ
- Game เป็นหน้าจอที่ใช้สำหรับทำลองเล่นเกมส์ หรือ Presentation ที่เราสร้างขึ้นมา ใช้คู่กับ ปุ่ม Play/Pause/Step ใน Toolbar
- Inspector เป็นหน้าต่างที่ใช้สำหรับแก้ไขลายละเอียดของ opject , materiar ,texture หรือลดเพิ่ม component ต่างๆให้ opject ต่างใน scene
ภายใน Inspector 2D หลักๆเมื่อสร้าง Object จะประกอบไปด้วย- ก่อน Transform จะเป็นที่ให้เปลี่ยนชื่อ Object ตั้ง Layer, เพิ่ม Tag, Set Static, และ Highlight Object
- Transform จะเป็นการเลื่อนปรับ Position, Rotation และ Scale ในรูปแบบแกน X, Y และ Z แต่ว่าใน 2D มีแค่ X และ Y ดังนั้นต่อให้ปรับแกน Z ก็จะไม่แสดงผลอะไรในหน้า 2DScene
- Sprite Renderer จะใช้ในการเปลี่ยนรูปแบบของ Sprite, เปลี่ยนสี, สลับแกนXY, Draw mode, Mask Interaction, Sprite Sort Point, Material สำหรับเปลี่ยนสี และ Additional Setting
- Sprites (Material) จะบอกข้อมูลของ Material ไม่ว่าจะเป็น Texture, Tint, Render Queue เป็นต้น
- Toolbar
- Unity Account ใช้ในการหา asset ต้องล็อคอินก่อนถึงจะเข้าถึงข้อมูล asset ที่อยู่ใน Package Manager My Assets ได้
- Manage Services จะโชว์ Unity Gaming Services ต่างๆ
- Plastic SCM เป็นระบบควบคุมเวอร์ชันที่ช่วยให้นักพัฒนา Unity สามารถจัดการและติดตามเวอร์ชันของโปรเจกต์ได้อย่างง่ายดาย มีฟีเจอร์การแบ่งแยก branch, merge, version control, access control และ code sharing ที่ช่วยให้นักพัฒนาทำงานร่วมกันได้อย่างมีประสิทธิภาพ
- Play/Pause/Step Buttons ใช้สำหรับควบคุมในหน้า Game view เริ่ม/หยุด/เริ่มแบบเป็นสเต็ป
- Undo History เอาไว้สำหรับดูประวัติย้อนหลัง
- Search ใช้สำหรับหาสิ่งต่างๆใน Project
- Layers และ Layout ที่เป็นลักษณะของ Drop-down อยู่ ใช้สำหรับบริหาร layer ในงาน และ จัดการหน้าต่าง interface ต่างๆ ตามลำดับ
สร้าง Object ตัวแรก!
- คลิกขวาที่หน้าต่าง Hierarchy ทำการคลิปขวาและเลือก 2D Object > Sprite > Circle
- เราจะลองเปลี่ยนให้ วงกลมเป็นสี่เหลี่ยมดูบ้างผ่านการเปลี่ยน Sprite ใน Inspector
- เลือก Square เมื่อเปลี่ยนแล้ว Scene ก็จะเปลี่ยน Sprite เป็น Square ด้วย
- เราสามารถเพิ่ม Scale ให้กับ Sprite เราได้โดยการ ปรับแกน X และ Y ใน Transform scale ลองปรับจาก X =1 และ Y =1 เป็น X =10 และ Y = 10
- ใน Unity2d ต่อให้คุณเพิ่ม Z ไปก็จะไม่เห็นอยู่ดีว่ามันเปลี่ยนแปลง (ในกรณีที่คุณสร้าง 3D Object ใน 2D Game เพราะ 2D Object ต่อให้Scale Z ก็ไม่หนาขึ้นอยู่ดี)
- เช่นถ้าเราเพิ่ม 3D Object > Cube เข้าไป ดูในรูปแบบ 2D แล้วไม่ต่างอะไรกับ Sprite Square เลยแต่ถ้าเราปรับ 2D ออกไปมันจะกลายเป็น 3D แทน
- ถ้าเราลองปรับ Transform Scale Z ของ Cube ดู ก็จะสังเกตุว่ามีการขยาย Scale ในแกน Z ขึ้นจริง โดยลองเปลี่ยน Z = 4 เป็น Z = 7
- เมื่อกลับไปเป็นแบบ 2D ก็จะไม่เห็นอะไรเปลี่ยนแปลงเพราะใน Scene จะโชว์แค่เป็นมุมมอง 2D
- เราสามารถใช้ Tools ในการปรับ Position, Rotation, Scale ได้โดยไม่ต้องไปปรับที่ Inspector
- Rotate Tool
- Scale Tool
- Rect Tool
- Transform Tool
เปลี่ยนสีให้กับตัว Sprite!
เราจะมาลงสีให้เจ้า Sprite Circle กันไปที่ Inspector > Sprite Renderer และลองเปลี่ยนสี เป็นสีอื่นดู
สรุปผลประกอบการที่เราทำไปในตอนนี้คือ เราเพิ่ม GameObjects อย่างง่ายที่เรียกว่า 'primitives' ใน Scene รู้เกี่ยวกับ Hierarchy Inspector และ UI ต่างๆของ Unity GameEngine รู้วิธีการ move, rotate และ scale และการเพิ่ม Sprite
Add components to 2D GameObjects
คอมโพเน้นท์ ( Components) คืออะไร?
คอมโพเน้นท์ หรือ Components คือ การจัดการส่วนประกอบต่าวๆของ Object ใน Inspector ไม่ว่าจะเป็น Transform , Rigidbody , Collider หรือ Scripts เป็นต้น
เรามาลองให้เจ้า Circle Objects ของเรามีมวลกัน (ทำให้มันมีฟิสิกส์)
- ไปที่ Hierarchy และเลือกที่ Circle หรือคลิกที่ Object ใน Scene
- ไปที่ Inspector และกด Add Components
- ค้นหาคำว่า Rigidbody และเลือก Rigidbody 2D เพราะว่า RigidBody นั้นจะเป็นสำหรับ 3D
- เมื่อเพิ่ม Rigidbody แบ้สจะทำให้ Object มีมวลและตกลงทันที
เรามาสร้าง Object ที่เป็นพื้นไว้กันบอลตกกัน
- ไปที่ Hierarchy ทำการเพิ่ม 2D Object > Sprite Shape > Open Shape ตั้งชื่อให้มันว่า Ground และปรับให้เจ้า Ground Object บางลงเหลือสัก 0.5
- ผลลัพน์ที่ได้คือ มันก็ตกเหมือนเดิมเพราะเรายังไม่ทำการใส่ Collider ที่เป็นเหมือนการสร้าง Hitbox ทำให้ Object ไม่มีการซ้อนทับกัน จะกลายเป็นชนกันแทน
เพิ่ม Collider ให้กับ Object
เราจะมาเพิ่ม Collider Component ให้กับ Object ต่างๆเพื่อให้ Object มี Hitbox ที่ให้เกิดการชนกันได้
- เลือก Object ที่ต้องการไปที่ Inspector และเพิ่ม Component ชื่อว่า Collider และก็เลือกชนิด Collider ตามที่เหมาะสม
- ในกรณีของ Object วงกลมเลยใช้ Circle Collider 2D
- เพิ่ม Collider Component ให้กับเจ้า Ground Object ของเราด้วยโดยจะให้ Ground ใช้ Box Collider 2D ดูก่อนว่าเมื่อใช้แล้วจะเกิดอะไรขึ้น
- โดยผลลัพน์ที่ได้คือ Object ชนกันแล้ว แต่ชนกันไม่ติกกันเพราะตัว Ground Object มีความโค้ง แต่ Collider ที่เราสร้างเป็น Box collider ที่เป็นสี่เหลี่ยม
- เราเลยแก้โดยการเปลี่ยน Box Collider 2D เป็น Edge Collider 2D และ Edge Collider จะให้เส้นตรงมาแต่เราสามารถเลื่อนจุดในเส้นเพื่อทำให้เส้นเปลี่ยน Collider เป็นไปตาม Object ที่เราต้องการได้
- โดยเราจะทำให้ Edge Collider โค้งเหมือนกับ Ground Objectโดยการลากจุดในเส้นทีละจุดให้โค้งเหมือน Ground
- ผลลัพน์ที่ได้คือ ทั้งสอง Object ชนกันได้เหมือนปกติไม่ลอย
Get 2D assets
ในส่วนนี้เราจะอธิบายวิธีกการสร้าง 2D assets โดยใช้เครื่องมือสร้างเนื้อหาดิจิตอลสองมิติ (2D Digital Content Creation tools) หรือเรียกย่อๆว่า 2D DCCs และวิธีการนำ Assets จาก Unity Asset Store มาใช้เพื่อช่วยในการประหยัดเวลาในการสร้าง Object
อะไรคือ 2D DCCs?
2D Digital Content Creation tools (DCCs) เป็นเครื่องมือที่ใช้ในการสร้างภาพดิจิติล 2 มิติเช่น รูปภาพ, ภาพประกอบ, สร้างภาพเคลื่อนไหว โดยโปรแกรมที่เราใช้และรู้จักกันบ่อยๆคือ Adobe Photoshop, Illustrator, Substance Painter และ Gimp
Unity ยังมีเครื่องมือที่ออกแบบมาสำหรับ Design 2D assets อีกด้วยยกตัวอย่างเช่น 2D Tilemap Editor , Sprite Editor และ
- ตั้งให้โชว์เฉพาะ Free Assets ด้วยเพื่อให้หา Assets ที่สามารถโหลดมาใช้ได้ฟรีง่ายขึ้น
- เราจะลองโหลด Undead Survivor Assets Pack มาใช้งาน
- เมื่อกด Add to My Assets แล้วก็ไปที่โปรแกรม Unity และไปที่ Window > Package Manager
- เปลี่ยนจาก Unity Registry เป็น My Assets
- กด Download Undead Survivor Assets Pack
- กด Import ไฟล์ทั้งหมดเข้าไปใน Project
- ลองเอา Sprite ที่ได้จาก Assets มาลองวางใน Scene ของเราดู
Challenge: Sprite pachinko
ในรอบนี้เราจะมาชาเลนจ์ พิสูจน์ตัวเองโดยสร้างเกม
Build your Scene
- สร้าง Scene ที่คุณต้องการจาก Assets ที่นำเข้ามา และทำมันเป็นเกม ปาจิงโกะ โดยใช้ Sprite Circle ที่เราสร้างอันเดิมเป็นลูกบอลที่ตกลงมา
- เพิ่ม Circle Collider ให้กับ วงกลมสีดำให้เป็นสิ่งกีดขวาง
- เพิ่ม Box Collider ให้กับกล่อง เพื่อให้ตกไปโดนกล่องได้โดยให้ Collider กันถึงแค่จุดก่อนฝาเปิด
- วางไปเรื่อยๆ ให้ดูเหมือนกับเกมปาจิงโกะ
- จากนั้นก็ลองเล่นดู
นำโปรเจ็คไปเผยแพรให้คนอื่นเล่นกัน!
