search

axaq / traviso.js

Traviso is an open source JS engine that makes it easy to build isometric applications that run in a web browser.
MIT License
309 stars 42 forks source link

ground separates on mobile #4

Closed beanhedge closed 7 years ago

beanhedge commented 7 years ago

Hi, I'm testing your framework on my HTC one M7 with latest chrome browser. For some reason the ground seems to tear apart from the objects as my character moves. See here:

2016-09-02 15 48 42

axaq commented 7 years ago

Hi @beanhedge, this is odd. It very much looks like a rendering problem but I never had or heard of a similar problem before. I'll have a look as soon as I get my hands on a HTC one. In the mean time, Pixi.js had released a new version and I am thinking of upgrading to this latest version very soon. If it is a rendering-performance issue this might solve it all together. Thanks for the issue and please let me know if you see the same problem in any other device.

beanhedge commented 7 years ago

hey @axaq, thanks for looking into the issue. I dropped in pixi 4 and it worked just fine! Well, mostly. The blue A* path highlights don't fully expand, as shown in the above image. Unfortunately Pixi 4 didn't fix the ground tearing away problem :(

Also, traviso seems to be some performance problems when I tested it:

On a Galaxy S7 using 1920 x 1080 map size:

On an HTC one M7 using 1920 x 1080 map size:

Unfortunately I'm not skilled enough with Pixi to figure out what's causing the performance problems. I did find that this super basic example ran at 60fps on both devices: https://github.com/beanhedge/scroll

It's a shame because I think this is an awesome isometric framework!

axaq commented 7 years ago

Thanks for the positive feedback @beanhedge . I'll see what I can do. May be coming up with a less costlier version for mobiles is the answer here but need to do some benchmarking for that. In the mean time, you may want to try single ground image instead of tiles which might give a bit of a better rendering performance.

Single ground image tutorial

beanhedge commented 7 years ago

One thing I noticed during my testing is the FPS is almost perfect if I make the map really small. Does Traviso currently only render tiles on screen or does it render everything? Thanks!

axaq commented 7 years ago

The only way to tell Pixi not to render a DisplayObject is to make an element invisible or remove from the parent element completely. As for your question the engine doesn't calculate/reposition every tile in each move but it moves the container that holds all tiles instead. This provides some level of optimisation. I tried removing the tiles out of view so that they won't go to render, however the the amount of processing to find, remove and add back these tiles quite high especially for the big maps, which loses the point. However, I thought about creating a fog of war mechanic, where only the tiles and objects close to the focus of attention will be rendered. This is much cheaper in terms of number of calculations. But then again this is not for a general use, though may work for certain games. Might be a good idea to add this as a optional setting.

beanhedge commented 7 years ago

Thanks for the info. This is the algorithm I had in my head. Assuming you have a W x H viewport:

Is this what you meant by fog of war? I believe this will still eat a lot memory, but I feel like CPU is still the bottleneck on mobile. If you're busy, I might give it a shot if I have time this weekend :)

axaq commented 7 years ago

Yea, pretty much. It should be parametrised to handle zoom level and viewport dimensions as well. As I said this can only be an optional feature rather than the default behaviour for Traviso since it can't guarantee to show all tiles in the viewport all the time. But if it works for your purposes, and you want to give it a go, please do so, since I seem to be pretty occupied with other projects at the moment. I'll be more then happy to integrate it into traviso as a feature.

beanhedge commented 7 years ago

To close the loop on this: