Sprites are small pictures that can be placed independently from any layers in the scene. They are stored in a data structure called the SpriteList, and while this structure is in use by the scene, the sprites are rendered into place every frame. Modifying the data in the SpriteList will move the sprites, so they are controlled entirely through data, without needing any other function calls.
const ra = require('raster');
ra.setZoom(2);
// Load three images to be used as sprite character data
let imgObj0 = ra.loadImage('img/valgrind-obj0.png');
let imgObj1 = ra.loadImage('img/valgrind-obj1.png');
let imgObj2 = ra.loadImage('img/valgrind-obj2.png');
// Create sprite list component
let sprites = new ra.SpriteList(3, {chardat: [imgObj0, imgObj1, imgObj2]});
ra.useSpriteList(sprites);
// Set positions and character data
sprites[0].assign({x: 16, y: 48, c: 0});
sprites[1].assign({x: 32, y: 8, c: 2});
sprites[2].assign({x: 98, y: 66, c: 1});
// Draw the background
let img = ra.loadImage('img/my_background.png');
ra.then(() => {
ra.paste(img);
ra.run(draw);
});
// Drift the sprites horizontally a bit each frame
function draw() {
sprites[0].x = 16 + ra.oscil({max: 7, period: 200});
sprites[1].x = 32 + ra.oscil({max: 5, period: 177});
sprites[2].x = 98 + ra.oscil({max: 9, period: 325});
}
Sprites live on their own layer. Modifying the background, by scrolling it for example, will not affect the sprites.
const ra = require('raster');
ra.setZoom(2);
let imgObj0 = ra.loadImage('img/valgrind-obj0.png');
let imgObj1 = ra.loadImage('img/valgrind-obj1.png');
let imgObj2 = ra.loadImage('img/valgrind-obj2.png');
let sprites = new ra.SpriteList(3, {chardat: [imgObj0, imgObj1, imgObj2]});
ra.useSpriteList(sprites);
sprites[0].assign({x: 16, y: 48, c: 0});
sprites[1].assign({x: 32, y: 8, c: 2});
sprites[2].assign({x: 98, y: 66, c: 1});
let img = ra.loadImage('img/my_background.png');
ra.then(() => {
ra.paste(img);
ra.run(draw);
});
function draw() {
ra.setScrollY(ra.tick);
sprites[0].x = 16 + ra.oscil({max: 7, period: 200});
sprites[1].x = 32 + ra.oscil({max: 5, period: 177});
sprites[2].x = 98 + ra.oscil({max: 9, period: 325});
}
| Previous: Scrolling | Table of Contents | Next: Palettes |