Isogenic Engine: HTML5 Canvas Isometric Game Engine

[DigiParadise]

I'm very curious, how do you manage to get the animation to be so smooth? I've seen a number of animations done with Javascript and and they all seem very choppy

[coolbloke1324]

@DigiParadise Hey ya, that's strange because animation in JavaScript is usually very smooth. When was the last time you checked it out? The tech has moved on huge amounts in a couple of years!

[DigiParadise]

@coolbloke1324 Huh well I can't remember the last time I downloaded a package with the animations in it was, but the video tutorial I watched (mainly to see how it looked) the end result wasn't nearly as smooth as what you have here! Also, I can't seem to get my animations to work. Right now I'm at the point where I've drawn a box on screen and you can drag it around, but I can't for the life of me get the thing to drop if it's not at a certain position in the browser!!

[coolbloke1324]

@DigiParadise Drop me an email at rob{at}irrelon{dot}com and we can chat further. I'd be happy to help you get something animating smoothly, at least by pointing you in the right direction! :)

[DigiParadise]

@coolbloke1324 Alright, thanks! =D

[MrLegendman3]

This is the best html5 game i have seen for a while that is not 3D (that would be quake)

[Nijasan]

I hope you are working on a Syndicate clone.

[coolbloke1324]

@Nijasan Haha! That would be cool. Good old syndicate. I remember having to tweak my DOS config files just to get it to run on my old 486!

[guilloutube]

is it open source ¿¿¿

[coolbloke1324]

@guilloutube Sorry, no it's not. It does have a free license though!

Given the massive amount of time and effort I've single-handedly put into this, I don't want to just give the source away, at least not yet. I am considering options for how to allow for developer contributions and these may take the form of plugin modules that can be offered for free or paid.

[planetdarwin]

Can html5 canvas allow me to mask graphics? In Flash you can assign a mask graphic (PNG) to another graphic (PNG) and it will use the mask accordingly when drawing. I haven't seen whether HTML5 can do that?

[coolbloke1324]

@planetdarwin I see what you are getting at. Yes it is possible although I probably wouldn't recommend it in real-time with loads of updates per second but it can be done. There isn't a command to do it though, it would have to be written. You thinking worms clone?

[planetdarwin]

@coolbloke1324

I see that there is support to do masking but it's a little intensive on the processor. That sucks. I have a fully 3D isometric engine built in Flash (you can jump up on levels and go behind stuff, etc.), and want to port it over to HTML5 but this is limiting me. :(

[coolbloke1324]

@planetdarwin The box2d implementation I've added to Isogenic allows you to deform landscapes by "cutting out" another shape from it. I wonder if this might be a good substitute?

[zenimus]

I've been experimenting with similar technology, isometric canvas based game engines.. What I'm thinking of implementing is terrain (and therefore some concept of z-depth [possibly zbuffering for optimization??]) similar to Sim City 2000's engine..

[coolbloke1324]

@zenimus Hi, yes I had considered it and even did a few test versions where the whole tile map was a point map instead so that each point within the mesh could be given a z position so that mountains and hills could be made.

It's a feature that I fully intend on implementing once I have launched version 1 of the engine. Doing that sort of thing is actually really complex because it changes the nature of practically EVERYTHING in an engine. Sprite movement, path-finding, collision checking.

[coolbloke1324]

@zenimus PS, If you get this sort of thing working, let me know, I'd love to see your work!

[coolbloke1324]

By the way, if anyone viewing this has any suggestions for the kind of thing they would like this engine to do, let me know! I'm open to new ideas and suggestions from anyone with an interest in online gaming.

[devstar1965]

@coolbloke1324 Didn't think that kind of thing was possible with canvas. I saw a google tech talk that said canvas couldn't handle it.

[coolbloke1324]

@devstar1965 Yup, but that is not true. Many developers simply haven't attempted to use optimisation and rendering techniques that have been around for quite a while!

Canvas most certainly CAN do it and here are the videos to prove it!