Relationship Menu: Get images to appear at point increase

[AvalonMelody]

Hello!
I have a question about making a relationship menu function. I've already created the screen needed and added the button to the menu (Still working on making a return to screen button in the relationship menu though)

My big question is that, this menu works using stars to show the level, rather than bars. For example, once the relationship points of Al hit 10+, one star/heart will appear next to his portrait on the menu. However, the menu is also set up that the base image is his portrait next to 10 'empty' stars. As relationship builds, the stars/hearts are 'filled'.

I was assuming I could simply use a kind of ground image that's static (Hence the plain 'ol add "filename.png" under the defined screen) and then take another image (would it be called an overlay?) possibly just the static image with it's stars filled in (same dimensions, same images, just the empty stars now filled) and have the stars/hearts appear filled in when it's just that one section of the 'overlay' showing up.

Written out like that, that seems a bit unlikely. I guess I need to have a single image of a star/heart filled in and just position it over the static image? More appearing using 'if' statements maybe?

In the end, it's all just assumption and I really don't know how to go about doing that, if it's even possible...

So, my question is this:
How can I make images appear over the large one, to give the illusion that these relationship stars/hearts are being filled in? (Using 10 point intervals)

and, if this is just impossible or messy, then:
What's an easier way to go about this? My main concern is that instead of bars increasing/filling, it needs to be stars/hearts that only appear 'filled in' every 10 points gained.

Any help is really appreciated! Thank you!

Below is an example of what I want (crudely done in paint)

[mjshi]

Hm, just a suggestion about the ten point intervals:

In code, it might be easier to use 2 variables:

Code: Select all

init:
  
  $ a_points = 0
  $ a_interval = 0 # the bar created will be based on this variable
  
label start:
  
  "Adam" "Heyy!"
  
  menu:
    
    "Good morning":
      
      $ a_interval += 4 # or some other value
      if a_interval >= 10: # check if interval has exceeded 10
        $ a_interval -= 10 # remove 10 points
        $ a_points += 1 # add 1 star, usually this would be a % of the bar
      
      # then, you could have a bar that filled in with stars at the correct pixel intervals ^_^
      # for instance, if 1 star was 50 pixels wide, and the entire bar was 300 pixels, I'd add just enough to a_points to seem as if the bar
      # increased by 1 star. Although this way, all the stars need to be evenly spaced across the bar.

Then maybe supplement it with a bar.

[AvalonMelody]

Hm, just a suggestion about the ten point intervals:

In code, it might be easier to use 2 variables:

Code: Select all

init:
  
  $ a_points = 0
  $ a_interval = 0 # the bar created will be based on this variable
  
label start:
  
  "Adam" "Heyy!"
  
  menu:
    
    "Good morning":
      
      $ a_interval += 4 # or some other value
      if a_interval >= 10: # check if interval has exceeded 10
        $ a_interval -= 10 # remove 10 points
        $ a_points += 1 # add 1 star, usually this would be a % of the bar
      
      # then, you could have a bar that filled in with stars at the correct pixel intervals ^_^
      # for instance, if 1 star was 50 pixels wide, and the entire bar was 300 pixels, I'd add just enough to a_points to seem as if the bar
      # increased by 1 star. Although this way, all the stars need to be evenly spaced across the bar.

Then maybe supplement it with a bar.

Thank you for the suggestion, my point system looks a bit like that. Although, again, I'm hoping not to use a bar but images where 1 star/heart = 10 points.

My focus is getting the menu/window that shows this "Relationship status" to function (show the stars/hearts filled) but thanks for the assistance point-wise.

[AvalonMelody]

Ah, not sure how long to wait until you can bump, but I did update the post with a diagram to help understand the concept better!
.w." )

[IaMe]

for the first time there is something that i can help with (well hopefully)

i tried to make a setup that mimicked your example image, could only get one line of hearts not the shown two but the hearts change color at set intervals depending on how many point you add

my set up records up to 1000 points and every 110 points is a full heart and 55 points a half heart. it is a bar system but looks like hearts.
i have attached images of what it looks like and an example game. in the example game click the stats button to be taken to the stats screen.

full heart

plus another half heart

[philat]

If you don't want to use a bar, for whatever reason (honestly, probably easier to just use a bar with heart images):

Code: Select all

label start:
    $ ap = 55

screen stats():
    hbox:
        for x in range(int(ap/10)):
            add "full_heart.png"
        for x in range(10-int(ap/10)):
            add "empty_heart.png" 

This will take the results of ap divided by ten, round down to nearest integer, then display that many full hearts, then fill the rest (the code assumes 10 hearts) with empty hearts. This is only 1 horizontal line, but you can massage the concept to create multiple lines if you're married to that presentation.

ETA: Reread the OP, saw that you intend to have a background image with the empty hearts. In that case, just use the full heart part as needed.

[AvalonMelody]

Thanks for everyone's help and suggestions!
A bit of playing around with the screen code and I've figured a way to make it work using add and showif lines. It checks a variable, so that if it's a certain number (though I could probably set it to higher than.) an image of a filled in heart appears in a specific place on top of the static image. Is there an 'in-between number x and number y' I could use though?

It's probably not the cleanest method out there, it shows the images when conditions are met and doesn't look too shabby.

I posted it below. If you want to clean it up or use it, you're free to. Let me know if you do!
Thanks!

Code: Select all

screen scoreboard():
    
    vbox:
        add "chart.png" xalign 1.0 yalign 0.0
    #Static BG of the menu
    
    showif al_points == 3:
        add "star_3.png" xpos 105 ypos 5
    elif al_points == 2:
        add "star_2.png" xpos 105 ypos 5
    elif al_points == 1:
        add "star_1.png" xpos 105 ypos 5
    else:
        add "star_1.png" xpos 105 ypos 5
        
    showif fel_points == 3:
        add "star_3.png" xpos 105 ypos 105
    elif fel_points == 2:
        add "star_2.png" xpos 105 ypos 105
    elif fel_points == 1:
        add "star_1.png" xpos 105 ypos 105
    else:
        add "star_1.png" xpos 105 ypos 105