Can Riot release a League Universe Map; Atlas Edition?

DragonAbode·Jan 18, 2020·2 votes·8,456 views

Would you like A Map of Runeterra to hang on your wall, or perhaps just your favorite region? Maybe you want to trace, on a map, everywhere Ryze has traveled. Or would you like to take notes, on a map, of where all the champions of Runeterra are? Or where/when stories take place. If those are of interest to you, Or if you've ever wanted to look them up and see if someone has already made these, its sadly not easy to do, or find. Ya see, I really like the Universe map! It's an Awesome provision! I use it all the time, and love the stories written in that world. But currently there aren't any detailed images of the entire map, available for the creative process Sadly the only option I know of currently is to take screen captures of the web browser, and it's not very effective either.

I know the site uses some sort of panning 3d map, with an angled camera perspective. It's awesome for exploring the world of runeterra, but it doesn't quite work for some of my purposes. If it's possible, I would really like a top down version, like a proper image, that I can use for an actual map of Runeterra. To elaborate on my personal reason for asking, I want to use a map of Runeterra, as the setting for my dnd campaign but... there isn't any detailed... top down... properly proportioned... version available.

A big picture screen capture, doesn't have detailed towns, or geography. A close-up screen capture, has a landscape orientation that disproportions the map, and also little interaction buttons all over the place. I wouldn't ask for this if it was easy enough to just stitch close up pictures together, but here's my attempt to stitch Shurima... It was difficult, incomplete, and tough to read, and messy... not very useful

Anyway... I know that Riot makes changes to the map, They add interactive stuff to it and that's cool. But perhaps, they could also provide some kind of "Atlas" version to go along with it? Thanks for your time, and attention. Let me know, would anyone else like Riot to provide this for the community? Best, DragonAbode

6 Comments

LordRedStone Nr1Jan 18, 20205 votes

I basically did the same thing you tried, but better. The map is using tiles with different LoDs, as you can see when zooming and scrolling quickly. I simply grabbed the files the website is using to generate the 3D view and stitched them together with a simple program I wrote myself. Unfortunately, there is a shadow where the models should be (i.e. the capitals and landmarks), so either you have to live with that or use the version where I photoshopped them over it. Here are the results:

Small terrain map: 2048x2048, no shadows https://cdn.discordapp.com/attachments/459462117549146124/548286826629300224/map_small.jpg

Large terrain map: 8192x8192, with shadows https://cdn.discordapp.com/attachments/459462117549146124/548287210957570048/map.jpg

Large map with cities: 819x8192, with mediocre screenshots photoshopped over the shadows. https://cdn.discordapp.com/attachments/459462117549146124/548309536646103040/map.jpg

The last two are missing Ixtal, since I made them in early 2019. That shouldn't be a problem with the 2nd one since the shadow is also missing, but eh. Might make a new one, now that you reminded me of it.

DragonAbodeJan 19, 20202 votes

You are Awesome! This is what I've been looking for, and I appreciate you bringing here. I'm pretty excited now to start using this

I think it's awesome that you're tech savvy enough to pluck the files out of the website, and run them through your own program to visualize them, but it's too bad that it takes that much work to get it. Hopefully Riot can provide something for the laymen of the community.

Evenstill, You took the initiative! Thankyou very much. You should post that somewhere with more through-traffic. I couldn't find anything like it with a google search, and I bet there are others out there that have gone looking for it also ps. If you do update it, would it be possible to add City names onto it also?

LordRedStone Nr1Jan 19, 20201 votes

Thank you!

Getting the files itself is not hard, but then you are left with 64 images (1024x1024 each). So I decided to automate the image generation. If you want to see them for yourself, you can go to the website, press F12 or whatever opens the Dev Console in your browser, then go to the sources panel. Find the correct server (there are a lot of hosts for 3rd-party tools, but we are only interested in lolstatic-a.akamaihd.net) then search the folders. There are a lot of interesting assets there, but the tiles are under images/tiles/en_us

https://lolstatic-a.akamaihd.net/frontpage/apps/prod/universe-map/en_US/58c9aeb77ffc8ea44a3d723fd2e0ccc964f3444b/assets/images/tiles/en_us/terrain_z2_27.jpg

For the city names: I'm afraid I can't automate that. As you can see, there are different types of text on the map. There are ground labels like regions, mountains, forests. They are already on the tiles, so adding them is no work. (Removing them would be, though). Cities and Landmarks are harder though, since they are clickable and generated in a different way. Sorry.

C meJan 19, 20201 votes

Interesting how you got the site files, I was wondering, how does it turn the 2D image into 3D? It looks like only some bits of it are 3D and it seems to be based on position and zoom distance of course.

LordRedStone Nr1Jan 19, 20201 votes

They are using WebGL to render the map, which is still too complicated for me. There is a height map, and then the textures I already showed you are layered over that I guess.

https://lolstatic-a.akamaihd.net/frontpage/apps/prod/universe-map/en_US/58c9aeb77ffc8ea44a3d723fd2e0ccc964f3444b/assets/assets/images/tiles/depth_z1.jpg

C meJan 19, 20201 votes

Oh cool, thank you. Interestng how it's only a quarter the size of the 8192x8192 textures.