GameWriter

GameWriter uses the document to write over a canavas for increased performance when using text in games.

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:

param	type	description	default
canvas	HTMLCanvasElement	The canvas to draw the text onto
options	Object
options.autoDisplay	boolean	Indicates whether text nodes are displayed on the canvas after they are created or if they have to be displayed manually.	true
options.classes	Array	Class names to add to each text node created.	[]

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.

param	type	description	default
text	string	The text to write onto the game
x	number	The x position of the text
y	number	The y position of the text
options	Object
options.size	number	The size of the text (1-10)	1

example:

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

removeText

Removes a piece of text from the game.

param	type	description	default
text	Text	A reference to the text object to remove

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.

param	type	description	default
newX	number	The new x position of for the text

example:

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

title.x = 350;

y

Sets a new y position for the text.

param	type	description	default
newY	number	The new y position of 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.

param	type	description	default
x	number	The new x position of for the text
y	number	The new y position of for the text

example:

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

title.y = 350;

size

Sets a new size for the text.

param	type	description	default
newSize	number	The new size of the text

example:

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

title.size = 3;

text

Change the text displayed.

param	type	description	default
text	string	The new text to display

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.

param	type	description	default
text	string	The part ofo the text that should be dynamic

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.

param	type	description	default
text	string	The text to display in place of the dynamic 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