ground separates on mobile
Closed this issue · 8 comments
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:
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.
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:
- 60 FPS while standing still
- 40-60 FPS while moving
On an HTC one M7 using 1920 x 1080 map size:
- 30 FPS while standing still
- 10-15 FPS while moving
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!
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.
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!
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.
Thanks for the info. This is the algorithm I had in my head. Assuming you have a W x H viewport:
- initialize all tiles as hidden
- Every few frames:
- spiral outward from the hero until you cover W + 2 by H + 2 and set hidden = false
- spiral a little bit further, (ex: W + 10 by H + 10) and set hidden = true to hide tiles you've moved out of
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 :)
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.
To close the loop on this:
- Using single ground image significantly improves mobile performance
- Implementing fog to hide/show ground tiles did not help as much. Fog to hide/show objects also does not seem to help much.