Entry tags:

extras

Clickable Map
Type: Setting Layout (Clickable Map!)
Preview: Here at my Marvel game

I often find that when setting up a game in a confined setting, it's best to make sure everyone is on the same page for how things are laid out/what they look like. Setting up a map of a setting (be it the school the whole game is set in or just your characters' apartment) can not only give the story a cohesive setting, but also give your SL partner more detail to write about instead of just staying vague.

One example of how this is working out is Here at my Marvel game. Another example of a smaller setting, just a character's flat, is Here. Neville's apartment. Call it shallow, but a lot of the first applicants to Progeny were drawn to look into the game further by the neat clickable map. Detail in your game concept shows dedication as a mod.


The first thing you want to do is make a list of rooms. I always make paper lists to check things off. Then you'll want to go hunting for images of those rooms. You're best doing the room selection before the layout so that if you find a perfect room with stairs you know to put it downstairs, etc.

Once you have all of the rooms saved you'll want to go upload them to your image host. It's easier if you have the URLs ahead of time.

Next open a blank document in photoshop (which can be found here thanks to kaisermonkey. Be warned, though others claim to not have problems, for some reason this crack is really unstable on my laptop.) You'll want to give yourself plenty of room but you can always Edit>Canvas Size if you need more space. You can choose to make the map however you want. I used a line tool and light colors on my Academy of Tomorrow map. You can mark doors, stairs, and points of interest however you'd like. You can draw with the airbrush tool or paste in a floor-plan you find online. However you do it, just make sure that it is either clear or there is a key somewhere.

Get that slice tool out only when you are sure you are done. Save a copy of the map now just in case. The slice tool can only do squares and you may possibly have to chop a room into more than one square. It doesn't matter because nobody will see the seams. Hack away.

Once you've hacked up and made sure every room has its own square (make the squares really well cropped, you don't want to have a huge area around a room that's part of the link), go get your URLs ready. You'll want to right click on every slice that you want to be a link. Edit Slice Options. There will be a lot of options but URL is the only important one. Past the URL of the respective room image in. If you want the images to open in a new window (I suggest this) set Target as _blank You can set message text which will appear when you hover over the room on the map as well. Hit OK.

Every slice you've edited will be outlined in blue so double check to make sure they are all linked properly. When you've linked every image to the map go save the file as a Photoshop File. This is going to be the file you'll want to edit should you need to make changes to the map. Once you've saved your progress go to File>Save for Web & Devices. Hit select all (or Ctrl+A) to make sure every square is saved, not just the ones that are links. You'll be saving this as a web page. Save and then you want to go track down the file.

The web page you made should have a folder of images now. Upload them. I'd suggest you do this on photobucket and not tinypic because you will have to figure out and rename EVERY image in the file if you don't. Make a whole new Photobucket album and upload the images so they all keep their name.

Open the web page you've created in notepad. Run an Edit>Replace and replace all instances of the images folder with the URL of the directory where you uploaded them (for instance, I replaced it with "http://i162.photobucket.com/albums/t247/Nimbuschick/Marvel/".

Now copy all of the text in the file. Go to your IJ/LJ/Inksome wherever entry where you want your map. BE SURE TO PUT lj-raw tags around this code or auto-formatting on the site will fuxor your table! Between lj-raw tags paste the code that your Photoshop generated and you modified to have the correct image URLs in notepad. Save.

Your map should be viewable, clickable, and made of win now.