Resize level size and not sprites

[Garrzilla]

I am making a mobile game that has different shaped levels. I want to be able to zoom in or out depending on the height of the level. I want it to fill in the level size square in this image:

I know how to do the calculation comparing the level height to the template max height, but not sure what camera function to use. I tried camera_set_view_size but it changes the size of everything, sprites and room tiles/objects.

Here is a better example of what I'm talking about:

All of the GUI elements are created when the room loads, so the only objects in the room are for the level. I want to be able to resize just the level portion and not the GUI buttons/sprites

 

[Rob]

You're using draw_gui for the GUI elements right? If you draw the level in a draw event and the GUI items in the draw_gui even then the GUI elements should not change size.

https://www.dropbox.com/s/5a7llomak2rmhvg/zoom_demo.mp4?dl=0

here's a quick example of zooming in a game I'm working on. The GUI elements don't change size when I'm zooming in / out.

You could have a sprite with a square cut out of it that's drawn in the GUI and that would limit the amount of screen that can be seen for the level. I'm sure there are other ways to do it too, though.

 

[Garrzilla]

You're using draw_gui for the GUI elements right? If you draw the level in a draw event and the GUI items in the draw_gui even then the GUI elements should not change size.

https://www.dropbox.com/s/5a7llomak2rmhvg/zoom_demo.mp4?dl=0

here's a quick example of zooming in a game I'm working on. The GUI elements don't change size when I'm zooming in / out.

You could have a sprite with a square cut out of it that's drawn in the GUI and that would limit the amount of screen that can be seen for the level. I'm sure there are other ways to do it too, though.

The buttons are created in the Room start event, using instance_create. How do I "draw" it in the draw_gui event? just draw_self?

 

[Rob]

The buttons are created in the Room start event, using instance_create. How do I "draw" it in the draw_gui event? just draw_self?

draw_self will have the same effect as drawing in the normal draw event.

I would recommend using one object to draw all of the GUI buttons, setting a "state" for the different buttons when pressed and then running the code for that "state".

Here's a vid on "buttonless" buttons:

If that's too much of a leap / too much work then you can still keep your individual buttons, but tell them to draw themselves in the draw_gui event.

The coordinates that you created the buttons with may still be fine, depending on how your room is setup, etc, and in their draw_gui event, you want to check for device_mouse_x_to_gui / device_mouse_y_to_gui to get the mouse/finger coordinates so you can tell if somebody is trying to press the button or not.

 

[Garrzilla]

draw_self will have the same effect as drawing in the normal draw event.

I would recommend using one object to draw all of the GUI buttons, setting a "state" for the different buttons when pressed and then running the code for that "state".

Here's a vid on "buttonless" buttons:

If that's too much of a leap / too much work then you can still keep your individual buttons, but tell them to draw themselves in the draw_gui event.

The coordinates that you created the buttons with may still be fine, depending on how your room is setup, etc, and in their draw_gui event, you want to check for device_mouse_x_to_gui / device_mouse_y_to_gui to get the mouse/finger coordinates so you can tell if somebody is trying to press the button or not.

Thank you so much!

 

[Garrzilla]

draw_self will have the same effect as drawing in the normal draw event.

I would recommend using one object to draw all of the GUI buttons, setting a "state" for the different buttons when pressed and then running the code for that "state".

Here's a vid on "buttonless" buttons:

If that's too much of a leap / too much work then you can still keep your individual buttons, but tell them to draw themselves in the draw_gui event.

The coordinates that you created the buttons with may still be fine, depending on how your room is setup, etc, and in their draw_gui event, you want to check for device_mouse_x_to_gui / device_mouse_y_to_gui to get the mouse/finger coordinates so you can tell if somebody is trying to press the button or not.

Ok, I ran into an issue with making buttonless buttons. When the screen size changes, the clickable area for the button changes. So the issue as far as I can tell is with the sprite_get_offset for x and y. The sprites width/height doesn't get adjusted for the device size. The clickable area works for my tablet, but on a smaller phone the clickable area is larger.

I drew a rectangle: draw_rectangle(x1,y1,x2,y2,0); with the same coordinate variables and the rectangle adjusts perfectly to different screen sizes. It's the code checking where the mouse is that is messed up. Even with my mouse inside the rectangle, it doesn't activate. The "clickable" area is different than the rectangle I drew

 

[Rob]

Ok, I ran into an issue with making buttonless buttons. When the screen size changes, the clickable area for the button changes. So the issue as far as I can tell is with the sprite_get_offset for x and y.

The sprites width/height doesn't get adjusted for the device size. The clickable area works for my tablet, but on a smaller phone the clickable area is larger.

I drew a rectangle: draw_rectangle(x1,y1,x2,y2,0); with the same coordinate variables and the rectangle adjusts perfectly to different screen sizes. It's the code checking where the mouse is that is messed up. Even with my mouse inside the rectangle, it doesn't activate. The "clickable" area is different than the rectangle I drew

In the create event of the object drawing the GUI, you want to save the initial size of the display (assuming the object is persistent). If not then just save them somewhere else as globals.

Once you've done that, you should be able to use the different in size between the current screen size and starting size, and use that value to increase/decrease the area that the button will work in.

eg

//Create event
baseScreenWidth = surface_get_width(application_surface);
baseScreenHeight = surface_get_height(application_surface);

//draw_gui
//This is easier if your sprites have a central origin point (and that's what I've coded for)

currentScreenWidth = surface_get_width(application_surface);
currentScreenHeight = surface_get_height(application_surface);

buttonWidth = sprite_get_width(spr_button) * (currentScreenWidth / baseScreenWidth);
buttonHeight = sprite_get_height(spr_button) * (currentScreenHeight / baseScreenHeight);

if (abs(device_mouse_x_to_gui(0) - buttonX) <= buttonWidth && abs(device_mouse_y_to_gui(0) - buttonY) <= buttonHeight){

   //Check for mouse press and do what you wanna do!

}

I think something like that should work

 

[Garrzilla]

Ok, I ran into an issue with making buttonless buttons. When the screen size changes, the clickable area for the button changes. So the issue as far as I can tell is with the sprite_get_offset for x and y. The sprites width/height doesn't get adjusted for the device size. The clickable area works for my tablet, but on a smaller phone the clickable area is larger.

I drew a rectangle: draw_rectangle(x1,y1,x2,y2,0); with the same coordinate variables and the rectangle adjusts perfectly to different screen sizes. It's the code checking where the mouse is that is messed up. Even with my mouse inside the rectangle, it doesn't activate. The "clickable" area is different than the rectangle I drew

I am using the same x1,y1,x2,y2 variables to draw the red rectangle and to check where the mouse is. Why is it different. https://gyazo.com/b796ed7d120813ded06e7fbb85693713

 

[Garrzilla]

In the create event of the object drawing the GUI, you want to save the initial size of the display (assuming the object is persistent). If not then just save them somewhere else as globals.

Once you've done that, you should be able to use the different in size between the current screen size and starting size, and use that value to increase/decrease the area that the button will work in.

eg

//Create event
baseScreenWidth = surface_get_width(application_surface);
baseScreenHeight = surface_get_height(application_surface);

//draw_gui
//This is easier if your sprites have a central origin point (and that's what I've coded for)

currentScreenWidth = surface_get_width(application_surface);
currentScreenHeight = surface_get_height(application_surface);

buttonWidth = sprite_get_width(spr_button) * (currentScreenWidth / baseScreenWidth);
buttonHeight = sprite_get_height(spr_button) * (currentScreenHeight / baseScreenHeight);

if (abs(device_mouse_x_to_gui(0) - buttonX) <= buttonWidth && abs(device_mouse_y_to_gui(0) - buttonY) <= buttonHeight){

   //Check for mouse press and do what you wanna do!

}

I think something like that should work

Ok, the "device_mouse_x_to_gui" line of code worked a lot better than the "if (mouseX >= x1)". The problem is baseScreenWidth is the same as currentScreenWidth, so it equals 1. Also, what if the height is the same but the width is different? If a sprite is 100x100, and the height is the same, base and current, but the width is wider, will the sprite no longer have the same aspect ratio? since the width will change and not the height

 

[Rob]

if you're drawing the buttons as rectangles then the same coordinates can be used for checking for the mouse.

The length from X1 to x2 is the width of your button so you can times that length by the new ratio.

As for the ratios being the same (1:1) this happens with different room sizes still? Maybe what we should do is set the base width/height manually (whatever room size you're making the game in).

There are some decent videos on YT regarding aspect ratios if that will help and it should be more informative than my posts =p