Skip to main content
gamedev.net
🔒 Locked

HTML5 Game Engine

Started by kurtkz Nov 10, 2011 at 2:07 PM 9 replies 3.4k views
Original Post
kurtkz
kurtkz
Hi,

this is a simple platformer demo I made with my HTML5 engine. It can be played here. Screen size and scaling can be controlled via query parameters:

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

An overview of the engine and supporting tools:

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
- local storage
- bitmap fonts
- animated sprites
- maps
- gesture "maps"
- virtual pads/analogue sticks

Cheers
Kurt

Click here to view the iotd
Sirisian
Sirisian
Good start.

For performance I'd recommend rendering your map and anything that doesn't change to a large non-rendered canvas object then you can draw the map each time in one draw call with put image data. Right now the performance seems really low 16/30 fps and I'm on a fairly good computer.

Is the character sliding on purpose? Also I can jump through blocks. That seems like a flaw. I didn't look at your source, but I wrote this as an example for someone a while back on how to render tiles in a simple way. (My tile collision stuff is a hack in that demo).
kurtkz
kurtkz
@Sirisian: Thanks for checking out the demo. Yup, static, non-animated tiles are compiled into static bitmaps at load time. Also, I set the friction on the tiles very low which is why the character slides Also, some blocks can be jumped through - I was testing out maskable edge collisions so that you can have platforms you can jump through and land on
kurtkz
kurtkz
@Sirisian: Also, the 16/30 framerate is because I set minimum frameskipping to 1
kurtkz
kurtkz
Performance might also take a hit because of all the pixel filters I'm applying - TV scanlines + circle fade + tint...
Scarabus2
Scarabus2
I can't see any blocks when I play it in Chrome.
Oh, it worked when I loaded the page a second time. Yeah, HTML5 is awesome...
visualnovelty.com - Novelty - Visual novel maker
kurtkz
kurtkz
@Scarabus2: Yeah, I still haven't quite figured out why it doesn't show on the first load. It's definitely on my to-do list though...
HappyCoder
HappyCoder
That looks pretty nice. It kinda reminds me of a project I did/am doing in HTML5.

As for the first load problem. My guess is that you are trying to use the images before they are finished loading. You may need to use the onload event for the images to alert you when you should load and run the rest of the game.

Good work though, that is looking good.
My current game project Platform RPG
kurtkz
kurtkz
@HappyCoder: Thanks, much appreciated I do actually check the onload event - but I guess I'm doing something wrong. Will have to debug some more
Desdinova
Desdinova
That's soooo cool (...but worste perfomances)!
Creazione siti internet, Sviluppo web, Indicizzazione e SEO : www.desdinova.it
kurtkz
kurtkz
@Desdinova: Thanks I'll upload a version later today without all the filters. That should fix performance problems people are having. Alternatively try the demo at this link.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.