Tutorial & Code: Analog/Digital Clock as User Defined Displa

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Message
Author
User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#16 Post by trooper6 »

There shouldn't be any horizontal stretching, but the key is, whatever images you are using need to be exactly square. So 150x150 or 75x75, etc. Are you using your own images or the ones I included?
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

glithch
Regular
Posts: 93
Joined: Sat Jul 23, 2016 5:32 am
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#17 Post by glithch »

trooper6 wrote: Wed Jan 15, 2020 8:21 pm There shouldn't be any horizontal stretching, but the key is, whatever images you are using need to be exactly square. So 150x150 or 75x75, etc. Are you using your own images or the ones I included?
but the analog image isnt square. i took your analog clock image, and pasted my own clock into it and i notice a lot of stretching

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#18 Post by trooper6 »

glithch wrote: Sat Jan 18, 2020 1:32 pm but the analog image isnt square. i took your analog clock image, and pasted my own clock into it and i notice a lot of stretching
The analogue clock images in the project I posted are square, the base, hour and minute images are 450x450 (the second hand is 255x255). The displayable is set up with the assumption that the images you are giving them are perfectly square, and then it is also meant to output a square image for the analogue clock (the digital clock is different). Are your images that you replaced perfectly square?

If you want, you can post you images and I can drop them into the project and see if I also get stretching.
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

glithch
Regular
Posts: 93
Joined: Sat Jul 23, 2016 5:32 am
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#19 Post by glithch »

trooper6 wrote: Sat Jan 18, 2020 5:58 pm
glithch wrote: Sat Jan 18, 2020 1:32 pm but the analog image isnt square. i took your analog clock image, and pasted my own clock into it and i notice a lot of stretching
The analogue clock images in the project I posted are square, the base, hour and minute images are 450x450 (the second hand is 255x255). The displayable is set up with the assumption that the images you are giving them are perfectly square, and then it is also meant to output a square image for the analogue clock (the digital clock is different). Are your images that you replaced perfectly square?

If you want, you can post you images and I can drop them into the project and see if I also get stretching.
omg, so sorry. i meant digital! english isnt my first language, and i got it mixed up. the digital clock is 460x200 by default, i resized it x2 because i want the clock to be much bigger in game without loosing the quality. so now its 920x400, but thats still the same ratio so it should work. i also tried just pasting my image onto the 460x200 and it still stretches

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#20 Post by trooper6 »

Could you make a project with just the code and images for your clock the size you want it and attach it here? There is some trickiness with the font and I want to be able to see what’s going on. Because If I can fix it, I will!
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

glithch
Regular
Posts: 93
Joined: Sat Jul 23, 2016 5:32 am
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#21 Post by glithch »

trooper6 wrote: Fri Jan 24, 2020 6:59 pm Could you make a project with just the code and images for your clock the size you want it and attach it here? There is some trickiness with the font and I want to be able to see what’s going on. Because If I can fix it, I will!
https://drive.google.com/open?id=19ssuC ... yhliHJZcus here you go, i didnt change the size of the file here, its the default and you can see the stretching. i just set the size to be 800 in the script

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#22 Post by trooper6 »

Okay, I jumped back into the code. The clock class is built to stretch the width of the image so that it will adjust to fit the size of the font. It will make the image wider if you are also showing seconds, a narrower if you aren't. It is meant to make it so you don't have to do as much work. However, if you don't want the image size being adjusted to fit, you'll have to change some of the code and then do some adjustment by hand until you get a font spacing that looks like what you want.

So in the clock.rpy code.

At the top where you define the class...

Code: Select all

    """As a Creater Defined Displayable this needs to extend the Displayable class)"""
    class Clock(renpy.Displayable):

        #The clock class constructor
        def __init__(self, ana=True, h=0, m=0, cwidth=150, cheight=150, sH=True, mil_time=False, **kwargs):
            """
            This constructor takes the following arguments:
            ana = True gives the analogue version of the clock, False gives digital
            h=Hours the clock should start on
            m=Minutes the clock should start on
            cwidth=How wide you want your clock images to be
            cheight=How wide you want your clock image to be--note for the analogue clock width and height must be the same of it won't work
            sH=If you want the second hand to be visible or not
            If you do not give any arguments when you create the clock, it will default to
             a clock with 0 hours, 0 minutes, 150 pixels square, with a second hand showing
            """
            super(Clock, self).__init__(**kwargs)

            #These lines are for setting up the images used and the size of them
            self.width = cwidth
            #self.d_height = (resize*32)/100
            self.d_height = cheight
            self.base_image = im.Scale(img[0], cwidth, cwidth)
            self.hour_hand_image = im.Scale(img[1], cwidth, cwidth)
            self.minute_hand_image = im.Scale(img[2], cwidth, cwidth)
            self.second_hand_image = im.Scale(img[3], cwidth, cwidth)
            self.digital_base_image = im.Scale("00 images/DigitalClockBase460x200.png",
                self.width, self.d_height)
            self.offset = (cwidth*2**0.5-cwidth)/2
            self.second_hand_visible = sH
You are adding a height parameter here, so you put in exactly what width and height you want the clock to be. This does mean that you will break the code if you are using an analogue clock and don't that both width and height the same.

Now this isn't going to be enough. You are now going to have to hand adjust the font size until it fits in your clock image. My original code does it for you, but you are going to have to do it yourself.
Find this part of the clock.rpy code. It is under the render method:

Code: Select all

        else:
                # create the text that will go in the Digital Clock and boxes text sits in
                ftht = self.d_height * 0.6 #Adjust this for font size, i.e. height
                col =Text(":", style="digi_clock", size=ftht)
                time = list(Text("{0:02d}".format(item), style="digi_clock", size=ftht)
                    for item in self.get_time())
                fxsize = (self.width-60)//3 #Adjust this for the spacing 
So in the line: ftht = self.d_height * 0.6
you'll want to change the 0.6 to a number that will make the font fit will in your image. I think I originally had 0.8? Then I changed it to 0.6 and that fit well for me. Decide what works for you.

In the line: fxsize = (self.width-60)//3
I changed the 4 to a 3...that makes the time much wider, a 5 would make it much narrower.
I changed the -10 to a -60 for smaller adjustments, the bigger the negative number the closer the numbers will be together.

You will have to hand adjust those numbers since you are taking the auto adjustment out.

You would call your clock in the script file like so:

Code: Select all

default myClock = Clock(False, 7, 24, 460, 200, False, True)
Make those changes and then adjust away!
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

User avatar
Red Velvet
Newbie
Posts: 4
Joined: Fri Jul 17, 2020 12:54 pm
Location: Poland
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#23 Post by Red Velvet »

Is it possible to create a code that will trigger an action at a certain time in Your clock? My goal is for the code to end the day, in my game, at a certain time.

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#24 Post by trooper6 »

Red Velvet wrote: Tue Jul 21, 2020 12:09 pm Is it possible to create a code that will trigger an action at a certain time in Your clock? My goal is for the code to end the day, in my game, at a certain time.
Certainly. But a lot of it depends on what you are doing in your game and how you are using the clock. Are you doing a real time clock? Or are you adding hours to the clock manually? Whatever version of the clock you are using, I first thing I would recommend is creating an "end day function" that does all the things you want to do when the day ends. Once you have your function, you just need to add an "if section" in the render part of the clock. Just a little thing that does, if it is whatever o'clock, trigger the function.

I can't give you more details, because I don't know how you are putting together your game. But note in the code that I have that section in the section that basically says "turn not the alarm"? You can add your own "if it is this time, trigger my end of day function" code right there.
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

User avatar
Red Velvet
Newbie
Posts: 4
Joined: Fri Jul 17, 2020 12:54 pm
Location: Poland
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#25 Post by Red Velvet »

Unfortunately, after a few tries, I don't know how to write this function. My clock is analog, standard and I adding hours to the clock manually. I'm going to have this function priority over everything and move to another label after a certain amount of time. Can you please write that function?

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#26 Post by trooper6 »

I can't write a function for you if I don't know exactly what it is doing. After a certain amount of time it moves to another label.
How much time? Does it jump to a label after 6 hours, or does it jump to a label at 2 o'clock? 2 o'clock am or pm? Does this happen only once? Or does it happen multiple times? What label does it jump to? Does it jump to only one label? Or does it jump to different labels? If different labels, how does it decide with label? It is hard to write other people's functions if you don't know what *exactly* they are supposed to do.
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

User avatar
Red Velvet
Newbie
Posts: 4
Joined: Fri Jul 17, 2020 12:54 pm
Location: Poland
Contact:

Re: Tutorial & Code: Analog/Digital Clock as User Defined Displa

#27 Post by Red Velvet »

Okay, my life is already working, sorry.
"How much time?" - 12 minutes in real time, 12 hours in game, from 9 am to 9 pm.
"Does it jump to a label after 6 hours, or does it jump to a label at 2 o'clock?" -After 12 hours it jump to 9 pm.
"Does this happen only once?" - It happens 3 times. In label 1-day to label 1-night. In label 2-day to label 2-night. In label 3-day to label 3-night.
"If different labels, how does it decide with label?" - I don't know if I understand correctly, but days (and labels) go one after another.
"It is hard to write other people's functions if you don't know what * exactly * they are supposed to do." - Fine. I don't know much about coding :v I'm literally better in desing.

Post Reply

Who is online

Users browsing this forum: No registered users