Getting Started

Load your scripts inside the HTML head tag. p5.js must be loaded before Brass. If your game uses matter.js or REGL you can also load them before Brass.

<!--dependencies of Brass-->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
<!--Brass-->
<script defer src="brass.js"></script>
<!--your code-->
<script defer src="main.js"></script>

---

First of all lets use Brass.init() to start Brass in setup.

function setup() {
    Brass.init({/* settings here */});
}

---

We are going to make a chess board, for this we will use a P5Tilemap. Pass in drawTile, Brass will use this to draw each space on the board. In drawTile we use g.fill() and not just fill() so Brass can speed things up in the background.

tilemap = new Brass.P5Tilemap(8, 8, {
    // make the checkerboard pattern at x and y on g
    drawTile: function (_, x, y, g) {
        if (x % 2 === y % 2) {
            g.fill("black");
        } else {
            g.fill("white");
        }
        g.noStroke();
        g.rect(x, y, 1, 1);
    }
});

---

Next lets draw the chess board.

function draw() {
    translate(mouseX, mouseY);
    // zoom in to see the tilemap, by default each tile is 1 pixel wide
    scale(64);
    tilemap.draw();
}

---

Now we can put it all together.

let tilemap;

function setup() {
    Brass.init();

    tilemap = new Brass.P5Tilemap(8, 8, {
        drawTile: function (_, x, y, g) {
            if (x % 2 === y % 2) {
                g.fill("black");
            } else {
                g.fill("white");
            }
            noStroke();
            g.rect(x, y, 1, 1);
        }
    });
}

function draw() {
    translate(mouseX, mouseY);
    // zoom in to see the tilemap, by default each tile is 1 pixel wide
    scale(64);
    tilemap.draw();
}

---

We can also spice it up a bit, lets make a massive green and red chess board. This board has 4096 spaces, normally this would slow down p5.js. With Brass we can just change a few values in the options.

let tilemap;

function setup() {
    Brass.init();

    tilemap = new Brass.P5Tilemap(64, 64, {
        // save chunks of the board onto p5.Graphics objects to decrease draw calls
        drawCacheMode: "always"
        drawTile: function (_, x, y, g) {
            if (x % 2 === y % 2) {
                g.fill("green");
            } else {
                g.fill("red");
            }
            g.noStroke();
            g.rect(x, y, 1, 1);
        }
    });
}

function draw() {
    translate(mouseX, mouseY);
    // zoom in to see the tilemap, by default each tile is 1 pixel wide
    scale(12);
    tilemap.draw();
}