ควบคุมกล้องของผู้ใช้

มุมมองของผู้ใช้ต่อโลกจะถูกแทนที่ด้วยวัตถุ Camera คุณสามารถเปลี่ยนพฤติกรรมของกล้องให้เหมาะสมกับเกมของคุณได้หลายวิธี ตัวอย่างเช่น กล้องสามารถตอบสนองต่อเหตุการณ์ในโลก เช่น สั่นเมื่อมีมอนสเตอร์เดินผ่าน หรือถูกล็อคอยู่ข้างๆ ตัวละครของผู้ใช้ เช่น ในเกมแบบเลื่อนด้านข้าง

สร้างกล้องมุมมองบุคคลที่หนึ่ง

กล้องมุมมองบุคคลที่หนึ่งคือมุมมองที่กล้องจะถูกล็อคอยู่กับหัวของตัวละคร ซึ่งมีความแม่นยำมากขึ้นในชีวิตจริง มันเป็นเรื่องปกติในเกมยิงและเกมที่มีเรื่องราวซึ่งเป้าหมายคือทำให้ผู้ใช้รู้สึกมีส่วนร่วมในโลก

ใน Studio วัตถุ StarterPlayer จะมีคุณสมบัติจำนวนมากที่มีผลต่อกล้องของผู้ใช้ คุณสมบัติ CameraMode จะกำหนดว่ากล้องจะทำงานอย่างไร

1. เลือก StarterPlayer.

   

2. เปลี่ยน CameraMode เป็น LockFirstPerson เพื่อให้แน่ใจว่ากล้องของผู้ใช้จะไม่เคลื่อนที่ออกจากหัวของพวกเขา

   

3. ทดสอบการเล่นเพื่อดูการทำงานของกล้องมุมมองบุคคลที่หนึ่ง

   หากเคอร์เซอร์ของคุณติดอยู่กลางหน้าจอในขณะที่ทดสอบ คุณสามารถปล่อยเมาส์ของคุณได้โดยการกดปุ่ม Escape หรือกด ShiftF5 เพื่อสิ้นสุดการทดสอบ

สร้างกล้องเลื่อนด้านข้าง

มุมมองเลื่อนด้านข้างจะทำให้กล้องอยู่ในตำแหน่งที่คงที่สัมพันธ์กับด้านข้างของตัวละคร ทำให้โลกมีความรู้สึกแบบสองมิติ

สคริปต์กล้อง

1. ขยาย StarterPlayer และใน StarterPlayerScripts เพิ่ม LocalScript ที่ชื่อว่า CameraManager.

   

2. ที่ด้านบนของสคริปต์ ให้คัดลอกและวางตัวอย่างโค้ดต่อไปนี้เพื่อรับ Players service และในตัวแปรใหม่ให้รับผู้ใช้ท้องถิ่น

   local Players = game:GetService("Players")
   
   local player = Players.LocalPlayer

3. สร้างฟังก์ชันที่ชื่อว่า updateCamera ซึ่งจะเก็บตรรกะที่จำเป็นในการรับและตั้งค่าตำแหน่งใหม่สำหรับกล้อง

   local Players = game:GetService("Players")
   
   local player = Players.LocalPlayer
   
   local function updateCamera()
   
   end

4. ภายในฟังก์ชัน ให้รับโมเดลตัวละครของผู้ใช้และตรวจสอบว่ามันมีอยู่โดยใช้คำสั่ง if

   local Players = game:GetService("Players")
   
   local player = Players.LocalPlayer
   
   local function updateCamera()
       local character = player.Character
       if character then
   
       end
   end

ชี้กล้อง

โมเดลตัวละครทั้งหมดจะมีส่วนที่ชื่อว่า HumanoidRootPart ซึ่งสามารถใช้เพื่อรับตำแหน่งของตัวละครในโลก ซึ่งจะตั้งค่าตำแหน่งที่กล้องชี้ไปที่

1. ใช้ FindFirstChild เพื่อรับ HumanoidRootPart และตรวจสอบว่ามันมีอยู่โดยใช้คำสั่ง if

   local Players = game:GetService("Players")
   
   local player = Players.LocalPlayer
   
   local function updateCamera()
       local character = player.Character
       if character then
           local root = character:FindFirstChild("HumanoidRootPart")
           if root then
   
           end
       end
   end

2. ตำแหน่งของ HumanoidRootPart จะอยู่ต่ำกว่าหัวของผู้ใช้ 2 สตัด เพื่อแก้ไขปัญหานี้ ให้เพิ่ม Vector3 ใหม่ที่มีความสูง 2 สตัด ไปยังตำแหน่งของ root

   local Players = game:GetService("Players")
   
   local player = Players.LocalPlayer
   
   local HEIGHT_OFFSET = 2
   
   local function updateCamera()
       local character = player.Character
       if character then
           local root = character:FindFirstChild("HumanoidRootPart")
           if root then
               local rootPosition = root.Position + Vector3.new(0, HEIGHT_OFFSET, 0)
           end
       end
   end

   แยกตัวเลขแต่ละตัวออกเป็นตัวแปรเพื่อให้ปรับแต่งได้ง่ายขึ้นในภายหลัง

ตั้งค่าตำแหน่งกล้อง

กล้องยังต้องการตำแหน่ง เพื่อให้มุมมองของผู้ใช้มีลักษณะเป็น 2D แบบเลื่อนด้านข้าง กล้องต้องมองไปที่ด้านข้างของตัวละครโดยตรง วางกล้องไว้ข้างๆ ผู้ใช้โดยการเพิ่มความลึกให้กับเพียง Z axis ของตำแหน่งกล้องโดยใช้ Vector3

local player = Players.LocalPlayer

local CAMERA_DEPTH = 24
local HEIGHT_OFFSET = 2

local function updateCamera()
    local character = player.Character
    if character then
        local root = character:FindFirstChild("HumanoidRootPart")
        if root then
            local rootPosition = root.Position + Vector3.new(0, HEIGHT_OFFSET, 0)
            local cameraPosition = Vector3.new(rootPosition.X, rootPosition.Y, CAMERA_DEPTH)
        end
    end
end

อัปเดต CurrentCamera

ตอนนี้ตัวแปรสำหรับตำแหน่งของกล้องและเป้าหมายของกล้องพร้อมแล้ว ถึงเวลาที่จะอัปเดตตำแหน่งของกล้อง คุณสามารถเข้าถึงกล้องของผู้ใช้ผ่านคุณสมบัติ CurrentCamera ของ Workspace กล้องมีคุณสมบัติ CFrame เพื่อกำหนดตำแหน่งของมัน

คุณสามารถใช้ CFrame.lookAt() เพื่ออัปเดตกล้อง มันจะรับตำแหน่งสองตำแหน่งและสร้าง CFrame ที่ตั้งอยู่ที่ตำแหน่งแรกชี้ไปที่ตำแหน่งที่สอง ใช้ CFrame.lookAt() เพื่อสร้าง CFrame ที่ตั้งอยู่ที่ cameraPosition และชี้ไปที่ rootPosition

local player = Players.LocalPlayer
local camera = workspace.CurrentCamera

local CAMERA_DEPTH = 24
local HEIGHT_OFFSET = 2

local function updateCamera()
    local character = player.Character
    if character then
        local root = character:FindFirstChild("HumanoidRootPart")
        if root then
            local rootPosition = root.Position + Vector3.new(0, HEIGHT_OFFSET, 0)
            local cameraPosition = Vector3.new(rootPosition.X, rootPosition.Y, CAMERA_DEPTH)
            camera.CFrame = CFrame.lookAt(cameraPosition, rootPosition)
        end
    end
end

ซิงค์กล้อง

ขั้นตอนสุดท้ายคือการเรียกใช้ฟังก์ชันนี้ซ้ำๆ เพื่อให้กล้องซิงค์กับผู้ใช้ ภาพที่ผู้เห็นจะถูกรีเฟรชอยู่ตลอดเวลา ช่วงเวลาที่ใช้ในการคำนวณทั้งหมดที่จำเป็นเรียกว่า render step

RunService:BindToRenderStep() ทำให้การดำเนินการฟังก์ชันในทุกเฟรมเป็นเรื่องง่ายโดยรับพารามิเตอร์สามตัวนี้:

• name - ชื่อของการผูกนี้ ซึ่งควรมีเอกลักษณ์เพื่อไม่ให้ชนกับฟังก์ชันอื่นที่มีชื่อเดียวกัน
• priority - ยิ่งตัวเลขสูงขึ้น ความสำคัญก็จะสูงขึ้น ฟังก์ชันนี้ควรทำงาน หลังจาก การอัปเดตกล้องเริ่มต้นของ Roblox ดังนั้นความสำคัญจึงตั้งไว้สูงกว่าระดับหนึ่งจาก RenderPriority ของกล้องภายใน
• function - ฟังก์ชันที่จะถูกผูกกับ render step

1. ใช้ RunService:BindToRenderStep() เพื่อผูกฟังก์ชัน updateCamera กับ render step

   local Players = game:GetService("Players")
   local RunService = game:GetService("RunService")
   
   local player = Players.LocalPlayer
   local camera = workspace.CurrentCamera
   
   local CAMERA_DEPTH = 24
   local HEIGHT_OFFSET = 2
   
   local function updateCamera()
       local character = player.Character
       if character then
           local root = character:FindFirstChild("HumanoidRootPart")
           if root then
               local rootPosition = root.Position + Vector3.new(0, HEIGHT_OFFSET, 0)
               local cameraPosition = Vector3.new(rootPosition.X, rootPosition.Y, CAMERA_DEPTH)
               camera.CFrame = CFrame.lookAt(cameraPosition, rootPosition)
           end
       end
   end
   
   RunService:BindToRenderStep("SidescrollingCamera", Enum.RenderPriority.Camera.Value + 1, updateCamera)

2. ทดสอบโค้ดของคุณ ใช้ปุ่ม A และ D เพื่อเคลื่อนที่ตัวละครของคุณไปด้านข้าง

สร้างกล้องแบบไอโซเมตริก

โครงสร้างพื้นฐานของการรับตำแหน่งของผู้ใช้และการอัปเดตตำแหน่งของกล้องในทุกเฟรมนั้นสามารถปรับให้เข้ากับสไตล์กล้องอื่นๆ ได้มากมาย เช่น กล้องแบบไอโซเมตริก กล้องแบบไอโซเมตริกคือมุมมอง 3D ที่ชี้ลงไปเล็กน้อยที่มุมคงที่ไปยังตัวละครของผู้ใช้

ปรับตำแหน่งและมุมมอง

1. ใช้โค้ดจากตัวอย่างก่อนหน้า ปรับ cameraPosition เพื่อเพิ่มจำนวนเดียวกันในทุก 3 มิติ

   

   local function updateCamera()
       local character = player.Character
       if character then
           local root = character:FindFirstChild("HumanoidRootPart")
           if root then
               local rootPosition = root.Position + Vector3.new(0, HEIGHT_OFFSET, 0)
               local cameraPosition = rootPosition + Vector3.new(CAMERA_DEPTH, CAMERA_DEPTH, CAMERA_DEPTH)
               camera.CFrame = CFrame.lookAt(cameraPosition, rootPosition)
           end
       end
   end
   
   RunService:BindToRenderStep("IsometricCamera", Enum.RenderPriority.Camera.Value + 1, updateCamera)

2. การเปลี่ยนคุณสมบัติ FieldOfView ของกล้องจะจำลองการซูมเข้าและออก ซึ่งสามารถทำให้มุมมองมีลักษณะแบนราบ ลองตั้งค่าเป็นค่า 20 เพื่อซูมเข้า และเพิ่มระยะห่างของกล้องจากผู้ใช้เพื่อชดเชย

   local Players = game:GetService("Players")
   local RunService = game:GetService("RunService")
   
   local player = Players.LocalPlayer
   local camera = workspace.CurrentCamera
   
   local CAMERA_DEPTH = 64
   local HEIGHT_OFFSET = 2
   
   camera.FieldOfView = 20
   
   local function updateCamera()

โดยการเปลี่ยนวิธีการทำงานของกล้อง คุณสามารถสร้างรูปลักษณ์ใหม่ทั้งหมดสำหรับเกมของคุณ ลองดูว่าคุณสามารถเปลี่ยน cameraPosition เพื่อให้ได้กล้องมุมมองจากด้านบนด้วยสคริปต์เดียวกันได้หรือไม่ ลองปรับแต่งการตั้งค่าเพื่อให้ได้ผลลัพธ์ที่คุณชอบ!