FrontierNav Update (2016-03-25)

Initial Segment UI & Fast Travel

This was one of the bigger features I wanted to push out. It was in fact the first feature I started and the reason I wanted to make this entire app. But I decided it would be the least useful so held back from it. That, and it took a ton of optimisation and cross-device testing.

• Added Segment UI view (navigate to it using the green button).
• Added some initial segment data. More to come.
  • Fast Travel button takes you to the Location view for location info.
• Various tweaks and fixes.

Tyrant Search, Precious resources, etc. will come in time.

Behind the Scenes

The Segment UI was fun to make but painful as hell. The fun part was mainly learning how to make hexagon grids and the end result.

The first pain was the sheer number of nodes and the shape. It made it impossible to make using HTML elements. Because there were images, I couldn’t use SVG either. So I ended up using Canvas via PIXI.js and spending time figuring out how to optimise rendering and interactions.

After that it took me a week (on and off) just to figure out how to perfectly align the grid. I ended up pretty much tracing this screenshot stitch of the entire map. Manually tweaking numbers until it mapped exactly to it.

The worst part of that was that the original image I was using for the map wasn’t fully accurate to begin with. I was constantly screaming “WHY WON’T THIS FIT”. Turns out it’s a magazine stitch where Sylvalum and Cauldros were slightly 2% larger and rotated approximately 7 degrees. Well, I don’t remember the numbers but it was extremely minute. Impossible to notice until I scaled and overlayed the accurate screenshot stitch.

Finally, all the differences between mobile and desktop interactions in canvas. There’s some really weird behaviours involving scaling and z-indexing on mobile which leads me on to…

Known Issues with the Segment UI

On Android using the latest Chrome browser (or at least on the Nexus 7), the Segment UI doesn’t render properly. It works, you can touch around the map and see segment info, but the rendering of the segments are massive and don’t scale correctly even though the interaction areas are where they should be; around NLA.

I’ve narrowed this issue down to WebGL. Using a regular canvas without WebGL looks fine but it’s slow as hell. If I can’t find a solution, I’ll just make it fallback to canvas.

Oh and it doesn’t work on WiiU. Doubt it ever will considering the WiiU Browser’s already poor performance. As long as the page doesn’t crash, I’ll probably leave it unsupported.