Field
Palette
rgb map
Tileset
Colorspace
Screen Splits
Dip Switches
Info
Grid:
Pixel (x,y):
Tile (x,y):
TileID:
Field Value:
Cell (x,y):
Cspace Piece:
Palette Index:
Color:
Scroll X:
Scroll Y:
Split Number:
Pixel (x,y):
Tile (x,y):
TileID:
Field Value:
Cell (x,y):
Cspace Piece:
Palette Index:
Color:
Scroll X:
Scroll Y:
Split Number:
Pixel art by devurandom, used in accordance with Creative-Commons. See attribution here
Many systems, and even some modern games, operate using tilesets. Instead of having direct control over drawing pixels, the screen is treated as a strictly positioned grid. Positions in this grid must be filled in using tiles taken from a predefined set. This tends to lead to a rigid, blocky style.
Though this restriction limits the graphics significantly, it also has some advantages. Modifying the tileset directly can be used to easily update large portions of the screen at once. On many systems, this is highly efficient. Only a single pointer or memory bank needs to be switched in order to modify all tiles at once.
const ra = require('raster');
ra.setZoom(2);
ra.usePalette({rgbmap:[]});
let tile0 = ra.loadImage('/img/rpg_anim0.png');
let tile1 = ra.loadImage('/img/rpg_anim1.png');
let tile2 = ra.loadImage('/img/rpg_anim2.png');
ra.then(function() {
ra.useTileset([tile0, tile1, tile2], {tile_width: 16, tile_height: 16});
let field = new ra.Field();
field.setSize(10);
ra.useField(field);
field.fillPattern([[ 0, 0,18,19,20,21,19,22, 0, 0],
[ 0, 0, 0, 1, 1, 0, 1, 1, 0, 0],
[ 0, 0, 0,17,28,29,27,22, 0,11],
[ 0, 0,26,27,16,16,16,22, 0,11],
[ 5, 4, 8, 9, 9, 9, 9,10,11,11],
[ 0, 0,18,19,16,16,16,22, 0,11],
[37,35, 0,17,16,16,16,22, 0,11],
[32,33, 0,18,21,19,16,22, 0, 2],
[32,34,35, 0, 0,18,21,23, 0, 3],
[32,32,33, 0, 0, 0, 0, 0, 0, 3],
]);
ra.run(draw);
});
function draw() {
let c = Math.floor(ra.tick / 20) % 3;
ra.setComponent('tileset', c, {layer: 0});
}