LittleJS 1.28.0

Parallax

ParallaxLayer

A background layer with parallax: an image that follows the camera by a part of its movement and repeats across the view, drawn once into a canvas by a function, mountains when none is given

  • A far layer has a parallax near 1 and a low renderOrder, a near one a smaller parallax and a higher renderOrder
  • The image should meet itself at its left and right edges to repeat without a seam, as the mountains do

Extends CanvasLayer

Constructor

new ParallaxLayer(pos, size, parallax, renderOrder, drawFunction, canvasSize)parallax.js:33

Create a parallax layer and draw its image

pos Vector2 optional

Where the middle of the image is in the world when the camera is there too

size Vector2 optional

World size of one copy of the image

parallax number|Vector2 optional, default 0.5

How much of the camera's movement it follows, 0 stays with the world and 1 with the screen, a Vector2 to follow x and y by different amounts

renderOrder number optional

Low to draw behind the game, far layers lowest

drawFunction function optional

Draws the image, given the canvas context, its size in pixels and the layer; mountains when not given; called once when the layer is made and on redraw(), not each frame, so it draws with the canvas 2D context, not the engine's draws like drawTile

canvasSize Vector2 optional

Size of the image in pixels

// three ranges of mountains, the far ones lighter and slower
for (let i = 3; i--;)
    new ParallaxLayer(vec2(0, i*2), vec2(40, 20), .9 - i*.2, -1e3 + i,
        parallaxMountains(hsl(.6, .3, .7 - i*.2), hsl(.6, .5, .2), i));

// or draw your own image into the layer
new ParallaxLayer(vec2(), vec2(40, 20), .5, -1e3, (context, size)=>
{
    context.fillStyle = '#fff';
    context.fillRect(size.x/2 - 20, size.y/2 - 20, 40, 40);
});

Members

Methods

Inherited from CanvasLayer

Inherited from EngineObject

Members

drawFunction : functionparallax.js:69

Draws the image, redraw() after changing it

How much of the camera's movement it follows on each axis, 0 stays with the world and 1 with the screen

wrapX : booleanparallax.js:59

Repeat the image across the view, left and right

wrapY : booleanparallax.js:61

Repeat the image up and down the view

zoomFollow : numberparallax.js:64

How much the camera's zoom changes its size on the screen: 1 like the world, 0 not at all, the same on the screen at any zoom as it is at zoomScale

zoomScale : numberparallax.js:66

The camera scale its size is given for, used when zoomFollow is under 1

Methods

getDrawPositions() → Array<Vector2>parallax.js:95

Where each copy of the image is drawn now, in the world: one place, or with wrapping every place that shows in the view

getDrawSize() → Vector2parallax.js:90

World size one copy of the image is drawn at now, its size unless zoomFollow is under 1

Draw the image again with drawFunction, after changing it or what it draws from