Rendering

Rendering with MooMoo.js API

THIS IS NOT DONE YET, I STRONGLY RECOMMEND YOU DON'T USE IT YET, SINCE A LOT OF THINGS CAN CHANGE.

Before we start rendering, I need to warn you that this is a very advanced topic.

The methods used to implement rendering are not very well made, basically I was reimplementing the game's way of rendering, and its not perfect.

Getting required information

If you plan on not using our built in functions, but rather want to make your own, you will need some information.

Canvas

First, you will need the canvas and its CanvasRenderingContext2D.

let canvas = null;
let ctx = null;

function renderingInit (data) {
    canvas = data.canvas;
    ctx = data.ctx;
}
MooMoo.addEventListener("renderingInit", renderingInit)

This code will set the canvas and ctx variables to the canvas and its context.

NOTE: The renderingInit event is ONLY called on the first time you join the game. So dont be curious if it doesnt work once you load into the page.

Offsets

Obviously, it works the same way.

let offsetX = 0;
let offsetY = 0;

function updateOffsets(x, y) {
    offsetX = x;
    offsetY = y;
}

MooMoo.addEventListener("updateOffsets", updateOffsets);

Render tick

To actually draw stuff, you will need to use the renderTick event.

The renderTick event is called every frame, after the game ran clearRect and before it draws the game.

function renderTick(offsetX, offsetY) {
    ctx.beginPath();
    ctx.arc(player.x - offsetX, player.y - offsetY, 10, 0, 2 * Math.PI);
    ctx.lineWidth = 5;
    ctx.stroke();
}

MooMoo.addEventListener("renderTick", renderTick);

This code will draw a circle around the player.

Using our built in functions

TODO.