Blog

  • Angular ตอนที่ 1 ติดตั้ง

    ขั้นตอน

    1. ไปที่ command prompt พิมพ์ npm install -g @angular/cli
    ภาพที่ 1 การติดตั้ง angular

    2. รอจนติดตั้งเสร็จ

    ภาพที่ 2 ระบบแจ้งว่าติดตั้ง angular เรียบร้อยแล้ว

    3. สร้าง project โดยไปยัง path ที่ต้องการสร้าง project จากนั้น พิมพ์ :

    ng new my-app

    4. ไปยัง folder ที่สร้าง project จากนั้นสั่ง run server โดยพิมพ์ :

    ng serve

    ภาพที่ 4 run server แล้วระบบจะบอก url ที่ใช้ทดสอบ server มาให้

    4.จากนั้นทดสอบ Run โดยไปที่ browser แล้วพิมพ์ url ตามที่ ระบบบอกใน comand prompt จากภาพตัวอย่าง พิมพ์คำว่า localhost:4200

    ภาพที่ 5 หลังจาก พิมพ์ localhost:4200 ใน browser จะแสดงหน้าแรกของ angular

    เสร็จขั้นตอนการติดตั้งและทดสอบสร้าง project

  • Unity3D ตอนที่ 9 เหตุการณ์การชนกันของวัตถุ (Collision)

    ภาพที่ 9-1 ติ๊กถูกที่ Is Trigger เพื่อให้วัตถุตอบสนองต่อเหตุการณ์การชน
    ภาพที่ 9-2 สร้าง script กำหนดการทำงานเมื่อเกิดเหตุการณ์การชน
    ภาพที่ 9-3 จัดระเบียบไฟล์ script
    ภาพที่ 9-4 Double click ไฟล์ script เพื่อทำการแก้ไข
    ภาพที่ 9-5 script ที่ระบบสร้างให้
    ภาพที่ 9-6 ลบ script ที่ระบบสร้างให้ออก แล้วแก้ไขดังภาพ จากนั้น Save file แล้วกลับไปที่ Unity3D
    ภาพที่ 9-7 กด Play เพื่อทดสอบ
    ภาพที่ 9-8 เมื่อบอลชนกล่องแล้วกล่องจะหายไป ตามที่เขียนไว้ใน script
  • Unity3D ตอนที่ 8 การชนของวัตถุ (Rigidbody physics)

    ภาพที่ 8-1 สร้างกล่องสี่เหลี่ยม (cube)
    ภาพที่ 8-2 ปรับขนาดกล่อง
    ภาพที่ 8-3 ย้ายตำแหน่งกล่องใน scene
    ภาพที่ 8-4 เพิ่ม Physic rigidbody component ไปยังกล่อง
    ภาพที่ 8-5 เอาติ๊กออกที่ use gravity
    ภาพที่ 8-6 ทดสอบการเล่น
    ภาพที่ 8-7 ทดสอบติ๊ก Is Kinematic
  • Unity3D ตอนที่ 7 การปรับแต่งแสงในเกม

    ภาพที่ 7-1 ขั้นตอนการเลือก Light
    ภาพที่ 7-2 การหมุนมุมของแสง
  • Unity3D ตอนที่ 6 การปรับกล้อง มุมมองของเกม

    ภาพที่ 6-1 คลิกที่ icon กล้อง
    ภาพที่ 6-2 เลือก Move tool แล้วคลิกที่ลูกศรแกนเพื่อเปลี่ยนตำแหน่งของกล้อง
    ภาพที่ 6-3 คลิก Rotation tool แล้วคลิกที่เส้นวงกลมรอบกล้องค้างไว้แล้วลากเพื่อปรับการหมุน
    ภาพที่ 6-4 คลิกที่เฟืองแล้วเลือก Reset เพื่อนำกล้องกลับสู่จุดกึ่งกลางของ Scene
  • Unity3D ตอนที่ 5 เขียน script กดปุ่มให้วัตถุเคลื่อนที่

    ภาพที่ 5-1 คลิก Add component แล้วเลือก New script
    ภาพที่ 5-2 ตั้งชื่อ script แล้วคลิก Create and Add
    ภาพที่ 5-3 script component จะแสดงใน inspector ซึ่งเชื่อมโยงกับลูกบอลที่เราสร้างไว้
    ภาพที่ 5-4 ในหน้าต่าง project จะแสดงไฟล์ script อยู่ใน folder asset
    ภาพที่ 5-5 คลิกขวาบนพื้นที่ว่างแล้วเลือกสร้าง folder
    ภาพที่ 5-6 สร้าง folder แล้วลากไฟล์ไปไว้ใน folder ที่สร้างขึ้นใหม่
    ภาพที่ 5-7 เปิด folder script แล้ว double click file script เพื่อทำการแก้ไข
    ภาพที่ 5-8 โปรแกรม Visual studio ถูกเปิดขึ้นเพื่อแก้ไข script
    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    
    public class BallMovingScript : MonoBehaviour
    {
        Rigidbody rb;
        // Start is called before the first frame update
        void Start()
        {
            rb = GetComponent<Rigidbody>();
        }
    
        // Update is called once per frame
        void Update()
        {
            
        }
    
        private void FixedUpdate()
        {
            float moveHorizontal = Input.GetAxis("Horizontal");
            float moveVertical = Input.GetAxis("Vertical");
    
            Vector3 movement = new Vector3(moveHorizontal, 0.0f, moveVertical);
    
            rb.velocity = movement;
        }
    }
    
    ภาพที่ 5-9 ทำการแก้ไข script แล้วกดปุ่ม save
    ภาพที่ 5-10 กลับไปที่ program unity3D คลิกปุ่ม play แล้วกดปุ่มลูกศร ซ้ายขวาบนล่างบน keyboard ลูกบอลจะเคลื่อนที่
  • Unity3D ตอนที่ 4 Rigidbody

    ภาพ 1 เลือก Add component > Physic > Rigidbody
    ภาพที่ 2 Rigidbody component แสดงในหน้าต่าง inspector
    ภาพที่ 3 สามารถคลิกที่เฟืองแล้วเลือก Remove component เพื่อลบออกได้
    ภาพที่ 4 คลิกปุ่ม Play เพื่อทดสอบการเล่น
    ภาพที่ 5 จะเห็นว่าวัตถุตกลงไปตามแรงโน้มถ่วง
    ภาพที่ 6 คลิกปุ่ม Play อีกครั้งเพื่อหยุดเล่น
    ภาพที่ 7 ทดสอบไม่เลือก use gravity
    ภาพที่ 8 กด Play อีกครั้ง จะเห็นว่าลูกบอลลอยอยู่นิ่งๆ ไม่ตกตามแรงโน้มถ่วง
  • Unity3D ตอนที่ 3 การสร้างวัตถุในเกม

    ภาพที่ 1 เลือก Create > 3d object > Sphere เพื่อสร้างวัตถุทรงกลม
    ภาพที่ 2 ใน scene จะมีวัตถุทรงกลมอยู่ตามที่สร้าง
    ภาพที่ 3 ทำการย้ายวัตถุทรงกลมตามแกน 2 แกน โดยคลิกตรงกลางระหว่าง 2 แกน
    ภาพที่ 4 ย้ายวัตถุตามแกนเดียว โดยคลิกที่ลูกศร แล้วลากไปยังตำแหน่งที่ต้องการ
    ภาพที่ 5 เลือก Rotation tool เพื่อหมุนวัตถุ
    ภาพที่ 6 คลิกที่แกนแล้วลากไปยังตำแหน่งที่ต้องการเพื่อหมุนวัตถุ
    ภาพที่ 7 เลือก Transform tool เพื่อเปลี่ยนแปลงขนาดวัตถุ
    ภาพที่ 8 คลิกที่แกนแล้วลากไปยังตำแหน่งที่ต้องการเพื่อขยาย/ย่อขนาด
    ภาพที่ 9 ในส่วน Tranform ตัวเลขจะมีการเปลี่ยนแปลง
    ภาพที่ 10 สามารถคลิกที่เฟืองแล้วเลือก Reset เพื่อเปลี่ยนกลับมาเป็นวัตถุรูปแบบตั้งต้น
  • Unity3D ตอนที่ 2 ส่วนประกอบของหน้าจอ

    หน้าจอของ Unity3D จะประกอบด้วยส่วนต่างๆ ซึ่งสามารถปรับเปลี่ยนได้ไม่ตายตัว แต่โดยการตั้งค่าเบื้องต้น (Default จะเป็นดังรูปด้านล่าง)

    ภาพที่ 1 ส่วนประกอบของหน้าจอเบื้องต้น

    ส่วนประกอบหน้าจอ

    1 เมนูและ Tool bar

    2. Scene, Game, Asset store

    3. Project

    4. Scene Hierachy

    5. Inspector

    รายละเอียดของแต่ละส่วน

    1 เมนูและ Tool bar แสดงดังรูปด้านล่าง

    สำหรับมือใหม่จะแนะนำในสองส่วนคือ

    • ส่วนด้านซ้ายสุด รูปมือ รูปลูกศร เป็นต้น จะใช้ในการจับวัตถุต่างๆ เคลื่อนย้าย ขยายขนาดเป็นต้น
    • ตรงกลาง ปุ่ม เล่น ปุ่ม หยุด และปุ่มเล่นทีละ step จะเป็นปุ่มที่เราจะใช้เมื่อต้องการ test เกม
    ภาพที่ 2 แสดงเมนูและ tool bar

    2. Scene, Game, Asset store

    ส่วนนี้จะแสดงเป็น tab 3 tab ประกอบด้วย

    • scene เป็นหน้าจอที่เราใช้วางวัตถุในเกม
    • Game เป็นหน้าจอที่เราใช้ทดสอบเล่นเกม เมื่อกดปุ่ม play
    • Asset store เป็นหน้าจอที่ Link ไปยังเว็บของ unity เพื่อ download content (เรียกว่า asset) ไม่ว่าจะเป็น model ภาพ เสียง ต่างๆ มีทั้งฟรีและเสียเงิน
    ภาพที่ 3 หน้าจอที่ประกอบด้วย 3 tab คือ scene Game และ asset store
    สำหรับหน้าจอนี้คือหน้าจอ game จะใช้เมื่อต้องการทดสอบเล่นเกมที่เราสร้างขึ้น
    ภาพที่ 4 หน้าจอ Scene เป็นหน้าจอที่ใช้ในการวางวัตถุต่างๆในเกม
    ภาพที่ 5 หน้าจอ Asset store เชื่อมโยงไปยังเว็บของ Unity เพื่อ download asset ต่างๆ

    3. Project

    เป็นหน้าจอที่แสดงทรัพยากรที่เราใช้ในเกม ไม่ว่าจะเป็น model รูปภาพ เสียง effect และ script ต่างๆ โดยปกติจะเก็บไว้ใน asset folder

    ภาพที่ 6 หน้าจอ Project แสดงทรัพยากรที่เราใช้ในเกม

    4. Scene Hierachy

    แสดงทรัพยากรที่ใช้ใน scene ที่เรากำลังพัฒนาอยู่ โดยปกติเกมจะมีหลายๆ หน้าจอ (ฉาก) เช่น เมนูเริ่มต้น หน้าเกม หน้าเกมโอเวอร์ เป็นต้น

    ภาพที่ 7 หน้าจอ Hierachy ของ scene

    5. Inspector

    หน้าจอ Inspector ใช้ในการกำหนดคุณสมบัติของวัตถุในเกม

    ภาพที่ 8 หน้าจอ Inspector

  • Unity3D ตอนที่ 1 การสร้างโปรเจ็ค

    1 เมื่อเปิดโปรแกรม Unity3D ขึ้นมาจะพบหน้าจอดังรูป ให้คลิกที่ New เพื่อสร้าง Project ใหม่

    ภาพที่ 1 เลือก new เพื่อสร้าง project ใหม่

    2. ใส่รายละเอียดของ Project แล้วคลิก Create Project

    ภาพที่ 2 ใส่รายละเอียดของ Project

    3. ระบบจะแสดงหน้าจอพื้นที่การทำงานดังภาพด้านล่าง

    ภาพที่ 3 หน้าจอพื้นที่ทำงานของ Unity3D