Page 1 of 2
Imagemap Coordinates
Posted: Mon Mar 29, 2010 4:36 pm
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.
Re: Imagemap Coordinates
Posted: Mon Mar 29, 2010 4:43 pm
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)
Re: Imagemap Coordinates
Posted: Mon Mar 29, 2010 5:03 pm
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)
Re: Imagemap Coordinates
Posted: Mon Mar 29, 2010 5:06 pm
by lucy
mugenjohncel wrote:I guess this is the right time to embrace change and streamline the whole process...
Times are changing huh...
Re: Imagemap Coordinates
Posted: Mon Mar 29, 2010 6:13 pm
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.
Re: Imagemap Coordinates
Posted: Mon Mar 29, 2010 6:47 pm
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.
Re: Imagemap Coordinates
Posted: Tue Mar 30, 2010 1:58 am
by LVUER
Is it possible to make imagemap to be not rectangle? Perhaps triangle or some random shape (like map)?
Re: Imagemap Coordinates
Posted: Tue Mar 30, 2010 3:31 am
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()
Re: Imagemap Coordinates
Posted: Tue Mar 30, 2010 8:03 am
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
Re: Imagemap Coordinates
Posted: Tue Mar 30, 2010 10:53 am
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.)
Re: Imagemap Coordinates
Posted: Tue Mar 30, 2010 11:21 am
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.
Re: Imagemap Coordinates
Posted: Sun May 23, 2010 9:35 pm
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.
Re: Imagemap Coordinates
Posted: Sun May 23, 2010 10:21 pm
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.
Re: Imagemap Coordinates
Posted: Mon May 24, 2010 4:20 am
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.
Re: Imagemap Coordinates
Posted: Wed May 26, 2010 4:11 am
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... *___*