Presenting Kiflea: a 2D-based canvas game engine

Friday, July 23, 2010 - 12:08

Hi everyone,

I always wanted to learn JavaScript and write a game, so last week I decided to kill 2 birds with one stone and have a go at it.
I've been working on it pretty much non-stop. Only sleep, work and food got in the way (and I even forgot that last one a few times)

Of course: it's not so much a game as it is an engine. I want to write it as reusable as possible.

Having said that there is an example you can try out, it's here:

http://kipdola.be/subdomain/kiflea-working/

(It starts with a shot being fired and an explosion following, that's the test code for effects)
You can click around on the map and another avatar will find a path towards it and walk there. Do not click somewhere unreachable, though. It currently keeps on lucking until it dies :P
I've also done some basic HUD work. You can click a character and see how much life it has. You can click your own healthbar and get some more life.

Sorry: you can't kill anything yet.

All in all, I'm quite happy with my progress, especially because I've never really touched JavaScript before or written a game. It's the most fun I've had all year.

You can download the source from my repository here:

http://kipdola.be/trac/repos/

Any feedback, ideas, patches, ... they're all very welcome!

bart

joined 13 years 7 months ago

Friday, July 23, 2010 - 14:15

Hi!

Very nice work, particularly on the pathfinding. :)

I'm running Firefox 3.6.4 on Fedora 13, and there are 3 issues that jump out at me:

It looks like when you switch frames in the sprite animation, the old frame sometimes shows up below the new one, giving it kind of a trail effect.
I have to press the arrow key repeatedly to move.
Your z-ordering with entities is off. You probably want to sort your entities by ascending Y value before you draw them.

Peace,

Bart

skerit

joined 14 years 6 months ago

Friday, July 23, 2010 - 14:31

Thanks for the feedback :)
I actually was quite amazed at the simplicity of the pathfinding algorithm, I thought it would take me a few days to get it to work but it was only a few hours. Though I still have to switch from the Dijkstra algorithm to the A* one.

The repeated key-pressing is indeed annoying. Apparently, in windows a keydown event in javascript is fired constantly, whereas in Linux it's only fired once. (However, the same isn't true for Chrome, where it IS continuous).
I actually just have to use a keypress and that would fix it. (I'm running Ubuntu, so I actually have the same problem :P I'm only debugging it in Chrome because it's so lightning fast in there)

I believe what you're seeing isn't a ghost of the old layer, but of 2 layers not being in sync. See: my objects can have multiple layers on top of each other, but I think they get out of sync sometimes. I should fix that next.

What entities are you talking about? The characters? Because everything else is all layers with tiles.
You can have as many layers as you want, this map has a ground layer, a walking layer and a tree layer. But to test things I actually put a few stones on the tree layer, so that's why your head is sticking under them :P
You can open the maps up in tiled and take a look at them, if you will :)
But it's indeed confusing, I'll edit the map!

Thanks!

User login

Presenting Kiflea: a 2D-based canvas game engine