sh4rkman / SquadCalc

A Complete Mortar Calculator for Squad
https://squadcalc.app
Other
40 stars 8 forks source link

Over complexity #108

Closed Devil4ngle closed 11 months ago

Devil4ngle commented 11 months ago

Cool project. But wouldn't it be much easier to load 1 map jpg and using that on the canvas instead of splitting the maps in quarters and load them dynamically. Seems easier to mantain too

sh4rkman commented 11 months ago

Hey ! Cool OCR project btw

The tile system, while harder to maintain, has the advantage to only serve the needed tiles that the user is asking for, and for the zoom level needed (no need to load super high resolution images if the user if not zooming in anyway). Gmaps and other maps systems use a similar system to avoid loading the whole world each time you just want to check a specific road. Thats means a lot less of bandwith used, and the capcity to serve very detailed map at higher zoom level.

For example xyz serve a map of 4MB once at loading, while squadcalc load 4-16 low quality tiles for 940kb achieving the same goal, faster.

While zooming i can now serve high quality images for the specific place where the user want to look and for less bandwith : I'm currently working on upscaling the minimap extracted from the SDK from 4064x4064 to 16384x16384. Thanks to the tile system i can serve these high quality tiles at higher zoom level without making the user download the whole 1gb (!!) file :

image (left: xyz / right: squadcalc with AI upsaled tiles, WIP).

The only downside of tilelayering is that it's loading tiles on the fly while user is zooming/dragging the map, thus on slow internet can mean tiles appearing here and there. I'm using Leaflet.EdgeBuffer to make this less of an issue.

sh4rkman commented 11 months ago

On a code point of vue, tiles are actually easy to setup, i'm using Endebert (squadmc) GIMP script to split the image in tiles once, then i just tell leaflet where are located the tiles :

L.tileLayer("src/img/maps/fallujah/{z}_{x}_{y}.jpg").addTo(mapHolder)

Devil4ngle commented 11 months ago

Thanks for the insight! I can definitely see some advantages now.

Split image:

+ Less Bandwidth
+ Faster initial load of the page
+ Easier to load higher image resolution
- Complexity 
- Zoom in/out not that smooth 

One Image:

+ Smooth in/out zoom 
+ If the internet is unstable, as long as you stay on 1 map, it will work even offline.
+ Less Complex
- Initial loading slower depending on image size

It is debatable if higher resolution images are actually needed for using mortars. Both solutions are viable, although I am still a bit biased towards the one image. I might switch to your website for my OCR project in the future if you don't mind, mainly since squadmortar.xyz is not maintained anymore. Do you have a Discord account or something so I can keep in touch without opening a GitHub issue?

sh4rkman commented 11 months ago

Upscaled/high res map are absolutely useless for mortars, i'm just having fun/discovering new things :)

Feel free to open discussions here on girhub or pm me on discord : id:sh4rkm4n