Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

RenJS

HTML5 Visual Novel creation made easy and free · By lunafromthemoon

Custom menus (Save, Load, Previously completed scenes overview etc)

A topic by nick created Sep 05, 2019 Views: 849 Replies: 1
Viewing posts 1 to 2

First things first: Thanks for creating RenJS! It's really awesome so far. 


I'm currently working on my first RenJS game and I've already learned a lot about the features, effects and the like. The documentation was really helpful most of the time, but I'm desperately trying to implement a save/load function and I really don't know how and where to start. 
I've read multiple tutorials for Phaser and checked out the other games made with RenJS but I couldn't find any examples for this.
What I'm trying to do is to add multiple custom menus, for example to save the current scene and a menu to see an overview of all played scenes so far. I've read about the RenJS.save(slot) function, but I just don't know what to do with that part. 

Save to a slot and load from a slot would be exactly what I need, though. Would it be possible that you'd implement these features? Or could you show me a short example code so I could try to implement it by myself?

Thanks in advance, have a nice day!

Developer

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