Nice Game SDK

The Nice Game SDK is a lightweight HTML5 gaming engine that renders to <canvas> and supports the Web Audio API, media streaming, and an abstract input manager to help make the creation of mini-games, casual games, and playable memes as quick and simple as possible.

It doesn't care about your WebAssembly or [insert hipster deviation from JavaScript here]. It's a JavaScript engine. It's only a JavaScript engine. It's not even a super tricky JavaScript engine. It's the boilerplate nonsense you don't want to have to build from scratch in a JavaScript app or game with a frame rate that targets a <canvas>.

Installing

yarn add https://git.digitaltelepresence.com/digital-telepresence/dtp-nice-game.git

app.use('/dtp-nice-game', express.static(path.join(__dirname, 'node_modules', 'dtp-nice-game', 'dist')));

import { NiceGame } from '/dtp-nice-game/nice-game.js';

Working on Nice Game SDK Itself

If you want to fork or contribute, the easy way is to yarn link the project into the game you're using to host library development. Set up your fork of dtp-nice-game, and run yarn link in the project root directory. This informs Yarn that a named project is available for use in other projects on the local machine.

In your game/app directory, you can run yarn link dtp-nice-game. This will provide the module from your local project instead of from NPM or however you originally installed the module. This command does not alter package.json, it simply alters node_modules to use a symlink to your local project directory instead of being a directory with the module's contents.

For more information about yarn link, you can read the documentation.

NiceAudio

NiceAudio provides an abstraction of the Web Audio API and the DOM <audio> element. It can pre-load sounds and play them with unlimited polyphony. It can also stream background music tracks over HTTP so they start faster and load as they play but still have all Web Audio API features and control.

NiceEasing

NiceEasing defines a series of mathematical easing functions used by NiceTween but also usable by game and other code. It is primarily intended for use in animating the position and rotation of game objects.

NiceGame

NiceGame is the class from which you will derive your app or game's main class, implement an update and render method, initialize things how you want them, and then start the engine. From that point, you are called once per frame to update your game logic and to render your game's presentation. These are discreet phases of the update loop that discourage interacting with visual output during the update(s) of game objects. This is by design.

NiceGame uses requestAnimationFrame and measures the time elapsed between calls using window.performance.now, which has millisecond granularity but is also a real number and specifies fractions of them - so - yeah. It's a "high resolution" timer. And, the library uses it to compute the time elapsed between calls to update.

const now = performance.now(); // this frame's moment

const elapsedMs = Math.max(0, now - this.lastUpdateTime);
this.lastUpdateTime = now;

this.onGameUpdate(elapsedMs, now);

NiceImage

NiceImage is for things like background images and other images you want to draw in the game, but aren't necessarily a "character" that requires per-frame processing or physics processing. They implement a draw method, not a render method, to help distinguish them from game objects (which render and don't draw).

NiceInput

NiceInput provides an abstraction layer for accessing a variety of input devices to drive your game's input events and other needs. Input actions are used for button and key pressed, and input values are used for reading things like mouse and joystick axes.

You register keys, buttons, and axes by name, and the system does whatever is needed to inform you about the present state of the registered item. You don't have to worry about DOM events, the Gamepad API, or any of that. You just register what your game needs, then read the current state of your inputs during your game's update processing.

NiceSprite

NiceSprite does not extend NiceImage, but it uses them. A sprite is a kind of game object that can have a position and other state, and is commonly used to represent the player, game characters, and other interactive elements in the game or app.

NiceTween

NiceTween interpolates the properties of an object over time with an easing function. If they are created by calling NiceGame.createTween then they are automatically registered for per-frame updating based on game time. You can also create them manually and update them yourself on your own time scale. NiceTween uses performance.now as it's time source.

const tween = this
  .createTween(
    this.player.position, // object to be manipulated
    { x: -50, y: 32 },    // from/starting property values
    { x: 480, y: 200 },   // to/ending property values
    NiceEasing.Bounce.Out // easing function
  )
  .delay(1000.0)
  .duration(2000.0);
tween.run();

The from and to property lists must match, meaning there must be a field in the to object for every field in the from object, or the library will throw an exception.

NiceTween works on dynamic from and to objects. If either from or to are changed while NiceTween is running, it's animation is effected and it will arrive at the current to location...even if it changes. This lets you set to as an object's current position, and launch a "missile" that will hit it no matter where it moves while the missile is in flight.

NiceLog

NiceLog is an override of console.log that generates formatted output and can perform other functions. NiceGame creates a NiceLog for it's own use, your application can create one or more for it's own use, and they can each have their own configuration. NiceLog is the reason you see color-highlighted and context-aware messages printed to the browser console while a NiceGame is running.

Optional Nice Things

The following are not required, but can make your day nicer.

Fira Code (font)

Visit https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions to learn about fonts, font ligatures, why they can make reading code better, and how to install and configure the font on your system for use with your favorite editor.