![ถ้าเขียนเสร้จแล้วจะเป็นเช่นนี้ แต่อันนี้คือภาพในหัว](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-1.jpg)
บทเรียน Workshop การสร้างเกม 3 มิติ ด้วย Unity 3D สาย Javascript กับการสร้างเกมแบบง่ายสำหรับผู้ที่สนใจพัฒนาเกม ตัวอย่างเกมแนว Click to Jump โดยแตะหรือคลิก
ก่อนจะเรียนรู้ในบทเรียนนี้ลองไป ทดสอบการเขียนเกมเบื้องต้นใน Unity 3D กับ C# ก่อนไหมครับเพราะผมจะอ้างอิงเรื่อง Basic ต่างๆของบทเรียนเก่าๆ มาใช้กับ Workshop นี้จะได้ไม่เสียเวลา และคิดว่าการศึกษามันไม่ยากอะไร คงไม่น่าจะมีคนงง
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 1
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 2
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 3
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 4
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 5
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 6
มาคิด Story Board ของเกมคร่าวๆ เกมนี้จะเป็นตัวการ์ตูน Pucca ขับรถฟีโน่ เก็บเหรียญตามถนน และคอยกระโดดหลบกล่องลังที่ขวางทางขณะขับอยู่
![ถ้าเขียนเสร้จแล้วจะเป็นเช่นนี้ แต่อันนี้คือภาพในหัว](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-1.jpg)
ลักษณะของเกมคือ เกมแนว 2.5D หรือ 3 มิติครึ่งๆ กึ่งๆ 2 มิติเพราะจะเห็นมุมมองแนว Side Scrolling Game แนวเดียวเพียงแค่ วัตถุต่างๆจะเป็น 3 มิติ
วิธีการบังคับ: เนื่องจากเกมนี้จะ เน้นไปลงบน Android และ iOS และการเล่นควรจะไม่ยากเกินไป การบังคับคือ ตัวละครเลื่อนไปเรื่อยๆ แต่ใช้ นิ้วแตะหน้าจอเพื่อกระโดดครับ
เปิด Unity 3D ขึ้นมา บันทึก Scene แรกเป็นชื่อ Game
![สร้าง scene ใหม่](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-2.jpg)
ให้สร้างตัวอย่างฉากเหมือนในบทความนี้ครับ วาง Cube ตั้งชื่อว่า Ground และ Wall ลงไป
https://www.daydev.com/2014/unity-temple-run-tutorial.html
(คงไม่ยากเกินความสามารถของเราทุกคน)
โมเดล 3 มิติในเกมนี้ ผมจะไปหาจาก 3D Warehouse ของ Google Sketchup แล้วทำการ Export ออกมาเป็น *.dae ซึ่งต้องใช้ตัว Pro ครับ แต่ถ้าไม่มีเงินใช้ตัว Pro ก็ดาวน์โหลดเจ้านี้ไป SketchUp Make เพื่อทำการ Export อย่างเดียว
![ดาวน์โหลดแล้วไป Export เป็น dae ใน SketchUp Make](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-3.jpg)
![ดาวน์โหลดแล้วไป Export เป็น dae ใน SketchUp Make](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-4.png)
![ดาวน์โหลดแล้วไป Export เป็น dae ใน SketchUp Make](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-5.png)
ลากโมเดลเข้าไปใน Project ของ Unity แล้วสร้าง Animation ของเราอย่างง่าย ให้ดูที่เมนู Inspector เลือก Select
![เลือก Select](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-6.jpg)
ทำการ เลือก Rig ปรับเป็น Legacy แล้วเลือก Store in root (New) กด Apply
![เลือกตามนี้](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-7.jpg)
ไปที่แถบที่ชื่อ Animation ให้เลือก Frame แบบ Flash Animation ทำตามตัวอย่างนี้
![สร้าง animation เหมือน Adobe Flash (ที่น่าจะไม่รอด)](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-8.jpg)
สำหรับ Script ของ Ground และ Wall นั้นให้สร้าง Javascript ขึ้นมาครับ (ต่างจากบทก่อนหน้านี้เป็น C#) ตั้งชื่อว่า Road.js เขียนคำสั่งดังนี้
#pragma strict var speed : float = 1.3f; var offset : float; function Start () { } function Update () { offset = Time.time * speed; renderer.material.mainTextureOffset= new Vector2(0,-offset); }
นำไปใส่ใน GameObject ชื่อ Wall และ Ground ทันทีเลยครับ
![ใส่ Script ลงไป](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-9.jpg)
ตั้งค่า Main Camera ดังนี้
![ตั้งค่า Main Camera](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-91.jpg)
คลิกที่ ตัวละครใส่ Box Collider, Rigidbody และ Character Controller ลงไป พร้อมเตรียมไฟล์ชื่อ Player.js ไว้
![ตั้งค่าให้เหมือนตัวอย่าง](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-10.jpg)
ไฟล์ Player.js เขียนคำสั่งดังนี้
#pragma strict var speed : float = 6.0; var jumpSpeed : float = 8.0; var gravity : float = 30.0; private var isGrounded : boolean = false; private var PlayerMoveDirection : Vector3 = Vector3.zero; function Start () { } function Update () { var controller : CharacterController = GetComponent(CharacterController); if (controller.isGrounded) { if(Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Began){ PlayerMoveDirection.y = jumpSpeed; } if(Input.GetMouseButtonDown(0)) { PlayerMoveDirection.y = jumpSpeed; } } PlayerMoveDirection.y -= gravity * Time.deltaTime; controller.Move(PlayerMoveDirection * Time.deltaTime); }
อธิบายคำสั่ง ในคำสั่ง
if(Input.GetMouseButtonDown(0)) { PlayerMoveDirection.y = jumpSpeed; }
คือการบังคับตัวละครให้กระโดดขึ้น เมื่อมีการคลิก Mouse และคำสั่ง
if(Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Began){ PlayerMoveDirection.y = jumpSpeed; }
คือการบังคับตัวละครให้กระโดดขึ้น เมื่อมีการแตะที่หน้าจอ ลองทดสอบ
![คลิก Mouse หรือแตะหน้าจอ (ถ้าทำเป็น apk) เพื่อกระโดด](https://www.daydev.com/wp-content/uploads/2015/01/unity-js-11.jpg)
จบบทเรียน Workshop ที่ 1 สำหรับการเขียนเกม Unity สาย Javascript ครับ ทบทวนบทเรียนเก่าๆ ได้ที่
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 1
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 2
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 3
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 4
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 5
- Workshop เขียนเกมแนว Temple Run ด้วย Unity 3D ตอนที่ 6