1. Hey! Guest! The 35th GMC Jam will take place between November 28th, 12:00 UTC - December 2nd, 12:00 UTC. Why not join in! Click here to find out more!
    Dismiss Notice

HTML5 How to scale canvas preserving the clickable area

Discussion in 'GameMaker Studio 2 Community Tech Support' started by T Spoon, Oct 17, 2018.

  1. T Spoon

    T Spoon Member

    Joined:
    Oct 16, 2018
    Posts:
    2
    On our website, we upload games made by our students. Because scaling up usually looks better we have a view port of 640x480 for all the student games and scale the canvas up to fit its container, so that the game looks good on most desktop environments.

    However, since we started implementing 640x480 view ports, the area where a mouse press is registered remains in the 640x480 box, so if the canvas is scaled up, the "clickable area" is only party of the actual view port.

    This breaks the controls of many games relying on mouse clicks. Is there any way to automatically scale up the "clickable area" with the canvas?
     
  2. Michael Bateman

    Michael Bateman Member

    Joined:
    Jun 25, 2016
    Posts:
    228
    As far as I'm aware, GM won't do this automatically for you, but you can achieve it with a script. You need to scale the mouse x/y coordinates by the same amount as you're scaling your canvas. I have an old test project that I think shows your issue, which I still have uploaded to my website here. View in a browser and pull the window around to resize it and see how the mouse x/y positions change, or on different phones with different resolutions. Basically, I update the mouse x/y as scaled at beginning of each step in my scaling engine and save them to global variables. Then use those global vars as the actual mouse x/y coordinates.
     
  3. T Spoon

    T Spoon Member

    Joined:
    Oct 16, 2018
    Posts:
    2
    Thanks for your reply. While your fix seems to be the solid one, I applied a dirty fix by specifying the dimensions in the canvas tag of the game's html document to width=1024 and height=768, as these are the maximum dimensions. For the games the students programmed so far, this suffices. However, I'll look into easily integrate your fix in the future.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice