Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

RenJS

HTML5 Visual Novel creation made easy and free · By lunafromthemoon

IDEA: a different image for each text choice items.

A topic by Lapinay created Jul 27, 2019 Views: 259 Replies: 4
Viewing posts 1 to 5

Hi! :)

I'm working on a project with a lot of  textual choices.  In the engine, behind every options of a textual choice menu, there is an image declared to make the container of each option. I would need for each option to show a specific image.  In my project, player has to choose between a negative and a positive choice. I want the positive to have a green container and the negative one a red one.  What do you think of this idea ? 

Something like in GUI.yaml:

spritesheets:
 choice: assets/gui/choice.png 716 65 <!-- default -->
 choice green: assets/gui/choice_green.png 716 65
 choice red: assets/gui/choice_red.png 716 65

Something like in YourStory.yaml:

- choice:
    - "I don't kiss and tell!" choice green:
      - deuzi says: ...
    - "You bet we did!" choice red:
      - deuzi says: ...
Developer

Hello Alix, this is an interesting idea, I can guide you through the steps if you'd like to implement it yourself for your game.

I would certainly appreciate your help on this :)

Developer

There are a few ways to tackle this:


In a functional aspect you have it, you declare the different choice boxes in the GUI.yaml (avoid the whitespaces in the key names, so instead of "choice green" use "choice_green", and then specify the box in the choice option (using "!box" as separator maybe):

- choice:    
    - "I don't kiss and tell!" choice green:      
        - deuzi says: ...    
    - "You bet we did!" choice red:      
        - deuzi says: ...


The main code to change will be in two places, one in the SimpleGUI.js fil. There's a function called showChoices, that creates each box for the choice, and it already discriminates if the choice is a normal choice or an interrupt. If you change the key name there, then you will have different boxes. But where do you get the information for this?

The other part to modify would be the call to showChoices, to add the choice box, in the LogicManager (showChoices funcion in LogicManager.js). In this function you map the choices text, and you filter some of them in case there's an "!if" and a condition for this choice. You actually need to do something very similar to this. After the filter line, each of your choices will have a "choiceText" property where you can try and find the choice box. To find it you can do something similar to how we find the condition:

For every choice in choices list
split choice.choiceText by ("!box") into result
if length of result is > 1 (you have two parts)
    choice.choiceText = result[0] (remove the choice box from the actual text of the choice)
    choice.choiceBox = result[1] (add the choice box to the choice
else (default choice box)
    choice.choiceBox = "choice"

This is more or less what you should do, let me know how it goes.

Luna

Thank you very much Luna. I will study this. Have a pleasant day :)