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

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
henvu50
Veteran
Posts: 337
Joined: Wed Aug 22, 2018 1:22 am
Contact:

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

#1 Post 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}"

User avatar
Ocelot
Lemma-Class Veteran
Posts: 2376
Joined: Tue Aug 23, 2016 10:35 am
Github: MiiNiPaa
Discord: MiiNiPaa#4384
Contact:

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

#2 Post 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.
< < insert Rick Cook quote here > >

Post Reply

Who is online

Users browsing this forum: Google [Bot]