Hidden Object Game Tutorial

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Message
Author
User avatar
SusanTheCat
Miko-Class Veteran
Posts: 952
Joined: Mon Dec 13, 2010 9:30 am
Location: New Brunswick, Canada
Contact:

Hidden Object Game Tutorial

#1 Post by SusanTheCat »

I am breaking this tutorial up in sections. This first part deals is the bare minimum to get you started.

This tutorial assumes you know the basics of programming in Ren'py and the basics of creating an image.

1. Start a new project

2. Add the hidden object code + the empty_* images to the game directory (can be found in the zip file attached to this post)

3. Create your image pack (Or just use mine :) )
Create images in your favorite image editor using layers: background, objects, foreground
Save as transparent png!
  • image_ground.png - base image with all objects
  • image_hover.png - just the hidden objects and anything over them
  • image_insensitive - base image with the objects how they look when found
  • image_sensitive_idle - just the hidden objects in hint mode
  • image_empty - not needed, but nice to have as a background
in the tutorial, I am using images called locker_*.png

4. Put the following code in script.rpy

Code: Select all

image bg locker = "locker_empty.png"

init python:
    locker_items = []

##
# The game starts here.
label start:
    
    $ start = renpy.time.time()
    # this sets all the items back to not found
    $ resetItems(locker_items)
    # which image set to use
    $ hidden_files = "locker_%s.png"
    # randomize the list and pick 5 items
    $ hidden_items = renpy.random.sample(locker_items,0)
    # set number of hints
    $ num_hints = 3
    # set number of extra clicks
    $ num_clicks = 0
    
    
    scene bg locker
    "Get ready to find the items!"
    
    $ showitems = True
    call screen hidden_object
    
    scene bg locker
    $ elapsed = round(renpy.time.time() - start)
    "Result: [_return] in [elapsed] seconds with [num_clicks] extra clicks!"
 

5. And launch it!
Image

WHOA! What a boring game.

We are just running it to get at a useful tool in Renpy: The Developer menu!

6. Hit Shift+D to bring up the Developer menu
Image

7. Click on Image Location Picker

8. Choose your hover image to get the pixel locations of your objects

9. Highlight the area around the object
Image
The coordinates appear in the lower left of the screen

10. Now you have the laborous task of adding your items to the code using format:
locker_items.append(Item("Item Name", x,y,width,height))
For each item using the numbers given in the picker in the same order.


Now the init block should look like this:

Code: Select all

 init python:
    locker_items = []
    locker_items.append(Item("teddy", 362,325,95,103))
    locker_items.append(Item("pen", 193,396,100,36))
    locker_items.append(Item("bookmark", 240,454,56,101))
    locker_items.append(Item("crackers",189,112,167,63))
    locker_items.append(Item("mirror",528,73,91,129))
    locker_items.append(Item("photo",515,296,98,99))
    locker_items.append(Item("pencil case",380,153,109,134))
    locker_items.append(Item("book",346,0,80,83))
    locker_items.append(Item("card",648,159,83,61))
    locker_items.append(Item("flower",295,238,43,48))
11. Change this line so you have items to find:
$ hidden_items = renpy.random.sample(locker_items,5)

12. Launch!

You now have a basic hidden object game

Susan
EDIT: Duplicate line in code
Attachments
tutorial.zip
The basic files + the images used in the tutorial.
(1.4 MiB) Downloaded 1367 times
" It's not at all important to get it right the first time. It's vitally important to get it right the last time. "
— Andrew Hunt and David Thomas

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: Hidden Object Game Tutorial

#2 Post by OokamiKasumi »

I have no clue why, but when I apply your code to my game, I get this:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/script.rpy", line 103, in script
        call screen hidden_object
  File "game/HiddenObjectCode.rpy", line 361, in python
            imagebutton auto "empty_%s.png" action registerClick()
Exception: Not a displayable: None

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\execution.py", line 261, in run
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\ast.py", line 1413, in execute
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\ast.py", line 1426, in call
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\statements.py", line 100, in call
  File "common/00statements.rpy", line 540, in execute_call_screen
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\exports.py", line 1533, in call_screen
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\ui.py", line 237, in interact
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\display\core.py", line 1809, in interact
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\display\core.py", line 555, in replace_transient
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\display\core.py", line 825, in remove
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\display\core.py", line 753, in hide_or_replace
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\display\screen.py", line 176, in _hide
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\display\screen.py", line 245, in update
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\screenlang.py", line 1166, in __call__
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\python.py", line 977, in py_exec_bytecode
  File "game/HiddenObjectCode.rpy", line 361, in <module>
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\ui.py", line 435, in __call__
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\ui.py", line 711, in _imagebutton
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\display\behavior.py", line 681, in __init__
  File "J:\!Kenetic Novels\RenPy\renpy-6.13.8\renpy\easy.py", line 129, in displayable
Exception: Not a displayable: None

Windows-post2008Server-6.1.7601-SP1
Ren'Py 6.13.8.1675
Madeline's Misplaced Miscellany 1.0
This is my Hidden Object screen: (line 361)

Code: Select all

screen hidden_object:
    tag hidden
    
    imagemap:
        auto hidden_files
        cache False
        
        imagebutton auto "empty_%s.png" action registerClick()
        hotspot (896,676,126,90) action getHint()   
            
        for index, item in enumerate(hidden_items):
            hotspot (item.x,item.y,item.w,item.h) action If(hidden_items[index].found==False, SetItem(hidden_items[index],"found",True), None)
        if is_all_found():
            textbutton "All Objects Found!" xalign 0.5 yalign 0.5 action Return("Completed") 
This is what's in my script:

Code: Select all

label parlor_game:   
    hide Miss01
    scene black
    
    $ showitems = False
    
    play music "02 - the dragonfly.mp3" fadeout 1.0 
    
    $ game = renpy.time.time()
    $ resetItems(parlor_items)
    $ hidden_files = "parlor_%s.png"
    $ hidden_items = renpy.random.sample(parlor_items,10)
    
    $ num_hints = 3
    $ num_clicks = 0
    
    scene bg parlor 
    "Are you ready?" 
    
    $ showitems = True
    call screen hidden_object
    
    scene bg parlor 
    $ elapsed = (renpy.time.time() - game)
    "Result: [_return] in [elapsed] seconds with [num_clicks] miss-clicks!" 
    $ showitems = False
    
    show Miss01 at right with dissolve 
    "Oh dear, what I'm looking for wasn't in the parlor."
    "I suppose you're wondering why the place has so many old fashioned things in it. Well, it's because I've been here for a {i}very{/i} long time."
    "Shall we look in another room?" 
    
    jump room_choice
Just so you know, I DO have these pngs:
empty_empty.png
empty_ground.png
empty_hover.png
empty_selected.png
empty_insensitive.png

And I haven't even added the penalty jump for over 5 miss-clicks, yet!
Last edited by OokamiKasumi on Wed Feb 08, 2012 8:33 pm, edited 1 time in total.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: Hidden Object Game Tutorial

#3 Post by leon »

Thanks Suzan! I'm sure many will put this to good use. :)

@OokamiKasumi: I don't think you need empty_empty.png and empty_selected.png, but you are missing empty_idle.png...

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: Hidden Object Game Tutorial

#4 Post by OokamiKasumi »

leon wrote:@OokamiKasumi: I don't think you need empty_empty.png and empty_selected.png, but you are missing empty_idle.png...
Thanks Leon!
-- I changed the empty_empty.png to empty_idle.png and it worked!
I knew I'd missed something simple.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
MikeConway
Newbie
Posts: 20
Joined: Tue Jun 28, 2011 10:27 pm
Contact:

Re: Hidden Object Game Tutorial

#5 Post by MikeConway »

First off, this is fantastic, and just what I've been looking for. This is a real blessing.

Now, I'm still new to Ren'py (and python in general) programming, so I'm having a little trouble with this, so you know where I'm coming from. 8)

In a lot of hidden object games, clicking on an object often results in a sound playing and a special effect. Now, I don't want to be as elaborate as having the object fly off the screen or anything, but I'd like to be able to play a sound and a dissolve or another transition.

How might I do that?

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: Hidden Object Game Tutorial

#6 Post by OokamiKasumi »

MikeConway wrote:...I'd like to be able to play a sound and a dissolve or another transition.
How might I do that?
I was able to achieve a sound and a disappearance --> Madeline's Misplaced Miscellany.

The disappearance was caused by the differences between the ground.png and the empty.png.
parlor_ground.png
parlor_ground.png
parlor_empty.png
parlor_empty.png
The sound was triggered by adding this to the options.rpy: style.imagemap_button.activate_sound = "Sonar.wav" like so:

Code: Select all

    ## Sounds that are used when button and imagemaps are clicked.

    style.button.activate_sound = "click.wav"
    style.imagemap.activate_sound = "click.wav"
    style.imagemap_button.activate_sound = "Sonar.wav"
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

jcoil
Newbie
Posts: 3
Joined: Sat Oct 27, 2012 9:08 am
Projects: Dark Deeds - Awakening (will take some time)
Location: Guimaraes - Portugal
Contact:

Re: Hidden Object Game Tutorial

#7 Post by jcoil »

Hey,
Ive been following this tutorial and building up my game over this knowledge and also from Ookami's Madeleine's (which is brutal, in a good sense!).

So far I have a tiny 2 HO maps game. I am ages away from having this finished - I'm learning as I go.
I have to many questions, but most are getting answered by themselves when I check some forum posts or mess with the code. Others, well, are being a pain...

At this point, I'm curious on 2 things I can't manage to code by my own:

-> How can I change the Item-List and Hint spots and appearance? I was thinking on putting them down the screen (where usually the text shows), and having a custom shape for the hint (a magic lamp in this case, that would change its image when hint time is full or empty).

-> About their locations in GUI, I think it's a matter of finding the right x/y coordinates? I've tried everywhere in screens and hidden object code files, I can break the game but not changing the spot with success :p

-> About the Hint becoming a image map fixed over the HO room, I don't even know if it is possible with Ren'py;

Some enlightment over this would be very very welcome :o)
Excuse the broken english, I try ;o) Thanks for reading!

PS - maybe I could share in a private message all the features Im trying to implement in this game? Most are just the common stuff to the HO/VN genres (room actions, inventory, etc).

User avatar
SusanTheCat
Miko-Class Veteran
Posts: 952
Joined: Mon Dec 13, 2010 9:30 am
Location: New Brunswick, Canada
Contact:

Re: Hidden Object Game Tutorial

#8 Post by SusanTheCat »

Version 2!

This takes a completely different approach:
- Each item is in it's own image file
- these images are cropped and turned into image buttons
background_together.png
And
* drumroll please *
It works on Android!

To check the code out, download the zip file and unzip into your Renpy Files directory.

If anyone is interested, I write out my workflow.

Susan
Attachments

[The extension apk has been deactivated and can no longer be displayed.]

H2O.zip
Sorry about the size -- lots of images!
(24.46 MiB) Downloaded 747 times
" It's not at all important to get it right the first time. It's vitally important to get it right the last time. "
— Andrew Hunt and David Thomas

Melancholy
Newbie
Posts: 3
Joined: Thu Apr 04, 2013 5:15 am
Contact:

Re: Hidden Object Game Tutorial

#9 Post by Melancholy »

I used your game (H2O) as my game base, and overwrote my images over yours (with the same image title) to make it my game, but even though the image is .PNG, transparent background, and with the same dimensions (1280 x 720), the image won't show up. I went into the game and it doesn't show the image I've replaced with my own (vase.png). The game shows nothing there. I click on the area it's supposed to be in, but nothing happens. >.< The image also doesn't show up in the 'image location picker'. It only shows pitch black. So, I'm guessing I'm doing something wrong, but I don't know what.

User avatar
SusanTheCat
Miko-Class Veteran
Posts: 952
Joined: Mon Dec 13, 2010 9:30 am
Location: New Brunswick, Canada
Contact:

Re: Hidden Object Game Tutorial

#10 Post by SusanTheCat »

Sorry! It didn't explain the code very well.

This is the part where you define the places:

Code: Select all

    crazy_items.append(Item("images2/article.png","Newspaper Article",473,254,146,121))
The parameters
- image filename
- Image label
- X of top left corner
- Y of top left corner
- Width of Item
- Height of Item

One way to get these numbers is to use the Developer Menu in Ren'Py (Shift + D) Then Image Location picker. You need an image that contains all the items.

Another way is to use HTML Imagemapper software, but then you need to convert the coordinates from x1,y1,x2,y2 to x,y,w,h.

Susan
" It's not at all important to get it right the first time. It's vitally important to get it right the last time. "
— Andrew Hunt and David Thomas

User avatar
nankaimo
Regular
Posts: 78
Joined: Sat Jun 08, 2013 9:13 pm
Completed: Lolita Dress up Game, Feather Promises
IRC Nick: Ems
Location: USA
Contact:

Re: Hidden Object Game Tutorial

#11 Post by nankaimo »

Wow this is going to be so helpful! Thankyou for making this C:

User avatar
SusanTheCat
Miko-Class Veteran
Posts: 952
Joined: Mon Dec 13, 2010 9:30 am
Location: New Brunswick, Canada
Contact:

Re: Hidden Object Game Tutorial

#12 Post by SusanTheCat »

If I was to make a walk-through tutorial, would you prefer:

a - A video tutorial with audio comments
b - a screenshot tutorial with things written out
c - both (i.e. the screen shot tutorial being based on the video tutorial)

Please realize that B might come out sooner. :)

Susan
" It's not at all important to get it right the first time. It's vitally important to get it right the last time. "
— Andrew Hunt and David Thomas

Giovedi
Regular
Posts: 147
Joined: Sun Sep 09, 2012 6:20 am
Contact:

Re: Hidden Object Game Tutorial

#13 Post by Giovedi »

Screenshot tutorial, please-- it'd be easier to reference I think for people who can't be arsed to seek through the video for specific information. :3c

User avatar
MikeConway
Newbie
Posts: 20
Joined: Tue Jun 28, 2011 10:27 pm
Contact:

Re: Hidden Object Game Tutorial

#14 Post by MikeConway »

SusanTheCat wrote:If I was to make a walk-through tutorial, would you prefer:

a - A video tutorial with audio comments
b - a screenshot tutorial with things written out
c - both (i.e. the screen shot tutorial being based on the video tutorial)
For me, both would work. The video would be great to have, to work to, but the tutorial would be there to reference, at least for me. But if I had to choose between the two, I'd go with B.

User avatar
shahrzad666
Newbie
Posts: 8
Joined: Fri Feb 28, 2014 4:11 am
Contact:

Re: Hidden Object Game Tutorial

#15 Post by shahrzad666 »

Hello
and thank you for tutorial :)

Post Reply

Who is online

Users browsing this forum: No registered users