itch.io

Hello nick, thanks, I'm glad you're enjoying RenJS.

The current save/load functionality saves and loads only one game. As you saw, the save/load function takes a "slot" number, so you can potentially save and load as many games as you want. In fact, that was the idea when creating the save system, and it was finally not implemented.

To add new menus to RenJS, you should check the SimpleGUI.js file, in this file, all the GUI is created, including main menu, setting menu, hud, etc. You would need to track where the menus are created, and add manually the ones that you need. Creating a new menu is not a huge crazy thing, and it's good that you know a bit of Phaser, because you will need to use it, more or less, to create them.

Phaser has groups of display objects (a display object is an image, a sprite, buttons, etc), a menu is simply a phaser group with all the elements of your menu, your menu background, the buttons, and anything else that you might need (in the save menu, maybe some squares for the save slots?). You create the menu (i.e. the phaser group) at the start of the game, and hide it until you want to use it. 

Let's check the roadmap to create a classical save and load menu for visual novels, like this:

Let's check what are the most important elements:

* A menu background

* The save slots: It's a small box (an image, basically) with a screenshot of the moment you saved, associated with a slot number, save date and a title. It also has a little cross to delete it. If there's no game saved, a default image is shown.

* Return button: to go back to the game or main menu

* Save button: Select a slot and click on this button to save

* Load button: Select a slot and click on this button to load

The rest of the elements we can ignore for now. 

Then let's see more or less how to create this menu:

1. Create save menu Phaser group
2. Create menu background and add it to the menu group
3. Create the save slots:
   1. Create a the slot image (slot background) and add it to the menu group
   2. Create the thumbnail image for the saved game, add it to the slot image (addChild)
   3. Add the text part, if you want, and add it to the slot image too
   4. Add an event listener to the slot: on click, we want to select the slot. We can save this information in the menu group, for example, as a new property.
4. Create the save button and add it to the menu group, the action on click should be to check if you selected a slot, and if you did, use this property to call RenJS.save(slot), after this you can hide the menu.
5. Create the load button and add it to the menu group, the action on click should be to get call RenJS.load(slot) with the selected slot, and then close the menu.
6. Create the return button and add it to the menu group, the action on click should be to hide the menu.

I know this sounds like a lot, but you can start trying to implement it and I'll help along the way

Cheers!

Luna