Displays Earthbound's battle backgrounds in your browser
This project acts as a library to render Earthbound's battle backgrounds. You can render the results in a browser or even on the server.
Earthbound, also known as Mother 2 in Japan, is a SNES game released in 1994. This project displays Earthbound's battle backgrounds. In order to render the frames, currently a Canvas 2D context is used. I'd be happy to use a WebGL 2 context once support is more wide-spread.
Yes. You can find a full-screen demo here.
[←]
and [→]
to change layer 1.[↑]
and [↓]
to change layer 2.If you edit the URL manually, you can also add/remove layers.
The source code for the demo can be found here.
$ npm i -S earthbound-battle-backgrounds
This code is more or less equivalent to the demo from above, minus the key events.
import { BackgroundLayer, Engine } from "earthbound-battle-backgrounds";
/* Create animation engine */
const engine = new Engine([new BackgroundLayer(153), new BackgroundLayer(298)], {
canvas: document.querySelector("#target-canvas");
});
engine.animate();
There are two exports in the package, namely BackgroundLayer
and Engine
.
constructor(entry)
Creates a new BackgroundLayer
displaying entry
.
entry: number
The index of the layer to render. It is bounded by BackgroundLayer.MINIMUM_LAYER
and BackgroundLayer.MAXIMUM_LAYER
.
constructor(layers, options)
Constructs a new Engine
, which can be used to render BackgroundLayer
s.
layers: Array<BackgroundLayer>
(default: []
)
The array of BackgroundLayer
instances to render.
options: object
An object containing rendering options.
options.fps: number
(default: 30
)
The framerate to render with.
options.aspectRatio: number
(default: 0
)
The aspect ratio to render with.
options.frameSkip: number
(default: 1
)
The engine is time-dependent and uses an internal clock that will be incremented after each frame. This number decides by which constant the clock is incremented.
options.alpha: Array<number>
(default: Engine.computeAlphas(layers.map(layer => layer.entry))
)
An array that specifies the opacity for each BackgroundLayer
in layers
. The default is to give each layer the same opacity so that all alphas sum up to 1
. Layer 0
is ignored, as it does not display anything.
options.canvas: CanvasElement
(default: document.querySelector("canvas")
)
The canvas element to render to.
static computeAlphas(entries)
Computes an array of alpha
values so that every valid layer gets the same opacity.
entries: Array<number>
An array where every number must be a number must be at least BackgroundLayer.MINIMUM_LAYER
, and at most BackgroundLayer.MAXIMUM_LAYER
.
rewind()
Resets the internal engine timer to 0
. This will cause all BackgroundLayer
s to be rendered in their initial state.
Nullary.
animate()
Runs the engine. This will cause frames to be drawn on the instance's canvas
.
Nullary.
A great portion of the code was essentially re-written. Essentially, this code…
computeFrame()
.romGraphics.drawTile()
.var
), but const
and let
.getX()
- and setX()
-style functions (cf. Java).registerType
etc.).LOG_TAG
variable-based logging.