How to outline and update displayable text

[Trilaterus]

Is it possible to apply an outline to displayable text? It probably is but I am having trouble approaching it.

The final concept is that outlined text displaying the current health moves in from the top, updates (decreases or increases and reflects that in a number change) then moves out back to the top.
A quick mockup of the text style with outline: http://prntscr.com/7clkzv

This would currently display the text in the default font and default colour. It would then move out at the appropriate time with the 'hide text' and 'with moveouttop' functions

Code: Select all

show text "Health":
    xalign 0.1 yalign 0.1
with moveintop

The next step was to apply styles to the text. What's working best for me so far is creating a style and applying it as a text tag, although outlines are not picked up:

Code: Select all

# defined the style before label start:
style healthui is text:
    color '000000'
    font 'osaka.ttf'
    outlines [(20, "FFFFFF", 1, 1)] # this value is not final, just trying to see some results

Code: Select all

show text "{=healthui}Health{/=healthui}": # Edit to code adding in tags
        xalign 0.1 yalign 0.1
with moveintop

The result of this method: http://prntscr.com/7clqeo

Another method I had tried was using a character with a predefined style, the issue with this is that I couldn't get the animation (moveintop) to apply to text that a character says:

Code: Select all

#Mockup
health_ui "Health"
with moveintop # <- doesn't work, and I didn't expect it to

What I was currently working on before coming to the forums was implementing a tag using python, it's a little more complex so I'm not sure if it's possible to apply do it here but I managed to make a tag that changed the font:

Code: Select all

def health_tag(tag, argument, contents):
    return [
        (renpy.TEXT_TAG, u"font={}".format('osaka.ttf')),
        ] + contents + [
        (renpy.TEXT_TAG, u"/font"),
        ]
config.custom_text_tags["health"] = health_tag

That was the process I've taken to try to do this, I've hopefully missed something easy and obvious ^^

[SinnyROM]

I think it has to do with your outline's colour. Hex codes require the hash mark. Your text colour's also missing it, but maybe it's already defaulted to black?

Code: Select all

# defined the style before label start:
style healthui is text:
    color '#000000'
    font 'osaka.ttf'
    outlines [(20, "#FFFFFF", 1, 1)]

You can check the documentation for more ways of defining colour: http://www.renpy.org/doc/html/style_pro ... rty-values

[Trilaterus]

I think it has to do with your outline's colour. Hex codes require the hash mark. Your text colour's also missing it, but maybe it's already defaulted to black?

My # usage throughout is kinda varied, although in this case I've now tried it with and without the # in different colours and the outline doesn't show. I also decided to test if it would work without the # by changing the text colour to a green (something that has to be different to the default), both of these codes produce the same result:

Code: Select all

# Declare text styles here
style healthui is text:
    color '00FF00' # without hash
    font 'osaka.ttf'
    outlines [(20, "FF00FF80", 1, 1)] # extra '80' was added to test if transparency was defaulted for outlines to 0

Code: Select all

# Declare text styles here
style healthui is text:
    color '#00FF00' # with hash
    font 'osaka.ttf'
    outlines [(20, "FF00FF80", 1, 1)] # extra '80' was added to test if transparency was defaulted for outlines to 0

[SinnyROM]

I had some time to try colours without the hash mark, and it actually works! Learned something new.

As for the outlines issue, I looked at the documentation on style tags: http://www.renpy.org/doc/html/text.html#style-text-tags
The properties list includes colour and font, but not outlines, which could explain the reason why it's not working.

Maybe for this, it's better to use a screen with the text element that displays the health bar as opposed to a displayable.

[Trilaterus]

Glad you learnt something ^^

I've not implemented a screen before... I'll look up its documentation and have a go tomorrow. I'll update this with how it went and change the title to solved when I figure it out.

[Trilaterus]

With a bit of knowledge of screens I managed to get the text to outline, woo! This is what I've done to outline it:

Code: Select all

screen health_text(passedhealth, passedhits):
    text "{=healthui}{size=+10}Health{/size}                                                                                 {size=+40}[displayhealth]{/size}{/=healthui}" outlines [(2, "000", 0, 0)] at trans_health

The reason for the large space in the middle is because I'm lazy, here's the effect of it on screen: http://prntscr.com/7d6tdk

Code: Select all

transform trans_health:
    xalign 0.5 yalign -0.15
    on show:
        linear 0.5 yalign 0.055
    on hide:
        linear 0.5 yalign -0.15

Code: Select all

label damage_taken(char, string, hits):
    play sound "damage.ogg"
    show damage:
        alpha 1.0
        linear 1.5 alpha -0.5
    with None
    window show
    show screen health_text(health, hits)
    # etc etc...

The final effect I've been trying to add in (which is why I thought I needed displayable text in the first place) is that the health is shown going down point by point (imagine like how in Yu-Gi-Oh when they lose LifePoints, it makes the little bleeps and drops until it reaches the right amount)


The second demo displays the effect a little better

I'll relook at the timer code to see what I can gather there but passing the variables around (such as health and hits) seem to be impossible and I can't figure out a way of doing it.

TLDR:
I need code like this to be applied as an animation:

Code: Select all

$ tmp = health - hits
if tmp < health:
    health -= 1
    display health
elif tmp >= health:
    display health
repeat

written as semi pseudo python, ATL, Ren'Py whatever :P

[octacon100]

I think you'll want to try out AnimatedValue for the bar: http://www.renpy.org/doc/html/screen_ac ... tml#values

There's totally a way to do the text changing value as well, using timers like you said. I don't have the chance to try something out now. You might want to check out the timer cookbook entry and see if you can change that to do what you want.

[Trilaterus]

I think you'll want to try out AnimatedValue for the bar: http://www.renpy.org/doc/html/screen_ac ... tml#values

I actually have the bar working using some sneaky cropping methods!

Code: Select all

show health_fill:
        xanchor 1.0
        xpos 742 yalign 0.06
        crop (0, 0, (tmphealth/100)*684, 39)
        size ((tmphealth/100)*684, 39)
        pause 1
        easein 1 crop ((health/100)*684-684, 0, 684, 39)

The bars height and width are 684 and 39, this code waits a second before cropping it based on the percentage of the health

There's totally a way to do the text changing value as well, using timers like you said. I don't have the chance to try something out now. You might want to check out the timer cookbook entry and see if you can change that to do what you want.

I agree, there is a way. It's really bugging me that I can't use what I've learnt in the timer cookbook entry since they base it off one of the default parameters ("The amount of time the displayable has been shown for.")

EDIT:
I wrote this based on the timer code, problem is I can't pass health and hits as stuff1 and stuff2 during 'runtime' (sorry C++ programmer over here >_<) Plus I don't see how I'd outline text like that...

Code: Select all

def healthupdate(st, at, stuff1=100, stuff2=-10):
        tmp = stuff1 + stuff2
        if tmp < stuff1:
            stuff -= 1
            return Text("%" % stuff1, color="fff", size+=40), 1.0
        elif tmp >= stuff1
            return Text("%" % stuff1, color="fff", size+=40), 1.0