Modules are components that add specific features and enhancements to yare.
This can be anything from UI controls, monitoring widgets, game rendering adjustments, camera controls, ...
Creating a module
After clicking on ‘Create module’, you will be presented with the module-editing mode
Communication between client script and your game-playing code (server) is done via the
client
object
See examples for a better idea on how to wire things up
Game-state information
The server sends data about the state of the game each tick via a websocket connection.
The client then consumes this data with a rendering engine that draws it onto the html canvas.
Websocket stream
~1–2 ticks behind 'real-time'
Pre-processed data directly from the server
incoming = {
Key
Description
Type
t
current tick - e.g. ‘7’
number
p1
[ [ id, position, size, energy, hp ], [...], ... ] – arrays of player 1 spirits data
array
p2
arrays of array of player 2 spirits (same structure as p1)
array
b1
base_zxq data – [ energy, current_spirit_cost, sight.enemies.length, control ]
array
b2
base_a2c data (same structure as b1)
array
b3
base_p89 data (same structure as b1)
array
b4
base_nua data (same structure as b1)
array
st
[ star_zxq.energy, star_a2c.energy, star_p89.energy, star_nua.energy ]
array
ou
[ outpost.energy, outpost.control ]
array
py
[ pylon.energy, pylon.control ]
array
ef
[ [ fragment position, energy ], [ fragment position, energy ], ... ] – arrays of fragments data
array
e
energize data – [ [ origin id, target id, beam strength ], [ ... ], ... ]
array
}
Processed data
~2–3 ticks behind 'real-time'
Processed data that are drawn onto the canvas
game_blocks[active_block] = {
‘t’ + tick
Key
Description
Type
p1[spirit_id]
[
[ new pos. x, new pos. y, direction x, direction y, prev pos. x, prev pos. y ],
size,
energy,
hp,
prev size,
prev energy
] array
p2[spirit_id]
same structure as p1
array
b1
base_zxq data – [ energy, current spirit cost, # enemies nearby, control, prev tick energy ]
array
b2
base_a2c data – same structure
array
b3
base_p89 data – same structure
array
b4
base_nua data – same structure
array
st, ou, py, ef, e
same structure as websocket data (table above)
array
Game objects
Client-side objects that are mirroring the actual game objects. Except that their values are render-time, not real-time.
Variable
Value
Type
spirits
Object with all spirit objects. Access by their ids (e.g.
spirits[‘jane_6’]
)
object
living_spirits
Array with all spirit objects. (contrary to the name... even the dead ones)
array
stars
All star objects in this order – [ star_zxq, star_a2c, star_p89, star_nua ]
array
bases
All base objects in this order – [ base_zxq, base_a2c, base_p89, base_nua ]
array
outposts
All outpost objects (there is just one)
array
pylons
All pylon objects (there is just one)
array
fragments
Array of all fragments – [ [ position, energy ], [ position, energy ], [ ... ], ... ]
array
Other useful variables
Variable
Value
Type
players
player1:
username,
player2:
username
object
colors
color1:
rgb color,
color2:
rgb color
object
shapes
shape1:
shape,
shape2:
shape
object
tick_local
tick that’s being currently rendered
number
Drawing on the canvas
Add a function into the
module_draw
object to have it picked up by the rendering queue —
see diagram and the second example
module_drawscale multiplier offsetX, offsetY main_canvas base_canvas
store your drawing function here! See example 2
current zoom level – value between 0.5–2
1 / scale
by how much are the canvas coordinates offset relative to the game board coordinates
contains only static stars and bases (unfortunate name). Context for it is c_base
all other game objects. Context for it is c
Examples
1. Explode spirit on click (triangles only)
client_script.js
server_script.js
2. Show direction line in front of your spirits
client_script.js
server_script.js