HEARTS for health meter...?

@albertfish - here's the extra graphic I used

and here's the latest edit to "THE" script

Spoiler for:

Code: [Select]

################################################################################
#                          Hearts and Stars! V 0.3
#                    (advance containers for HP and SP)
#                           by albertfish 9.17.09
#                          modified by gameface101
#                                 RMRK.NET
#

#########################################################################[CLASS]
class Window_Hearts < Window_Base#-----------------------------=[in game window]
  def initialize#-------------------------------------------------=[define load]
    super (-16, -16, 640, 160)#-----------=[x,y window position x,y window size]
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh#---------------------------------------------=[call refresh command]
    self.opacity = 0#-------------------------------------=[window skin opacity]
  end#---------------------------------------------------------=[end definition]
  
########################################################################[UPDATE]
  def update#---------------------------------------------------=[define update]
    super#--------------------------------------------=[update the super window]
    refresh#---------------------------------------------=[call refresh command]
  end#---------------------------------------------------------=[end definition]
  
#######################################################################[REFRESH]  
  def refresh#-------------------------------------------------=[define refresh]
    self.contents.clear#-----------------------------------------=[clear bitmap]
    draw_star#---------------------------------------------=[call to draw_heart]
    draw_heart#---------------------------------------------=[call to draw_star]
  end#---------------------------------------------------------=[end definition]
  
####################################################################[DRAW STARS]  
  def draw_star#---------------------------------------------=[define draw_star]
    x = 4 #------------------------------------------------=[draw x coordinates]
    y = 26 #-----------------------------------------------=[draw y coordinates]
# The following line of code shifts the row of stars down if the player has more
# than 10 hearts. This is so when the player only has 9 hearts the stars are
# right underneath them and when the player has 11 or more hearts the stars
# y value is lower so they do not over lap the hearts.
    y = 52 if $game_party.actors[0].maxhp > 1000#--------------------=[new edit]
    for i in 1...$game_party.actors[0].maxsp + 1 #-------------=[for loop stars]
      if i <= $game_party.actors[0].sp #----------------------------=[condition]
        # Draw a complete heart/star
        bitmap = RPG::Cache.picture("star")#draw  # store the image in the variable 'bitmap'
      else
        # Draw an empty heart/star
        bitmap = RPG::Cache.picture("star container")#draw # store the image in the variable 'bitmap'
      end#----------------------------------------------=[end definition]
      # if the player has 11 stars go back to the left side of the screen and go down one row. This is so you get two rows of stars (zelda style)
      x, y = 4, 78 if i == 11 #-------------------------------=[?]
      src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#---=[box of arguements?] # Set the image's rectangle
      self.contents.blt(x, y, bitmap, src_rect)#---=[box of arguements] # Draw the image
      x += 26 #---------------------------------------=[space icons evenly?] # shift x position so that the icon does not overlap.
    end#----------------------------------=[end 1st box] # end of for loop
  end#---------------------------------=[end 2nd box] # end of if statement
  
###################################################################[DRAW HEARTS]
  def draw_heart#-------------------------------------=[define draw_heart]
    x = 4 #-------------------------------=[draw x coordinates]
    y = 0 #------------------------------------=[draw y coordinates]
    for i in 0...($game_party.actors[0].maxhp + 99) / 100#-----------=[new edit]
      if i < $game_party.actors[0].hp / 100#-------------------------=[new edit]
        # Draw a complete heart
        bitmap = RPG::Cache.picture("heart")# store the image in the variable 'bitmap'
      elsif i < ($game_party.actors[0].hp + 99) / 100
        # Draw a partial heart
        bitmap = RPG::Cache.picture("cursor")# store the image in the variable 'bitmap'
      else
        # Draw an empty heart
        bitmap = RPG::Cache.picture("heart container")#store the image in the variable 'bitmap'
      end#-----------------------------------------------------=[end definition]
      x, y = 4, 26 if i == 11#---------------------------------=[refer to above]
      src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#--=[refer to above]
      self.contents.blt(x, y, bitmap, src_rect)#---------------=[refer to above]
      x += 26 #------------------------------------------------=[refer to above]
    end#---------------------------------------------------------=[end for loop]
  end#-------------------------------------------------------=[end if statement]
end#--------------------------------------------------=[end class Window_Hearts]

###############################################################[SCENE_MAP ALIAS]
class Scene_Map#----------------------------------------=[Map Screen Processing]
  alias af_hc_hud_main main#----------------------------------=[alias af_hc_hud]
  def main#-----------------------------------------------=[define main process]
    @hud_window = Window_Hearts.new#--------------------------=[call hud window]
    af_hc_hud_main#-------------------------------------------=[call with alias]
    @hud_window.dispose#-------------------------------=[gets rid of the window]
  end#---------------------------------------------------------=[end definition]
  alias af_hc_hud_update update#--------------------------------[aliased update]
  def update#---------------------------------------------------=[define update]
    @hud_window.update#-------------------------------------------=[call update]
    af_hc_hud_update#-----------------------------------------=[call with alias]
  end#---------------------------------------------------------=[end definition]
end#---------------------------------------------------------------=[end it all]

and here's my results


you've outlined it so well... and I'm really catching on!
ready to code some algorithms, I think my brain is starting to smoke ^,^ ~g

edit: here's the latest edit to "THE" script:

Spoiler for:

Code: [Select]

################################################################################
#                          Hearts and Stars! V 0.3
#                    (advance containers for HP and SP)
#                           by albertfish 9.17.09
#                          modified by gameface101
#                                 RMRK.NET
#

#########################################################################[CLASS]
class Window_Hearts < Window_Base#-----------------------------=[in game window]
  def initialize#-------------------------------------------------=[define load]
    super (-16, 0, 640, 160)#-----------=[x,y window position x,y window size]
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh#---------------------------------------------=[call refresh command]
    self.opacity = 0#-------------------------------------=[window skin opacity]
  end#---------------------------------------------------------=[end definition]
 
########################################################################[UPDATE]
  def update#---------------------------------------------------=[define update]
    super#--------------------------------------------=[update the super window]
    refresh#---------------------------------------------=[call refresh command]
  end#---------------------------------------------------------=[end definition]
 
#######################################################################[REFRESH] 
  def refresh#-------------------------------------------------=[define refresh]
    self.contents.clear#-----------------------------------------=[clear bitmap]
    draw_star#---------------------------------------------=[call to draw_heart]
    draw_heart#---------------------------------------------=[call to draw_star]
  end#---------------------------------------------------------=[end definition]
 
####################################################################[DRAW STARS] 
  def draw_star#---------------------------------------------=[define draw_star]
    x = 4 #------------------------------------------------=[draw x coordinates]
    y = 26 #-----------------------------------------------=[draw y coordinates]
# The following line of code shifts the row of stars down if the player has more
# than 10 hearts. This is so when the player only has 9 hearts the stars are
# right underneath them and when the player has 11 or more hearts the stars
# y value is lower so they do not over lap the hearts.
    y = 52 if $game_party.actors[0].maxhp > 1000#-------------------=[new edit]
    for i in 0...($game_party.actors[0].maxsp + 99) / 100# + 1#------=[new edit]
      if i < $game_party.actors[0].sp / 100#-------------------------=[new edit]
        # Draw a complete star
        bitmap = RPG::Cache.picture("star")#draw  # store the image in the variable 'bitmap'
        elsif i < ($game_party.actors[0].sp + 99) / 100#-------------=[new edit]
        # Draw a partial star
        bitmap = RPG::Cache.picture("cursor")#store the image in the variable 'bitmap'
      else
        # Draw an empty star
        bitmap = RPG::Cache.picture("star container")#draw # store the image in the variable 'bitmap'
      end#----------------------------------------------=[end definition]
      # if the player has 11 stars go back to the left side of the screen and go down one row. This is so you get two rows of stars (zelda style)
      x, y = 4, 78 if i == 11 #-------------------------------=[?]
      src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#---=[box of arguements?] # Set the image's rectangle
      self.contents.blt(x, y, bitmap, src_rect)#---=[box of arguements] # Draw the image
      x += 26 #---------------------------------------=[space icons evenly?] # shift x position so that the icon does not overlap.
    end#----------------------------------=[end 1st box] # end of for loop
  end#---------------------------------=[end 2nd box] # end of if statement
 
###################################################################[DRAW HEARTS]
  def draw_heart#-------------------------------------------=[define draw_heart]
    x = 4 #------------------------------------------------=[draw x coordinates]
    y = 0 #------------------------------------------------=[draw y coordinates]
    for i in 0...($game_party.actors[0].maxhp + 99) / 100#-----------=[new edit]
      if i < $game_party.actors[0].hp / 100#-------------------------=[new edit]
        # Draw a complete heart
        bitmap = RPG::Cache.picture("heart")#store the image in the variable 'bitmap'
      elsif i < ($game_party.actors[0].hp + 99) / 100
        # Draw a partial heart
        bitmap = RPG::Cache.picture("cursor")#store the image in the variable 'bitmap'
      else
        # Draw an empty heart
        bitmap = RPG::Cache.picture("heart container")#store the image in the variable 'bitmap'
      end#-----------------------------------------------------=[end definition]
      x, y = 4, 26 if i == 11#---------------------------------=[refer to above]
      src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#--=[refer to above]
      self.contents.blt(x, y, bitmap, src_rect)#---------------=[refer to above]
      x += 26 #------------------------------------------------=[refer to above]
    end#---------------------------------------------------------=[end for loop]
  end#-------------------------------------------------------=[end if statement]
end#--------------------------------------------------=[end class Window_Hearts]

###############################################################[SCENE_MAP ALIAS]
class Scene_Map#----------------------------------------=[Map Screen Processing]
  alias af_hc_hud_main main#----------------------------------=[alias af_hc_hud]
  def main#-----------------------------------------------=[define main process]
    @hud_window = Window_Hearts.new#--------------------------=[call hud window]
    af_hc_hud_main#-------------------------------------------=[call with alias]
    @hud_window.dispose#-------------------------------=[gets rid of the window]
  end#---------------------------------------------------------=[end definition]
  alias af_hc_hud_update update#--------------------------------[aliased update]
  def update#---------------------------------------------------=[define update]
    @hud_window.update#-------------------------------------------=[call update]
    af_hc_hud_update#-----------------------------------------=[call with alias]
  end#---------------------------------------------------------=[end definition]
end#---------------------------------------------------------------=[end it all]

*I have commented the new edits with #-------=[new edit]

as you can see I have both sp and hp ready for their algorithms... ~.^

I should have warned you...I learn just as fast as I can forget X-P  ~g

Awesome so far. I'm glad you are understanding my explanations.

Part Three
Okay, so now we have the if statement all set up, now we just have to write up the code that will correctly draw the images. We are going to do this using two images, the full heart and the empty heart. So first thing we do is store the full heart image in a variable. I used bitmap previously, so I will use it again. Now comes the confusing part.

What do I need to do so that I get the correct proportions for the hearts? Well, if I have 678 hp, I’ll have 6 full hearts and one partial heart. But how much of the heart should there be? Well, there should be 78% of a heart. This is because at 700hp there will be 7 full hearts. Since we are using 100 hp per heart it is very easy to see that 678 lies 78% of the way between 600 and 700 and therefore that is how much of the heart should be full.

So how can we extract that value 78? Well, 100 – (700 – 678) = 78 right? Seems easy, but hp changes. Your actor could have 1325 hp. Then the equation becomes 100 – (1400 – 1325) = 25. So we need to create some code that will round up the current hp to the next hundred. How do we do this? Well, we have actually seen this before haven’t we?

Code: [Select]

hp = ($game_party.actors[0].hp+99)/100*100

Here I took the actors current hp and rounded it up to the next hundred. However this is slightly different than before. This time I added *100 to the end. This is because if we go back to the example of having 678 hp + 99 = 777 / 100 = 7 right? Well we wanted to round up to the next hundred so 7*100 = 700. Simple isn’t it?

So now what we have is the actor’s current hp, 678 for example, and a way of calculating the next hundred and we stored that in the variable ‘hp’. Now that equation we looked at earlier can be coded and will work for and actor hp value.

This is the equation we want to use: 100 – (next hundred – actor’s hp)

For simplicity sake I used a new variable for the next line, although you can easily use hp. Let’s just make a new variable called ‘amount’. This variable will hold the value of the equation. So let’s set that up now.

Code: [Select]

amount = 100 - (hp - $game_party.actors[0].hp)

This should seem straight forward. So what we have right now is the percentage of the image that needs to be displayed stored in amount. But this is just a number, 78% is the integer 78. So we have to do some calculations to modify this number and scale it down so that it is proportional to the size of the image. So how do we do that? Well, from math you most likely know that if you want to find how much 78% is of 90 you put 78% into decimal form, 0.78 and multiply by 90. 0.78 * 90 = 70.2. The same logic applies here. Except there is a slight problem! If we divide 78 by 100 and store it as an integer, the value will become 0. So a very easy way around this would be to multiply by 90 first and then divide by 100. 78 * 90 = 7020 / 100 = 70.2. We arrive at the same answer (obviously).

So let’s put this into terms of the image. We want the value stored in ‘amount’, for example 78, to be multiplied by the images height then divide by 100. So the first thing that may come to mind is the following code:

Code: [Select]

amount = amount * bitmap.height / 100

There are many ways of writing this same code. If you choose to use *= instead of = you would have to split this code into 2 lines.

Code: [Select]

amount *= bitmap.height
 amount /= 100

This does the same thing as the previous line. Now what do we have? Well using the previous example, 78 * image height(24) = 1872 / 100 = 18. Therefore, 18 / 24 = 78 / 100. So we only want to draw the bottom 18 pixels of the full heart. Now we saw when fooling around with the src_rect that we can clip off parts of an image. Well that is where this all comes into play. This next line of code you will understand better later, but this is needed. Without this next line, the heart will empty from the bottom up(along with a couple other changes)!

Code: [Select]

amount = 24 – amount

Now let’s define the src_rect.

Code: [Select]

src_rect = Rect.new(0, amount, bitmap.width, bitmap.height- amount)

This may look confusing, so I’ll try to explain. I’ll start with the height. As you can see, I am taking the total height of the bitmap(24) and subtracting the value of amount (24 – 18 = 6). 24 – 6 = 18. It seems like we go around in a big circle doesn’t it? It was 18, 24 – 18 = 6, so then it was 6, and now 24 – 6 = 18 it’s back to 18. Why? Well as you can see the y value is set to amount, in this case 6. This is so that the image keeps it’s correct alignment. This is also why the previous piece of code was needed.

Now we have to draw the image.

Code: [Select]

self.contents.blt(x, y + amount, bitmap, src_rect)

The y value is y + amount because as we saw earlier, when we change the y value of the src_rect the entire image shifts. So we have to counter balance that shift so the image is displayed in the correct location.

And similarly, we have to set the empty hear to the bitmap variable then set up its bitmap:

Code: [Select]

src_rect = Rect.new(0, 0, bitmap.width, amount)

Almost there! Now in the original code we had this code:

Code: [Select]

src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)
 self.contents.blt(x, y, bitmap, src_rect)

Well, we have to move the src_rect now. This can be deleted and put at the bottom of the first if and the else. This is because in the else if we set up the src_rect at the end, and if we didn’t delete the src_rect setup right before we drew the image then the src_rect will be incorrect. I hope you understand that very long sentence :|. This is it, I gave you all the harder bits of code, now you have to figure out how to use them and where they go! Then do the same for the stars! Good luck, and I will answer further questions you may have.

There is also some little changes I have made that you may need to change later, but for now let’s just try to get the draining part working!

*I have commented the new edits with #-------=[new edit]

as you can see I have both sp and hp ready for their algorithms... ~.^

I should have warned you...I learn just as fast as I can forget X-P  ~g

You are one step ahead of me with doing the stars one . And lol about the forgetting thing.

@albertfish - this is just simply amazing, been working hard on the case,
                  now about to crack it wide open!!!
                  
here's the latest edit to "THE" script:

Spoiler for:

Code: [Select]

################################################################################
#                          Hearts and Stars! V 0.4
#                    (advance containers for HP and SP)
#                           by albertfish 9.17.09
#                          modified by gameface101
#                                 RMRK.NET
#

#########################################################################[CLASS]
class Window_Hearts < Window_Base#-----------------------------=[in game window]
  def initialize#-------------------------------------------------=[define load]
    super (-16, 0, 640, 160)#-----------=[x,y window position x,y window size]
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh#---------------------------------------------=[call refresh command]
    self.opacity = 0#-------------------------------------=[window skin opacity]
  end#---------------------------------------------------------=[end definition]
  
########################################################################[UPDATE]
  def update#---------------------------------------------------=[define update]
    super#--------------------------------------------=[update the super window]
    refresh#---------------------------------------------=[call refresh command]
  end#---------------------------------------------------------=[end definition]
  
#######################################################################[REFRESH]  
  def refresh#-------------------------------------------------=[define refresh]
    self.contents.clear#-----------------------------------------=[clear bitmap]
    draw_star#---------------------------------------------=[call to draw_heart]
    draw_heart#---------------------------------------------=[call to draw_star]
  end#---------------------------------------------------------=[end definition]
  
####################################################################[DRAW STARS]  
  def draw_star#---------------------------------------------=[define draw_star]
    x = 4 #------------------------------------------------=[draw x coordinates]
    y = 26 #-----------------------------------------------=[draw y coordinates]
# The following line of code shifts the row of stars down if the player has more
# than 10 hearts. This is so when the player only has 9 hearts the stars are
# right underneath them and when the player has 11 or more hearts the stars
# y value is lower so they do not over lap the hearts.
    y = 52 if $game_party.actors[0].maxhp > 1000#--------------------=[new edit]
    for i in 0...($game_party.actors[0].maxsp + 99) / 100# + 1#------=[new edit]
      if i < $game_party.actors[0].sp / 100#-------------------------=[new edit]
        # Draw a complete star
        bitmap = RPG::Cache.picture("star")#draw  # store the image in the variable 'bitmap'
       src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----=[edit v 0.4]
       self.contents.blt(x, y, bitmap, src_rect)#------------------=[edit v 0.4]
        elsif i < ($game_party.actors[0].sp + 99) / 100#-------------=[new edit]
        # Draw a partial star
    sp = ($game_party.actors[0].sp+99)/100*100#--------------=[edit v 0.4]
    amount = 100 - (sp - $game_party.actors[0].sp)#----=[edit v 0.4]
    amount = amount * bitmap.height / 100#----=[edit v 0.4]
#   amount = 24 – amount#----------------------------------------------=[syntax]
    src_rect = Rect.new(0, amount, bitmap.width, bitmap.height- amount)#----=[edit v 0.4]
    self.contents.blt(x, y + amount, bitmap, src_rect)#---=[edit v 0.4]
    src_rect = Rect.new(0, 0, bitmap.width, amount)#---=[edit v 0.4]
        #bitmap = RPG::Cache.picture("cursor")#store the image in the variable 'bitmap'
      else
        # Draw an empty star
        bitmap = RPG::Cache.picture("star container")#draw # store the image in the variable 'bitmap'
       src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----=[edit v 0.4]
       self.contents.blt(x, y, bitmap, src_rect)#------------------=[edit v 0.4]
      end#-----------------------------------------------------=[end definition]
      # if the player has 11 stars go back to the left side of the screen and go down one row. This is so you get two rows of stars (zelda style)
      x, y = 4, 78 if i == 11 #-------------------------------=[?]
#      src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#---=[box of arguements?] # Set the image's rectangle
#      self.contents.blt(x, y, bitmap, src_rect)#---=[box of arguements] # Draw the image
      x += 26 #---------------------------------------=[space icons evenly?] # shift x position so that the icon does not overlap.
    end#----------------------------------=[end 1st box] # end of for loop
  end#---------------------------------=[end 2nd box] # end of if statement
  
###################################################################[DRAW HEARTS]
  def draw_heart#-------------------------------------------=[define draw_heart]
    x = 4 #------------------------------------------------=[draw x coordinates]
    y = 0 #------------------------------------------------=[draw y coordinates]
    for i in 0...($game_party.actors[0].maxhp + 99) / 100#-----------=[new edit]
      if i < $game_party.actors[0].hp / 100#-------------------------=[new edit]
        # Draw a complete heart
        bitmap = RPG::Cache.picture("heart")#store the image in the variable 'bitmap'
 src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----------=[edit v 0.4]
 self.contents.blt(x, y, bitmap, src_rect)#------------------------=[edit v 0.4]
      elsif i < ($game_party.actors[0].hp + 99) / 100
    # Draw a partial heart
    hp = ($game_party.actors[0].hp+99)/100*100#--------------=[edit v 0.4]
    amount = 100 - (hp - $game_party.actors[0].hp)#----=[edit v 0.4]
    amount *= bitmap.height#----=[edit v 0.4]
    amount /= 100#----=[edit v 0.4]
    #amount = amount * bitmap.height / 100#----=[edit v 0.4]
#   amount = 24 – amount#----------------------------------------------=[syntax]
    src_rect = Rect.new(0, amount, bitmap.width, bitmap.height- amount)#----=[edit v 0.4]
    self.contents.blt(x, y + amount, bitmap, src_rect)#---=[edit v 0.4]
    src_rect = Rect.new(0, 0, bitmap.width, amount)#---=[edit v 0.4]
#   bitmap = RPG::Cache.picture("cursor")#store the image in the variable 'bitmap'
      else
        # Draw an empty heart
        bitmap = RPG::Cache.picture("heart container")#store the image in the variable 'bitmap'
 src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----------=[edit v 0.4]
 self.contents.blt(x, y, bitmap, src_rect)#------------------------=[edit v 0.4]
      end#-----------------------------------------------------=[end definition]
      x, y = 4, 26 if i == 11#---------------------------------=[refer to above]
#      src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----=[edit v 0.4]
#      self.contents.blt(x, y, bitmap, src_rect)#------------------=[edit v 0.4]
      x += 26 #------------------------------------------------=[refer to above]
    end#---------------------------------------------------------=[end for loop]
  end#-------------------------------------------------------=[end if statement]
end#--------------------------------------------------=[end class Window_Hearts]

###############################################################[SCENE_MAP ALIAS]
class Scene_Map#----------------------------------------=[Map Screen Processing]
  alias af_hc_hud_main main#----------------------------------=[alias af_hc_hud]
  def main#-----------------------------------------------=[define main process]
    @hud_window = Window_Hearts.new#--------------------------=[call hud window]
    af_hc_hud_main#-------------------------------------------=[call with alias]
    @hud_window.dispose#-------------------------------=[gets rid of the window]
  end#---------------------------------------------------------=[end definition]
  alias af_hc_hud_update update#--------------------------------[aliased update]
  def update#---------------------------------------------------=[define update]
    @hud_window.update#-------------------------------------------=[call update]
    af_hc_hud_update#-----------------------------------------=[call with alias]
  end#---------------------------------------------------------=[end definition]
end#---------------------------------------------------------------=[end it all]

here's where I got stuck: had to comment this line due to a syntax error

Code: [Select]

amount = 24 – amount

it works! but containers drain backwards as you had mentioned.

This next line of code you will understand better later, but this is needed. Without this next line, the heart will empty from the bottom up(along with a couple other changes)!
Code:

amount = 24 – amount

syntax error - am I missing an extra end? or the line itself? ~g

EDIT: here's the latest screenshot!

thar error does be because MS Word turned thar - into a symbol, which appears as a long -. Simple fix thought, highlight thar - an' press - again, yarr should see it turn from black text to a light blue.

Haha, talk like a pirate day. yonder does be just kind of weird.

@albertfish - aye captain, that lily-livered hyphen got the Keelhaul and went straight ta Davey Jone's locker...
                  ya must thinks me is a squiffy for not catchin' that blasted part of code... aye, still a sprog but
                  ready to cast off and set sail to the next "X" on the map.
                  (show empty graphic when fill/drain, vertical alignment, container animations)

                 ~g

EDIT: here's the latest edit to "THE" script!:

Spoiler for:

Code: [Select]

################################################################################
#                          Hearts and Stars! V 0.5
#                    (advance containers for HP and SP)
#                           by albertfish 9.19.09
#                          modified by gameface101
#                                 RMRK.NET
#
#

#########################################################################[CLASS]
class Window_Hearts < Window_Base#-----------------------------=[in game window]
  def initialize#-------------------------------------------------=[define load]
    super (-16, 20, 640, 160)#------------=[x,y window position x,y window size]
    self.contents = Bitmap.new(width - 32, height - 32)#--------------------=[?]
    refresh#---------------------------------------------=[call refresh command]
    self.opacity = 0#-------------------------------------=[window skin opacity]
  end#---------------------------------------------------------=[end definition]
  
########################################################################[UPDATE]
  def update#---------------------------------------------------=[define update]
    super#--------------------------------------------=[update the super window]
    refresh#---------------------------------------------=[call refresh command]
  end#---------------------------------------------------------=[end definition]
  
#######################################################################[REFRESH]  
  def refresh#-------------------------------------------------=[define refresh]
    self.contents.clear#-----------------------------------------=[clear bitmap]
    draw_star#---------------------------------------------=[call to draw_heart]
    draw_heart#---------------------------------------------=[call to draw_star]
  end#---------------------------------------------------------=[end definition]
  
####################################################################[DRAW STARS]  
  def draw_star#---------------------------------------------=[define draw_star]
    x = 17 #-----------------------------------------------=[draw x coordinates]
    y = 12 #-----------------------------------------------=[draw y coordinates]
# The following line of code shifts the row of stars down if the player has more
# than 10 hearts. This is so when the player only has 9 hearts the stars are
# right underneath them and when the player has 11 or more hearts the stars
# y value is lower so they do not over lap the hearts.
    y = 52 if $game_party.actors[0].maxhp > 7000#--=[drop star bar to make room]
    for i in 0...($game_party.actors[0].maxsp + 99) / 100# + 1#------=[new edit]
      if i < $game_party.actors[0].sp / 100#-------------------------=[new edit]
        
#--------------------------------------------------------=[Draw a complete star]
       bitmap = RPG::Cache.picture("star")#-----=[variable 'bitmap' store image]
       src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----=[edit v 0.4]
       self.contents.blt(x, y, bitmap, src_rect)#------------------=[edit v 0.4]

#-------------------------------------------------------=[ Draw a partial star ]
       elsif i < ($game_party.actors[0].sp + 99) / 100#--------------=[new edit]
        
#------------------------------------------------------------------=[edit v 0.5]    
    bitmap = RPG::Cache.picture("star container")#-----=[variable 'bitmap' store image]
       src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----=[edit v 0.4]
       self.contents.blt(x, y, bitmap, src_rect)#------------------=[edit v 0.4]
    self.z = 1000      
    sp = ($game_party.actors[0].sp+99)/100*100#--------------=[edit v 0.4]
    amount = 100 - (sp - $game_party.actors[0].sp)#----=[edit v 0.4]
    amount = amount * bitmap.height / 100#----=[edit v 0.4]
    amount = 24 - amount
    src_rect = Rect.new(0, amount, bitmap.width, bitmap.height- amount)#=[edit v 0.4]
    self.contents.blt(x, y + amount, bitmap, src_rect)#---=[edit v 0.4]
    src_rect = Rect.new(0, 0, bitmap.width, amount)#---=[edit v 0.4]
#------------------------------------------------------------------=[edit v 0.5]

    sp = ($game_party.actors[0].sp+99)/100*100#--------------=[edit v 0.4]
    amount = 100 - (sp - $game_party.actors[0].sp)#----=[edit v 0.4]
    amount = amount * bitmap.height / 100#----=[edit v 0.4]
    amount = 24 - amount
    bitmap = RPG::Cache.picture("star")#--------=[variable 'bitmap' store image]
    src_rect = Rect.new(0, amount, bitmap.width, bitmap.height- amount)#----=[edit v 0.4]
    self.contents.blt(x, y + amount, bitmap, src_rect)#---=[edit v 0.4]
    src_rect = Rect.new(0, 0, bitmap.width, amount)#---=[edit v 0.4]

#-------------------------------------------------------------=[Draw empty star]      
        else
        # Draw an empty star
        bitmap = RPG::Cache.picture("star container")#-----=[variable 'bitmap' store image]
       src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----=[edit v 0.4]
       self.contents.blt(x, y, bitmap, src_rect)#------------------=[edit v 0.4]
      end#-----------------------------------------------------=[end definition]
      # if the player has 11 stars go back to the left side of the screen and go down one row. This is so you get two rows of stars (zelda style)
      x, y = 4, 78 if i == 11 #-------------------------------=[?]
#      src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#---=[box of arguements?] # Set the image's rectangle
#      self.contents.blt(x, y, bitmap, src_rect)#---=[box of arguements] # Draw the image
      x += 26 #---------------------------------------=[space icons evenly?] # shift x position so that the icon does not overlap.
    end#----------------------------------=[end 1st box] # end of for loop
  end#---------------------------------=[end 2nd box] # end of if statement
  
###################################################################[DRAW HEARTS]
  def draw_heart#-------------------------------------------=[define draw_heart]
    x = 4 #------------------------------------------------=[draw x coordinates]
    y = 0 #------------------------------------------------=[draw y coordinates]
    for i in 0...($game_party.actors[0].maxhp + 99) / 100#-----------=[new edit]
      if i < $game_party.actors[0].hp / 100#-------------------------=[new edit]
        # Draw a complete heart
        bitmap = RPG::Cache.picture("heart")#store the image in the variable 'bitmap'
 src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----------=[edit v 0.4]
 self.contents.blt(x, y, bitmap, src_rect)#------------------------=[edit v 0.4]
 
#------------------------------------------------------=[ Draw a partial heart ]
    elsif i < ($game_party.actors[0].hp + 99) / 100
#------------------------------------------------------------------=[edit v 0.5]    
    bitmap = RPG::Cache.picture("heart container")#-----=[variable 'bitmap' store image]
       src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----=[edit v 0.4]
       self.contents.blt(x, y, bitmap, src_rect)#------------------=[edit v 0.4]
    self.z = 1000      
    hp = ($game_party.actors[0].hp+99)/100*100#--------------=[edit v 0.4]
    amount = 100 - (hp - $game_party.actors[0].hp)#----=[edit v 0.4]
    amount = amount * bitmap.height / 100#----=[edit v 0.4]
    amount = 24 - amount
    bitmap = RPG::Cache.picture("heart")#--------=[variable 'bitmap' store image]    
    src_rect = Rect.new(0, amount, bitmap.width, bitmap.height- amount)#----=[edit v 0.4]
    self.contents.blt(x, y + amount, bitmap, src_rect)#---=[edit v 0.4]
    src_rect = Rect.new(0, 0, bitmap.width, amount)#---=[edit v 0.4]
    
#------------------------------------------------------------------=[edit v 0.5]

    hp = ($game_party.actors[0].hp+99)/100*100#--------------=[edit v 0.4]
    amount = 100 - (hp - $game_party.actors[0].hp)#----=[edit v 0.4]
    amount *= bitmap.height#----=[edit v 0.4]
    amount /= 100#----=[edit v 0.4]
    #amount = amount * bitmap.height / 100#----=[edit v 0.4]
    amount = 24 - amount#----------------------------------------------=[syntax]
    src_rect = Rect.new(0, amount, bitmap.width, bitmap.height- amount)#----=[edit v 0.4]
    self.contents.blt(x, y + amount, bitmap, src_rect)#---=[edit v 0.4]
    src_rect = Rect.new(0, 0, bitmap.width, amount)#---=[edit v 0.4]
#   bitmap = RPG::Cache.picture("cursor")#store the image in the variable 'bitmap'
      else
        # Draw an empty heart
        bitmap = RPG::Cache.picture("heart container")#store the image in the variable 'bitmap'
 src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----------=[edit v 0.4]
 self.contents.blt(x, y, bitmap, src_rect)#------------------------=[edit v 0.4]
      end#-----------------------------------------------------=[end definition]
      x, y = 4, 26 if i == 11#---------------------------------=[refer to above]
#      src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)#-----=[edit v 0.4]
#      self.contents.blt(x, y, bitmap, src_rect)#------------------=[edit v 0.4]
      x += 26 #------------------------------------------------=[refer to above]
    end#---------------------------------------------------------=[end for loop]
  end#-------------------------------------------------------=[end if statement]
end#--------------------------------------------------=[end class Window_Hearts]

###############################################################[SCENE_MAP ALIAS]
class Scene_Map#----------------------------------------=[Map Screen Processing]
  alias af_hc_hud_main main#----------------------------------=[alias af_hc_hud]
  def main#-----------------------------------------------=[define main process]
    @hud_window = Window_Hearts.new#--------------------------=[call hud window]
    af_hc_hud_main#-------------------------------------------=[call with alias]
    @hud_window.dispose#-------------------------------=[gets rid of the window]
  end#---------------------------------------------------------=[end definition]
  alias af_hc_hud_update update#--------------------------------[aliased update]
  def update#---------------------------------------------------=[define update]
    @hud_window.update#-------------------------------------------=[call update]
    af_hc_hud_update#-----------------------------------------=[call with alias]
  end#---------------------------------------------------------=[end definition]
end#---------------------------------------------------------------=[end it all]

and the latest screenshot!:


it took a few minutes of messing around with the "elsif" statements in draw_hearts and draw_stars
but I think I've got it!!! I'd like to make sure that this was done correctly... if so...

how would I incorporate an animation to play for when a container appears completely filled (zoom in)
and when a containers disappears completely empty (zoom out)

 
if I'm able to configure an option for vertical alignment, then the animation will be the final function to tackle for this
amazing project! thanks " /A\|L|3|=|R-T-><)))'> "

~(G


                  

I;m not exactly sure what you mean by zoom in and zoom out.

Also great job getting the partial empty hearts/stars working. I knew you would figure it out.

@albertfish - I''l try my best to describe the animation feature request for "THE" script.
                   here is the four points that I would like to animate:

1.)
DRAIN ANIMATION: the first animation I would like to incorporate will be for the 'LOSS of HP' or the 'USE of SP'
(under 100 pts so partial damage or loss)

for example when you lose HP, the current heart container will show blood squirts.
and the same for when you use SP, the current star will show sparkles.

2.)
FILL ANIMATION: the second animation will be for regaining HP/SP
(again under 100pts so partial gain of HP/SP)

for example when you regain HP, the current heart container will glow.
and the same for when you regain SP, the current star will shine.

3.)
COMPLETELY EMPTIED CONTAINER: the third animation will be for when you lose 100 or more HP/SP
so that when the most recent container (or all containers) completely empties a "zoom out" animation will show.
what I mean by zoom out is 'regular size to enlarged size' then fades away...

for example when you lose 100 or more HP/SP the most recently emptied Heart/Star (or all) will show
the same "empty container image" starting regular size to a larger size as it fades away then disappears.
the empty containers will remain, maybe a little less in opacity.

4.)
COMPLETLY FILLED CONTAINER: the forth and final animation will be for when you gain 100 or more HP/SP
so that when the next container (or all containers) completely fills a "zoom in" animation will show.
what I mean by zoom in is 'enlarged size to regular size' then fades away...

for example when you regain 100 or more HP/SP the most recently filled Heart/Star (or all) will show
the same "filled container image" starting enlarged size to regular size as it fades in to match the container.

I hope I've explained it well enough to make it possible.

BTW - thank you again for getting me this far, I'm glad you've notice that I'm starting to understand script
and actually worked out some things on my own (instead of asking questions for each and every step)
I'm already excited about "THE" script's current version and where this will lead me into my creative future... ~g

edit: Haha! I was trying to comment the script and I already forgot what some lines of code do...^,^
       it's " more I learn, the more I forget " reviewing your ever so clever posts.

Animating these is a lot more advanced than the rest of the script. I'm going to be busy with school this week, but I'll try to help in my spare time.

@albertfish - animations, more advance!? oh my... just making the 'elsif' statments were complex enough to make
                  my brain beg for mercy ^,^ but I'm ready to torture it with more code...
 
                  school? ahh ~ so are you getting a degree in programming?
                  well take it easy on your busy week, and I look forward to your spare time...

                  in the mean time I'll be working on the vertical alignment option
                  and a module for easy option settings. ~((G//A//\/\||E||F//A((C||=

                    

No, I almost went for a degree in programming. Now it's just a hobby. I'm studying forensic science, which is quite a bit different then programming lol.

@albertfish - ahh~ I get it... Detective Scrotes! ^,^ the original CSI is my favorite...

just so you know I've followed your instructions for vertical alignment
I keep getting an undefined local variable or method 'valign' error.
(if i understand correctly, i need to define what 'valign' does....?)

Code: [Select]

def initialize
    super (-16, -16, 640, 160)
    self.contents = Bitmap.new(width - 32, height - 32)
    $valign = 0
    refresh
    self.opacity = 0
  end


And then in the draw_hearts and draw_stars function do the following:

Code: [Select]

def draw_heart
    x = 4
    y = valign
    ...
end

Code: [Select]

def draw_star
    x = 4
    y = 26 + valign
    ...
  end

experimenting...

The answer to that is because valign is not defined.

There are many different types of variables. Four very common ones are global, instance, local variables and constants.

Global variables can be accessed and changed anywhere. You do not need to define them in every class, hence the name global. The are defined by a $, for example:

Code: [Select]

$valign = 0 #This is a global variable

Instance variables can be accessed my any method but only in the class in which they are defined in. If you create an instance variable in class Cool_Window, you can access it in the redraw method or the update method, but you cannot access it in class Notsocool_Window. Although you can set it up as a public instance variable to do so, however I will not go into this. Instance variables are defined by @, for example:

Code: [Select]

@valign = 0 #This is an instance variable

Local variables can only be accessed in the method in which it was defined in. So if you create this variable in the refresh method, you can't access it in the update method. These are defined by putting nothing in front of it. For example:

Code: [Select]

valign = 0 #This is a local variable

Constants are variables that do not get changed. For example the math number pi. This value is always 3.14159265..... These variables are defined by using upper case letters, for example

Code: [Select]

VALIGN = 0 #This is a constant

So you defined a instance variable @valign, and then you tried to access an undefined local variable valign.

Edit: I realize that I typed that in one of my previous posts, but I never tested the code so I never caught the error lol. I changed it, thanks for catching it.

@albertfish - aha~ just like variables in the event commands, there's variables in script.

Global Variables:

Global variables can be accessed and changed anywhere. You do not need to define them in every class, hence the name global. The are defined by a $, for example:

Code: [Select]

$valign = 0 #This is a global variable

I always see that "$" because most scripts are called by using a 'global' variable ~ $scene = Super_Cool_Window.new
(ok I get it)

Instant variables:

Instance variables can be accessed my any method but only in the class in which they are defined in. If you create an instance variable in class Cool_Window, you can access it in the redraw method or the update method, but you cannot access it in class Notsocool_Window. Although you can set it up as a public instance variable to do so, however I will not go into this. Instance variables are defined by @, for example:

Code: [Select]

@valign = 0 #This is an instance variable

so when you start a script, you use a "Class" and if there's a variable in that class you want to use in your script
you can simply use @that_variable (right?)

Local variables can only be accessed in the method in which it was defined in. So if you create this variable in the refresh method, you can't access it in the update method. These are defined by putting nothing in front of it. For example:

Code: [Select]

valign = 0 #This is a local variable

you make variables local not global if you only want it access in a certain part of code

Constants are variables that do not get changed. For example the math number pi. This value is always 3.14159265..... These variables are defined by using upper case letters, for example

Code: [Select]

VALIGN = 0 #This is a constant

ok, I've seen this in scripts that use CONSTANTS for easy options such as BUTTON = X
and this is why you don't capitalize Variables = variables, convention right?

oh and I've tried using this method in "THE" script for vertical alignment:

class:

Code: [Select]

#########################################################################[CLASS]
class Window_Hearts < Window_Base#-----------------------------=[in game window]
  def initialize#-------------------------------------------------=[define load]
    super (-16, 20, 340, 400)#------------=[x,y window position x,y window size]
    self.contents = Bitmap.new(width - 32, height - 32)#--------------------=[?]
    @valign = 50#-----------------------------------=[vertical alignment option]
    refresh#---------------------------------------------=[call refresh command]
    self.opacity = 50#------------------------------------=[window skin opacity]
  end#---------------------------------------------------------=[end definition]
 

draw_star

Code: [Select]

####################################################################[DRAW STARS] 
  def draw_star#---------------------------------------------=[define draw_star]
    x = 17 #-----------------------------------------------=[draw x coordinates]
    y = 26 + $valign #----------------------------------------=[vertical option]
#    y = 12 #----------------------------------------------=[draw y coordinates]
   

and draw_heart

Code: [Select]

###################################################################[DRAW HEARTS]
  def draw_heart#-------------------------------------------=[define draw_heart]
    x = 4 #------------------------------------------------=[draw x coordinates]
    y = $valign #---------------------------------------------=[vertical option]   
#    y = 0 #-----------------------------------------------=[draw y coordinates]

it loads but everything remains horizontal at a lower position...
I'm currently studying a few scripts that use a vertical setup
maybe I'll get lucky ^,^ if not I'll patiently wait

well thanks for making time on your spare time... I'm glad programming is your hobby...
mine is making music and drawing freehand art... (how ever I can return the favor, you let me know ^,^)
the reason why I'm trying so hard to be good at programming
is so that I can bring my art and music to life through my passion towards making games... ~g

I suck at music and art lol. I'm very left brain logic, which is why I understand programming as well as I do. It is a very logical language, and when I read a piece of code I understand how the code will run.

There is something I want to say about instance variables. You said if you want to use a variable in a script you would use it... Well, that depends. A lot of scripts are generally made up of many classes. For example a CMS could edit class Scene_Menu, class Window_Status, class Scene_Status, etc.

This could all be in one script, but there are many class edits. Your script for example has two classes. So you can't use an instance variable over the entire script that easily. However you can make it a public instance variable and then be able to access it from a different class, but that is a bit more advanced.

And you are right about $scene. It is a global variable that has the current scene stored. However you wouldn't store a window class in the scene variable.

As for your code problem, I wont give you the solution in code format, I'll just tell you what you did.

You define a instance variable, @valign, correctly. However you are trying to access a global variable which has not previously been defined.

I use local variable quite a lot. There are useful when you are passing something into a method for calculations to be made for example.

Code: [Select]

def initialize
  y = add(1, 2)
end
def add(num1, num2)
  return num1 + num2
end

All the variables used here, y, num1, and num2, are all local variables. If I tried to access num1 or num2 from the initialize method, I would get an error.

@albertfish - I suck at logic! HAHA, I'm very right side of the mind, I'm even left handed ^,^
                  Now it's time to examine the evidence in the laboratory for further investigation...  
                  I'll try my best to solve this case of incorrect code... ~g

edit: ok so far I know that the instance variable in the windows class was setup but not defined
       and the global variables in the draw_hearts/stars definitions needed the '$' removed to make them local.
       
       now to define the instance variable in the windows class is where I'm stuck...
       to define "valign" I know it's going to take more than just:

Code: [Select]

  def valign
    y = 10
    end

I've tried your example

Code: [Select]

  def valign
  y = add(-10, 50)
end
def add(num1, num2)
  return num1 + num2
end

but still I only get everything to shift down "Y" no "X"

I've made sure to increase the size for the super
and opacity on the window skin to test my results...
I'm certain it's a mathematical formula I've never seen before. ^,^

here's the latest screenshot:

(tinkering with algorithms during lunch)
       

You are making it more complicated then it is .

Code: [Select]

def initialize
  @valign = 0
  ...
end
def draw_hearts
  y = @valign
  ...
end

@albertfish - HAH! I knew it! I always do ^,^ guess it's part of sucking at logic...
                  funny how I can get some complicated stuff and then get stuck on the simple stuff.
                  so let me get this straight...
 
we are using an instance variable and defining it as 0 under the window class.
then in the draw_hearts definition we are defining y as that instance. right?
just asking, but is this the same as turning y = 0?

here's what I've done...
class:

Code: [Select]

#########################################################################[CLASS]
class Window_Hearts < Window_Base#-----------------------------=[in game window]
  def initialize#-------------------------------------------------=[define load]
  @valign = 0#--------------------------------------=[vertical alignment option]
#  super (-16, 20, 340, 100)#------------------------------=[vertical alignment]
  super (-16, 100, 100, 340)#--------------=[x,y window position x,y window size]
    self.contents = Bitmap.new(width - 32, height - 32)#--------------------=[?]   
    refresh#---------------------------------------------=[call refresh command]
    self.opacity = 50#-------------------------------------=[window skin opacity]
  end#---------------------------------------------------------=[end definition]
 

and draw_hearts

Code: [Select]

###################################################################[DRAW HEARTS]
  def draw_heart#-------------------------------------------=[define draw_heart]
    x = 4 #------------------------------------------------=[draw x coordinates]
     y = @valign#---------------------------------------------=[vertical option]   
#    y = 0#------------------------------------------------=[draw y coordinates]

what I don't get is where in the code does it instruct the src_rect or bitmap
to vertically stack top to bottom or bottom to top...? trying not to overthink! ~g


           

I thought you meant by vertical alignment that you wanted to shift the hud up or down. But now I think you want then hearts to be oriented vertically. Is that correct?

@albertfish - oh! ^,^ yes that's what I was referring to...
                  sorry for the confusion
/\/\ _/\_
\  / >   <
 V
/\/\ _/\_
\  / >   <
 V
/\/\ _/\_
\  / >   <
 V

edit: alright! here's the latest! ^,^
all I 've done was swap x for y and width for height on each line of code, except!
for self.contents (under super) swapped bitmaps in the 'elsif' statements and it worked!!!
the meter now stacks vertically and each container and containers themselves drain from bottom to top...
I'm sure I will figure out how to make it go from top to bottom...


ok now the time has come to do the animations
this will be final stage! thanks again to albertfish for getting me this far....

@albertfish - take it easy at school! ~g

 /   \
 ^ ^
\___/

Awesome! I thought you would figure it out.
But I've gotta study for a midterm, I was coming by to check the progress. Nicely done .