nicholasmordecai / lightning-js

Ligtning 0.5.7

A complete HTML5 game development library built on Pixi.js (4.4.1)

Getting Started

Lightning comes pre-packaged with a CLI that's easy to use, and aids in project setup and build tools. You are more than welcome to use your own build tools, and please feel free to fork the CLI if you do and we'll try and encorperate it into the main branch.

Prerequisites

• NPM - https://www.npmjs.com/get-npm
• Node - https://nodejs.org/en/download/

please note that the project was last built with NPM version 3.10.8 and Node version 8.9.3. It should work with earlier versions, but replicating any bugs might not be straight forward

Installing

Next, go ahead and install the project.

npm install -g lightning-js

To create a new project, run the command:

lightning create myNewProjectName

running the above command will create a blank slate. You will get all the build tools, folder structure, essential npm modules, however you won't find a single line of code in there.

To use of of the templates provided, please use the --template paramater:

lightning create myNewProjectName

there will be miltuple boiler plates coming soon, but for now don't use the --template flag and use the default template

Running your project

These templates use gulp to serve the game in development mode. Any changes to any of the files will result in the browser automatically being updated.

This was initially done with webpack, however in the best interest of keeping things light weight and easily configurable, I opted for gulp. I also had some issues when webpack was serving .svg files.

Starting the dev server

cd myNewProjectName
lightning dev

You can use the options like so:

lightning dev --port 7878 --watch false --browserify false

There are some options you can pass to the dev command:

• --port {number} default = 3000
• --watch {boolean} default = true
• --browserify {boolean} default = true

Building and Releasing

Running production builds are very important. Although you could release your game from the public folder that would have been created above, it will not be minified, uglified, version bumped, tested or wrapped.

These features haven't been developed yet!

To run a standard production build:

lightning build --production

lightning-js's Issues

Scene Manager Restart

When restarting the scene, class scoped variables are now being destroyed as the class is only ever instantiated once in the main.ts file.

UI Kit

Start work on building a UI kit that allows users to create things such as...

Toggle switches
Input fields
Scrollable Gallaries
Scrollable Lists
Modals / Popups
Buttons
Sliders
Check boxes
Radio Buttons

Scene Prepare Feature

Allow a user to pass a series of textures or texture ID's to the state prepare function. This will upload all of the textures to the GPU before the state's create or pre-create function is fired. This function should be async.

You should also be allowed to tell the texture cache to dump everything else to keep memory low.

Text Class SetAnchor

Add the setAnchor function to the text class.

Tween Create Typing Error

Tween create expects a display object, however this won't always be the case, so remove the parameter type within the tween class.

More Geometry Shapes

• Donut
• Trapezoid
• Arrow
• Pie
• Cloud
• Tear
• Cog
• Segment
• Crescent
• Callout Ellipse
• Callout Rounded Rectangle

Audio Not Loading

When loading audio, it doesn't want to load for some reason.

Particle Emitter Strength Change

Add feature to allow the strength to change dynamically over time.

Particle Emitter Emit Once

Create a function for emitting once or several times instead of as an interval.

Tween FPS doesn't work

Setting FPS on tweens no longer seems to actually change the FPS rate.

Audio Preload

In the preload phase of a scene, wait for the audio to be preloaded before continuing.

Event not found crashes game

Subscribing to an event that doesn't exist crashes the game. Should put the event creation function into a try catch.

Storage Temp Only & Remove All

Make some functionality that allows the storage component to differentiate using local storage, or keeping it as variable references only. Something like..
this.game.storage.set('myVarPersistant', 123, true); // uses local storage - will be there if player comes back
this.game.storage.set('myVarShortLived', 123, false); // uses local variables only - will get deleted when tab closed
Also make some functionality to remove storage items, something like.

this.game.storage.remove('deleteMe');
this.game.storage.remove(['deleteMe', 'deleteMeToo'];
this.game.storage.removeAll(true, false); // optional to remove only local or persistent storage items

No Scene Update

When using scene destroy, automatic calling of the scene update function stops working.

Link Sprites and Bodies

Make a link class to build a relationship between a PIXI Display Object, and a Box2D Body.

This would vastly speed up development.

Static Text

Create a static text bitmap from a text object

Particle Emitter Particle Life Span Doesn't Work

Clone Existing Tween

Write some functionality to clone an existing tween.

let clone = this.game.tweens.clone(tween, sprite);
clone.start();

Tweens

Need to start thinking about building a Tweening engine (need a name for it maybe).

Should implement the basic Robert Penner easing functions at a minimum.

The whole engine should be based around creating and storing frame data, not the entire tween.
Also, it should be possible to add a tween type to a sprite, so you can do something like..

sprite.tween('x').to(150);

Creating frames should be done either on the fly, or all at once.
Storing these frames in cache is a must.

Scene Restart

Ability to restart any scene at any point.

Multiple Events

Create a nicer way of creating multiple events. Something like..

this.events.create('event', 'event2', 'event3', 'event4');
-- or --
this.events.create(['event1', 'event2'];

Consider if it's better to pass an array of strings rather than an spread operator?

Either way will be much cleaner than:
this.events.create('event');
this.events.create('event2');
this.events.create('event3');
this.events.create('event4');

Internal Clock

Create a quick access tool to be able get the time. Probably should sit inside the utils?

Drag wont disable

When using enableDrag() on sprite drag does not disable on mouse up.

Particle Emitter advance Step

Write a quick function to step the particle emitter allowing you to create a scene with particles already emitting

Preloader too many items

When using the loader, if you're using an atlas, the loader increments by 1, however on complete gets called twice causing the complete event to be triggered multiple times.

Tween Delay Undesired Effects

When using delay on tweens, sometimes you get some nasty affects. Probably due to the elapsed time starts even when there is a delay, should be a simple fix.

Timers Run After Scene Destroy

A timer that is created within a scene, still runs after a scene is destroyed.
Consider if you should add a timer to a state, to ensure it's removed correctly, or leave it in userland to clear up their own timers.

Sprite Sheet Parser

Build a tool to strip out individual textures of a sprite sheet and place them into an array ready to be used as an animated sprite.

No SetAnchor on Text Class

Particle Emitter Wind

Add functionality for gravity shifting to emulate wind.

SpriteSheet Parser

Build a tool for parsing / cutting rectangles straight out of a sprite sheet.

Particle Emitter Max Particles Doesn't Work

Create Basic Physics Plugin

Create a basic physics plugin that consists of:

• Bounding box collision detection
• Gravity (Global / Local)
• Collision pool
• Pool Events (collide, over, out, outofworld)
• World Bounds / Box Bounds
• Drag
• Enable
• Disable
• Pause
• Collide Children

this.game.physics.createPool('key', sprite1, sprite2, sprite3...); this.game.physics.pool('key').add(sprite4 ...); this.game.physics.pool('key').remove(sprite4 ...);

Resource Loader / GPU Cache

Make a more comprehensive resource loader that allows an optional parameter to tell the loader to upload the texture to the GPU.
Also take care of things like:
Loaded time - remove after x time if it hasn't been used?
GC?
Global name caching.. remove it from the pixi texture cache and add it to a custom cache

This has been done very recently by the guys at pixi. Look at their Garbage Collection on the GPU.

Text class optional style parameter

Type error when preloading an asset

src/ts/scenes/preload.ts(8,43): error TS2345: Argument of type '"smoke1.png"' is not assignable to parameter of type 'string[]'.

Sprite Pool

Create a fairly comprehensive sprite pooling class for faster sprite creation.

Cannot access gravity on particle emitter

particleEmitter.gravity is not accessable.
Write a native getter for it.