Jump to content

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

Recommended Posts

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

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:


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 :)



I started writing a documentation.

xoxo, Chris

Link to post
Share on other sites

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?

Link to post
Share on other sites

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 :D


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 :D


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);
Link to post
Share on other sites

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.



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!

Link to post
Share on other sites

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.



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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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!

Link to post
Share on other sites

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.

Link to post
Share on other sites
  • 7 months later...
  • 5 months later...

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!

Link to post
Share on other sites
  • 6 months later...

Whoot, raising this topic from the graves of the board :D


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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...