bjeaurn/gine

Typescript based game engine.

Gine

Gine is a HTML5 Canvas/JavaScript game engine, rebuilt for TypeScript with full type support.
It depends upon RxJS for some reactive features, like the frame(), tick() and second() functions on your scenes.

How to use

You will probably want to go to the /example/ folder.

In your favorite terminal run: (NPM required!)

• npm install
• npm start

You will be able to watch a basic implementation of the engine running in your browser.

You can also create your own project, setup your project the way you like it, and run

• npm init
• npm install gine --save

How to install (advanced)

If you want to tinker around with the engines internals, you may fork or clone this repository.

• git clone https://github.com/Bjeaurn/gine

Move to the directory, cd gine and run:

• npm install
• npm start

This will install the engine locally and build your own private version to tinker around with.

You could use npm link in this directory, and npm link gine in another project to link to your local build of Gine. Don't forget to relink and npm start when you've changed something in the engine.

Any issues fixed, features added or general improvements made? Let me know!

I'm at twitter/@Bjeaurn, or follow the CONTRIBUTING.md file to learn how to make a proper pull request.

gine's Issues

UI options are very limited

Very difficult and complicated to implement things like buttons, text like in DIV's.

Maybe take a look at https://www.createjs.com/docs/easeljs/classes/ButtonHelper.html to see what they do here. See if we can implement something similar, or explore ways to use the regular DOM within canvas?

Feature Request - Add ignore of WebStorm IDE config folder

I would like to add the .idea dir to the .gitignore file so the project level config files generated when using WebStorm do not end up as part of the changed files list for git.

imageSmoothingEnabled is defaulted to true, but might mess up some drawing with sprites

Gine.handle.handle.imageSmoothingEnabled = false

Feature Request - Add Jest testing framework

I would like to add a testing framework to the project to be able to write unit/behavior tests when adding/changing code for the engine. Was thinking of using Jest.

SpriteAsset doesn't calculate SourceXY values on init

Values are undefned until either draw() or calculatePerIndex() is called at least once.

Math2D Library is quite limited still

Math2D offers some basic functionality now for calculating in a 2D space.

Most functions now like degreesToXY and degreesToRadians would need a function to convert back, so XYtoDegrees and radiansToDegrees as well in the very least. And I'm sure there's plenty more functions to be thought off that are useful in a 2D environment.

SpriteAsset not setting width/height properly

Width and height are being set by the Asset class, which takes it from the actual image. But in the case of a sprite, we don't want the full width/height of the image; cause we're only using a small part of the actual image for our sprite.

The sprite width/height should be set and equal to sizeX and sizeY.

Maybe refactor sizeX and sizeY to actually reflect width/height, I'm not sure if they have a separate function within the class.

SpriteAssets are limited in functionality

Possible extended solution would allow a map of "positions" in a sprite. This way you can tell the sprite to draw/animate it in "idle" mode, or in "moving" mode, or "attack-1" etcetera.

This is currently not possible within the SpriteAsset architecture.