Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Multiple sprites question

I've been trying to create a Spriteset_Map method that draws an X number of heart sprites ( a .png file) on screen, at a constant starting point (8, 8), at the same height (for now), with 3 pixels separating them.

It's supposed to look like this:


http://img358.imageshack.us/img358/3936/hehpb7.png[/img]

And it draws as many hearts as the player has obtained. I've tried with for loops and others, but I can't seem to get anything working, or properly at least. Any help would be appreciated.
 

khmp

Sponsor

The below code is as is. I just wanted to see if it worked. I did a very naughty thing in not disposing of the resources I allocated I leave that up to you. The drawing code is what I figured you would be most interested in and that is inside the draw_hearts method.

Code:
#==============================================================================
# ** Spriteset_Map
#------------------------------------------------------------------------------
#  This class brings together map screen sprites, tilemaps, etc. It's used
# within the Scene_Map class.
#==============================================================================

class Spriteset_Map
  #--------------------------------------------------------------------------
  # * Constant Variables
  #--------------------------------------------------------------------------
  HEART_DRAW_X = 8
  HEART_DRAW_Y = 8
  HEART_BITMAP = "./graphics/pictures/heart.png"
  HEART_SPACES = 3
  #--------------------------------------------------------------------------
  # * Alias Methods
  #--------------------------------------------------------------------------
  alias_method :hvdr_hearts_spriteset_map_create_viewports, :create_viewports
  alias_method :hvdr_hearts_spriteset_map_update, :update
  alias_method :hvdr_hearts_spriteset_map_update_viewports, :update_viewports
  #--------------------------------------------------------------------------
  # * Create Viewport
  #--------------------------------------------------------------------------
  def create_viewports
    # Call the old code.
    hvdr_hearts_spriteset_map_create_viewports
    
    # Create a new viewport for our hearts_sprite to use.
    @viewport4 = Viewport.new(0, 0, 544, 50)
    @viewport4.z = 150 # Should draw over everything.
    
    # Create the hearts_sprite which will hold the bitmap drawing surface.
    @hearts_sprite = Sprite_Base.new(@viewport4)
    @hearts_sprite.bitmap = Bitmap.new(544, 50)
    
    # The heart bitmap.
    @heart_bitmap = Bitmap.new(HEART_BITMAP)
  end
  #--------------------------------------------------------------------------
  # * Draw Hearts
  #--------------------------------------------------------------------------
  def draw_hearts(hearts)
    # If the amount of hearts hasn't changed return.
    return if hearts == @hearts

    # Initialize
    x, y, @hearts = HEART_DRAW_X, HEART_DRAW_Y, hearts

    # Clear the bitmap so we are drawing on a clear slate.
    @hearts_sprite.bitmap.clear

    # Draw the hearts
    for i in 0...@hearts
      # Draw the heart onto the sprite.
      @hearts_sprite.bitmap.blt(x, y, @heart_bitmap, 
        Rect.new(0,0,@heart_bitmap.width, @heart_bitmap.height))

      # Increment x by the width of the bitmap plus the amount of pixel spacing.
      x += (@heart_bitmap.width + HEART_SPACES)
    end
  end
  #--------------------------------------------------------------------------
  # * Frame Update
  #--------------------------------------------------------------------------
  def update
    # Call the old code
    hvdr_hearts_spriteset_map_update
    # Draw me some hearts
    draw_hearts(6)
  end
  #--------------------------------------------------------------------------
  # * Update Viewport
  #--------------------------------------------------------------------------
  def update_viewports
    # Call the old code
    hvdr_hearts_spriteset_map_update_viewports
    # update our
    @viewport4.update
  end
end
 
Thanks for the code, it works perfectly, but...

Am having a bit of trouble understanding part of the code.

So I understand that as long as I have an empty bitmap, I can draw as many sprites as I want onto it. I tried basing my code on this but it never worked, and even after looking at yours I unfortunately can't understand part of it.

Code:
for i in 0...@hearts
      # Draw the heart onto the sprite.
      @hearts_sprite.bitmap.blt(x, y, @heart_bitmap, 
        Rect.new(0,0,@heart_bitmap.width, @heart_bitmap.height))
      # Increment x by the width of the bitmap plus the amount of pixel spacing.
      x += (@heart_bitmap.width + HEART_SPACES)
    end
  end

I understand that it draws one, adds to the X and draws again, if applicable. Just the bitmap.blt method
Code:
@hearts_sprite.bitmap.blt(x, y, @heart_bitmap, 
        Rect.new(0,0,@heart_bitmap.width, @heart_bitmap.height))
I'm having a bit of trouble with; could you be so kind as to explain exactly how it's working? Thanks in advance.
 
Hevendor":2n4mdxi8 said:
I understand that it draws one, adds to the X and draws again, if applicable. Just the bitmap.blt method
Code:
@hearts_sprite.bitmap.blt(x, y, @heart_bitmap, 
        Rect.new(0,0,@heart_bitmap.width, @heart_bitmap.height))
I'm having a bit of trouble with; could you be so kind as to explain exactly how it's working? Thanks in advance.

Basically it draws the bitmap "@heart_bitmap" to the screen at x,y coordinates.
 

khmp

Sponsor

Alright I'll try. Graphics sometimes allude me. For every sprite in the game there's a bitmap. A bitmap can just be a blank slate onto which other things are drawn. We can draw text or picture. For drawing text there's the simple draw_text method which is called from the bitmap. When drawing a bitmap we use blt. That's what I did for this case.

From the start. I created a Viewport. I won't lie I have no idea what it does. Other than saying we are drawing to a specific area. Then I created a Sprite which would hold the blank slate(Sprite.bitmap) we would draw on and assigned it to use our custom Viewport. I then created our blank slate(Sprite.bitmap), which spanned the Viewport's area. Then because I only need one heart bitmap to draw from I created a solitary Bitmap object and loaded the heart image to it. This is the image that would be continually blt'ed onto our Sprite's blank slate(Sprite.bitmap). That's the prelude now for the actual drawing code.

I loop through the entirety of the number of hearts. The first thing I do is draw to our blank slate using blt. Bitmap.blt takes 4-5 arguments. The 5th is optional and represents opacity. The first argument is the x. Which x coordinate to draw onto the blank slate. Then the y. Which y coordinate to draw onto the blank slate. The third is the actual bitmap you want to blt onto the invoking Bitmap. This was the solitary heart image I mentioned in the above paragraph. The fourth one which I wish was also optional is the Rectangle around the image being drawn. In this case I wanted to draw the whole heart so I fed it the exact dimensions of the heart. Then I increment x by the width of the heart image plus the amount of spacing you requested.

I hope my somewhat oafish explanation was helpful.  :lol:

Oh wow I forgot to click post reply before opening another tab, and two answers came.
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top