Topic: GMaps for Game Maps (Beta)

[|N|NjA|]

Hi everyone,

First, let me introduce myself. I'm Danilo Passos, A.K.A |N|NjA|, founder of the Brazilian website zelda.com.br. For over the last couple of months, I've been working restless on a little project involving googlemaps and game maps. Please, keep in mind I'm still not advertising the tool around the web, since it's still on a beta phase and we are working on the new main site to lauch with it.

The best map I can share with you guys is the A Link To The Past maps: http://maps.zelda.com.br/index.php?map=3

Here is a rundown of the basic features:
- Googlemaps view of game maps
- Multiple maps per game
- Multiple maps per section (floors of a dungeon, caves of an overworld, etc).
- Multiple layers of section/maps (enemies per floor, itens per floor, secrets per floor, etc)
- Markers per section/maps (googlemaps style)

One of the best feature is the dynamic markers. They are fully interactive! You can:
- Click on a particular marker to view more information.
- Markers information can have multiple tabs with rich text (one tab can have the info, the other can have a youtube video embebbed, the other screenshots, the other official art... you name it!)
- It's possible to hide/shown markers per category or per type! (just click on the right side)
- You can add, edit, delete and move your own markers to the map! Share your knowledge with the community!

There are three types of markers so far:
- Normal Markers (basic content)
- Jump Markers (markers that, when clicked, can redirect you to a position on the map or to a marker).
- Label Markers (Big markers usually used to name especial places or the map itself).

This way, I hope I can satisfy everyone when viewing the map:
- The mapper, whom can see his original work on the system as it was published
- The purists, whom like to see the background, unlabeled
- The gamers, whom can see all the secrets, enemies, etc as they seem fit.
- The game archivists, whom aside from the info provided by the mapper, can add and share more knowledge to the maps


Please, feel free to navigate through the A Link to the Past! In order to manipulate markers, you need to have a valid login on our forum: zelda.com.br/forum . Since I don't want this to be a hassle to anyone, please use user/password: mapsTest and, after logged in, please do a right click on the map. It will bring a drowdown menu for your actions.

Keep in mind that this is a work in progress and I'm only sharing here first, since the zelda.com.br site is offline while we are working on the new site! This is a 2 year project (but only in the past 3-5 months I started working seriously on that).  I would like to thank the mappers that not only allowed me to use their maps, but also provided the RAW files that they used to created their own maps (in no particular order): Peardian, Iron Knuckle, Piranha Plant, Jon Leung, Rick Bruns, TerraEsperZ_ and, of course, my team over zelda.com.br. Sorry if I forgot anyone.


Others maps available for your viewing:
http://maps.zelda.com.br/index.php?map=1 - The Legend of Zelda (this was the first map I started doing, that's why there is no layer on top of the maps... I will come back to TLoZ mapas in a later time to add those layers)
http://maps.zelda.com.br/index.php?map=2 - Zelda II: Adventure of Link (stopped mapping since Rick Bruns is redoing all zelda 2 maps)
http://maps.zelda.com.br/index.php?map=3 - A Link to the Pasrt (the map that uses most of all the features of the system)
http://maps.zelda.com.br/index.php?map=5 - Ocarina of Time (a wonderful collaboration work with Peardian. I'm very happy with the outcome of the dungeon maps).
http://maps.zelda.com.br/index.php?map=7 - Oracle of Seasons
http://maps.zelda.com.br/index.php?map=16 - Skyward Sword

List with all the current projects: http://www.zelda.com.br/?q=mapas


Finally, although these are only Zelda maps, the system is open enough to allow any other map! I intend to make this system available to every mapper, I'm not sure yet how (allow non-zelda maps on my site? create a new site? give the source code and let the community do what they want).

Future features, although not yet planned:
- Animated GIFs/PNGs support
- Personal markers (for notes)
- Walkthrough on a map (possibly with routes)

Possible features with no plans for the near future:
- Routes
- Street view (3D games)
- 45 degrees viewing of maps (3D Games, based on images provided by Peardian... need to study the technical difficulties of this).
- 3D Models embedded (not sure if we would be able to do it ever... just to have it on the list).

I will provide a quick walkthrough in order to create images that fit on the googlemaps.. It will just depend of my time and feedback

Please, feel free to share any opinions, suggestions, criticisms, etc. I'm really open minded to provide a good tool to mappers and viewers alike I know that there are still some rough edges and polish to do, but right now, the functionalities are the thing i'm really testing.

[Revned]

This is really awesome! Several people have done similar things as experiments over the years, but this is really polished. Well done.

[|N|NjA|]

Thank you Revned!

I updated the system with a few more LttP maps... Plus, I also added a quick tutorial with some mock-up images so people won't be lost.

Perhaps there is too much going on there, since I noticed people visiting it, but not providing any feedback... so I want to be sure they understand all the possibilities the tool provides.

[ozzy88]

It's been a while since I took a peak at it, remember that I was really impressed!

But I can't remember if I understod everything, if I didn't I wouldn't see it as a big problem cuz people will learn over time if it's a bit too much at first

Really good work! I should have said something weeks ago I guess.

It just seemed kinda "meh" to respond by just saying it's awesome ^^'

[DarkWolf]

Finally, although these are only Zelda maps, the system is open enough to allow any other map! I intend to make this system available to every mapper, I'm not sure yet how (allow non-zelda maps on my site? create a new site? give the source code and let the community do what they want).

Once you've made it available for us to make our own stuff, we can probably give you better feedback.  Hopefully you'll release it so we can use it on our own sites.  If you're going to keep it on your site, I myself, would probably not be interested.

We've talked about this kind of system here before at VGMaps.  It would certainly be useful for games with large maps.  IMO, it's a bit over-kill for games with smaller areas.  For example, I'm not sure I like the way you did Hyrule castle.  The floors are logically separated into different "maps", but that actually makes it difficult to follow them if you're trying to use this thing while you play the game.  You have to click to go to a different floor, and then you can't see where you just were.  Certainly, if every floor is lumped together in one image, it's a bit harder to read, but I would only need to touch my mouse if the whole map didn't fit on the screen.  And I get a better picture of where I came from, and where I'm going.

It's also kind of silly to load all the Javascript, marker images, etc, when a floor is small enough to fit on the screen.

Maybe the solution is to use a hybrid of what we do, and what you're doing.  Put all the dungeon floors in one big map, but still have your clickable markers to allow the user to the destination of a portal/door.

For larger maps I see a lot of potential.  If you ever make this available to us, I would be interested in porting the Wolfenstein 3D maps, the Faery Tale Adventure over-world, and maybe some Phantasy Star II, into this.

[|N|NjA|]

Thank you Ozzy and Dark Wolf for your feedback

And yes, I want to release the system and even help people setup it. The only reason I didn't do so far is that I'm waiting for my main site to be ready and launched before taking another step. I also want to do a clean-up on the code before a release version.

As for the LttP maps, although I agree with you about the complexity of navegating through small maps, one thing I should mention is that the original maps by Iron Knuckle were just like that on the vgmaps. So, aside from minor corrections and changes I've done, the maps are in the same way as they were first published. However, one "easy" solution would be to create a new floor named "ALL" (or something similar) with all the floors together. This way, it would please people that like to keep it as original as possible, as well gamers that like all the info in one place.

As for porting your map, I'd be really happy to see more mappers joining in and using this system I consider myself a map fanatic, and I want this to spread . I will post shortly a tutorial on how to create googlemaps style... then it would be a matter of just sending me the images so you can see how things look like on the system while the code is not released.

---------------

Tutorial for Adobe Photoshop:

Step 1- In your work file, resize the Canvas Size to a base 2 number on both width and height, always rounding up. This will ensure that the script itself won't do an automatic resize (more on that later).

Pixels	Zoom Level	Base
256	0	2^8
512	1	2^9
1024	2	2^10
2048	3	2^11
4096	4	2^12
8192	5	2^13
16384	6	2^14
32768	7	2^15
65536	8	2^16

Example: Say we have an image of 3584x1408. We should just get the hightest dimesion (3584) and look in the table above... The nearest value (rounding up) is 4096. So, we adjust the canvas to 4096x4096 (you should anchor the original image to whatever you want, I normally do it in the center). In this example, we have an map at Zoom 4.


Step 2: Adding more Zoom
If you want your map to be have more zoom levels, you should resize the image now using the same table above.

Example: I want the previous map to have 2 more zooms levels, so I should resize the width and height to 16384 pixels.

Important! When resizing 2D Maps, you should make sure to use the algorithm Nearest Neighbor, instead of Bicubic or similars. If you don't do so, you may lose the Pixel Art on the highest zoom.

Step 3: Save all layers as individuals PNGs. Trust me, it's easier to just export the layers to PNGs... The script will run faster with single images then on the PSD, specially with Big images (zoom 6 or more). Adobe Photoshop Script: http://www.pretentiousname.com/ps_exportlayersfast/index.html

Step 4: In Adobe Photoshop, run the Script provided below following this: File, Scripts, Search, Change from .jsx to  .js and select the script.
Photoshop Script: http://maps.zelda.com.br/tiles/tileCreator.js

This script should ask a few things. At Zoom Level, just type the Zoom you selected on your image. We did the previous steps in order to avoid losing the pixel art (since the script will automatically resize the image if it does not fit our needs). We also do the previous steps to make sure maps following the anchor we want. (I guess I could add a couple of questions to this open source script in the future in order to avoid Step 1&2, maybe in the future).


For non-Adobe Photoshop users:

I couldn't find a good tool in order to replace step 4, but here are a few samples that should, at least, give and idea of how you map should look like once you run step 4:
- http://www.casa.ucl.ac.uk/richard/GoogleMapImageCutter/gmimgcut-download.asp (only save as JPGs).
- http://www.maptiler.org/ (Good tool, only problem is that generates images as zoom/x/y instead of zoom_x_y.

More information:
- http://mapki.com/wiki/Automatic_Tile_Cutter


-------

EDIT: Added a few more maps to the original post, plus a post with all the maps here: http://www.zelda.com.br/?q=mapas

[Murtnowski]

Pretty cool.  I came up with a way to do it without any tile pre-cutting.

https://github.com/Murtnowski/GMap-JSlicer

It just takes a single image and chops it up on the fly all on the front end.  Super easy to implement

slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();

You can see a demo at http://gvgmaps.com/linktothepast/