Opensourcing a Minimal, Promise/A based HTML5 canvas game engine (gamekit)

[Chris]

Hey guys,
I just wanted to share my work of yesterday evening with you. Maybe someone can make use of it.
 
gamekit
 

Minimal, Promise/A based HTML5 canvas game engine [/buzzwords]

Gamekit is a minimal approach to a game-engine using HTML5 canvas2D. Its implementing a couply of features I found necessary for games and don't want to implement over and over.
Also, since its based on Promises, it allows you to do supercool stuff like this:
 

gamekit.fetchAssets('assets.json').then(gameSetup).then(gamekit.start);

 
Currently implements:

• Promises! jay
• Asset Loader
• Module Loader
• Renderloop
• Layers support
• Sprites (rotate/stretch/repeatable)
• Property tweening on Sprites (absolute + relative)
• Entity Groups
• Keyboard input capturing
• Pointer (mouse, touch) input capturing
• Pointer area objects
• Detecting pointer events directly on sprites
• Text Label Objects

Docs are coming whenever I feel insane enough for writing them (and somebody is actually interested).
 
The engine is currently at ~16KB (without gzip).
 
Feel free to checkout the code, extend it and make pull requests! And try to keep it small
 
https://github.com/Paratron/gamekit

 

*edit

I started writing a documentation.

xoxo, Chris

[Chris]

Update! I added:

 

• Relative property tweening in addition to absolute property tweening
• Entity groups - place objects in objects in objects to rotate, scale, move and blend them together
• Keyboard input capturing

[Dream Of Sleeping]

If you write really clear instructions on how to use it. I'll make a game with it. I like the idea of just having the basics taking care of without doing to much. But I'm someone who needs super clear instructions, which most progammers seem totally unable to do. Maybe cause most of you are all too smart and don't need them yourselves! But maybe your target audience could be beginners.

 

Does this have code for animations?

[Chris]

I will write docs for that thing - I promise. Its just that I am currently in the middle of writing a bigger documentation for a library I created and I just cant write anymore docs at the moment

 

Yes, I thought a long time about how to implement animations in a nice way. Turns out that the promise based approach allows you to program animations in a smooth and readable way.

Look at this:

 

I created a element group "alien", with two elements in it: Body and Shadow of the alien.

Then I define a couple of animations, all stored inside function variables. Whenever you want to animation to be triggered, just call the prepared function!

 

The functions are tied to key inputs at the end of the script and the player can trigger them through key inputs

 

The gamekit.chain() method is used to queue up functions to be called when the previous function is finished.

The gamekit.parallel() method is used to execute functions, well - in parallel

 

So for the jump, I want to animate the aliens body up and down on the y axis, as well as its shadow growing and expanding at the same time.

 

The move functions should shift the character to left or right. Funny thing: I can recycle the complete jump function there to let the caracter jump to left and right

var alien,    moveRight,    moveLeft,    jump;alien = gamekit.m.setup.alien;jump = gamekit.parallel(    gamekit.chain(        alien.body.prepareTween({y: '-=100'}, 100),        alien.body.prepareTween({y: '+=100'}, 100)    ),    gamekit.chain(        alien.shadow.prepareTween({scaleX: 0.3, scaleY: 0.3}, 100),        alien.shadow.prepareTween({scaleX: 1, scaleY: 1}, 100)    ));moveLeft = gamekit.parallel(    jump,    gamekit.chain(        alien.body.prepareTween({rotation: -20}, 50),        gamekit.wait(100),        alien.body.prepareTween({rotation: 0}, 50)    ),    alien.prepareTween({        x: '-=100'    }, 200));moveRight = gamekit.parallel(    jump,    gamekit.chain(        alien.body.prepareTween({rotation: 20}, 50),        gamekit.wait(100),        alien.body.prepareTween({rotation: 0}, 50)    ),    alien.prepareTween({        x: '+=100'    }, 200));gamekit.input.onKey('left').then(moveLeft);gamekit.input.onKey('right').then(moveRight);gamekit.input.onKey('up').then(jump);

[Chris]

Hey folks

Altough you have mostly remained veeery silent, I'm just bumping this thread again with my last update

 

I just added pointer events and pointer areas to gamekit.

 

PointerAreas

They are much like conventional sprite objects, but wont be rendered visually.

You can add them to layers and/or Object groups - they will capture any clicks/taps on the pointer area:

var myPA;myPA = new gamekit.PointerArea();myPA.x = 50;myPA.y = 20;myPA.w = 100;myPA.h = 100;myPA.on('pointerdown').then(doSomething);

This is useful if you want to capture pointer events on a invisible area that you want to move around without a visual representation.

 

 

The pointer events update also enables you to capture pointer events directly on gamekit.Sprite objects.

Just call the pointerEnable() method on any Sprite to enable it for input capturing like it would be a pointer area.

 

Any positions, rotations or scaling is taken into consideration when clicks/taps are captured!

[Chris]

I pushed a few updates again.

 

Also punched a small demo together:

 

http://wearekiss.com/preview/gamekit/game1/

 

Notice the pixel-perfect click detection on the alien!

 

[benny!]

Nice one - but it might be useful to have access to the unminified source code of your example game1. Could be of some interest for potential users.

 

/EDIT:

Argh - just scrolled two posts up - and I guess there is the code for the example already. Shame on me.

[Chris]

The source is not minified

If you pay attention to the DevTools Networking tab, you will notice a couple of script files that get loaded.

 

By default, you really only need to create a canvas tag with a width and height property set, and a script tag, including gamekit.

Gamekit will automatically detect the canvas tag and connect itself to it. Then, gamekit will try to load the "main" module file, where you can set up your game.

 

 

By the way, I have another update: Implemented Text Label Objects.

[benny!]

Ah, alright discovered the source.

 

Maybe it's just me - but since this example is of promotional use for your lib - why not embed the code directly into the HTML file, like most other engines do it.

 

Anyway - saw the code. Syntax looks nice and clean!. N1!

[Chris]

I wanted a quick way to start with the development of a game.

Most engines need you to define a canvas element, maybe give it an ID and then telling the engine which canvas it should use exactly.

After thinking about that for some time, I decided that 99% of all games will run not in an environment where multiple canvases are present (running different stuff), so I abstracted that away.

I also decided that any game built with gamekit would require at least a "main" module.

 

This way, you don't need to decide what ID the canvas should get and how to link it with the engine and you don't need to place additional script tags to include your game logic.

 

But I know the engine really needs a couple of docs and maybe a getting startet tutorial, now

I will try and write all that stuff, soon.

[Chris]

A little note: I started writing a documentation for gamekit. I will write it in two languages (english, german), right from the beginning.

 

Find the docs here: http://wearekiss.com/lab/gamekit

[Chris]

Man, no update here for a loooong time

 

Well, I was very busy. I got married, spent some time in spain and had lots of work to do.

Luckily, I hat a few ours of time left on sunday and was finally able to continue my work with gamekit

 

I implemented Spritemaps! I wrote an article about them in the gamekit docs about general usage and defining animations. Feel free to play around with it and don't forget to post some feedback

 

And remember: every demo in the docs can be modified by you to test things out!

[Chris]

Whoot, raising this topic from the graves of the board

 

Gamekit is not dead. In fact, its currently very alive and gets a lot of development progress since I finally started building my first real game after years of just bubbling around in the community

 

Have a look at the updated documentation on http://wearekiss.com/gamekit

You can help with the development and documentation - both hosted on github.

 

As always - opinions and feedback is very velcome. The last thing I implemented and wrote about is the particle system.