gamewriter v1.0.2

Why

A lot of JavaScript animation and game libraries like to offer ways to write text to the canvas graphically which is convenient but not always performant. GameWriter handles the ugly parts of writing on top of the canvas using the document so that you can have crisp, clean, and performant text on your game.

Fonts

Before we start, a quick message about fonts. In order to keep the performance high and avoid unnecessary events and callbacks, all fonts that you want used in your game should be loaded before using GameWriter. This means that you should have the links to the fonts defined in the head of the document or in the CSS so that GameWriter can focus on writing and not loading.

Table of Contents

• Installation
• Initialization
• API
• Text API

Installation

To install GameWriter, you can do so through npm like so:

$ npm install gamewriter

and then in your project, import it like so:

// Webpack
import GameWriter from 'gamewriter';

// Browser
import GameWriter from './path/to/gamewriter.js';

Initialization

To initialize GameWriter, you must at the very least pass a reference to the canvas element being used:

const canvas = document.getElementById('myCanvas');

const gamewriter = new GameWriter(canvas);

along with the canvas, the following options can be passed to GameWriter:

API

The following are the properties and methods available for use on an instance of gamewriter.

addText

Adds a new piece of text to the game.

example:

const title = gamewriter.addText('My Game', 100, 150, { size: 5 });

removeText

Removes a piece of text from the game.

example:

const title = gamewriter.addText('My Game', 100, 150);

gamewriter.removeText(title);

clear

Removes all pieces of text from the game.

example:

const title = gamewriter.addText('My Game', 100, 150);
const subTitle = gamewriter.addText('Its the best', 100, 200);

gamewriter.clear();

Text API

The following are properties and methods available for every text object created through addText. Any of the properties that have a setter also have a getter.

x

Sets a new x position for the text.

example:

const title = gamewriter.addText('My Game', 100, 150);

title.x = 350;

y

Sets a new y position for the text.

example:

const title = gamewriter.addText('My Game', 100, 150);

title.y = 350;

move

Moves the text to a specified (x, y) position.

example:

const title = gamewriter.addText('My Game', 100, 150);

title.y = 350;

size

Sets a new size for the text.

example:

const title = gamewriter.addText('My Game', 100, 150);

title.size = 3;

text

Change the text displayed.

example:

const title = gamewriter.addText('My Game', 100, 150);

title.text = 'My New Game';

setDynamic

Sets a piece of the text to be dynamic. This dynamic part of the text can then be easily changed with changeDynamic.

example:

const score = gamewriter.addText('Score: 0', 400, 50);

score.setDynamic('0');

changeDynamic

Change the text content of the dynamic text portion of the text.

example:

const score = gamewriter.addText('Score: 0', 400, 50);

score.setDynamic('0');

score.changeDynamic('5');

hide

Hides the text.

example:

const title = gamewriter.addText('My Game', 100, 150);

title.hide();

show

Shows the text.

example:

const title = gamewriter.addText('My Game', 100, 150);

title.show();

Tests

To run the tests available for GameWriter, use:

$ npm run test

License

MIT