HOME DEMOS TUTORIAL DEVKIT GITHUB

Scrolling

What is drawn to the field is not necessarily what ends up getting displayed. Raster.js has its own renderer that processes the graphics in the scene, and that renderer can be interacted with or modified in multiple ways. Probably the simplest is by modifying the scroll. This moves where the field is positioned relative to the display, wrapping around if needed.

const ra = require('raster');
ra.setZoom(2);

let img = ra.loadImage('img/my_background.png');
ra.then(() => {
  ra.paste(img);
  ra.run(() => {
    ra.setScrollX(ra.tick);
  });
});

Scrolling can be done both in the X direction and the Y direction.

const ra = require('raster');
ra.setZoom(2);

let img = ra.loadImage('img/my_background.png');
ra.then(() => {
  ra.paste(img);
  ra.run(() => {
    ra.setScrollY(ra.tick);
  });
});

The field wraps around if the scroll causes it to be misaligned with the display. Another approach is to construct another field with a size larger than the display, and scroll it such that different parts of that field appear over time.

const ra = require('raster');
ra.setZoom(2);
// Set the size of the display
ra.setSize(128, 128);

// New field for the large map
let largeMap = new ra.Field();
largeMap.setSize(256, 256);
ra.useField(largeMap);

// Load and draw the background map
let img = ra.loadImage('img/large_background.png');
ra.then(() => {
  largeMap.paste(img);
  ra.run(circleScroll);
});

// Scroll in a circular motion
function circleScroll() {
  ra.setScrollX(ra.oscil({period: 300, max:128}));
  ra.setScrollY(ra.oscil({period: 300, max:128, begin:0.25}));
};

Previous: Images

Table of Contents

Next: Sprites