Code Monkey home page Code Monkey logo

delaynomore's Introduction

Preface

This project is a demo for a websocket-based rollback netcode inspired by GGPO.

(the following gif is sped up to ~1.5x for file size reduction, kindly note that animations are resumed from a partial progress)

gif_demo

Please also checkout this demo video to see how this demo carries out a full 60fps synchronization with the help of batched input upsync/downsync for satisfying network I/O performance.

The video mainly shows the following features.

  • The backend receives inputs from frontend peers and broadcasts back for synchronization.
  • The game is recovered for a player upon reconnection.
  • Both backend(Golang) and frontend(JavaScript) execute collision detection and handle collision contacts by the same algorithm. The backend dynamics is togglable by Room.BackendDynamicsEnabled, but when turned off the game couldn't support recovery upon reconnection.

(how input delay roughly works)

input_delay_intro

(how rollback-and-chase in this project roughly works)

rollback_and_chase_intro floating_point_accumulation_err

1. Building & running

1.1 Tools to install

Backend

Frontend

  • CocosCreator v2.2.1 (mandatory, ONLY AVAILABLE on Windows or OSX and should be exactly this version, DON'T use any other version because CocosCreator is well-known for new versions not being backward compatible)
  • protojs (optional, only for development)

1.2 Provisioning

Backend/Database

It's strongly recommended that skeema is used for provisioning the required schema in MySQL instance. When using skeema the steps are as follows.

### Mandatory after an initial clone
user@proj-root/database/skeema-repo-root> cp .skeema.template .skeema

### Mandatory
user@proj-root/database/skeema-repo-root> skeema push

On Windows 10/11, you can compile skeema from source and config the host to be 127.0.0.1 instead of localhost to use it, i.e. circumventing the pitfall for MySQL unix socket connection on Windows.

Backend/Golang

user@proj-root/battle_srv/configs> cp -r ./configs.template ./configs

Frontend

user@proj-root/frontend/assets/plugin_scripts> cp ./conf.js.template ./conf.js

1.2 Actual building & running

Backend

### The following command runs mysql-server in foreground, it's almost NEVER run in such a way, please find a proper way to run it for yourself
user@anywhere> mysqld

### The following command runs redis-server in foreground, it's OK to put it in background
user@anywhere> redis-server

### on Windows using TDM-GCC: mingw32-make run-test 
user@proj-root/battle_srv> make run-test

Frontend

The easy way is to try out 2 players with test accounts on a same machine.

  • Open CocosCreator v2.2.1 (mandatory, it serves the web content of the following steps)
  • Open one browser instance, visit http://localhost:7456?expectedRoomId=1, input addon the username box and click to request a captcha, this is a test account so a captcha would be returned by the backend and filled automatically (as shown in the figure below), then click and click to proceed to a matching scene.
  • Open another browser instance, visit http://localhost:7456?expectedRoomId=1, input bddon the username box and click to request a captcha, this is another test account so a captcha would be returned by the backend and filled automatically, then click and click to proceed, when matched a battle(but no competition rule yet) would start.
  • Try out the onscreen virtual joysticks to move the cars and see if their movements are in-sync. screenshot-2

2 Troubleshooting

2.1 Redis snapshot writing failure

ErrFatal        {"err": "MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. Commands that may modify the data set are disabled. Please check Redis logs for details about the error."}

Just restart your redis-server process.

delaynomore's People

Contributors

genxium avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.