Something's wrong Something's wrong

We don’t want your email. Just bear in mind that if you forget your password, you’ll need to create a new account

Something's wrong
Module updated. Check browser console for errors.
Create module
Update module
Close

yare.io

Documentation Modules
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
Unable to load window
Communication between client script and your game-playing code (server) is done via the
client
object
Unable to load svg Unable to load svg
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] = {
dots
‘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_draw
scale 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