Image Window

[ashes999 13]

Hi,

 

I'm creating a scene with three windows. The middle window extends Window_Command, and the user can select from several text items. (The other two windows populate information based on which item was selected.)

 

I would like to replace the text items with images, and still have the functionality that users can browse through items. Real images (eg. 100x100), not tiny icons (before you suggest using the item list window ...)

 

Below is a mock-up of what this could look like if I only had a few items in it. (Don't mind that long selection thing in the background ...) If I added a few more items, they should appear on the second row.

 

Are there any scripts I can use to get a window like this? Did someone write a Window_* class that can do this? Is this possible with any of the existing windows? (I can't seem to find APIs for drawing graphics on them.)

 

Edited May 12, 2016 by ashes999

[ashes999 13]

Progress: it appears I can load images and blit them directly to the window, with code like this:

achievement = AchievementManager.achievements[index]
self.refresh
contents.blt(0, 0, Bitmap.new(achievement.image), Rect.new(0, 0, 100, 100), 255)

This blits the an image (100x100) with the image achievement.image to 0, 0.

 

What I'm still missing: how to make these selectable, instead of having the achievement names (or dummy text) in the background. I should probably use Window_Selectable instead of Window_Command.

[Absurdiness 11]

The easiest solution that comes to mind would be to use an "icon menu" script, such as the XS - Icon Item script, and just add a few modifications to get the effect that you want.

 

Try installing that script and add these lines right afterwards in another slot in the materials section, right bellow it:

#==============================================================================#
# ** Window_ItemList_Icon
#==============================================================================#
class Window_ItemList_Icon < Window_ItemList

  def col_max
    # // Method to get col_max.
    return 5
  end

  def spacing
    # // Method to get spacing.
    return 30
  end

  def item_width
    # // Method to get item_width.
    return 100
  end

  def item_height
    # // Method to get item_height.
    return 100
  end 

  def page_row_max
    # // Method to define page row max.
    return 3
  end

  def draw_item_icon(icon_index, x, y, enabled = true)
    # // Method to draw icon.
    bitmap = Cache.system("Iconset2")
    rect = Rect.new(icon_index % 16 * 100, icon_index / 16 * 100, 100, 100)
    contents.blt(x, y, bitmap, rect, enabled ? 255 : 75)
  end

end

Then you should add a file called "Iconset2.png" into your Graphics/System folder. The picture should be at least 1600x100 pixels in size. It should work exactly as the default iconset, just with 100x100 px icons instead of 24x24 px. 

 

You should get this result:

 

 

Don't mind the item numbers, you can easily disable them in the script's config section.

 

If you want to experiment with other picture sizes and spacing, you can always play with the numbers in the code I've provided, or look at the Icon Item script and see if you can change anything else.

 

Hope this helps. Good luck!