PDA

View Full Version : HTML5 Game Engine



kurtkz
07-07-2011, 02:02 PM
Hey all,

I've been working on an HTML5 engine for a while now and have just recently started making tools and demos for it. So far this is what's done:

Tools

- bitmap font editor
- sprite/animation editor
- level editor

Engine Features

- profiling
- customisable splash and loading screens
- cookie support
- dynamic frameskipping + frame limiting
- dynamic resource loading
- multi-channel audio (on supported browsers)
- bitmap virtual pads/analogue sticks
- simple gesture support
- bitmap fonts
- animated sprites
- particle systems
- multiple cameras (zooming and panning)
- multilayered rendering with parallax scrolling
- background tile optimizer
- AABB physics (customisable hit boxes)
- customisable waypoints with interpolation
- multiple input methods: single/multitouch, mouse, keyboard
- per-pixel screen filters (TV, tint, circle fade, greyscale, sepia, posterisation, pixelate, shockwave, swirl)
- triggers (area, time, property)
- screen transition effects (fade in/out, wipe left/right/up/down, tween from/to)
- screen snapshots

Supported Resources

- object serialization to cookies and back
- bitmap fonts
- animated sprites
- maps
- gesture "maps"
- virtual pads/analogue sticks

Supported Browsers

Internet Explorer 9
Mozilla Firefox 4/5
Google Chrome
Safari
Opera Mobile
Android Browser
Mozilla Firefox Mobile

DEMO

Platformer Demo (http://www.bytelockergames.com/demos/platformer/src/newTest.html?w=3&h=3&cw=160&ch=120&touch=0)

Cheers
Kurt

kurtkz
21-09-2011, 11:18 AM
Hi guys,

apologies for the long delay; work's been crazy. As promised some screenshots:

http://bytelockergames.com/img/screen1.png

http://bytelockergames.com/img/screen2.png

- number in lower-left is number of entities rendered
- number in top-right is frame rate

DISCLAIMER: Sprites are from the TIGSource comp. Also, I know the demo isn't the best example of what the engine is capable of, but if anyone would like to collaborate on a proper demo, you know where to find me :)

I'll post screenshots of the editors later...

kurtkz
22-09-2011, 12:24 PM
As promised, screenshots of the editors - nothing much to look at just yet, but they work :)

Level Editor

http://bytelockergames.com/img/tool1.png

Font Editor

http://bytelockergames.com/img/tool2.png

Sprite Editor

http://bytelockergames.com/img/tool3.png

Cheers
Kurt

kurtkz
25-09-2011, 04:22 PM
Updates

- implemented multiple camera system with panning and zooming
- added customisable hit boxes per sprite frame (support for this in the sprite creator as well)
- bug fix in tile optimiser for parallax layers
- speed optimizations

herman.tulleken
25-09-2011, 07:01 PM
Hmmm, I am very interested in your editors... Are they also browser-based, or standalones?

And... are they available for testing? What are your plans for release?

ht

kurtkz
25-09-2011, 07:20 PM
@herman: The editors are all in .NET unfortunately - I figured I could knock out editors much quicker in C# than JS. Hmm, I could upload the editors, but I haven't tested them comprehensively yet...if you're willing to put up with random crashes (I haven't experienced any yet btw) I could upload them :)

As for proper release plans, I still want to implement more features in the engine and develop a few more demos. At the very least it should be as complete as Flixel and FlashPunk. Hopefully I'll have something to show in the next month or so depending on how much free time I have.

Cheers
Kurt

kurtkz
25-09-2011, 10:48 PM
Updates

- implemented waypoints and interpolation with rotation (linear/cosine/cubic)

Need to come up with a user-friendly way of editing these in the level editor...

kurtkz
26-09-2011, 08:32 PM
Updates

- added path editing to level editor (it's horribly cludgy)
- entities can now be linked (necessary for moving platforms)

Insomniac
28-09-2011, 11:24 AM
This looks really interesting!

Are you planning to make it open source?

kurtkz
28-09-2011, 07:07 PM
@Insomniac: I'm not too sure at this point - I'd love to release a commercial product, but I realise how stiff the competition is. If I run out of puff I'll definitely release the source code (as-is though).

kurtkz
07-10-2011, 08:02 AM
Updates

- added more control to paths (collision behaviour, wake-up time)
- fixed collision detection & resolution
- fixed simple non-rotational rigid body physics

Planned

- update editors to reflect changes to physics and pathing
- implement per-pixel screen filters and chaining

kurtkz
07-10-2011, 12:06 PM
Simple TV scanline filter...

http://bytelockergames.com/img/filters.png

edg3
07-10-2011, 03:19 PM
Where can we see it in action?

kurtkz
07-10-2011, 03:44 PM
@edg3: Hopefully soon-ish. I'm aiming for somewhere closer to month-end. Ideally I'd have a bunch of toy games for people to play with, so if anyone has an ideas they'd like to see - you know where to find me :)

kurtkz
07-10-2011, 03:45 PM
Chained filters: TV + tint + circle fade =

http://bytelockergames.com/img/filters2.png

kurtkz
08-10-2011, 09:32 PM
Updates

- optimized physics
- added camera controllers (pan, zoom, shake)
- updated level editor

kurtkz
08-10-2011, 10:01 PM
Video of the platformer demo (the video screws up midway through, but it corrects itself):


http://www.youtube.com/watch?v=bZ7z_i4XBpM

kurtkz
09-10-2011, 09:54 PM
Updates

- improved dynamic frameskipping
- implemented frame limiting
- added triggers (area, time, property)

To Do

- update level editor to support triggers

kurtkz
11-10-2011, 12:44 PM
Updates

- implemented sweep & prune for physics
- optimized physics and object creation
- added adhoc rules for frameskipping/limiting for mobiles (automatic detection)

kurtkz
11-10-2011, 10:50 PM
UPDATES

- added screen transition effects (fade in/out, wipe left/right/up/down, tween from/to)
- can take snapshots of current game screen

kurtkz
13-10-2011, 10:58 PM
UPDATES

- refactored some physics code
- added edge maskable collisions (e.g. for use with platforms you can jump through)

kurtkz
14-10-2011, 03:50 PM
UPDATES

- added game properties (scripts) to entities
- updated editor to support properties

kurtkz
18-10-2011, 03:25 PM
Got sidetracked converting GLSL post-processing effects to the engine *doh*:

- pixelate
- shockwave
- swirl
- posterisation

Back to engine dev...

kurtkz
01-11-2011, 11:27 AM
Apologies for the radio silence, but real life (TM) got in the way of dev work :P

There's a simple demo here:

http://www.bytelockergames.com/demos/platformer/src/newTest.html?w=1&h=1&cw=160&ch=120&touch=0

what the query parameters mean:

w = scale width (integer from 1 - x)
h = scale height (integer from 1 - x)
cw = internal width
ch = internal height
touch = enable touch controls (0 or 1)

Controls

left/right - arrow keys
jump - up
double jump - up + up

Features

lots of stuff...feel free to ask for details.

Cheers
K

kurtkz
12-11-2011, 11:49 PM
Hi all,

small update:

- fixed some bugs
- sprites can now be mirrored
- added 2.5D physics engine implementation (currently using this to build a side-scrolling beat 'em up demo)

Cheers
Kurt