Button functions not scaling with game

S

SlowYourRo

Guest
Hello. I've been using Game maker for about 2 years now and I recently discovered how to scale a game on a browser. I want to run games on my website but I'm having an issue. I have on-screen buttons in the game that work fine when the game is played at normal size. However, when I start to scale the game down on the browser ande mobile the on-screen buttons sizes down but functions seem to move away from the screen.

the video is here

In the video on the top left part of the game screen there is a 0 and 1. 0 when it is false and 1 when it is true. The variable is "is _over" the the code i used was in the button object

if (position_meeting(mouse_x,mouse_y,obj_title_play))
{
is_over = true;
}
else
{
is_over = false;
}

so whats suppose to haven is when the button is iver the mouse the zero is suppose to become a one and it dose when the game is the full size but as i alter the size the 'is_over' Variable starts to become 1 elsewhere.

Plase help thank you in advance.
 

Jakylgamer

Member
try this on resize
Code:
surface_resize(application_surface, width, height)
not sure if it will help your situation because i dont do html5 / mobile stuff
 
S

SlowYourRo

Guest
try this on resize
Code:
surface_resize(application_surface, width, height)
not sure if it will help your situation because i dont do html5 / mobile stuff
Thanks for answering, Where would i put it that code. cause i have it in a screen control right now
 

Jakylgamer

Member
step event:
Code:
if view_wport[0] != surface_get_width(application_surface) || view_hport[0] != surface_get_height(application_surface) {
   surface_resize(application_surface, view_wport[0],view_hport[0]);
}
 
S

SlowYourRo

Guest
Hello again i used this code in the step event of my screen control but to no avail.

step event:
Code:
if view_wport[0] != surface_get_width(application_surface) || view_hport[0] != surface_get_height(application_surface) {
   surface_resize(application_surface, view_wport[0],view_hport[0]);
}
the code that i am using is
and the buttons still do what they do in the videos.
Code:
Create event 
base_width = room_width;
base_height = room_height;
width = base_width;
height = base_height;

Step Event
if (browser_width != width || browser_height != height)
    {
    width = min(base_width, browser_width);
    height = min(base_height, browser_height);
    scale_canvas(base_width, base_height, width, height, true);
    }

 
/// scale_canvas(base width, base height, current width, current height, center);
//argument0 = base width;
//argument1 = base height;
//argument2 = current width
//argument3 = current height
//argument4 = center window (true, false);

var aspect = (argument0 / argument1);

if ((argument2 / aspect) > argument3)
    {
    window_set_size((argument3 * aspect), argument3);
    }
else
    {
    window_set_size(argument2, (argument2 / aspect));
    }

if (argument4) window_center();

surface_resize(application_surface, min(window_get_width(), argument0), min(window_get_height(), argument1));
 
I suspect what you're doing is scaling everything to the screen, but leaving the collision masks at the original locations.

Scale your mouse coordinates by the same amount and I suspect you'll hit the collision mask.

To test this constantly draw your mouse x/y to screen and see what it's doing. Or alternatively, look at this and hopefully you'll see what I mean :) michael-bateman.com/games/B5/

Of course I could be talking garbage and it might be another issue, but this is my good guess :)

Edit: You'd need to view that link on a mobile screen to see the difference by way.
 
S

SkSonicSk

Guest
If I remember, the window events dont work with mobile advices, only html 5.

have you tried device_mouse_x/y_to_gui?
 
S

SlowYourRo

Guest
If I remember, the window events dont work with mobile advices, only html 5.

have you tried device_mouse_x/y_to_gui?
So using device_mouse_x/y_to_gui would i have to choose the location to use it or can i still use the collision mask of the button?
 
I clicked you link and i see what you mean. so new question, how do i scale mouse coordinates?
So something like
Code:
var actual_mousex = mouse_x/aspect, actual_mousey = mouse_y/aspect;
Then you can use your scaled mouse x/y to test for collisions.

Also, yeah use device_mouse_x/y functions for html5, but I don't think that's what's causing your problem here. But may cause you issues later so better to start using now :)
 
Top