[Tutorial] Making a Contents page / screen

[OokamiKasumi]

I wanted to implement story arcs and episodes. What I mean is where episodes unlocked can be selected.

In my game The Visitor, I did something similar with a Contents page where the chapters are listed and once you completed a chapter, it becomes click-able.

The way I did it was with Flags at the beginning of each chapter, and a separate menu screen.

First, in Script.rpy, I set up all the flags BEFORE the game began.

Code: Select all

    $ ch01 = False
    $ ch02 = False
    $ ch03 = False
    $ ch03_01 = False
    $ ch03_02 = False
    $ ch03_03 = False
    $ ch04 = False
    $ ch05 = False

label splashscreen: 
    $ renpy.pause(0)
    scene black
    with Pause(0.5)
    
    play sound "sfx/Evil Laugh1.mp3"

Note: If you want to make the chapters Permanently accessible, as in; available the next time you open the game, you'll need to change the flags to:

Code: Select all

    $ persistent.ch01 = False

Then, at the beginning of each chapter, I changed the flag from False to True. (Make sure you Capitalize False & True!!!)

Code: Select all

label chapter1:
    $ ch01 = True
    
    ## ------------- scene 1 ----------------
    play music "mu/zero-project - 06 - Moonlight No 2.mp3" fadeout 1.0
    scene bg_castle with wiperight  
    with Pause(1.0)

Next, make the imagemap pngs:

ch_bg .png

ch_ground.png

ch_hover.png

ch_idle.png

Then, on a brand new chapter_list.rpy page, I created a chapter screen:

Code: Select all

screen chapter_list:
    tag menu 

    # This is the background image.
    add "ui/ch_bg.png" 

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

    imagemap:
        ground "ui/ch_ground.png"
        idle "ui/ch_idle.png"
        hover "ui/ch_hover.png"
       
        # Because my buttons all have transparency. 
        alpha False 

        if ch01:
            hotspot (182, 133, 216, 125) action ShowMenu("chapter1") activate_sound "sfx/click.wav"
        if ch02:
            hotspot (187, 272, 209, 120) action ShowMenu("chapter2") activate_sound "sfx/click.wav"
        if ch03:
            hotspot (186, 398, 209, 122) action ShowMenu("chapter3") activate_sound "sfx/click.wav"    
        if ch03_01:
            hotspot (152, 536, 280, 118) action ShowMenu("chapter3_01") activate_sound "sfx/click.wav"
        if ch03_02:
            hotspot (612, 137, 234, 124) action ShowMenu("chapter3_02") activate_sound "sfx/click.wav"
        if ch03_03:
            hotspot (586, 272, 286, 115) action ShowMenu("chapter3_03") activate_sound "sfx/click.wav"
        if ch04:
            hotspot (622, 403, 214, 115) action ShowMenu("chapter4") activate_sound "sfx/click.wav"
        if ch05:
            hotspot (586, 533, 286, 124) action ShowMenu("chapter5") activate_sound "sfx/click.wav"
        

init -2 python:
    style.gm_nav_button.size_group = "gm_nav" 
    #For some reason, it doesn't work right if this isn't here. 

To get to the chapter list, I simply added a new link/hotspot to screen navigation:

Code: Select all

        hotspot (537, 668, 153, 58) action ShowMenu("chapter_list") activate_sound "sfx/click.wav"

And that's how I did it.

[curry nochi rice]

I have tried the code for three hours...
adding some 3 characters.


it seems it's always like this:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game\component_02.rpy", line 116, in python
NameError: name 'name' is not defined

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\execution.py", line 266, in run
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\ast.py", line 646, in execute
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\python.py", line 1172, in py_exec_bytecode
  File "common/00library.rpy", line 627, in <module>
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\ui.py", line 237, in interact
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\display\core.py", line 1813, in interact
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\display\core.py", line 2051, in interact_core
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\display\core.py", line 246, in visit_all
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\display\core.py", line 246, in visit_all
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\display\core.py", line 246, in visit_all
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\display\core.py", line 248, in visit_all
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\display\core.py", line 2051, in <lambda>
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\display\screen.py", line 155, in per_interact
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\display\screen.py", line 247, in update
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\screenlang.py", line 1193, in __call__
  File "C:\Users\After Curry Rice\Desktop\renpy-6.14.1-sdk\renpy\python.py", line 1172, in py_exec_bytecode
  File "game\component_02.rpy", line 116, in <module>
NameError: name 'name' is not defined

Windows-Vista-6.0.6002-SP2
Ren'Py 6.14.1.366
in Delinquency, Discipline, and in Disorder 2.5

[OokamiKasumi]

No longer relevant.

[XxrenxX]

I tried using your code but when I try and get to the menu to pick the chapter I get a NameError:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game\screens.rpy", line 464, in python
NameError: name 'ch01' is not defined

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\execution.py", line 266, in run
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\ast.py", line 646, in execute
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\python.py", line 1172, in py_exec_bytecode
  File "common/_layout/screen_main_menu.rpym", line 11, in <module>
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\ui.py", line 237, in interact
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\display\core.py", line 1824, in interact
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\display\core.py", line 554, in replace_transient
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\display\core.py", line 824, in remove
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\display\core.py", line 752, in hide_or_replace
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\display\screen.py", line 178, in _hide
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\display\screen.py", line 247, in update
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\screenlang.py", line 1193, in __call__
  File "C:\Users\Collette\Documents\renpy-6.14.1-sdk\renpy\python.py", line 1172, in py_exec_bytecode
  File "game\screens.rpy", line 464, in <module>
NameError: name 'ch01' is not defined

Windows-Vista-6.0.6002-SP2
Ren'Py 6.14.1.366
Chasing 0.1

I have run into defining errors in the past as well but could never figure them out =/ is this an easy fix?

line 464/465

Code: Select all

        if ch01:
            hotspot (36,24,159,54) action ShowMenu("Chapter01")

EDIT: I fixed it. Was kind of a stupid thing I didn't catch. I'll leave this here though incase someone else does this xD Since I using persistent.ch01 = True it needed to be told what to do when set to that xD

Code: Select all

        if ch01 = True:
            hotspot (36,24,159,54) action ShowMenu("Chapter01")

[Levrex]

EDIT: I fixed it. Was kind of a stupid thing I didn't catch. I'll leave this here though incase someone else does this xD Since I using persistent.ch01 = True it needed to be told what to do when set to that xD

Code: Select all

        if ch01 = True:
            hotspot (36,24,159,54) action ShowMenu("Chapter01")

I'm very much afraid you DIDN'T fix it; instead, you've maken it worse.

Error was because you didn't declare a variable named "ch01" in init block.
The correct way to be is to add

Code: Select all

$ ch01 = False

into init phase and change "ch01 = True" to "ch01 == True". One equal sign sets a variable. It will never be a condition. Double equal sign checks if variable equals the given value, as intended - so you have to use double equal sign instead.

[peterah]

In my game The Visitor, I did something similar with a Contents page where the chapters are listed and once you completed a chapter, it becomes click-able.

That's a really neat idea, I'll try do something like this when I finish

[OokamiKasumi]

In my game The Visitor, I did something similar with a Contents page where the chapters are listed and once you completed a chapter, it becomes click-able.

That's a really neat idea, I'll try do something like this when I finish

I hope you find the technique useful.
-- I made it so the players could see how far they'd gone in the game, and how far they had yet to go. Since The Visitor takes well over an hour to read, it was difficult for the player to tell how close they were to finishing it -- or if they'd only reached the middle.

[chronicle-visuals]

Thanks for the code! May I ask; what fonts did you use?

[OokamiKasumi]

Thanks for the code! May I ask; what fonts did you use?

In the game, The Visitor I used these fonts:

• Capone Light
• Fontleroy Brown
• Nickelodeon

The last two are what was used in the Chapter images.

[Coyotl]

Thank you for this. I was just starting to think about building a navigation menu based on a map with learned locations only showing. This should give me a nice head start to sort out the basics.

[OokamiKasumi]

Thank you for this. I was just starting to think about building a navigation menu based on a map with learned locations only showing. This should give me a nice head start to sort out the basics.

I'm glad I could help!
-- Sometimes all one needs a half a clue in the right direction.

[SBG_Eric]

A very nice piece of coding. I've had ideas about doing something similar to this, and this definitely helps get me into the midset I need when thinking about how to code it all out. Great work!

[OokamiKasumi]

A very nice piece of coding. I've had ideas about doing something similar to this, and this definitely helps get me into the mindset I need when thinking about how to code it all out. Great work!

Thank you!
-- I hope the code proves useful.

[Lockvia]

This is a great tutorial! Going to use it in the future!

[OokamiKasumi]

This is a great tutorial! Going to use it in the future!

I'm glad you like it!
-- Would you believe I originally came up with this as a way for the player to see how far they were in the game?