Imagemap Coordinates

In this forum we discuss the future of Ren'Py, both bug fixes and longer-term development. Pre-releases are announced and discussed here.
Message
Author
User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Imagemap Coordinates

#1 Post by PyTom »

First, some background. Now that OpenGL support is mostly done, I'm working on the other big new feature in 6.11 - a new "screen system". The screen system will be similar to the imagemap menus, but a lot more flexible. Do you want to include a load button or a volume slider on the main menu? Now, you'll easily be able to.

Here's an example imagemap main menu:

Code: Select all

screen main_menu:
    imagemap "main_menu_*.jpg"
    
    hotspot (100, 100, 200, 40) clicked Start()
    
    if persistent.unlocked_extras:
        hotspot (100, 140, 200, 40) clicked Start("extras")
    else:
        hotspot (100, 140, 200, 40) clicked Start("extras_locked")
    
    hotspot (100, 180, 200, 40) clicked JumpScreen("load_screen")
    hotspot (100, 220, 200, 40) clicked JumpScreen("preferences_screen")
    hotspot (100, 260, 200, 40) clicked Quit()
This example has five imagemapped buttons:
- A start button.
- A button that goes to the extras, if they've been unlocked, else goes to the extras_locked screen.
- A button that goes to the load screen.
- A button that goes to the preferences screen.
- A button that quits the game.

In this example, I've given the hotspots as (x, y, w, h) - that is, we give the upper-left coordinate, and then the width and height. Currently, for imagemaps, we give hotspots as (x1, y1, x2, y2) - the coordinates of the upper-left and lower-right corners of the hotspot.

I'd like to change how we specify imagemaps, for consistency with the rest of Ren'Py. Apart from imagemaps, we use (x, y, w, h) everywhere else in Ren'Py, like for cropping. But at the same time, I'd like for this not to make the new scheme useless.

So, my question to people who currently make or are considering making imagemap menus is this: How would this new scheme affect your workflow? Regularity is nice, but I don't want to make designing menus impractically difficult.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

User avatar
jack_norton
Lemma-Class Veteran
Posts: 4084
Joined: Mon Jul 21, 2008 5:41 pm
Completed: Too many! See my homepage
Projects: A lot! See www.winterwolves.com
Tumblr: winterwolvesgames
Contact:

Re: Imagemap Coordinates

#2 Post by jack_norton »

Well I was using w,h since when you do the layers on photoshop, it shows you those values (x,y and w,h). However to avoid mistakes I was simply adding the w,h to x,y:
(x,y, x+w,y+h) :lol:
follow me on Image Image Image
computer games

User avatar
mugenjohncel
Hentai Poofter
Posts: 2121
Joined: Sat Feb 04, 2006 11:13 pm
Organization: Studio Mugenjohncel
Location: Philippines
Contact:

Re: Imagemap Coordinates

#3 Post by mugenjohncel »

PyTom wrote:I'd like to change how we specify imagemaps
Reluctant at first since (no actually... I still am) I'm so used to the old system but given the plus and the minuses... the new system is better in so many ways... I guess this is the right time to embrace change and streamline the whole process...

"POOF" (Disappears)

lucy
Lucy-Class Veteran
Posts: 103
Joined: Wed Feb 11, 2009 5:07 am
Location: Stuck in a cave
Contact:

Re: Imagemap Coordinates

#4 Post by lucy »

mugenjohncel wrote:I guess this is the right time to embrace change and streamline the whole process...
Times are changing huh...
Image

User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: Imagemap Coordinates

#5 Post by PyTom »

I'll note that this isn't set in stone yet. While I'm leaning towards it, if someone was to point out a compelling argument against it, I might reconsider.

Also, Mugen, stop talking to yourself.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

number473
Regular
Posts: 195
Joined: Tue Dec 15, 2009 4:20 am
Projects: The Duke's Daughter
Location: Cape Town
Contact:

Re: Imagemap Coordinates

#6 Post by number473 »

I'll say that the suggested syntax looks a lot more elegant than the huge function call of before. I was going to recommend that it might be nice to have a whole ui language similar to ATL. It would also mean that the code would look in general more homogenous, whereas now it's rather littered with dollar signs and python code which doesn't quite look the same, which while functional ... etc, etc...
What I mean is that it would be nice if Ren'py code looked like Ren'Py code, rather than half Ren'Py half Python. Or if you could keep the Python separate.

Regarding the coordinate change, the (x1, y1, x2, y2) seems more natural to me, but I can't see that it makes much difference. It's just a addition or subtraction apart. If it brings it into alignment with the other notations then I support it.
Mental weather report: Cloudy with a possibility of brain storms.

LVUER
King of Lolies
Posts: 4538
Joined: Mon Nov 26, 2007 9:57 pm
Completed: R.S.P
Location: Bandung, West Java, Indonesia
Contact:

Re: Imagemap Coordinates

#7 Post by LVUER »

Is it possible to make imagemap to be not rectangle? Perhaps triangle or some random shape (like map)?
"Double the princesses, quadruple the fun!" - Haken Browning (SRW-OG Endless Frontier)

DeviantArt Account
MoeToMecha Blog (under construction)
Lolicondria Blog (under construction) <- NSFW

Jake
Support Hero
Posts: 3826
Joined: Sat Jun 17, 2006 7:28 pm
Contact:

Re: Imagemap Coordinates

#8 Post by Jake »

LVUER wrote:Is it possible to make imagemap to be not rectangle?
This is something I would really like, as well - I'm coming up against some hard limits on what I can do with UI design from time to time just because I have to keep all my elements separated along axes. For example, it's pretty tricky to do a pie menu with an imagemap without having any of your hotspots overlap, and that's something I'd have liked to be able to do for my current project.

Arbitrary polygons would be really nice, but probably too confusing for a lot of users; triangles would be a compromise that would be easier to explain to people; circles would be pretty good... another option would be a colourmap - ask the user to provide another image, this time with areas of colour drawn on, with each distinct colour registerable as a separate hotspot, something like:

Code: Select all

screen main_menu:
    imagemap "main_menu_*.jpg"
    
    hotspot (colour="#00A") clicked Start()
    
    if persistent.unlocked_extras:
        hotspot (colour="#0A0") clicked Start("extras")
    else:
        hotspot (colour="#0A0) clicked Start("extras_locked")
    
    hotspot (colour="#A00") clicked JumpScreen("load_screen")
    hotspot (colour="#FF0") clicked JumpScreen("preferences_screen")
    hotspot (colour="#F0F) clicked Quit()
Server error: user 'Jake' not found

User avatar
jack_norton
Lemma-Class Veteran
Posts: 4084
Joined: Mon Jul 21, 2008 5:41 pm
Completed: Too many! See my homepage
Projects: A lot! See www.winterwolves.com
Tumblr: winterwolvesgames
Contact:

Re: Imagemap Coordinates

#9 Post by jack_norton »

I like the colourmap idea. Personally I just use python and ui.imagebuttons when I have to deal with irregularly shaped clickable images, but that of course doesn't work with an imagemap. Jake solution is good, I was to suggest using an array of points to define a polygon but using colors you could create the buttons/clickable areas directly in photoshop without having to code anything.

My vote goes to this idea, I think is really good :)
follow me on Image Image Image
computer games

chronoluminaire
Eileen-Class Veteran
Posts: 1153
Joined: Mon Jul 07, 2003 4:57 pm
Completed: Elven Relations, Cloud Fairy, When I Rule The World
Tumblr: alextfish
Skype: alextfish
Location: Cambridge, UK
Contact:

Re: Imagemap Coordinates

#10 Post by chronoluminaire »

For rectangles I prefer (x, y, w, h) to (x1, y1, x2, y2). But I agree that colourmap would be very nice. (You'd have to warn people against saving them as JPG or some other lossy image format.)
I released 3 VNs, many moons ago: Elven Relations (IntRenAiMo 2007), When I Rule The World (NaNoRenO 2005), and Cloud Fairy (the Cute Light & Fluffy Project, 2009).
More recently I designed the board game Steam Works (published in 2015), available from a local gaming store near you!

User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: Imagemap Coordinates

#11 Post by PyTom »

I've added color maps to my longer-term list of things, but they won't be in the next release. For them to work, I'd need to figure out some way of quickly turning a color map into a bunch of transparent images.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

User avatar
DaFool
Lemma-Class Veteran
Posts: 4171
Joined: Tue Aug 01, 2006 12:39 pm
Contact:

Re: Imagemap Coordinates

#12 Post by DaFool »

Good thing I read this thread before embarking on a scheme that's about to be overhauled.

I actually plan to use imagemaps for practically everything.

I would theoretically be able to do any type of tactical scenario if nonrectangular imagemaps are allowed. Colormaps sound like a great idea. Is this on the roadmap for Renpy 7? ( along with Win7 support) Right now I'm looking at converting the Tile/ unit engine to ATL, if it hasn't been converted already.

User avatar
PyTom
Ren'Py Creator
Posts: 16088
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: Imagemap Coordinates

#13 Post by PyTom »

I don't have a good idea of how to implement colormaps. So right now, they're not on the roadmap, but instead, they're more in my "things to think about" file.

Screen language imagemaps are already superior to classic imagemaps. With the screen language (or the ui functions, which are equivalent), one can now specify actions to occur when an imagemap hotspot becomes hovered or unhovered, as well as when it is clicked.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

Jake
Support Hero
Posts: 3826
Joined: Sat Jun 17, 2006 7:28 pm
Contact:

Re: Imagemap Coordinates

#14 Post by Jake »

PyTom wrote:I don't have a good idea of how to implement colormaps.
Presuming the issue is with inside/outside tests, a couple of ideas off the top of my head:

Idea 1:
- On preload, reduce the colour map to a series of increasingly-small mipmap-style versions. Maybe one at one-quarter res and one at one-quarter of that. On each of these smaller versions, use the original colour-map's colour if the region that pixel describes is entirely that colour on the original map, and use an extra, not-in-the-original-map colour to mean "look this pixel up on the next-more-granular map". Then when you're testing whether the mouse is hovering a region or not, you can just look at the one-sixteenth map to perform a quick check which will discard the majority of negatives, and will return quickly for any middle-of-large-area lookups (which I expect will account for a majority of the cases in most maps) and only have to look up on the original map when the mouse is right on the edge of an area.
If you were feeling lazy you could even use an existing mip-map function, so long as it does interpolation, and just tell people to use distinct enough hues and saturations that there's no chance of accidentally producing a third lookup region by blending the colours of two others.

Idea 2:
- Just use marching squares or something to come up with outlines for each colour area specified as a hotspot, and use one of the large number of inside/outside tests readily available to determine whether the mouse is inside or outside the region (off the top of my head; trace a line from your test point to the edge of the screen; if it crosses an odd number of outline segments it's inside, if it crosses an even number it's outside). For extra credit, do bounding-box checks to discard most tests before you start. I'd guess this would involve more work on load but result in faster tests.


It's less convenient, but if you're doing something like this you might also consider making the user call a 'compile colour map' function before using them to make it clear that there's some work that needs to be done before the map can be used, so nobody expects it to be instant on their 1995-vintage PC.
Server error: user 'Jake' not found

yummy
Miko-Class Veteran
Posts: 733
Joined: Fri Jul 07, 2006 9:58 pm
Projects: Suna to Majo
Location: France
Contact:

Re: Imagemap Coordinates

#15 Post by yummy »

PyTom wrote:I don't have a good idea of how to implement colormaps. So right now, they're not on the roadmap, but instead, they're more in my "things to think about" file.

Screen language imagemaps are already superior to classic imagemaps. With the screen language (or the ui functions, which are equivalent), one can now specify actions to occur when an imagemap hotspot becomes hovered or unhovered, as well as when it is clicked.
Oh I can already see all the applications to this! It's just like dynamic events, when the mouse hovers a hotspot, there's a returned value...
Then you mix a point & click system with the VN system... *___*

Post Reply

Who is online

Users browsing this forum: No registered users