Creating a "phone" gallery. Any ideas?

[Nanahs]

I'm creating a phone feature for my game based on a few tutorial I found here.
And there will be a messenger on this phone.
The phone will look like something like this:



The app icons are imagebuttons.

The problem is, the messenger labels are like, extra labels. You're not necessarily going to play them.
In some of the "messenger chats" the player is going to receive pictures. I wanted those pictures to appear in the "phone gallery" only if/when the player plays the label where they would receive it.

Do you guys have any idea of how that would look best?

I can make it like this, but I doesn't look "natural":


Ok, maybe I'm asking too much hah
But is there a way to make it look more "realistic", a phone gallery?
Without this "locked image" thing.
Because since there are optional/extra labels that you're not going to necesseraly play, I didn't want the gallery to look like the player missed a part of the story. Leaving those empty/locked image spaces.

Do you have any ideas?

Thank you so much.

[Imperf3kt]

I'm a bit confused what you're after.
Do you want to remove the "locked" image and simply not show the image until it's been unlocked? Similar to how a mobile phones capture gallery won't show a thumbnail until you take the picture.

If so, you've just given me a great idea that I think should be easily implemented. Time permitting (I seem to be extremely low on this lately) I could see what I can come up with later today.
Although I do stress that you should inform the player somehow that there are more images to collect, otherwise how are they to know they've not completed the game?

Using the information in https://www.renpy.org/doc/html/rooms.html#image-gallery I created this simple screen:

Code: Select all

image abc = "images/200x200.png"
image bca = "images/200x200b.png"
image lock = "images/200x200c.png"

init python:

    # Create the gallery object.
    g = Gallery()
    
    # Add a default "lock" image to every gallery object.
    g.locked_button = "images/200x200c.png"
    
    # Add buttons and images to the gallery.

    # A button that contains an image that automatically unlocks.
    g.button("thumb")
    g.image("abc")
    g.unlock("abc")
    # Only advance between unlocked images.
    g.unlocked_advance = True
    
    g.button("thumb_b")
    g.image("bca")
    g.unlock("bca")

    # The transition used when switching images.
    g.transition = dissolve

# The gallery screen.
screen gallery():

    # Ensure this replaces the main menu.
    tag menu
    
    # Add a style prefix.
    style_prefix "gallery"
    
    # Add the background image.
    add gui.game_menu_background
    
    # Arrange the images in a viewport grid.
        
    vpgrid:
        xpos 5
        ypos 80
        rows 5
        yinitial 0.0

        mousewheel True
        draggable True
        pagekeys True

        side_yfill True

        transclude

        xmaximum 710
        spacing 5
        
        # The buttons.

        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add g.make_button("thumb_b", "bca", xalign=0.5, yalign=0.5)
        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add g.make_button("thumb_b", "bca", xalign=0.5, yalign=0.5)
        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add g.make_button("thumb_b", "bca", xalign=0.5, yalign=0.5)
        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add g.make_button("thumb_b", "bca", xalign=0.5, yalign=0.5)
        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add g.make_button("thumb_b", "bca", xalign=0.5, yalign=0.5)
        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add Null()
        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add g.make_button("thumb_b", "bca", xalign=0.5, yalign=0.5)
        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add g.make_button("thumb_b", "bca", xalign=0.5, yalign=0.5)
        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add g.make_button("thumb_b", "bca", xalign=0.5, yalign=0.5)
        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add g.make_button("thumb_b", "bca", xalign=0.5, yalign=0.5)
        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add g.make_button("thumb_b", "bca", xalign=0.5, yalign=0.5)
        add g.make_button("thumb", "abc", xalign=0.5, yalign=0.5)
        add Null()


    # The screen is responsible for returning to the main menu. It could also
    # navigate to other gallery screens.
    textbutton "Return" action Return() xalign 0.02 yalign 0.98
    
    

It'll need fiddling with to get it how you want, I've left room at the top and bottom for you to add navigation and titles etc (based on my own phone gallery)
Its designed for a 720x1280 resolution, but can easily be modified to fit other resolutions.
The Null() is used to insert a blank space with no image at all. Scrolling is horizontal, but can be easily adjusted to vertical (with some padding and size changes as well)


I'm unable to work out how to make no lock image appear in the time I have. Maybe a "corrupted image" image would be better though, to inform the player there are more images to collect while still looking "normal'.

[Oazu]

I would think it would be the same as an inventory. You're just being given the item at a certain time by the NPC. Then it is being store in a gallery. Separate gallery pages could be utilized to make things easier on you. Also looking at how other games do it helps. Catherine has a phone concept, several otome games have the phone concept and Harem Hotel, a ren'py, has a PC concept. Here is something simple I came up with:

It would be 2 separate screens. Each person's picture being a button, and each picture in their separate galleries being a button as well that opens to the full picture. It is a simplified version of a real phone gallery. Hope this helps?

[Nanahs]

Thank you so much guys! I'll try both ideas here