ในเกมประเภท FPS (First-Person-Shooter) เราจะเห็นความสามารถอย่างหนึ่งของผู้เล่นที่มีก็คือ การใช้ scope ในการ Zoom เล็งเป้าหมายที่จะยิง ในโปรเจกต์นี้เราจะมาทำการเพิ่มความสามารถดังกล่าวให้กับ Player Character ของเทมเพลต FPS โดยการปรับปรุงค่า FOV (field of view) ในคอมโพเนนท์ FirstPersonCamera ของ Player Character ซึ่งมีค่า Default เท่ากับ 90 องศา ให้มีค่าต่ำลงก็จะทำมุมมองของกล้องนั้นแคบลง ทำให้เห็นภาพบนหน้าจอขยายใหญ่ขึ้นเป็นเหมือนการ zoom นั่นเอง


ขั้นเตรียมการ

ในเบื้องต้นให้ทำการสร้าง project โดยเลือก Template เป็น ชนิด First Person และตั้งค่าให้เป็น Blueprint


กำหนด Input ปุ่มกดการ Zoom

เปิดเมนู Edit จากเมนูด้านบนสุดของหน้าต่างโปรแกรม แล้วเลือก Project Setting จะปรากฏหน้าต่างขึ้นมา


ทางด้านซ้ายมือของหน้าต่างจะมีรายการตั้งค่าต่างๆ ให้ไปที่หมวดหมู่ Engine แล้วเลือก Input จะปรากฏรายละเอียดขึ้นทางด้านขวามือ


ในหมวดหมู่ Blinding ให้คลิกเครื่องหมาย ( + ) หลัง Action Mapping เพื่อสร้าง Action Mapping ใหม่ขึ้นมา


ให้กำหนดชื่อเป็น Zoom จากนั้นกำหนดปุ่มสำหรับเรียกใช้งาน Action นี้เป็น Right Mouse Button


Script สร้างการ Zoom

ในหน้าต่างหลักของโปรแกรม ให้ไปที่แท็บ Content Browser แล้วเข้าไปในโฟล์เดอร์ Content > FirstPersonBP > Blueprints จากนั้นเปิด Blueprint ที่ชื่อว่า FirstPersonCharacter ขึ้นมา


เพิ่มโหนด InputAction Zoom โดยคลิกขวาบริเวณที่ว่างแล้วค้นหาจากคำว่า Zoom โหนดนี้ทำหน้าที่รอรับสัญญาณ Input จากการกดคลิกเมาส์ขวา


เพิ่มโหนด Set Field Of View โดยคลิกขวาบริเวณที่ว่างแล้วค้นหาจากคำว่า Set Field Of View จากนั้นกำหนดค่า Field Of View เป็น 45 โหนดนี้ทำหน้าที่ในการเปลี่ยน FOV ซึ่งเป็นมุมมองของกล้อง (FirstPersonCamera) ให้เป็นไปตามที่เรากำหนด โดยค่าที่เป็น Default ของโปรแกรมจะเท่ากับ 90 องศา


ไปที่แท็บ Component ให้คลิกเลือก FirstPersonCamera แล้วลากไปวางบนที่ graph จะได้โหนด First Person Camera ขึ้นมา โหนดนี้ทำหน้าที่เป็น Target สำหรับการเปลี่ยนแปลงค่า FOV ของ Player Character


จากนั้นเชื่อมโหนดต่างๆ เข้าด้วยกันดังรูป

การทำงานของชุดคำสั่งนี้เริ่มจากเมื่อผู้เล่นคลิกเมาส์ขวา ซึ่งเป็นปุ่มสำหรับสร้าง Input ที่จะส่งสัญญาณมายังโหนด InputAction Zoom ถ้าสถานะเป็นการกดปุ่ม (Pressed) จะมีการกำหนดค่าให้ FOV เป็น 45 องศา (ค่า Default เท่ากับ 90 องศา)


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



ปรับปรุง Script ให้การ Zoom เกิดความ Smooth

จากการรันทดสอบ ภาพของการ Zoom ที่เกิดขึ้นจะเป็นเหมือนการตัดสลับภาพจากไกลเป็นใกล้ เนื่องจากค่า FOV นั้นเปลี่ยนค่าจาก 90 องศาไปเป็น 45 องศา แบบทันทีทันใด ดังนั้นในการแก้ปัญหานี้เราจะทำสร้าง Animation แสดงให้เห็นการเปลี่ยนแปลงมุมมอง โดยทำให้ค่า FOV มีการเปลี่ยนค่าแบบค่อยเป็นค่อยไป


ให้กลับไปเปิด Blueprint ที่ชื่อว่า FirstPersonCharacter ขึ้นมา จากนั้นเพิ่มโหนดที่ชื่อว่า Add Timeline โหนดนี้จะทำให้เราสามารถเปลี่ยนแปลงค่า FOV จากค่าหนึ่งไปเป็นอีกค่าหนึ่งภายในช่วงระยะเวลาที่เรากำหนด


การเปลี่ยนค่าภายในโหนด Timeline_0 ทำได้โดยการดับเบิลคลิกที่โหนด จะปรากฎแท็บ Timeline Editor ขึ้นมา จากนั้นให้คลิกที่ปุ่ม f+ ที่อยู่ทางด้านบนซ้ายของแท็บ


ทำการกำหนดค่าเวลาเริ่มต้นของ Animation และค่า FOV โดยการกดปุ่ม Shift ที่คีย์บอร์ดค้างไว้ แล้วคลิกเมาส์ซ้ายตรงตำแหน่งใกล้กับพิกิด 0,0 บนกราฟ จะปรากฏฟิลด์ Time และ Value ขึ้นมาตรงด้านบนซ้ายของกราฟ


ทำการแก้ไขค่า Time เป็น 0.0 และค่า Value เป็น 90 (ซึ่งเป็นค่า Default FOV)


ทำการกำหนดระยะเวลาของการแสดง Animation โดยไปที่ฟิลด์ Length ตรงตำแหน่งด้านบนของกราฟเปลี่ยนค่าเป็น 0.3


ทำการกำหนดเวลาสิ้นสุดของ Animation และค่า FOV โดยการกดปุ่ม Shift ที่คีย์บอร์ดค้างไว้ แล้วคลิกเมาส์ซ้ายตรงตำแหน่งพื้นที่สีเทาบนกราฟ จะปรากฏฟิลด์ Time และ Value ขึ้นมา ให้กำหนดค่า Time เป็น 0.3 และค่า Value เป็น 45


จากนั้นกลับไปที่แท็บ Event Graph เชื่อมโหนดต่างๆ เข้าด้วยกันดังรูป แล้วทำการ Compile และ Save

การทำงานของชุดคำสั่งนี้เริ่มจากเมื่อผู้เล่นคลิกเมาส์ขวา (Right Mouse Button) ซึ่งเป็นปุ่มสำหรับสร้าง Input ที่จะส่งสัญญาณมายังโหนด InputAction Zoom ถ้าสถานะเป็นการคลิกเมาส์ขวา (Pressed) จะมีการแสดง Animation การ Zoom ไปข้างหน้า (ค่า FOV เป็นจาก 90 ไปเป็น 45) แต่ถ้าสถานะเป็นการปล่อยเมาส์ขวา (Released) ก็จะมีการแสดง Animation การ Zoom ย้อนกลับ (ค่า FOV เป็นจาก 45 ไปเป็น 90)


หลังจากนั้นทำการรันทดสอบ จะเห็นได้ว่าภาพที่เกิดจาก Zoom นั้นจะมีความ smooth ขึ้น

Similar Posts