sessamekesh / sanctify-game

Open source browser-based MoBA style game

Sanctify Game

Warning For the time being, I've stopped working on this project, but I've kept it here as a reference (mostly for myself, I'm sure!) I don't see myself ever getting back to it, and I might take it down if I end up publishing the source code for other game(s) I've built that use this technology as a base.

Warning This project is still under development, and has known build / cross-platform issues. I'm publishing it as-is because it does demonstrate a lot of cool stuff around game programming with WebGPU.

Browser-based MoBA style game. This repository contains the full monorepo for the entire Sanctify project, including all server binaries, external dependencies, intermediate libraries, development tools, and web applications used for the Sanctify project.

Local Development

This project uses Docker Compose to make everything easier.

For developing the web frontend:

docker-compose -f docker-compose.yaml up sanctify-frontend-develop

Dependencies

• NodeJS and NPM
• Docker

For local development of WASM code:

• CMake 3.18+
• A C++ compiler

Directory Structure

This monorepo hosts several applications across different languages with different build environments. At the top level is a folder for each language/environment used, and inside of those is all the build/project/configuration files used.

• cpp/ hosts a CMakeLists.txt file and is the root directory for all C++ tools, libraries, external dependencies, and application entry points for C++ projects.
• ts/ hosts a Lerna monorepo of JavaScript/TypeScript projects.
• proto/ hosts protocol buffer definition files.

Project List

For each individual project, go to the appropriate subdirectory for build/running instructions.

[WIP] Building the web app

1. First, all Git submodules need to be pulled. To help with build times, this is not done automatically in CMake runs by default.

# From root directory
git submodule init
git submodule update

2. Second, Docker images for performing WASM builds must be built

cd ts/packages/pve-offline-wasm
docker build -f emscripten-builder.dockerfile -t sanctify-emsdk .
docker build -f llvm-builder.dockerfile -t sanctify-llvm .

3. WASM builds can no be performed as regular

cd ts
# TODO (sessamekesh): This command only needs to be run between builds?
yarn build --force
yarn dev

sanctify-game's Issues

Create v0.1 level geo

Finally, a creative task!

New map needs to have the basic layout described in the game design doc - long lane, towers in the middle, and a base with a shop.

Off to the sides should also be some level geometry to give visual perspective as the player scrolls - cubes and spheres are fine. These are static.

Integrate network connection and server workflow

MVP - negotiate a handshake, create an opaque and unique ID for the player, send player input over the wire and player position back from the server.

For local development, handshake can be a dummy, but typically the web server will notify a game server on startup what the player's game token is, and this game token is used to verify that the client is the player.

Since this is an open source game, there's no hope of making for sure for sure that there isn't a modded client (there isn't really a huge hope of that for native games either) - but you can still look into it

• Client/server comms are first set up with WebSockets, but will immediately attempt to negotiate a WebRTC connection as well

Fix weird web mouse movement failure

Right now, bottom/right movement using the mouse on web desktop are not working.

They need to work.

Probably something stupid - using the wrong coordinate system.

Platform test MVP

Make sure the MVP works on the following platforms:

• Good desktop
• Decent cell phone
• Crappy laptop

In a really happy world (where Chromium offers good WebGPU support) also test it on:

• Raspberry Pi
• The Tesla internet browser

Snapshots behave poorly on disconnect, have bad latency

There's a couple things in the first pass design that are wrong about how snapshots are sent, specifically:

• When a player disconnects, they should be marked for a full world snapshot on reconnect (no diffs should be sent)
• When a movement is registered, each client who has visibility on that player should be immediately marked to receive a diff

Mobile controls

Mobile controls use touch, and use it differently from click - zoom gesture for zoom, two finger swipe for pan, one finger press/drag for actions.

UI will also change the behavior of the one finger press/drag.

This logic will best be implemented in JavaScript and passed along to the WASM listener.

Game factory can accept a handle to an object that will construct, attach, detach, and destroy a mobile listener.

Figure out proprietary image storage

Since you're leaning into GCP:

• store in bucket somewhere
• script that uses google cli util to fetch the appropriate data to the appropriate directory
• user must have be logged in to an account that has access to the data, manage permissions in IAM
• Is it okay to make the resource IDs public? Or should those be a configuration thing too? Probably okay to be public.

WebRTC networking implementation

Basic networking is working in WebSockets, but WebRTC is the preferred protocol.

Implement aspect ratio locking to main game

Should be a simple change - the main game should be clamped to have an aspect ratio of between 4:3 and 16:9 to prevent weird presentation.

To do this:

• Clear the whole framebuffer to black
• Set the destination viewport to the appropriate middle area...
  • if the current framebuffer is already within the appropriate 4:3 to 16:9 range, use the whole thing.
  • If it's too tall, use only the middle area. Same with too wide.
• Be sure that the aspect ratio value being passed into projection matrices is correct after this change! It should not just be window.width / window.height!

Update Dawn library

Looks like another warning has snuck in - the WGSL language has changed again, and is replacing [[decoration]] style blocks with @decoration style annotations.

Implement basic character animations

This actually has a lot of sub-tasks:

• Import OZZ animation library, introduce to build
• Implement OZZ animation data in igasset proto (including schema/format)
• Update igpack-gen to export OZZ animation data
• Update IgpackLoader to extract OZZ resources
• Update Draco models to include bone data
• Update Draco igpack proto to include named link to bone data (optionally in same pack)
• Create animated geometry rendering pipeline / instancing / pass
• Add animation state as part of core game logic (animation enum + time - not actual bones!)
• Add system to use animation state to update bones for an animated model
• Render animated geo in final pass

Extern with FetchContent requires way too many downloads and too much time in configuration step

Switch back to using a submodule system - all this FetchContent garbage is way too resource heavy.

Share common buffers in shader

Right now, things like frame camera data and scene lighting data is duplicated in many GPU buffers across many descriptor sets (to leverage simple pipeline construction in the bind groups) - you still will probably need multiple descriptor sets, but they can point to the same underlying buffers.

Integrate Recast for navmeshes

Use the Recast library to generate navigation meshes, and implement character movement that stays within the bounds of the level geometry:

• Add Recast navmesh data to igpack proto
• Add igpack-gen step that reads meshes, and creates Recast navmesh based on input geometry
• Create GUI app to load level geometry and preview Recast navmeshes (and export igpack-gen proto to generate same navmesh)
• Add server build step to generate navmesh igpack on server build, and move to resources folder
• Add IgpackLoader extractor for Recast navmesh
• Implement server logic that takes a raw XZ plane click, finds the corresponding Recast location, and sends back to client both the click and waypoints list
• Leave comments on how to integrate Swarm later on for minions and other players