Making a find-the-differences mini game.

[Nyu]

I'm trying to make a find-the-differences between 2 pictures mini game. But I don't know how. >-<

Like thise *o*:


Please tell me how to. If you could use normal vocabulary it's better since I'm not a pro at programing~
Thanks in advance!! ^ ^

[KimiYoriBaka]

You can use an imagemap (built-in renpy feature that shows a picture then makes clickable spots). Just use the same file for each of the hotspots (the places to click) so that they don't show when you put the mouse over them.

This would probably allow the player to just press enter to cheat, but I'm sure most people wouldn't realize that.

More specifically, this is how to do it in screen language, starting with an example:

Code: Select all

init:
    $ found1 = False
    $ found2 = False

screen differences:

    imagemap:
        ground "atispot.png"

        hotspot (740, 232, 75, 73) clicked SetVariable(found1, True)
        hotspot (832, 232, 75, 73) clicked SetVariable(found1, True)
        hotspot (1074, 232, 75, 73) clicked SetVariable(found2, True)
        hotspot (1166, 232, 75, 73) clicked SetVariable(found2, True)

    if found1:
        add "circle.png":
            xpos 323
            ypos 200

    if found2:
        add "circle.png":
           xpos 403
           ypos 233


label minigame:

    if !(found1 and found2):
        show screen differences
        jump minigame

the first part gives the game the necessary variables, cause it needs something to keep track of which differences have already been found. If you've already done anything in renpy, you should be able to figure that part yourself. the second part defines a "screen" which is just what pytom decided to call the sets of interface (things you can see and use) for this feature. in this case the screen is called "differences".

once the program knows a screen is being made, next is to tell it that an imagemap will be used. As usual for renpy, the colons and indentation are used to tell the program what goes with what. the "ground" is the base picture used regardless of what the player does. since you probably don't want the differences to light up when the player passes them, you don't need any other pictures.

Next is the hotspots. these are the areas where the player can click to show they've found a difference. the four numbers given are the coordinates of the upper left corner, followed by the width and height of the are. the hotspots all have to be rectangles, and you can find them by opening your picture in any image editing program (photoshop, paint, etc.) and just put the cursor over the spots you want. the SetVariable part lets the program know when a difference is found.

I didn't use the actual coordinates, of course. cause I don't know them. however, you should notice that I put two for each variable. this is so the player can click on either image.

the part after the imagemap show something to indicate which differences have already been found. I would use a circle with a transparent background, but that just me. once again, the coordinates are made up. just remember that xpos and ypos will by default be the upper left corner of the image.

the last part is how you tell the game to actual show the screen, "differences". it's a simple loop that jumps back to itself as long as the differences in the picture haven't already been found. this is so the picture will stay up. Note that the exclamation mark after the "if" is important.

[Snowflower]

That was really helpful!
Although it doesn't really go with my current WIP, I will definitely use this on my next XD