What is WebAssembly? WebAssembly, initiated by Google, Microsoft, Mozilla, Apple, and others, is a new bytecode format that is already supported by major browsers. Unlike JS interpretation execution, WebAssembly bytecode is similar to the underlying machine code and can be loaded and run quickly, thus greatly improving performance over JS interpretation execution. WebAssembly is not a programming language, but a bytecode standard that needs to be compiled in a high-level programming language and placed in a WebAssembly VIRTUAL machine to run.

A brief introduction Panzr. IO

  • Games based on open source technology
  • useWebAs a publishing platform
  • Light and fast
  • Explore basic multiplayer techniques
  • extensionGoTechnical knowledge

Panzr. IO architecture

Panzr.io deployment architecture

Triebwerk profile

Project source code:

  • Github.com/awdng/trieb…

The Status of the project:

  • TriebwerkIs an open source multiplayer server
  • useGolanguage
  • It’s just a basic prototype at the moment

How does the game work?

Server Authority Architecture

  • Communicate only through the server
  • The client sends all input to the server
  • The server has the right to impersonate
  • Prevent cheating and introduce delays

Client prediction and server coordination

  • The earliest byQuakeWorldTo promote
  • Local simulated motion
  • Constantly synchronize with server state
  • Correct local state based on server state

Client-side interpolation

  • Network Update (UpdatesFrames per second (Frames)
  • Interpolation between past states
  • Conservative algorithms
  • No inference

Define the boundary

Limitations:

  • All game logic only in2DIn the space
  • Uniform surface
  • Input control via keyboard only
  • Limit map size
  • A slow-moving vehicle
  • No physics engine

Server implementation

Players move

Collision detection

Binary data transmission

  • Minimize resource usage
  • Preventing packet fragmentation
  • Minimize the impact of packet loss

WebAssembly module

Game Logic: Server -> Client

  • File size > 2MB
  • The server and client compute state according to the same logic
  • Data transfer by binary type

Compile:

GOOS=js GOARCH=wasm go build -o tanks.wasm cmd/wasm/tanks.go
Copy the code

Client:

<script src="/game/wass_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(featch("/game/tanks.wass"), go.importObject).then(result= > {
    go.run(result.instance);
});
</script>
Copy the code

Server:

js.Global().Set("updateNetworkPlayer", js.FuncOf(updateNetworkPlayer))
Copy the code

Code state in Go

posX := float32(30.457777)
posY := float32(10.336666)
buf := make([]byte.8)

binary.LittleEndian.PutUint32(buf[0:], math.Float32bits(posX))
binary.LittleEndian.PutUint32(buf[4:], math.Float32bits(posY))

var uint8Array = js.Global().Get("Uint8Array")
dst := uint8Array.New(len(buf))
js.CopyBytesToJS(dst, buf)
Copy the code

Decode state in Javascript

let dv = new DataView(state.buffer)
let posX = dv.getFloat32(0.true)
let posY = dv.getFloat32(4.true)
Copy the code

The online demo

panzr.io

Refs

  • www.youtube.com/watch?v=ZyG…
  • Github.com/awdng/trieb…
  • panzr.io
I am weishao wechat: uuhells123 public number: hackers afternoon tea add my wechat (mutual learning exchange), pay attention to the public number (for more learning materials ~)Copy the code