Tạo game bắn súng 3D của riêng bạn bằng cách sử dụng ngăn xếp React và Three.js - Phần 1

Trong quá trình phát triển web hiện đại, ranh giới giữa ứng dụng web và ứng dụng cổ điển đang ngày càng mờ đi. Ngày nay, chúng ta không chỉ có thể tạo các trang web tương tác mà còn tạo ra các trò chơi hoàn chỉnh ngay trên trình duyệt. Một trong những công cụ giúp thực hiện được điều này là thư viện - một công cụ mạnh mẽ để tạo đồ họa 3D dựa trên bằng công nghệ . React Three Fiber Three.js React Giới thiệu về ngăn xếp React Three Fiber là một trình bao bọc trên sử dụng cấu trúc và nguyên tắc của để tạo đồ họa 3D trên web. Ngăn xếp này cho phép các nhà phát triển kết hợp sức mạnh của với sự tiện lợi và linh hoạt của , giúp quá trình tạo ứng dụng trở nên trực quan và có tổ chức hơn. React Three Fiber Three.js React Three.js React Trọng tâm của là ý tưởng rằng mọi thứ bạn tạo trong một cảnh đều là thành phần . Điều này cho phép các nhà phát triển áp dụng các mô hình và phương pháp quen thuộc. React Three Fiber React Một trong những ưu điểm chính của là dễ tích hợp với hệ sinh thái . Bất kỳ công cụ nào khác vẫn có thể được tích hợp dễ dàng khi sử dụng thư viện này. React Three Fiber React React Sự liên quan của Web-GameDev đã trải qua những thay đổi lớn trong những năm gần đây, phát triển từ các trò chơi 2D đơn giản đến các dự án 3D phức tạp có thể so sánh với các ứng dụng trên máy tính để bàn. Sự phát triển về mức độ phổ biến và khả năng này khiến Web-GameDev trở thành một lĩnh vực không thể bỏ qua. Web-GameDev Flash Một trong những lợi thế chính của chơi game trên web là khả năng truy cập của nó. Người chơi không cần tải xuống và cài đặt bất kỳ phần mềm bổ sung nào - chỉ cần nhấp vào liên kết trong trình duyệt của họ. Điều này giúp đơn giản hóa việc phân phối và quảng bá trò chơi, giúp chúng có sẵn cho nhiều đối tượng trên toàn thế giới. Cuối cùng, phát triển trò chơi trên web có thể là một cách tuyệt vời để các nhà phát triển thử sức mình với gamedev bằng các công nghệ quen thuộc. Nhờ các công cụ và thư viện có sẵn, ngay cả khi không có kinh nghiệm về đồ họa 3D, bạn vẫn có thể tạo ra các dự án thú vị và chất lượng cao! Hiệu suất trò chơi trong các trình duyệt hiện đại Các trình duyệt hiện đại đã đi được một chặng đường dài, phát triển từ các công cụ duyệt web khá đơn giản đến các nền tảng mạnh mẽ để chạy các ứng dụng và trò chơi phức tạp. Các trình duyệt chính như , , và liên tục được tối ưu hóa và phát triển để đảm bảo hiệu suất cao, khiến chúng trở thành nền tảng lý tưởng để phát triển các ứng dụng phức tạp. Chrome Firefox Edge các trình duyệt khác Một trong những công cụ quan trọng đã thúc đẩy sự phát triển của trò chơi dựa trên trình duyệt là . Tiêu chuẩn này cho phép các nhà phát triển sử dụng khả năng tăng tốc đồ họa phần cứng, giúp cải thiện đáng kể hiệu suất của trò chơi 3D. Cùng với các webAPI khác, mở ra những khả năng mới để tạo các ứng dụng web ấn tượng trực tiếp trong trình duyệt. WebGL WebGL Tuy nhiên, khi phát triển trò chơi cho trình duyệt, điều quan trọng là phải xem xét các khía cạnh hiệu suất khác nhau: tối ưu hóa tài nguyên, quản lý bộ nhớ và khả năng thích ứng cho các thiết bị khác nhau đều là những điểm chính có thể ảnh hưởng đến sự thành công của dự án. Trên nhãn hiệu của bạn! Tuy nhiên, lời nói và lý thuyết là một chuyện, còn trải nghiệm thực tế lại là một chuyện khác. Để thực sự hiểu và đánh giá cao tiềm năng phát triển web game, cách tốt nhất là hòa mình vào quá trình phát triển. Vì vậy, để làm ví dụ về việc phát triển trò chơi trên web thành công, chúng tôi sẽ tạo ra trò chơi của riêng mình. Quá trình này sẽ cho phép chúng tôi tìm hiểu các khía cạnh chính của quá trình phát triển, đối mặt với các vấn đề thực tế và tìm giải pháp cho chúng, đồng thời xem nền tảng phát triển trò chơi web có thể mạnh mẽ và linh hoạt như thế nào. Trong loạt bài viết này, chúng ta sẽ xem cách tạo game bắn súng góc nhìn thứ nhất bằng cách sử dụng các tính năng của thư viện này và đi sâu vào thế giới thú vị của web-gamedev! Bản demo cuối cùng https://codesandbox.io/p/github/JI0PATA/fps-game?embedable=true Kho lưu trữ trên GitHub Bây giờ, hãy bắt đâù! Thiết lập dự án và cài đặt gói Trước hết, chúng ta sẽ cần một mẫu dự án . Vì vậy, hãy bắt đầu bằng cách cài đặt nó. React npm create vite@latest chọn thư viện ; React chọn . JavaScript Cài đặt các gói npm bổ sung. npm install three @react-three/fiber @react-three/drei @react three/rapier zustand @tweenjs/tween.js Sau đó mọi thứ không cần thiết khỏi dự án của chúng tôi. xóa Mã phần Tùy chỉnh hiển thị Canvas Trong tệp , thêm phần tử div sẽ được hiển thị trên trang dưới dạng phạm vi. Chèn thành phần và đặt trường nhìn của máy ảnh. Bên trong thành phần đặt thành phần . main.jsx Canvas Canvas Ứng dụng Hãy thêm kiểu vào để kéo dài các thành phần UI đến hết chiều cao của màn hình và hiển thị phạm vi dưới dạng vòng tròn ở giữa màn hình. index.css Trong thành phần , chúng tôi thêm thành phần , thành phần này sẽ được hiển thị làm nền trong cảnh trò chơi của chúng tôi dưới dạng bầu trời. Ứng dụng Bầu trời Mã phần Bề mặt sàn Hãy tạo một thành phần và đặt nó vào thành phần . Ground Ứng dụng Trong , tạo một phần tử có bề mặt phẳng. Trên trục Y, di chuyển nó xuống dưới để mặt phẳng này nằm trong tầm nhìn của camera. Và cũng lật mặt phẳng trên trục X để nó nằm ngang. Ground Mặc dù chúng tôi đã chỉ định màu xám làm màu vật liệu nhưng mặt phẳng có vẻ hoàn toàn màu đen. Mã phần Chiếu sáng cơ bản Theo mặc định, không có ánh sáng trong cảnh, vì vậy hãy thêm nguồn sáng , nguồn sáng này chiếu sáng đối tượng từ mọi phía và không có chùm tia định hướng. Là một tham số, đặt cường độ phát sáng. ambientLight Mã phần Kết cấu cho bề mặt sàn Để làm cho bề mặt sàn trông không đồng nhất, chúng ta sẽ thêm họa tiết. Tạo mô hình bề mặt sàn dưới dạng các ô lặp lại dọc theo bề mặt. Trong thư mục , thêm hình ảnh PNG có họa tiết. nội dung Để tải một kết cấu vào hiện trường, hãy sử dụng hook từ gói . Và như một tham số cho hook, chúng ta sẽ chuyển hình ảnh họa tiết được nhập vào tệp. Đặt độ lặp lại của hình ảnh theo trục ngang. useTexture @react-two/drei Mã phần Chuyển động của máy ảnh Sử dụng thành phần từ gói , cố định con trỏ trên màn hình để nó không di chuyển khi bạn di chuyển chuột mà thay đổi vị trí của camera trên cảnh. PointerLockControls @react-two/drei Hãy thực hiện một chỉnh sửa nhỏ cho thành phần . Ground Mã phần Thêm vật lý Để rõ ràng, hãy thêm một khối lập phương đơn giản vào hiện trường. Hiện giờ anh ấy đang lơ lửng trong không gian. Sử dụng thành phần từ gói để thêm "vật lý" vào cảnh. Là một tham số, hãy định cấu hình trường trọng lực, nơi chúng ta đặt lực hấp dẫn dọc theo các trục. Vật lý @react-ba/rapier Tuy nhiên, khối lập phương của chúng ta nằm bên trong thành phần vật lý nhưng không có gì xảy ra với nó. Để làm cho khối lập phương hoạt động giống như một vật thể thực sự, chúng ta cần bọc nó trong thành phần từ gói . RigidBody @react-two/rapier Sau đó, chúng ta sẽ thấy ngay mỗi lần tải lại trang, khối lập phương sẽ rơi xuống dưới tác dụng của trọng lực. Nhưng bây giờ có một nhiệm vụ khác - cần phải biến sàn thành một vật thể mà khối lập phương có thể tương tác và vượt quá vật đó nó sẽ không rơi. Mã phần Sàn nhà như một vật thể Hãy quay lại thành phần và thêm thành phần làm lớp bao bọc trên bề mặt sàn. Ground RigidBody Bây giờ khi rơi xuống, khối lập phương vẫn nằm trên sàn giống như một vật thể thực sự. Mã phần Đưa một nhân vật tuân theo các định luật vật lý Hãy tạo một thành phần sẽ điều khiển nhân vật trong cảnh. Người chơi Nhân vật là đối tượng vật lý giống như khối được thêm vào, vì vậy nó phải tương tác với bề mặt sàn cũng như khối trên hiện trường. Đó là lý do tại sao chúng tôi thêm thành phần . Và hãy tạo nhân vật ở dạng viên nang. RigidBody Đặt thành phần bên trong thành phần Vật lý. Player Bây giờ nhân vật của chúng ta đã xuất hiện trên hiện trường. Mã phần Di chuyển nhân vật - tạo móc câu Nhân vật sẽ được điều khiển bằng các phím và nhảy bằng . WASD phím cách Với React-hook của riêng mình, chúng tôi triển khai logic di chuyển nhân vật. Hãy tạo một tệp và thêm hàm mới vào đó. hooks.js usePersonControls Hãy xác định một đối tượng ở định dạng {"keycode": "hành động cần thực hiện"}. Tiếp theo, thêm trình xử lý sự kiện để nhấn và nhả phím trên bàn phím. Khi trình xử lý được kích hoạt, chúng tôi sẽ xác định các hành động hiện tại đang được thực hiện và cập nhật trạng thái hoạt động của chúng. Kết quả cuối cùng, hook sẽ trả về một đối tượng ở định dạng {"action in Progress": "status"}. Mã phần Di chuyển nhân vật - thực hiện hook Sau khi triển khai hook , nó sẽ được sử dụng khi điều khiển nhân vật. Trong thành phần , chúng tôi sẽ thêm tính năng theo dõi trạng thái chuyển động và cập nhật vectơ hướng chuyển động của nhân vật. usePersonControls Người chơi Chúng ta cũng sẽ xác định các biến sẽ lưu trữ trạng thái của các hướng chuyển động. Để cập nhật vị trí của nhân vật, hãy được cung cấp bởi gói . Hook này hoạt động tương tự như và thực thi phần thân của hàm khoảng 60 lần mỗi giây. sử dụngFrame @react-ba/fiber requestAnimationFrame Giải thích mã: Tạo một liên kết cho đối tượng người chơi. Liên kết này sẽ cho phép tương tác trực tiếp với đối tượng người chơi trên hiện trường. 1. const playerRef = useRef(); Khi sử dụng hook, một đối tượng có giá trị boolean cho biết nút điều khiển nào hiện được người chơi nhấn sẽ được trả về. 2. const { tiến, lùi, trái, phải, nhảy } = usePersonControls(); Cái móc được gọi trên mỗi khung hình của hoạt ảnh. Bên trong cái móc này, vị trí và vận tốc tuyến tính của người chơi được cập nhật. 3. useFrame((state) => { ... }); Kiểm tra sự hiện diện của đối tượng người chơi. Nếu không có đối tượng người chơi, hàm sẽ dừng thực thi để tránh lỗi. 4. if (!playerRef.current) trả về; Lấy vận tốc tuyến tính hiện tại của người chơi. 5. vận tốc const = playerRef.current.linvel(); Đặt vectơ chuyển động tiến/lùi dựa trên các nút được nhấn. 6. frontVector.set(0, 0, lùi - tiến); Đặt vectơ chuyển động trái/phải. 7. sideVector.set(trái - phải, 0, 0); Tính vectơ chuyển động cuối cùng của người chơi bằng cách trừ các vectơ chuyển động, chuẩn hóa kết quả (sao cho độ dài vectơ là 1) và nhân với hằng số tốc độ di chuyển. 8. Direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(MOVE_SPEED); "Đánh thức" đối tượng người chơi để đảm bảo nó phản ứng với những thay đổi. Nếu bạn không sử dụng phương pháp này, sau một thời gian đối tượng sẽ "ngủ" và không phản ứng với những thay đổi về vị trí. 9. playerRef.current.wakeUp(); Đặt vận tốc tuyến tính mới của người chơi dựa trên hướng di chuyển được tính toán và giữ nguyên vận tốc thẳng đứng hiện tại (để không ảnh hưởng đến việc nhảy hoặc rơi). 10. playerRef.current.setLinvel({ x: Direction.x, y: Velocity.y, z: Direction.z }); Kết quả là khi nhấn các phím , nhân vật bắt đầu di chuyển xung quanh khung cảnh. Anh ta cũng có thể tương tác với khối lập phương vì cả hai đều là vật thể. WASD Mã phần Di chuyển nhân vật - nhảy Để thực hiện bước nhảy, hãy sử dụng chức năng từ các gói và . Trong ví dụ này, hãy kiểm tra xem nhân vật có ở trên mặt đất và phím nhảy đã được nhấn hay chưa. Trong trường hợp này, chúng tôi đặt hướng và lực gia tốc của nhân vật trên trục Y. @dimforge/rapier3d-compat @react-two/rapier Đối với chúng tôi sẽ thêm khối lượng và khối xoay trên tất cả các trục để anh ta không bị ngã theo các hướng khác nhau khi va chạm với các vật thể khác trong hiện trường. Người chơi, Giải thích mã: Đạt được quyền truy cập vào cảnh động cơ vật lý . Nó chứa tất cả các đối tượng vật lý và quản lý sự tương tác của chúng. const world = rapier.world; Rapier Đây là nơi diễn ra quá trình "raycasting" (raycasting). Một tia được tạo bắt đầu từ vị trí hiện tại của người chơi và hướng xuống trục y. Tia này được "đưa" vào cảnh để xác định xem nó có giao nhau với bất kỳ vật thể nào trong cảnh hay không. const ray = world.castRay(new RAPIER.Ray(playerRef.current.translation(), { x: 0, y: -1, z: 0 })); Điều kiện được kiểm tra nếu người chơi ở trên mặt đất: const căn cứ = ray && ray.collider && Math.abs(ray.toi) <= 1.5; - liệu có được tạo ra hay không; tia tia - liệu tia có va chạm với bất kỳ vật thể nào trong hiện trường hay không; ray.collider - "thời gian phơi sáng" của tia. Nếu giá trị này nhỏ hơn hoặc bằng giá trị nhất định, nó có thể cho thấy rằng người chơi ở đủ gần bề mặt để được coi là "trên mặt đất". Math.abs(ray.toi) Bạn cũng cần sửa đổi thành phần để thuật toán raytraced xác định trạng thái "hạ cánh" hoạt động chính xác, bằng cách thêm một đối tượng vật lý sẽ tương tác với các đối tượng khác trong cảnh. Ground Hãy nâng máy ảnh lên cao hơn một chút để nhìn rõ khung cảnh hơn. Mã phần Cam kết đầu tiên Cam kết thứ hai Di chuyển camera phía sau nhân vật Để di chuyển camera, chúng ta sẽ lấy vị trí hiện tại của người chơi và thay đổi vị trí của camera mỗi khi khung hình được làm mới. Và để nhân vật di chuyển chính xác theo quỹ đạo, nơi camera hướng tới, chúng ta cần thêm . applyEuler Giải thích mã: Phương thức áp dụng phép quay cho một vectơ dựa trên các góc Euler đã chỉ định. Trong trường hợp này, phép quay camera được áp dụng cho vectơ . Điều này được sử dụng để khớp chuyển động tương ứng với hướng của camera, để người chơi di chuyển theo hướng xoay camera. applyEuler chỉ hướng Hãy điều chỉnh một chút kích thước của và làm cho nó cao hơn so với khối lập phương, tăng kích thước của và sửa lỗi logic "nhảy". Player CapsuleCollider Mã phần Cam kết đầu tiên Cam kết thứ hai Tạo hình khối Để làm cho khung cảnh không có cảm giác hoàn toàn trống rỗng, hãy thêm khối lập phương. Trong tệp json, liệt kê tọa độ của từng khối và sau đó hiển thị chúng trên hiện trường. Để thực hiện việc này, hãy tạo một tệp , trong đó chúng tôi sẽ liệt kê một mảng tọa độ. Cubes.json [ [0, 0, -7], [2, 0, -7], [4, 0, -7], [6, 0, -7], [8, 0, -7], [10, 0, -7] ] Trong tệp , hãy tạo thành phần để tạo các hình khối trong một vòng lặp. Và thành phần sẽ là đối tượng được tạo trực tiếp. Cube.jsx Cubes Cube import {RigidBody} from "@react-three/rapier"; import cubes from "./cubes.json"; export const Cubes = () => { return cubes.map((coords, index) => ); } const Cube = (props) => { return ( ); } Hãy thêm thành phần đã tạo vào thành phần bằng cách xóa khối đơn trước đó. Khối Ứng dụng Mã phần Nhập mô hình vào dự án Bây giờ hãy thêm mô hình 3D vào cảnh. Hãy thêm mô hình vũ khí cho nhân vật. Hãy bắt đầu bằng cách tìm kiếm một mô hình 3D. Ví dụ: hãy lấy . cái này Tải xuống mô hình ở định dạng GLTF và giải nén kho lưu trữ trong thư mục gốc của dự án. Để có được định dạng, chúng ta cần nhập mô hình vào cảnh, chúng ta sẽ cần cài đặt gói bổ trợ . gltf-pipeline npm i -D gltf-pipeline Sử dụng gói , chuyển đổi lại mô hình từ sang , vì ở định dạng này, tất cả dữ liệu mô hình được đặt trong một tệp. Là thư mục đầu ra cho tệp được tạo, chúng tôi chỉ định thư mục . gltf-pipeline định dạng GLTF định dạng GLB chung gltf-pipeline -i weapon/scene.gltf -o public/weapon.glb Sau đó, chúng ta cần tạo một thành phần phản ứng sẽ chứa đánh dấu của mô hình này để thêm nó vào cảnh. Hãy sử dụng từ nhà phát triển . tài nguyên chính thức @react-ba/fiber Đi tới trình chuyển đổi sẽ yêu cầu bạn tải tệp đã chuyển đổi. Weapon.glb Sử dụng kéo và thả hoặc tìm kiếm Explorer, tìm tệp này và tải xuống. Trong trình chuyển đổi, chúng ta sẽ thấy thành phần phản ứng được tạo, mã mà chúng ta sẽ chuyển sang dự án của mình trong một tệp mới , thay đổi tên của thành phần thành cùng tên với tệp. WeaponModel.jsx Mã phần Trưng bày mô hình vũ khí tại hiện trường Bây giờ hãy nhập mô hình đã tạo vào cảnh. Trong tệp thêm thành phần . App.jsx WeaponModel Mã phần Thêm bóng Tại thời điểm này trong khung cảnh của chúng ta, không có vật thể nào đổ bóng. Để bật trên cảnh, bạn cần thêm thuộc tính vào thành phần . bóng bóng Canvas Tiếp theo, chúng ta cần thêm một nguồn sáng mới. Mặc dù thực tế là chúng ta đã có trên hiện trường, nhưng nó không thể tạo bóng cho các vật thể vì nó không có chùm sáng định hướng. Vì vậy, hãy thêm một nguồn sáng mới có tên là và định cấu hình nó. Thuộc tính để kích hoạt chế độ đổ bóng " " là . Việc bổ sung tham số này cho biết rằng đối tượng này có thể tạo bóng lên các đối tượng khác. ambientLight directionalLight cast castShadow Sau đó, hãy thêm một thuộc tính khác vào thành phần , nghĩa là thành phần trong cảnh có thể nhận và hiển thị bóng trên chính nó. getShadow Ground Các thuộc tính tương tự nên được thêm vào các đối tượng khác trong hiện trường: hình khối và trình phát. Đối với các hình khối, chúng tôi sẽ thêm và , vì chúng có thể tạo và nhận bóng, còn đối với người chơi, chúng tôi sẽ chỉ thêm . castShadow getShadow castShadow Hãy thêm cho . castShadow Player Thêm và cho . castShadow getShadow Cube Mã phần Thêm bóng - sửa lỗi cắt bóng Nếu bây giờ bạn nhìn kỹ hơn, bạn sẽ thấy rằng diện tích bề mặt mà bóng đổ lên khá nhỏ. Và khi đi ra ngoài khu vực này, cái bóng chỉ đơn giản là bị cắt bỏ. Lý do cho điều này là theo mặc định, máy ảnh chỉ chụp một vùng nhỏ bóng được hiển thị từ . Chúng ta có thể làm điều đó đối với thành phần bằng cách thêm các thuộc tính bổ để mở rộng vùng hiển thị này. Sau khi thêm các thuộc tính này, bóng sẽ hơi mờ. Để cải thiện chất lượng, chúng tôi sẽ thêm thuộc tính . directionalLight directionalLight sung bóng-máy ảnh-(trên, dưới, trái, phải) Shadow-mapSize Mã phần Ràng buộc vũ khí vào một nhân vật Bây giờ hãy thêm màn hình vũ khí ở góc nhìn thứ nhất. Tạo thành phần mới, thành phần này sẽ chứa logic hành vi của vũ khí và chính mô hình 3D. Vũ khí import {WeaponModel} from "./WeaponModel.jsx"; export const Weapon = (props) => { return ( ); } Hãy đặt thành phần này ngang hàng với của nhân vật và trong hook , chúng ta sẽ đặt vị trí và góc xoay dựa trên vị trí của các giá trị từ camera. RigidBody useFrame Mã phần Hoạt hình vung vũ khí khi đi bộ Để làm cho dáng đi của nhân vật tự nhiên hơn, chúng ta sẽ thêm động tác lắc nhẹ vũ khí khi di chuyển. Để tạo hoạt ảnh, chúng tôi sẽ sử dụng thư viện đã cài đặt. tween.js Thành phần sẽ được gói trong một thẻ nhóm để bạn có thể thêm tham chiếu đến nó thông qua hook . Vũ khí useRef Hãy thêm một số để lưu hoạt ảnh. useState Hãy tạo một hàm để khởi tạo hoạt ảnh. Giải thích mã: Tạo hoạt ảnh của một đối tượng "đu đưa" từ vị trí hiện tại sang vị trí mới. const twSwayingAnimation = new TWEEN.Tween(currentPosition) ... Tạo hoạt ảnh của đối tượng quay trở lại vị trí bắt đầu sau khi hoạt ảnh đầu tiên hoàn thành. const twSwayingBackAnimation = new TWEEN.Tween(currentPosition) ... Kết nối hai ảnh động để khi ảnh động đầu tiên kết thúc thì ảnh động thứ hai sẽ tự động bắt đầu. twSwayingAnimation.chain(twSwayingBackAnimation); Trong chúng ta gọi hàm khởi tạo hoạt ảnh. useEffect Bây giờ cần xác định thời điểm chuyển động xảy ra. Điều này có thể được thực hiện bằng cách xác định vectơ hiện tại về hướng của nhân vật. Nếu chuyển động của nhân vật xảy ra, chúng tôi sẽ làm mới hoạt ảnh và chạy lại khi hoàn tất. Giải thích mã: Ở đây trạng thái chuyển động của đối tượng được kiểm tra. Nếu vectơ chỉ phương có độ dài lớn hơn 0 thì vật có hướng chuyển động. const isMoving = Direction.length() > 0; Trạng thái này được thực thi nếu đối tượng đang chuyển động và hoạt ảnh "lắc lư" đã kết thúc. if (isMoving && isSwayingAnimationFinished) { ... } Trong thành phần , hãy thêm để cập nhật hoạt ảnh tween. Ứng dụng useFrame cập nhật tất cả hoạt ảnh đang hoạt động trong thư viện . Phương pháp này được gọi trên mỗi khung hình động để đảm bảo rằng tất cả các hình động chạy trơn tru. TWEEN.update() TWEEN.js Mã phần: Cam kết đầu tiên Cam kết thứ hai Hoạt hình giật lại Chúng ta cần xác định thời điểm bắn một phát súng - tức là khi nhấn nút chuột. Hãy thêm để lưu trữ trạng thái này, để lưu tham chiếu đến đối tượng vũ khí và hai trình xử lý sự kiện để nhấn và thả nút chuột. useState useRef Hãy thực hiện hoạt ảnh giật lại khi nhấp vào nút chuột. Chúng tôi sẽ sử dụng thư viện cho mục đích này. tween.js Hãy để chúng tôi xác định các hằng số cho lực giật và thời lượng hoạt ảnh. Giống như hoạt ảnh lắc lư vũ khí, chúng tôi thêm hai trạng thái useState cho hoạt ảnh giật và quay về vị trí ban đầu và một trạng thái có trạng thái kết thúc hoạt ảnh. Hãy tạo các hàm để lấy một vectơ ngẫu nhiên của hoạt ảnh giật - và . generateRecoilOffset generateNewPositionOfRecoil Tạo một hàm để khởi tạo hoạt ảnh giật lại. Chúng tôi cũng sẽ thêm , trong đó chúng tôi sẽ chỉ định trạng thái "shot" làm phần phụ thuộc, để tại mỗi lần chụp, hoạt ảnh sẽ được khởi tạo lại và tọa độ cuối mới được tạo. useEffect Và trong , hãy thêm kiểm tra "giữ" phím chuột để kích hoạt, để hoạt ảnh kích hoạt không dừng lại cho đến khi phím được nhả ra. useFrame Mã phần Hoạt ảnh khi không hoạt động Hiện thực hóa hoạt ảnh “không hoạt động” cho nhân vật, để không có cảm giác game bị “treo”. Để làm điều này, hãy thêm một số trạng thái mới thông qua . useState Hãy sửa lỗi khởi tạo hoạt ảnh "lắc lư" để sử dụng các giá trị từ trạng thái. Ý tưởng là các trạng thái khác nhau: đi bộ hoặc dừng lại, sẽ sử dụng các giá trị khác nhau cho hoạt ảnh và mỗi lần hoạt ảnh sẽ được khởi tạo trước tiên. Phần kết luận Trong phần này chúng tôi đã thực hiện việc tạo cảnh và chuyển động của nhân vật. Chúng tôi cũng đã thêm mô hình vũ khí, hoạt ảnh giật khi bắn và khi không hoạt động. Trong phần tiếp theo, chúng tôi sẽ tiếp tục cải tiến trò chơi của mình, bổ sung thêm chức năng mới. Cũng được xuất bản . ở đây