earthbound-battle-backgrounds

An optimized rewrite of gjtorikian/Earthbound-Battle-Backgrounds-JS with cleaner code

What is this?

Earthbound, also known as Mother 2 in Japan, is a SNES game released in 1994. This project displays Earthbound's battle backgrounds in browsers. 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.

Is there a demo?

Yes. You can find a full-screen demo here.

• Use [←] and [→] to change layer 1.
• Use [↑] and [↓] to change layer 2.

The source code for the demo can be found here.

Installation

$ npm i -S earthbound-battle-backgrounds

Example

This code is more or less equivalent to the demo from above, minus the key events.

import { BackgroundLayer, Engine } from "earthbound-battle-backgrounds";
/* Create two layers */
const layer1 = new BackgroundLayer(153);
const layer2 = new BackgroundLayer(298);
/* Create animation engine  */
const engine = new Engine([layer1, layer2], {
    canvas: document.querySelector("#target-canvas");
});
engine.animate();

Project maintenance history

• In 2008, the code for this project started out on PK Hack as a Windows screensaver, written in C# by Mr. Accident. The source code has been published here.
• In 2010, gjtorikian ported Mr. Accident's Windows screensaver from C# to Java to support Android Live screensavers.
• In 2013, gjtorikian ported his own project from Java to ECMAScript 5 to support all devices with a web browser. He is well aware that his port is terrible (in fact, he even wrote a dedicated section in his README.md, just to reflect that).
• In 2016, I rewrote gjtorikian's port of a port in ES2015+ for it to stay maintainable.

How does this project differ?

A great portion of the code was essentially re-written. Essentially, this code…

• …provides a programmatic API instead of a GUI.
• …can therefore be consumed as a module.
• …offers a 34% lower memory footprint than the original project when rendering.
• …offers 15% more idle time
• …offers 23% less time spent in computeFrame()
• …offers an over 100% faster implementation of romGraphics.drawTile()
• …highly optimizes changing the background layers at runtime; the original version will show a white flash when you're trying to change it. This project doesn't do that.
• …uses ES2015 or later language standards.
• …doesn't use RequireJS, but ES2015 modules.
• …doesn't use functionally-scoped variable declarations (var), but const and let.
• …uses syntactical ES5 getters and setters instead of getX()- and setX()-style functions (cf. Java).
• …uses ES2015 classes.
• …removes UnderscoreJS-inspired functions and uses native ES2015 functions instead.
• …removes the weird and broken OOP model that had been introduced (registerType etc.).
• …removes notable comments such as ugghhhhhhhhh.
• …removes unnecessary brackets that were put everywhere
• …removes Node Express.
• …removes that weird LOG_TAG variable-based logging.
• …fixes pointer math (no more padding is needed).
• …fixes minor bugs.