[HTML5] Isometric Grid With Tile Hover

So I tried out HTML5 for the first time the other day and I hate it. Simple as that haha!

A little backstory: Whenever I learn a new language I have my own style of "hello world" that I use. When applicable, I make a mini tile engine. It's the best thing for me to see just how well the environment performs and lets me grasp some of the more advanced syntax early on to better understand the mindset required when using this language.

Javascript and HTML5's canvas is so meh, I really hated using it. The lack of any decent IDEs and the poor state of the standard at the moment (you have to create a completely seperate canvas simply to get at the pixels within an Image object) has really put me off developing in HTML5. What's funny is that this exact same tile engine implementation runs so much faster in Flash!

Anyway I figured it would make sense to release my source code for anyone that would like to better understand the theory behind isometry or maybe even continue with the project and make it something interesting.

For anyone who just wants to see the engine working, check out isocanvas.calumscott.com.

And for those that want the actual goods, enjoy:
[attachment=266]
To show your appreciation, feel free to like this post. If you have any questions etc, just leave a post in this thread!

I agree with you, is not fast to develope for canvas.
I've recently started making a bitmapdata lib for pixel manipulation on html5 and hasn't been as easy as I thought.

(07-12-2012 07:28 AM)Manxana Wrote:  I agree with you, is not fast to develope for canvas.
I've recently started making a bitmapdata lib for pixel manipulation on html5 and hasn't been as easy as I thought.

This. Although, canvas is young. Flash has hardware acceleration and have been out for years. I'm sure it'll be faster given time, and it'd be nice to create aload of classes that are similar to Flash's in HTML5/Canvas. Anybody up for a collab project?

Thanks for this, wanted to get into HTML5 Canvas and Isometric stuff in general. This will be of great help.

(07-12-2012 07:45 AM)fatman1 Wrote:  

(07-12-2012 07:28 AM)Manxana Wrote:  I agree with you, is not fast to develope for canvas.
I've recently started making a bitmapdata lib for pixel manipulation on html5 and hasn't been as easy as I thought.

This. Although, canvas is young. Flash has hardware acceleration and have been out for years.
...

I actually tested using Flash without hardware acceleration. If I was testing against Flash with hardware acceleration, Flash would blow HTML5 out of the water.

Although you're right that it hasn't been out as long. The only things that would get me back to using HTML5 technologies would be native AS3 support or, more likely, an AS3-to-JS parser (being super serious, javascript is fugly), decent frameworks (or again.. just support AS3), a big ass performance kick with hardware acceleration support and finally.. make HTML5 the first standard to be implemented consistently. Consistent AS3 implementation > fragmented-to-fuck JS implementation.

http://www.haxenme.org/
I've been working with haxe+nme for a couple of years and it's awesome, syntax similar to AS3 and you can compile to flash, js or c++.
I think this is the best way if you want to make a port for other targets besides flash. And from what I've read the compiled flash version of haxe code is faster than adobe's.

(07-13-2012 12:54 PM)Manxana Wrote:  http://www.haxenme.org/
I've been working with haxe+nme for a couple of years and it's awesome, syntax similar to AS3 and you can compile to flash, js or c++.
I think this is the best way if you want to make a port for other targets besides flash. And from what I've read the compiled flash version of haxe code is faster than adobe's.

Ah thanks! I've known about Haxe for a while but totally forgot it supports JS. Thanks!

Thanks for this!

Hey I've made my version of your IsoCanvas, I think the problem with the performance was the getImageData, it's really a performance killer I got 24-30 FPS when frame rate was setted to 60. Removing that now I get around 58-60FPS on my pc is not accurate at all on the hover tile without your xyToIso(), but I've added scrolling and some music for testing, and it runs really smooth on pc.

This is version is written from zero as I didn't understand the libs you used so I made a small thing for it to work, but it's the same math, maps and tiles you used.

Here you can see the demo:
http://shin.cl/isocanvas/

HTML5 is so dull and boring at the moment. Can not wait for more people to get involved with this language