Skip to content

Amaranthusss/react-game-prototype

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

[Full-Stack Web Application]

ReactJS / NextJS / ThreeJS Game Prototype [2023]

This repository contains prototype of a simple 3D game based on the ThreeJS.

Preview

Legend: 🐲 Front-End (client) 🌐 Back-End (server)

Releases:

v0.1.2 - Prototype (2023-05-06)

Bug fixes:

  • 🐲 Moved canvas objects from the game store to React references
  • 🐲 The NavMesh is stored at the game store
  • 🐲 The position of each unit is updated at the units store

New features:

  • 🐲 The user interface shows the selected unit's stats
  • 🐲 Green ring around the selected unit
  • 🐲 Creep unit follows the player unit up to the attack range
v0.1.1 - Prototype (2023-04-29)

Bug fixes:

  • 🐲 Restructured the project
  • 🐲 Optimized Zustand stores
  • 🐲 Removed unused cannon physics engine
  • 🐲 Refactores stores
  • 🐲 Isolated rogue model from hero component
  • 🐲 Entity manager moved to app store

New features:

  • 🐲 Scene loading indicator
  • 🐲 Each unit has YukaJS vehicle
v0.1.0 - Prototype (before 2023-04-24)

New features:

  • 🐲 Initialized UI prototype - ReactJS
  • 🐲 Prepared a simply 3D scene - ThreeJS, ReactThree
  • 🐲 Included path finding movement system - YukaJS
  • 🐲 Initialized units store - Zustand
  • 🐲 Started auto-targeting system
  • 🌐 Initialized backend server - NestJS, SocketIO

References:

GLTF/GLB to JSX

npx gltfjsx model.glb --transform


Main technologies:

🐲 ReactJS - A JavaScript library for building user interfaces.

🐲 NextJS - Next.js is a React framework that gives you building blocks to create web applications. By framework, we mean Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.

🐲 ThreeJS - Cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL.

🐲 React-three/fiber - React renderer for three.js.

🐲 React-three/drei - A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber.

🐲 React-three/postprocessing - Postprocessing wrapper for @react-three/fiber.

🐲 Yuka - A JavaScript library for developing Game AI.

🐲 Zustand - A small, fast and scalable bearbones state-management solution using simplified flux principles.

🌐 NestJS - A progressive Node.js framework for building efficient, reliable and scalable server-side applications.

🌐 SocketIO - Bidirectional and low-latency communication for every platform.

🌐 NodeJS - An open-source, cross-platform JavaScript runtime environment.

Planned technologies for a next steps:

SocketIO; NodeJS; ExpressJS; Prisma; tRPC; MongoDB; Bun;