Page 1 of 1

Using the slider bar to manipulate the im.Matrix settings?

Posted: Sun Aug 16, 2015 11:59 pm
by AERenoir
I could've sworn I asked this before, but I can't find it in my bookmarks or my previous posts for the life of me...
Anyways, how would I code the bars for like hair or clothing colour in dress up games? So that instead of having eyes and hair in multiple colours I can just have one, then use the im.matrix.hue to shift the colour with a slider bar that looks like this:
bars.jpg
bars.jpg (13.95 KiB) Viewed 2077 times
Or use sliders to adjust transparency or change a colour's saturation or something.

Re: Using the slider bar to manipulate the im.Matrix setting

Posted: Mon Aug 17, 2015 12:24 pm
by Kaen
I'd like to know that too! :lol:

Re: Using the slider bar to manipulate the im.Matrix setting

Posted: Mon Aug 17, 2015 1:16 pm
by philat
Never tried it, but the thread you're looking for is probably this one.

http://lemmasoft.renai.us/forums/viewto ... =8&t=29410

Re: Using the slider bar to manipulate the im.Matrix setting

Posted: Mon Aug 17, 2015 1:35 pm
by xela
philat wrote:Never tried it, but the thread you're looking for is probably this one.

http://lemmasoft.renai.us/forums/viewto ... =8&t=29410
I don't think that it is what he needs.
AERenoir wrote:I could've sworn I asked this before, but I can't find it in my bookmarks or my previous posts for the life of me...
Anyways, how would I code the bars for like hair or clothing colour in dress up games? So that instead of having eyes and hair in multiple colours I can just have one, then use the im.matrix.hue to shift the colour with a slider bar that looks like this:
bars.jpg
Or use sliders to adjust transparency or change a colour's saturation or something.
This is tricky... there are many approaches:

1) No bar, instead (simplest way I think, but not (exactly, it will do the same thing differently) what you asked):
  • A number of image buttons with basic "default" colors.
  • Three bars with values from 0 to 255 for default color channels if someone wants a more unique color.
We did this as a practice couple of years ago, code is prolly lost to time but it sure as hell worked, this wasn't too hard to code just with the stuff from documentation. You will just assign the hair with correct color to some variable and it's all good.

2) Bar like your where you map colors manually through a dict, bit messy and a lot of work but it should be doable.

3) Writing a UDD/class/func that will map any image pixel by pixel to their values, get input coordinates from the mouse and return the proper value. It's possibly the best but also the most difficult way unless you've messed with this stuff before. If you decide to take this path, search latest posts by Molechan, I recall him messing with analyzing images and mapping them to colors pixel by pixel, I helped him with the loop a bit. That will get you started but the idea was to replace one color with another, not pick one from an image (there isn't much difference, you can get mouse input from renpy.get_mouse_pos or renpy.Displayable.event()).

Re: Using the slider bar to manipulate the im.Matrix setting

Posted: Mon Aug 17, 2015 2:09 pm
by xela
xela wrote:1) No bar, instead (simplest way I think, but not (exactly, it will do the same thing differently) what you asked):
  • A number of image buttons with basic "default" colors.
  • Three bars with values from 0 to 255 for default color channels if someone wants a more unique color.
We did this as a practice couple of years ago, code is prolly lost to time but it sure as hell worked, this wasn't too hard to code just with the stuff from documentation. You will just assign the hair with correct color to some variable and it's all good.
I found the prototypes I came up with two years back (before I knew anything about anything in Ren'Py):

Some notes:

- I don't know if this is still working, it is really old, code was posted at a different forum together with images, I've deleted it long time ago from my Ren'Py SDK.
- You can obviously tweak/use it as you please.

Image

Code: Select all

# The game starts here.
label start:

    $colors = ["000000", "000033", "000066", "000099", "0000CC", "0000FF",
"003300", "003333", "003366", "003399", "0033CC", "0033FF",
"006600", "006633", "006666", "006699", "0066CC", "0066FF",
"009900", "009933", "009966", "009999", "0099CC", "0099FF",
"00CC00", "00CC33", "00CC66", "00CC99", "00CCCC", "00CCFF",
"00FF00", "00FF33", "00FF66", "00FF99", "00FFCC", "00FFFF",
"330000", "330033", "330066", "330099", "3300CC", "3300FF",
"333300", "333333", "333366", "333399", "3333CC", "3333FF",
"336600", "336633", "336666", "336699", "3366CC", "3366FF",
"339900", "339933", "339966", "339999", "3399CC", "3399FF",
"33CC00", "33CC33", "33CC66", "33CC99", "33CCCC", "33CCFF",
"33FF00", "33FF33", "33FF66", "33FF99", "33FFCC", "33FFFF",
"660000", "660033", "660066", "660099", "6600CC", "6600FF",
"663300", "663333", "663366", "663399", "6633CC", "6633FF",
"666600", "666633", "666666", "666699", "6666CC", "6666FF",
"669900", "669933", "669966", "669999", "6699CC", "6699FF",
"66CC00", "66CC33", "66CC66", "66CC99", "66CCCC", "66CCFF",
"66FF00", "66FF33", "66FF66", "66FF99", "66FFCC", "66FFFF",
"990000", "990033", "990066", "990099", "9900CC", "9900FF",
"993300", "993333", "993366", "993399", "9933CC", "9933FF",
"996600", "996633", "996666", "996699", "9966CC", "9966FF",
"999900", "999933", "999966", "999999", "9999CC", "9999FF",
"99CC00", "99CC33", "99CC66", "99CC99", "99CCCC", "99CCFF",
"99FF00", "99FF33", "99FF66", "99FF99", "99FFCC", "99FFFF",
"CC0000", "CC0033", "CC0066", "CC0099", "CC00CC", "CC00FF",
"CC3300", "CC3333", "CC3366", "CC3399", "CC33CC", "CC33FF",
"CC6600", "CC6633", "CC6666", "CC6699", "CC66CC", "CC66FF",
"CC9900", "CC9933", "CC9966", "CC9999", "CC99CC", "CC99FF",
"CCCC00", "CCCC33", "CCCC66", "CCCC99", "CCCCCC", "CCCCFF",
"CCFF00", "CCFF33", "CCFF66", "CCFF99", "CCFFCC", "CCFFFF",
"FF0000", "FF0033", "FF0066", "FF0099", "FF00CC", "FF00FF",
"FF3300", "FF3333", "FF3366", "FF3399", "FF33CC", "FF33FF",
"FF6600", "FF6633", "FF6666", "FF6699", "FF66CC", "FF66FF",
"FF9900", "FF9933", "FF9966", "FF9999", "FF99CC", "FF99FF",
"FFCC00", "FFCC33", "FFCC66", "FFCC99", "FFCCCC", "FFCCFF",
"FFFF00", "FFFF33", "FFFF66", "FFFF99", "FFFFCC", "FFFFFF"]
    python:
        def set_color(red, green, blue):
            return red, green, blue, 0
    $current_color = None
    $obj = object()
    $obj.red = 0
    $obj.green = 0
    $obj.blue = 0

    
    show screen recolor_screen
    with dissolve

    python:
        while True:
            result = ui.interact()
            
            if result[0] == "recolor":
                current_color = result[1]
            
            if result[0] == "quit":
                renpy.quit()

screen recolor_screen:
    
    hbox align(0.1, 0.1):
        box_wrap True
        xmaximum 245
        
        for color in colors:
            imagebutton:
                maximum(40, 10)
                idle Solid(color)
                hover Solid(color)
                action Return(["recolor", color])
                
    if current_color:
        add(im.Twocolor(im.Scale("anime-hair-hi.png", 200, 200), "#ffffff", current_color)) align(0.8, 0.1)
    else:    
        add(im.Scale("anime-hair-hi.png", 200, 200)) align(0.8, 0.1)
        
    text ("{size=-5}RGB Values: Red: %s, Green: %s, Blue: %s !!!"%(obj.red, obj.green, obj.blue)) align(0.1, 0.8)    
        
    vbox align(0.1, 0.9):
        bar:
            xalign 0.5
            value FieldValue(obj, 'red', 255, max_is_zero=False, style='scrollbar', offset=0, step=1)
            xmaximum 255
            
        bar:
            xalign 0.5
            value FieldValue(obj, 'green', 255, max_is_zero=False, style='scrollbar', offset=0, step=1)
            xmaximum 255
            
        bar:
            xalign 0.5
            value FieldValue(obj, 'blue', 255, max_is_zero=False, style='scrollbar', offset=0, step=1)
            xmaximum 255
        
    add(im.Twocolor(im.Scale("anime-hair-hi.png", 200, 200), "#ffffff", set_color(obj.red, obj.green, obj.blue))) align(0.8, 0.7)
    
    textbutton "Quit" align(0.5, 0.9):
        action Return(['quit'])
Image

Code: Select all

# The game starts here.
label start:

    python:
        class SetColor(object):
            def __init__(self):
                self.red = 0
                self.green = 0
                self.blue = 0
            
            def set_color(self):
                return self.red, self.green, self.blue, 0
                
            def screen_loop(self):
                renpy.show_screen("recolor_screen")
                while True:
                    result = ui.interact()
                    
                    if result[0] == "recolor":
                        current_color = result[1]
                    
                    if result[0] == "quit":
                        renpy.quit()
                    
        cs = SetColor()
        cs.screen_loop()


screen recolor_screen:

    add(im.Twocolor(im.Scale("anime-hair-hi.png", 300, 300), "#ffffff", cs.set_color())) align(0.5, 0.1)
        
    text ("{size=-5}RGB Values: Red: %s, Green: %s, Blue: %s !!!"%(cs.red, cs.green, cs.blue)) align(0.5, 0.6)    
        
    vbox align(0.5, 0.7):
        bar:
            xalign 0.5
            value FieldValue(cs, 'red', 255, max_is_zero=False, style='scrollbar', offset=0, step=1)
            xmaximum 255
            
        bar:
            xalign 0.5
            value FieldValue(cs, 'green', 255, max_is_zero=False, style='scrollbar', offset=0, step=1)
            xmaximum 255
            
        bar:
            xalign 0.5
            value FieldValue(cs, 'blue', 255, max_is_zero=False, style='scrollbar', offset=0, step=1)
            xmaximum 255
    
    textbutton "Quit" align(0.5, 0.95):
        action Return(['quit'])
I actually posted this once before: http://lemmasoft.renai.us/forums/viewto ... t=SetColor

*There is also a very advanced variant of the same but it will take hours to figure out, I can PM it to you if you want but code is not mine and it's a very, very difficult (and now dead) project to figure out .

Re: Using the slider bar to manipulate the im.Matrix setting

Posted: Tue Aug 18, 2015 12:09 pm
by Kaen
Thank you xela! As always you're so helpful. :]