Rather than treating the primary field as a 2d grid of 8-bit color values, a scene can employ a tileset. When this happens, the primary field is instead treated as a pattern table: each position is an index into the tileset. The renderer will render the scene by expanding each value in the pattern table into the corresponding tile graphic from the tileset.
const ra = require('raster');
ra.setZoom(2);
// Set the size of the field, but not the display
ra.setSize(10, 10, {fieldOnly: true});
let img = ra.loadImage('img/my_background.png');
ra.then(() => {
ra.useTileset(img, {tile_width:16, tile_height: 16});
ra.fillPattern([[0,5,0],[0,9,5],[5,0,0]]);
ra.run();
});
The field now works like a pattern table, where modifying it will now change which tiles are rendered, rather than changing pixels. All usual drawing methods will work.
const ra = require('raster');
ra.setZoom(2);
ra.setSize(10, 10, {fieldOnly: true});
let img = ra.loadImage('img/my_background.png');
let tids = [0, 5, 9, 25, 26, 21, 29, 28, 22, 31];
ra.then(() => {
ra.useTileset(img, {tile_width:16, tile_height: 16});
ra.fillPattern([[0,5,0],[0,9,5],[5,0,0]]);
ra.run(draw);
});
function draw() {
if (ra.tick % 20) { return; }
ra.setColor(tids[Math.floor(Math.random()*10)]);
ra.drawLine(Math.random()*10, Math.random()*10,
Math.random()*10, Math.random()*10);
}
TODO: Modify the tileset's pixel data, which changes all places that tile appears
TODO: Switch the entire tileset using setComponent
TODO: Swap a single tile from a list of tiles (does this work?)
TODO: How does sub-page banking work?
| Previous: Palettes | Table of Contents | Next: Colorspace |