gamewriter

1.0.2 • Public • Published

GameWriter

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

NPM version Known Vulnerabilities npm NPM downloads issues license Gitter

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

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

Package Sidebar

Install

npm i gamewriter

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

120 kB

Total Files

36

Last publish

Collaborators

  • robert.corponoi