Space encounter creator

With this space encounter creator you can quickly and easily create a custom space encounter using various spaceships, planets, other elements, and even add your own images to the map. There's a lot to this tool, but once you've played around with it a little, everything should be easy to get the hang of.

Instructions

The tool works as follows:
- Adding a piece to the map: Simply click on any of the icons in the menus below, it'll automatically be added to the canvas below it. You can then drag, resize, rotate, and select this piece, as well as replace it with an image of your choosing. Selecting an image is done by simple clicking them, they'll receive an orange border to indicate they've been selected.
- Changing the image: When you have an item selected you can change it into another by either clicking an icon in the menu, or by entering an url in the image link input field, and then clicking 'Change image'. This way you can add any image you wish to the encounter, perhaps a creation of your own making, or a ship of a famous work of fiction.
- Deleting: Deleting items is as simple as selecting them and clicking 'Delete selected'. You can also clear everything by clicking the 'Delete all' button.
- Rotating: Rotating images is done by selecting them, entering a value in the rotation field, and then clicking 'Rotate selected'.
- Toggle dragging and resizing: Resizing and dragging can be toggled on and off using the corresponding buttons. This can be helpful to avoid making mistakes, like when you need to drag around a small image.
- Background: You can change the background color using the color selector, and then clicking 'Change background color'. You can also change the background image by entering an image url in the background image link field, and then clicking 'Change background'.
Wish to return to the default star field? Simply click 'Reset background'.
- Overlay: By using the overlay you can add a hud, a window of a ship, or any other feature you'd like on top of the main canvas. Simply toggle it on using the corresponding button, then add an url to the overlay image link field, and click 'Change overlay'. Note that you'll have to toggle the overlay off to access the main canvas again.
- Height and width: You can change the height and width using the corresponding input fields and buttons. This is especially helpful when using a background image, as they tend to work better when the canvas is the same size as the image.
Note that the default background image is 2000x2000 pixels.
- Presets: The preset buttons will automatically change the entire field to one with an overlay of a spaceship. They're exactly the same, except the first has blue lights (regular), and the second has orange lights (alarm mode). If nothing else, this'll hopefully at least illustrate how to use the overlay function.
- Save and load: You can save and load up to 5 encounters locally in your browser. Simply click the save buttons to save your progress or finished map, then click the load buttons to load them again. You can safely close your browser, and come back another time to load them, it'll still be there. Do note that this only works in modern browsers, and only if you're not using incognito mode.

Saving locally

It's also possible to save your space encounter data locally. Simply click the "Save local" button to have the code create a text file with all the space encounter code in it, then click on the download link to download it directly to your computer. Now you can use the "Choose file" field to upload your space encounter data and use it in the future. This method makes sure there's no risk of losing all your data in case your browser data is wiped, for example, but it does mean keeping track of your downloaded file.

Saving the image

You can turn your entire creation into a single image by clicking the 'Turn to image' button. An image will appear below it, which is an exact copy of the canvas, except that this is one that cannot be edited like the canvas. You can save it by right clicking it, and then selecting 'Save image'.
Note that if you're using a background image, it will not come out properly unless the canvas is the same size as the image. The default background image is 2000x2000 pixels.