[Solved] Camera Zoom & GUI Objects

[robproctor83]

Hello, I am in the process of adding a zoom function to my camera system. Everything is great, except that now my GUI buttons are jacked. The problem is that I add invisible button objects over the area where the buttons should be because I found that simpler than manually typing out and keeping track of a bunch of data, plus there are a bunch of GUI buttons and they are shifting around slightly over time and so it was just an ease of use kind of thing. Now the issue is that those transparent buttons are scaling with camera, which I obviously don't want. Is there no way to possibly separate these objects from that particular camera? Or, will I need to convert all these button objects to just physical coords instead?

Thanks

 

[Rob]

If you're not already using the draw_gui layer you may/may not find that easier to draw the sprites rather than use objects. You could also still use objects and have them draw their own sprites in the draw_gui layer.

I don't know if that would make some extra work for you in order to code for detecting the mouse (using device_mouse_x_to_gui / device_mouse_y_to_gui) as I don't know how you detect the mouse atm.

In case you don't know, the draw_gui layer coordinates are always the same, no matter where the view is in the game.

Even if the camera is at 500/4320, the top left of draw_gui is 0/0.

 

[robproctor83]

Thank you so much for the response. I am using the draw gui layer for all the art but I use empty objects to trigger hover effects and button clicks. I did it this way because otherwise I would need to manually say if(mouse > 10 || mouse < 20) etc etc and I basically didn't want to do it that way (even though it's certainly more efficient). I figured placing a physical object as a representation of the buttons area would be pretty easy and straight forward way. The problem though is that the properties of the button scale with the camera, so when the camera zooms in the buttons all zoom with it.

Since posting this though I have come to realize that I can scale the buttons opposite of the zoom and it will pretty much put things back to where they belong, but this is also a lot of extra work as I gotta go back to all my button code and adapt it to include this additional scaling mechanic. I was hoping there would be some simple way to just make these button objects respond to a different camera than the one I am scaling, but I don't see how that would be possible. Perhaps there would be a way to do it with layers, though I am not sure.

 

[Rob]

Thank you so much for the response. I am using the draw gui layer for all the art but I use empty objects to trigger hover effects and button clicks. I did it this way because otherwise I would need to manually say if(mouse > 10 || mouse < 20) etc etc and I basically didn't want to do it that way (even though it's certainly more efficient). I figured placing a physical object as a representation of the buttons area would be pretty easy and straight forward way. The problem though is that the properties of the button scale with the camera, so when the camera zooms in the buttons all zoom with it.

Since posting this though I have come to realize that I can scale the buttons opposite of the zoom and it will pretty much put things back to where they belong, but this is also a lot of extra work as I gotta go back to all my button code and adapt it to include this additional scaling mechanic. I was hoping there would be some simple way to just make these button objects respond to a different camera than the one I am scaling, but I don't see how that would be possible. Perhaps there would be a way to do it with layers, though I am not sure.

Using what's called "magic numbers" and having to change them around is always going to be a pain in the bum and laborious and there are almost always better ways to do it.
If you have one object per button sprite, assign the sprites to those objects and place them in the room, using the room's view as the guideline for placement. The objects don't need to move around, you just need to use device_mouse_x_to_gui() and device_mouse_y_to_gui() to get where the mouse is relative to the draw gui layer.

GUI doesn't have to be complicated or time consuming at all.

 

[robproctor83]

I'm not sure I understand exactly what you mean. Moving the sprites into the button objects won't fix it as the button objects are where the problem lies, they scale in context with the camera, so as the camera zooms the button objects zoom with them. Getting the buttons positioned correctly on the screen is no problem, I mean in relation to the screen anyways, but still they get out of exact placement because the zooming also adjusts the position somewhat as everything becomes scaled with the camera, so buttons that are spaced apart by 10px become 20px when zoomed, and so if I am creating buttons from the right edge the last button gets out of place by 30px if I am drawing 3 buttons. So yea, like I was saying though I can fix this by adjusting all the values in the object by whatever the zoom factor is. So if I am zooming in by 200% then I can go back into my buttons and scale everything down by 50% it fixes the problem... But that's a lot of work for me cause I have a lot of buttons already setup and also it's a little more complicated than I am explaining but that's the gist of it.

What I was hoping for though, was just some way to make a camera avoid certain objects. Like have everything but these gui buttons interface with the main camera and then have the button objects interface with a different camera. I just need the main camera to not affect these objects, but I don't think that is possible.

 

[samspade]

It is possible if you use the gui layer, which is really what you should be doing - it is why the gui layer exists.

The basic way to do this is the following:

• have only one instance of an object per button.
  
• That instance should not be scaled or moved. (unless you want it to be scaled or moved in the gui layer)
• you should have a blank draw event
• you should call draw_self() in the gui event
• in the step event you should switch all position checkts to use the device_mouse_x/y_to_gui functions instead of mouse_x/y

The basic code for a gui button could look like this:

///create event
//whatever you want/need

///step event
if (device_mouse_check_button_pressed(0, mb_left)) {
   if (position_meeting(device_mouse_x_to_gui(0), device_mouse_y_to_gui(0), id) {
       //button has been clicked, do stuff
   }
}

///draw event
//leave blank so it isn't drawn

///draw gui event
draw_self();

You can place these buttons in the room either with code or in the room editor, just remember that in either case you need to position them using the gui resolution. One trick to doing this is take an unused view, activate it, set its size to be the same as the gui layer, place the buttons in the room editor using that view as a refence and then disable the view again.

 

[Rob]

I'm not sure I understand exactly what you mean. Moving the sprites into the button objects won't fix it as the button objects are where the problem lies, they scale in context with the camera, so as the camera zooms the button objects zoom with them. Getting the buttons positioned correctly on the screen is no problem, I mean in relation to the screen anyways, but still they get out of exact placement because the zooming also adjusts the position somewhat as everything becomes scaled with the camera, so buttons that are spaced apart by 10px become 20px when zoomed, and so if I am creating buttons from the right edge the last button gets out of place by 30px if I am drawing 3 buttons. So yea, like I was saying though I can fix this by adjusting all the values in the object by whatever the zoom factor is. So if I am zooming in by 200% then I can go back into my buttons and scale everything down by 50% it fixes the problem... But that's a lot of work for me cause I have a lot of buttons already setup and also it's a little more complicated than I am explaining but that's the gist of it.

What I was hoping for though, was just some way to make a camera avoid certain objects. Like have everything but these gui buttons interface with the main camera and then have the button objects interface with a different camera. I just need the main camera to not affect these objects, but I don't think that is possible.

Objects dont scale, sprites do, but not in the gui layer, which is where I suggested you to draw them but I don't think you bothered trying

 

[robproctor83]

Oh I see what you are saying. Draw it in the gui layer, duh that makes total sense lol. I'll give that a go.