Page 1 of 1

Help me convert XT9K's code to produce a vertical gradient text effect, instead of horizontal?

Posted: Sat Jul 24, 2021 2:08 am
by henvu50
XT9K made this gradient text for Ren'py:
- https://github.com/SoDaRa/Kinetic-Text-Tags
- viewtopic.php?f=51&t=60527&p=544928#p544928

Image

Can someone help me modify his code to produce a vertical gradient instead? As you can see, his current gradient is horizontal, but I need vertical.

This is where I suspect the gradient direction calculation is taking place:

Code: Select all

        return start_col.interpolate(end_col, index * 1.0/range).hexcode
Here is the complete code, but I stripped out as much as I could to shorten it for simplicity.

Code: Select all

init python:
    def color_gradient(color_1, color_2, range, index):
        if index == 0:
            return color_1
        if range == index:
            return color_2
        start_col = Color(color_1)
        end_col = Color(color_2)
        return start_col.interpolate(end_col, index * 1.0/range).hexcode

    def gradient_tag(tag, argument, contents):
        new_list = [ ]
        if argument == "":
            return
        else: # Note: all arguments must be supplied
            col_1, _, col_2 = argument.partition('-')
        # Get a count of all the letters we will be applying colors to
        count = 0
        for kind,text in contents:
            if kind == renpy.TEXT_TEXT:
                for char in text:
                    if char == ' ':
                        continue
                    count += 1
        count -= 1
        my_index = 0
        my_style = DispTextStyle()
        for kind,text in contents:
            if kind == renpy.TEXT_TEXT:
                for char in text:
                    if char == ' ':
                        new_list.append((renpy.TEXT_TEXT, ' '))
                        continue
                    new_list.append((renpy.TEXT_TAG, "color=" + color_gradient(col_1, col_2, count, my_index)))
                    new_list.append((renpy.TEXT_TEXT, char))
                    new_list.append((renpy.TEXT_TAG, "/color"))
                    my_index += 1
            elif kind == renpy.TEXT_TAG:
                if not my_style.add_tags(text):
                    new_list.append((kind, text))
            else:
                new_list.append((kind,text))
        return new_list
   
    def gradient2_tag(tag, argument, contents):
        new_list = [ ]
        if argument == "":
            return
        else: # Note: All arguments must be supplied
            arg_num, _, argument = argument.partition('-') # Number of gradients to read
        arg_num = int(arg_num)
        # Get all arguments
        col_list = []
        end_num = 0
        for i in range(arg_num):
            col_1, _, argument = argument.partition('-')   # Color 1
            col_2, _, argument = argument.partition('-')   # Color 2
            end_num_arg, _, argument = argument.partition('-') # Gradient Length
            end_num += int(end_num_arg) # Converts gradient length into it's ending position
            col_list.append((col_1, col_2, end_num))

        my_index = 0
        my_style = DispTextStyle()
        for kind,text in contents:
            if kind == renpy.TEXT_TEXT:
                for char in text:
                    if char == ' ':
                        new_list.append((renpy.TEXT_TEXT, ' '))
                        continue
                    char_disp = GradientText(my_style.apply_style(char), col_list, my_index, arg_num)
                    new_list.append((renpy.TEXT_DISPLAYABLE, char_disp))
                    my_index += 1
                    # Wrap around if reached the end of the gradient list.
                    if my_index >= col_list[arg_num-1][2]:
                        my_index = 0
            elif kind == renpy.TEXT_TAG:
                if not my_style.add_tags(text):
                    new_list.append((kind, text))
            else:
                new_list.append((kind,text))
        return new_list

    config.custom_text_tags["gradient"] = gradient_tag
    config.custom_text_tags["gradient2"] = gradient2_tag
Here is another piece of code needed to make this work, but isn't directly related to the gradient calculations:

Code: Select all

default preferences.chaos_on = False  # You can change this to be gui.chaos_text or persistent.chaos_text if you'd prefer.

init python:
    import random
    import math

    # This will maintain what styles we want to apply and help us apply them
    class DispTextStyle():
        def __init__(self):
            self.alpha = None
            self.font = None
            self.size = None
            self.bold = False
            self.italic = False
            self.underline = False
            self.strikethrough = False
            self.plain = False
            self.color = None
            self.user_style = None
            self.outline_color = None
            # Be sure to add your own tags here if you want to wrap them up in each other
            # I advise assigning None if they take an argument and False if they don't
            # Be careful of the order tags are applied. Any tag meant to manipulate text
            # should be the innermost one.
            self.bounce_tag = None
            self.fade_in_tag = None
            self.scare_tag = None
            self.rotate_tag = None
            self.chaos_tag = False
            self.move_tag = False
            self.omega_tag = None

If you put all that code into one RPY file, you can then use the gradient on your text like this in Ren'py:

Code: Select all

"Here is a {gradient=#ff0000-#00ff00}fancy gradient{/gradient}"

Re: Help me convert XT9K's code to produce a vertical gradient text effect, instead of horizontal?

Posted: Sat Jul 24, 2021 3:34 am
by Ocelot
Well, you see, it isn't actually renders characters differently. It just inserts color tag around each letter in gradient. Each letter is still drawn using single color (you can see that by applying a gradient with great hue difference to just two letters). So, a vertical gradient is only possible if you are using vertical text.

Gradient2 tag is more promising, you need to check GradientText implementation, maybe it is easier to change.

You can try to create your own renderer (check bounce/fade/chaos tags implementation) and apply a shader to it, but I don't have any experience with new model-based renderer, so I cannot show you an example yet.