Hello,
I really love what did you do with the interactive map / link to map /. I would love to know how did you make it? In what program, etc. if possible? Big Thank you from a fellow designer!
PS: If i'm at wrong board please redirect me to correct board, Thanks
Hi there!
To answer your question, the Design Systems Team built the map experience using paper prototyping, user journeys and flows, high-fidelity mockups and digital prototypes that we used to test with internal Rioters. For initial concepts, this map was created through software such as Adobe XD, Photoshop, and Invision for prototyping. From there, our technical artists transformed it into code! I'll go ahead and summon Riot Biomarker so he can explain that part of the process!
We also did a big content audit for internal illustrations and conceptual artwork that existed within Riot Games but players had never seen before. Our goal being that we wanted to establish the world of Runeterra as a living, breathing place for players.
For the map terrain, artists hand painted layers in Photoshop referencing Bioluminescence's cartography work along with 3D models of iconic landmarks placed to make the world feel more real.
We are super happy that you love the map! [sg-kiko]
I've been summoned!
Hello BlueAtlas, I'm one of the developers that was working on the map! I'm not sure what your technical background is so feel free to ask for clarification on anything.
The 3D map itself is built using threejs (an awesome library for running 3D scenes in the web). The map is made up of a bunch of tiles (flat images of each area that can be stitched together to make the whole map). To make them 3D we use a depth map, a black-and-white image that tells the terrain how high it should render. The closer a pixel is to white, the taller it will be.
Everything else, like the sidebar, navigation, and image viewing experience are built in React. They still have to talk to the map though so to bridge that gap we used Redux (which basically makes a global object for all of the data). Both the UI and 3D map can read data from Redux so they know what to render.
That's the high level tech behind the map. I'm happy to answer any questions you might have!
