Homestuck Map Generator
"Welcome to Homestuck Map Generator. This is a desktop web tool that generates a map similar to the one found in homestuck out of HTML. This is made with the site MSPFA in mind, however it also can be used to generate images of Homestuck Maps.
The map editor is split into 2 different groups, the Chapter editor and the Section editor. Each chapter contains a list of pages underneath it. And each section groups a number of chapters together. There can be multiple sections in different positions, and sections can overlap.
There are a number of tutorials and tips below. There is also a button to load an example adventure to explore how the editor works in action."
Saving your adventure
You may want to save and load your map after making it so that you don’t have to remake it to update it. Under the ‘Exporting and Importing Map Objects’ option in the global adventure options there is the ‘Export Current Map' box full of the JSON object of the current adventure you’ve made. Copy that text and save it in a safe place. When you want to load your adventure again, paste your saved JSON object into the ‘Import Map’ box and click the import button.
Your adventure will also be saved to your browser’s local storage, so if you accidentally close and open the site your progress should be safe. However this is unreliable and shouldn’t be your only method of saving your work.
Using images
This tool does not allow you to upload your own images to use, instead you must use another site to host your images and then link them here. File Garden is a site that I would recommend.
The generator will automatically resize and crop the main chapter Image and any page images. This means if you are making an adventure that uses images hosted online, you can use your panel images directly as page and main images, saving you the work of cropping them yourself.
Chapter types
Chapters can be of 3 types. A regular chapter has its chapter image, its title, a quote, and a fun small image at the bottom. An intermission has a smaller chapter image and no fun image at the bottom of its header, this can be toggled by the “Is Intermission” checkbox.
Finally they can be a divider, which is not a real chapter but rather simply an image that goes between chapters, however they count as a chapter for the sake of the section editor. This can be toggled by the “Toggle make Divider” button. Divider images are typically 610px across and 64px high, but this generator will not enforce that.
Saving your map as an Image
If you’re on desktop firefox, you can use the shortcut Ctrl + Shift + S and select the Map preview to save it as an image. Otherwise you can save the HTML output to a .html file, open that in your browser and save the page from there.
Editor tips
You can click each chapter heading on the side preview window to scroll to that chapter in the editor.
Page links are generally 20 - 50 pages appart, but this is by no means a hard rule.
Be sure to save your export often. You never know when you might make a time costly mistake.
Style tips
Here are a few style tips based on the homestuck map:
Page border color and icon border color stay the same (mostly) through every chapter.
Sections don’t end or start on a chapter divider.
In addition to hex codes, you can also write CSS color names into the color inputs.
GLOBAL ADVENTURE OPTIONS
Exporting and Importing Map Objects
Export Current Map
Import Map
Reset Current Map
WARNING: You will lose the current map you've made, make sure you save your map from the export menu!
Chapter Editor
🗑️
Page Image URL:
Section Editor
🗑️
Final HTML output
Paste this directly into your MSPFA adventure or site.
