Table of Contents

[Nadare Aikami]

Hey everyone, so I was wondering something...how do I create an unlockable Table of Contents in my visual novel? Like I have it organized in terms of Chapters. I want to make it to where every time you complete a certain Chapter for a route, that Chapter will be unlocked in the Table of Contents in the Main Menu (where you can choose to load your game or start a new game).

Is this even possible to accomplish in Ren'Py?

[Saa]

Does this work?

[Nadare Aikami]

Does this work?

hey so im working on trying this method out that you showed me in the hyperlink. how do i make imagemap png?
like what do you think is the best method to make the ground, hover, and idle png? for showing the text (Each Chapter in the Table of Contents).

I provided an attachment of what im referring to.

[Saa]

I'm not sure what you mean, but I'd use Photoshop to make the ground image, save it for web as ground.png, use layer styles to change the text in the still-open image, save it for web as hover.png, then change the layer styles to make the idle image and save it for web as idle.png.

It should be possible to make buttons instead of an imagemap, but it'd be harder to make fancy effects like in the images.

[Nadare Aikami]

I'm not sure what you mean, but I'd use Photoshop to make the ground image, save it for web as ground.png, use layer styles to change the text in the still-open image, save it for web as hover.png, then change the layer styles to make the idle image and save it for web as idle.png.

It should be possible to make buttons instead of an imagemap, but it'd be harder to make fancy effects like in the images.

I'm sorry, but i'm completely a noob at knowing how to use layer styles. My apologies, but would you mind teaching me or showing me a tutorial or something?

[Saa]

Sure! I hope this one is good enough? In the imagemap from your screenshot, it looks like Drop Shadow and Outer Glow were used. The default Photoshop values should be good enough.

[Nadare Aikami]

Sure! I hope this one is good enough? In the imagemap from your screenshot, it looks like Drop Shadow and Outer Glow were used. The default Photoshop values should be good enough.

Oh yeah, I remember learning that in my Digital Art class in college. The fx, drop shadow, outerglow, and opacity.

So when I make the PNG, would it be best to just draw the words "Chapter 1" or find a pic on google that says it? What do you recommend? Because I think I have enough art skill to draw words in Photoshop

[Saa]

You could always use the text tool to write in a nice font, but if you think it'd be prettier if you drew it, that would be very cool to see!

[Nadare Aikami]

You could always use the text tool to write in a nice font, but if you think it'd be prettier if you drew it, that would be very cool to see!

Yeah, my hand drawing isn't exactly pretty, but it's not sloppy either. So is the text tool in Photoshop?

[Saa]

Yeah, it's the T button in the left column, just click it and then click the image to write in it.

[Imperf3kt]

Be sure to check the license of a font before you use it.
https://en.wikipedia.org/wiki/Intellect ... _typefaces

You wouldn't want a nasty Cease and Desist notice over something as simple as a font.

[Nadare Aikami]

Also, according to the Page on how I add the text in the Table of Contents, how do I know what the coordinates are?

[Nadare Aikami]

allow me to rephrase what im asking. I need to know what to make as hotspots for each chapter. How do I know what their hotspots are?

[Saa]

Hope this helps!

[Nadare Aikami]

Hope this helps!

I appreciate the help! it really did help me out! but one issue I'm having is getting the textbutton to open the Table of Contents. I click on the textbutton in the main menu, but it shows this error message:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "renpy/common/00start.rpy", line 264, in script
    python:
  File "renpy/common/00start.rpy", line 268, in <module>
    renpy.call_in_new_context("_main_menu")
  File "game/screens.rpy", line 305, in execute
    screen chapter_list:
  File "game/screens.rpy", line 305, in execute
    screen chapter_list:
  File "game/screens.rpy", line 313, in execute
    imagemap:
  File "game/screens.rpy", line 318, in execute
    if ch01:
NameError: name 'ch01' is not defined

But this is what it looks like in my Screens for what I made for the Table of Contents:

Code: Select all

screen chapter_list:
    tag menu 
    
    add "Logo background.jpg" 

    # I'd rather not bother making navigation buttons again, so I called the navigation buttons I already had. 
    use navigation  

    imagemap:
        ground "ui/LDC ground text.png"
        idle "ui/LDC idle text.png"
        hover "ui/LDC hover text.png"
        
        if ch01:
            hotspot (53, 65, 513, 175) action ShowMenu("chapter1") activate_sound "sfx/click.wav"
        if ch02:
            hotspot (30, 218, 544, 153) action ShowMenu("chapter2") activate_sound "sfx/click.wav"
        if ch03:
            hotspot (38, 360, 539, 125) action ShowMenu("chapter3") activate_sound "sfx/click.wav"    
        if ch04:
            hotspot (37, 475, 534, 117) action ShowMenu("chapter4") activate_sound "sfx/click.wav"
        if ch05:
            hotspot (38, 592, 516, 128) action ShowMenu("chapter5") activate_sound "sfx/click.wav"
        if ch06:
            hotspot (643, 72, 560, 170) action ShowMenu("chapter6") activate_sound "sfx/click.wav"
        if ch07:
            hotspot (645, 244, 572, 140) action ShowMenu("chapter7") activate_sound "sfx/click.wav"
        if ch08:
            hotspot (644, 389, 588, 119) action ShowMenu("chapter8") activate_sound "sfx/click.wav"
        if ch09:
            hotspot (663, 507, 526, 117) action ShowMenu("chapter9") activate_sound "sfx/click.wav"
        if ch10:
            hotspot (680, 617, 566, 103) action ShowMenu("chapter10") activate_sound "sfx/click.wav"