Spot The Difference Game skeleton
Posted: Fri Jan 29, 2016 8:49 am
I made a system for making a "Spot the Difference" game in Ren'Py. You are welcome to use the code any way you see fit. I do not provide any support (mostly because I am currently dealing with brain lesions from cancer)
Features:
- left and right image
- click on either side
- random differences
First step is to make the base image file: Then make another overlay image the same size as the base image: When you are making the images, try to not have the differences overlap. If you are feeling clever, you can have the overlay be transparent as long as it completely hides the original image.
Now you have to make a map of all the differences. I used an Imagemap generator, then found out that DangKem made an awesome HotSpot tool http://lemmasoft.renai.us/forums/viewto ... 52&t=31723 You make rectangular HotSpots where the differences are. The HotSpot Tool will then spit out code that looks like this:
You'll need to change it to look like this:
STD_Item("overlay image file",x,y,width,height) makes a cutout image of just the difference and stores whether the difference is turned on on the left and/or right.
The next step is to create the SpotTheDifference image and start the interaction:
SpotTheDifference("base image file", list_of_STD_Items) Creates two images side by side
SpotTheDifference.randomizeItems(num_of_differences) randomizes the items turning on the overlay then it makes a number of differences based on the number passed.
When the user clicks on a difference, it changes the clicked side to match the other side. So if you click on the left, it changes the left image to match the right image.
afterImage("base image file", list_of_STD_Items) Creates the final image
That's the basics of using it. If I get some time, I with delve into the code to explain it a bit more. As I said before, I am dealing with brain lesions which have hampered my language skills (causing me to use words like hampered . )
This code is provided as is. This is not the best way do get this effect, but it is the way my brain can handle.
Susan
PS: I am aware of what STD normally stands for. My dark sense of humour took over.
Features:
- left and right image
- click on either side
- random differences
First step is to make the base image file: Then make another overlay image the same size as the base image: When you are making the images, try to not have the differences overlap. If you are feeling clever, you can have the overlay be transparent as long as it completely hides the original image.
Now you have to make a map of all the differences. I used an Imagemap generator, then found out that DangKem made an awesome HotSpot tool http://lemmasoft.renai.us/forums/viewto ... 52&t=31723 You make rectangular HotSpots where the differences are. The HotSpot Tool will then spit out code that looks like this:
Code: Select all
hotspot(40,252,50,80) action
hotspot(127,223,44,113) action
hotspot(265,216,53,94) action
hotspot(188,261,35,29) action
Code: Select all
init python:
diff_items = []
diff_items.append(STD_Item("images/overlay.png", 40,252,50,80))
diff_items.append(STD_Item("images/overlay.png", 127,223,44,113))
diff_items.append(STD_Item("images/overlay.png", 265,216,53,94))
diff_items.append(STD_Item("images/overlay.png", 188,261,35,29))
The next step is to create the SpotTheDifference image and start the interaction:
Code: Select all
python:
std = SpotTheDifference("images/base.png", diff_items)
std.randomizeItems(5)
ui.add(std)
winner = ui.interact(suppress_overlay=False, suppress_underlay=False)
SpotTheDifference.randomizeItems(num_of_differences) randomizes the items turning on the overlay then it makes a number of differences based on the number passed.
When the user clicks on a difference, it changes the clicked side to match the other side. So if you click on the left, it changes the left image to match the right image.
Code: Select all
image std_img = afterImage("base image file", list_of_STD_Items)
show std_img
That's the basics of using it. If I get some time, I with delve into the code to explain it a bit more. As I said before, I am dealing with brain lesions which have hampered my language skills (causing me to use words like hampered . )
This code is provided as is. This is not the best way do get this effect, but it is the way my brain can handle.
Susan
PS: I am aware of what STD normally stands for. My dark sense of humour took over.