How can I have an animated text box?

[maricore]

okay so i thought about making an animated heart pulse monitor thingie (so professional) inside the text box, BUT because i cant find one tutorial on how to animate a text box, i decided to try and so it separately and place it as a movie sprite behind the text box but of course it was darker (because text box is black with low opacity) and i cant get movie sprite in front of the it (dunno how)

so is there a way i can make the text box animated with the heart rate in it and make it work in renpy? because i also have to write show pulse every time i add a character image or bg image.

[indoneko]

okay so i thought about making an animated heart pulse monitor thingie (so professional) inside the text box, BUT because i cant find one tutorial on how to animate a text box, i decided to try and so it separately and place it as a movie sprite behind the text box but of course it was darker (because text box is black with low opacity) and i cant get movie sprite in front of the it (dunno how)

so is there a way i can make the text box animated with the heart rate in it and make it work in renpy? because i also have to write show pulse every time i add a character image or bg image.

pulse animation.png

C textboxes.png

I can't see your image. Can you re-upload it?
EDIT : nevermind. It was my adblocker that acidentally block them.

As for the animation, you can create a diplayable using ATL and then use it for your window background when you define your character.

[maricore]

I'm sorry, i don't quite understand your solution... (what is ATL...)

[maricore]

oh never mind now i know, but how can i apply that in my case?

[indoneko]

I'm not really sure how you want to animate it, so this is just a simple example.

Here's the code for the script.rpy

Code: Select all

image animatedbg:
    "images/C textboxes.png"
    align (0.5, 1.0)
    pause 0.8
    "images/C textboxes2.png"
    align (0.5, 1.0)
    pause 0.2
    repeat

define doc = Character("Doctor",
                        what_color="#999",
                        what_text_align=0.0,
                        window_background="animatedbg")
                        
label start:
    scene black
    doc "Your heart's tissue has been damaged"
    doc "We need to operate on you as soon as possible"
    return

In Screens.rpy, find this line and change the filename with your own (it must be one of the base image used in your animation)

Code: Select all

background Image("gui/textbox.png", xalign=0.5, yalign=1.0)

And last, open gui.rpy and change the value in this line to fit your new textbox height. I think 220 to 250 is good enough for the image sample in your post.

Code: Select all

define gui.textbox_height = 185

Good luck~ :3

[maricore]

that looks very promising but im actually using the old GUI... so will this work on the old one too?

[indoneko]

Old GUI? which Renpy version do you use?

I tried it this code on a new project using Renpy 6.99.12.2.2029 with Legacy/old GUI and it run fine.


Btw, why do you avoid the new GUI?

[Mari-Core]

The newest version.
Also I don't really avoid it, it's just I don't know how to deal with it yet. And how to customise it the way I wanted like in the old GUI

[indoneko]

wait... is maricore and Mari-Core the same person?

[xavimat]

This could be a solution:

- I'm using indoneko's suggestion of adding the animation to the Character definition. So only the characters with that definition will have the pulse animation. If you want all characters and even the narrator to have the animation, put this line of code directly in the say screen (in screens.rpy):

Code: Select all

add "pulse_anim"

- I've made an image "pulse_anim" using crop and linear
- I'm using LiveComposite inside the character definition to have the textbox behind and the pulse animaton on top of it.
- Change the numbers in the LiveComposite to fit your needs (width, height, positions...)
- I'm using the new GUI, but this works the same with the old. Just change the route of the textbox "gui/textbox.png" to your own.

The code:

Code: Select all

image pulse_anim:
    "pulse animation.png"
    crop_relative True
    crop (0, 0, 0.0, 1.0)
    linear 2.0 crop (0, 0, 1.0, 1.0)
    repeat

define e = Character(
    "Eileen",
    window_background=LiveComposite(
        (1502, 267),
        (110, 0), "gui/textbox.png",
        (0, -40), "pulse_anim"
        )
    )

[maricore]

wait... is maricore and Mari-Core the same person?

yes its me im so sorry >_<

[Mari-Core]

This could be a solution:

- I'm using indoneko's suggestion of adding the animation to the Character definition. So only the characters with that definition will have the pulse animation. If you want all characters and even the narrator to have the animation, put this line of code directly in the say screen (in screens.rpy):

Code: Select all

add "pulse_anim"

- I've made an image "pulse_anim" using crop and linear
- I'm using LiveComposite inside the character definition to have the textbox behind and the pulse animaton on top of it.
- Change the numbers in the LiveComposite to fit your needs (width, height, positions...)
- I'm using the new GUI, but this works the same with the old. Just change the route of the textbox "gui/textbox.png" to your own.

The code:

Code: Select all

image pulse_anim:
    "pulse animation.png"
    crop_relative True
    crop (0, 0, 0.0, 1.0)
    linear 2.0 crop (0, 0, 1.0, 1.0)
    repeat

define e = Character(
    "Eileen",
    window_background=LiveComposite(
        (1502, 267),
        (110, 0), "gui/textbox.png",
        (0, -40), "pulse_anim"
        )
    )

i kinda did that, but because the animation didn't have the same effect i wanted i used the movie sprite instead.
all whats left now, is for it to be above the textbox and bellow the text.

the movie is a movie sprite so the format is webm

here is the part I used:
script.rpy

Code: Select all

image pulse_anim = Movie(channel="pulse", play="pulse.webm", mask="pulse_mask.webm", xpos = 290, ypos = 815)

and this in the screen.rpy

Code: Select all

screen say(who, what, side_image=None, two_window=False):
    add "pulse_anim"

the animation was in the top of the screen so i used xpos and ypos to adjust it to be in the right place.