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

มุมมองของผู้ใช้ต่อโลกจะถูกแทนด้วยอ็อบเจ็กต์ 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 ของตำแหน่งกล้องโดยใช้ 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() เพื่ออัปเดตกล้อง มันจะใช้ตำแหน่ง 2 แห่งและสร้าง 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() ทำให้สามารถเรียกใช้ฟังก์ชันในแต่ละเฟรมได้ง่ายโดยรับพารามิเตอร์ 3 ตัวนี้:

• name - ชื่อของการผูกซึ่งควรจะไม่ซ้ำกันเพื่อป้องกันการชนกับฟังก์ชันอื่น ๆ ที่มีชื่อเดียวกัน
• priority - ยิ่งหมายเลขสูงขึ้นความสำคัญก็มากขึ้น ฟังก์ชันนี้จะต้องทำงาน หลังจาก การอัปเดตก้องพื้นฐานจาก Roblox ดังนั้นจึงตั้งค่าให้มีความสำคัญสูงขึ้น 1 ระดับจาก 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 เพื่อให้ได้กล้องมุมมองด้านบนที่ใช้สคริปต์เดียวกันได้หรือไม่ ลองปรับค่าต่างๆ เพื่อให้ได้ผลลัพธ์ที่คุณชอบ!