[Tutorial] CTC ~ Click to Continue Icon

[OokamiKasumi]

When I was first trying to figure out how to make the little blinkie icon that appears at the end of the line, or the bottom corner of the box, I found this: http://www.renpy.org/doc/html/dialogue.html#Character.

Being as I am not actually a programmer, that didn't make one bit of sense to me.
-- Straight up documentation rarely does because I have No Frame of Reference for comprehending what I'm looking at.

Eventually, with the help of Camille's amazing tutorial which has a really cool, if somewhat complicated, way of doing one, I finally figured out a simple way of making a CTC blinkie icon.

All it takes is two separate bits of code and an Image.

An Arrow image like this is pretty common:

arrow.png (3.42 KiB) Viewed 22259 times

But you can literally use any sort of PNG graphic at all, such as this one:

arrow2.png (18.52 KiB) Viewed 22259 times

However, I suggest saving the larger icons for Stationary CTCs, because the Text line will stretch to fit the icon's Height. If the icon is taller than the text, it will make a Gap between the last line of text and the one above it.

Next, you need an ATL transformation code to make it blink.

Text line icon.
-- Note: This code is meant for a 1024x768 game!

Code: Select all

init -2:
    # ---------- CTC blinking arrow -------------------
    image ctc_blink:
        xpos 1020 ypos 763 # This actually doesn't matter, but it doesn't work right without it. Go figure...?
        alpha 1.0 # visible
        "arrow.png"
        0.75
        alpha 0.0 # invisible
        0.75
        repeat

If you want a Stationary icon - Anchored in one spot:
-- Note: This code is meant for a 1024x768 game!

Code: Select all

init -2:
    # ---------- CTC blinking arrow -------------------
    image ctc_anchored:
        xpos 0.93 # Across from right
        ypos 0.87 # Up from bottom
        xanchor 1.0  # On Right
        yanchor 1.0   # On Bottom
        alpha 1.0 # visible
        "arrow.png"
        0.75
        alpha 0.0 # invisible
        0.75
        repeat

I have a whole separate .rpy document for all my ATL transformations, (transforms.rpy,) so that's where I put my CTC codes, but you can put the code at the very top of the script.rpy too.

Okay! Next you need to make it appear in the textbox.

That takes the second bit of code which needs to be added to EACH of the characters' definitions.
-- The CTC arrow will NOT appear unless the character speaking has ctc="ctc_blink" added to their definition.

Code: Select all

    define gi = Character('Giselle', 
        color="#6699cc",
        show_two_window = True,
        ctc="ctc_blink",)

With this, Giselle will have a blinking arrow at the end of all her text lines.

It looks like this at the end of the text.

Declaring a Stationary or Anchored CTC is a little different:

Code: Select all

define narrator = Character(None, 
    what_color= "#663300",
    ctc="ctc_anchored",
    ctc_position="fixed",)

This icon blinks on the far right of the textbox.

And there you have it.

[CheeryMoya]

Your codes are a little messier than necessary. To have a blinking CTC at the end of each line, use this code:

Code: Select all

image ctc_blink:
       "GUI/arrow.png"
       linear 0.75 alpha 1.0
       linear 0.75 alpha 0.0
       repeat 

define gi = Character('Giselle', 
        color="#6699cc",
        show_two_window = True,
        ctc="ctc_blink",
        ctc_position="nestled")

If you want to anchor it to a single point, then use this:

Code: Select all

image ctc_anchored:
       "GUI/arrow.png"
       yalign 0.96 xalign 0.95 #Adjust these numbers to fit your own textbox
       linear 0.75 alpha 1.0
       linear 0.75 alpha 0.0
       repeat 

define gi = Character('Giselle', 
        color="#6699cc",
        show_two_window = True,
        ctc="ctc_anchored",
        ctc_position="fixed")

The key is nestled and fixed. If you leave out the ctc_position part out of the speaker's code, then it will automatically default to nestled. If you use yalign and xalign to place your ctc, then omitting ctc_position will ignore the alignment. Once you put in ctc_position="fixed" the coordinates will be read.

CTC icons can also move; they'll do anything as long as you assign ATL to it. If you want a CTC arrow that bobs up and down, something like this will work:

Code: Select all

image ctc:
       "GUI/arrow.png", #This is your image
       subpixel True #This line makes sure that ATL is smooth
       yalign 0.96 xalign 0.95 #Adjust these numbers to fit your own textbox
       linear 0.5 xalign 0.955
       linear 0.5 xalign 0.95
       repeat

Take note that this won't work if you nestle it.

If you have a series of images that won't work just by ATL, you can do an animation strip like this:

Code: Select all

image ctc = Animation("GUI/ctc1.png", 1.0, #The second number is the time that Ren'Py stays on this one image
"GUI/ctc2.png", 0.2,
"GUI/ctc3.png", 0.2,
xpos=1760, ypos=1000) #The position of the CTC, adjust for your own needs

It'll loop by itself. Since we're talking about ATL, saguaro's thread on the matter is worth checking out.

[trooper6]

The thing that first confused me about the CTC...is that is doesn't actually do anything. You can't click it...and you don't even need to in order to continue.

That was disappointing. So I made my arrow as an image button...which works like an actual "click to continue" button...but I couldn't figure out how to put my image button in the say window like a CTC...so I just put it in a separate screen off to the side. It works...but I which I knew a bit more!

[OokamiKasumi]

Your codes are a little messier than necessary...

LOL! One can only use what one knows, and that's all I could figure out from my limited understanding. Your code is much tidier. Thank you for the trim!

The key is nestled and fixed...

'Nestled' is a phrase I haven't heard before. Seriously.

It's so nice to finally have all this explained properly.