Light speed tile map renderer for HTML5 Games

[TheRealCutterSlade]

Hello there, 

 

I wrote a  lightning speed WebGL-based Tile Map Renderer and want to publish it now.
Here's a link to the project:

https://www.indiegogo.com/projects/tile-map-renderer-for-html5-games

 

 

I'm grateful for any contribution!

 

Thank you all!

[rich]

Sorry but why on earth would anyone contribute to that? There is no demo, no technical details, in fact nothing at all about how your renderer works. Just a title.

 

This is the sort of thing I would usually back, but not in its current state.

[AshleyScirra]

BTW your demo code isn't actually fully minified so a readable and usable API can already be extracted from it.

[rich]

Where did you even find the demo code Ashley?!

[AshleyScirra]

It's linked to from the indiegogo page: http://testmystuff.eu5.org/TMR/index.html

 

The JS code can be passed through jsbeautifier and most of the names are intact. Looks something like closure compiler's simple mode, so the API surface is not modified.

[rich]

Oh, the page has content on now. When I checked it several times earlier today it was completely blank - just the header and side-bar, no content.

 

"TMR has no fallback from WebGL, so it will only work on WebGL capable browsers, e.g. it will NOT work on Internet Explorer."

 

Really? IE has quite decent WebGL support now

[TheRealCutterSlade]

Thanks for your opinions.

 

 

Really? IE has quite decent WebGL support now 

 

Good to know. I'm gonna test this. 

 

 

The JS code can be passed through jsbeautifier and most of the names are intact. Looks something like closure compiler's simple mode, so the API surface is not modified.

 

Good to know, but obfuscation wasn't the focus here.  TMR is for people who can afford 20 Bucks and value saving of development time over fiddling around for hours just to save some Bucks.

[rich]

The demo works nicely - how good is it at handling large numbers of tiles being created / destroyed each frame? For example if you wanted to replace all instances of a particular tile in a region of the map?

[wayfinder]

Isn't that what numkey + and numkey - do?

[rich]

No that just adds and removes whole layers. I'm talking about manipulating the actual tiles within a layer - for example if you wanted an animated tile (some bubbling lava or something).

[ozdy]

"TMR was tested with maps up to 400x400 tiles with no notable performance hit. This is because it uses WebGL and only draws what your camera can see, so rendering time is independent from map size. "

 

I'm sorry, but isn't that trivial to code? Not to be a hater, but onscreen grid based tiles are easy to draw with 2 nested for loops.

 

Speaking of which I just wrote a fast 2D canvas tile map renderer that keeps drawn tiles in a buffer and only updates new ones on scrolling and that seems to be the fastest way (will post demo soon).

[TheRealCutterSlade]

Thanks for your interest, guys.

 

@rich: 

Sorry, no animation in there, but  a nice idea. Would probably need some tinkering to put in, but should be possible. 

 

@ozdy: 

I mentioned that because the middleware I researched beforehand didn't do any intelligent clipping. The 'optimization' was to pre-render a tile map and store it in a buffer, doing this step again when the camera moves. For someone coming from a GPU-programming background this is an awkward solution when you have so many better solutions just to clever combine static and dynamic data for the GPU.

[ozdy]

For canvas it's the best though. CPU blitting and WebGL gpu optimizations are very different from each other.

[TheRealCutterSlade]

ok.

[Joe Kopena]

For me the demo scrolls nicely in some sense but has unacceptable graphical glitches.  Check out the black bands along the left and top sides:

http://rocketshipgames.com/tmp/bugs/20140707-tmr-bug.png

 

These appear and disappear, causing the edges to flicker when scrolling.  When you stop scrolling they stay in place, so if you catch it at the right point in the flicker cycle you just wind up with a view like this.  If you scroll along the opposite axis from a band it remains blacking out the edge of that layer.  If I make the screen bigger the band is on the right side.  Depending on screen size the bands can be a bit bigger or smaller.

 

This happens for me in both Chromium 34 and Firefox 28, Lenovo laptop with some kind of Intel graphics chipset.

[TheRealCutterSlade]

@Joe: 

Thanks for your efford. Could not replicate it yet, but will have a closer look in case the campaign succeeds.

[rich]

Joe - that's a standard issue seen when a texture atlas doesn't leave any padding around the frames, probably not an issue of the tilemap system itself.