Skewing Text (solved)

[SinnyROM]

Hello, I would like to know if there is a good way to transform text, such as skewing. I attached a mockup I made of the effect I want: for the digits to line up with the surface of the watch.

The following is code for my screen so far, with time_h and time_m being hour and minute variables respectively.

Code: Select all

screen time_display:
    zorder 10
    window:
        background "ui/watch.png"
        xpos 1050 ypos 700 xmargin 75 ymargin 75
        hbox:
            xalign 0.0 yalign 0.0
            text "[time_h]:[time_m]" size 64 color "#ffcc00" font "ui/fonts/Let's go Digital Regular.ttf"

Is this possible with Ren'Py/Python? Would I need to convert the text to a displayable, and if so how would I go about doing that?
Any suggestions are appreciated.

[PyTom]

We don't support this yet. We support scaling, rotation, and translation, but we don't support arbitrary skewing. You should see if you can get buy with just those three operations - I think you might be close.

[Asceai]

You'd probably be best off just creating images for each (pre-skewed)) digit and drawing then in the correct positions, rather than trying to do this with text.

[SinnyROM]

Thanks guys. I think I'll just make do with the rotation. However, I'm now stuck on how to proceed. I've made a displayable in the following code with the properties rotate=45, but the angle remains the same:

Code: Select all

# Time
    $ time_h = "10"
    $ time_m = "55"
    $ time_h_m = Text("[time_h]:[time_m]", None, None, None, None, rotate=45)

In my screen code, it's mainly unchanged except for the text line changed to image:

Code: Select all

screen time_display:
    zorder 10
    window:
        background "ui/watch.png"
        xpos 1050 ypos 700 xmargin 75 ymargin 75
        hbox:
            xalign 0.0 yalign 0.0
            image time_h_m

[Asceai]

$ time_h_m = At(Text("[time_h]:[time_m]", None, None, None, None), Transform(rotate=45))

[SinnyROM]

$ time_h_m = At(Text("[time_h]:[time_m]", None, None, None, None), Transform(rotate=45))

Ah, this did the trick. I'll have to look into initiating my variables more properly in the future. Thanks again!

Edit:
In case anyone is interested in how to transform text and with a style applied, here is my code for reference.

Code: Select all

# Time
    $ time_h = "10"
    $ time_m = "55"
    $ time_h_m_d = At( Text("[time_h]:[time_m]", None, None, None, None, style="time_display_style"), Transform(rotate=13, yzoom=1.5) )

Code: Select all

style time_display_style:
    size 64
    color "#ffcc00"
    font "ui/fonts/Let's go Digital Regular.ttf"
screen time_display:
    zorder 10
    window:
        background "ui/watch.png"
        xpos 1050 ypos 700 xmargin 75 ymargin 75
        hbox:
            xalign 0.0 yalign 0.0
            image time_h_m

[PyTom]

Code: Select all

At(Text("[time_h]:[time_m]"), Transform(rotate=45)

Should work, too. You don't need to give it all those Nones.