CanvasToLayerX problems

  • Hello . I'm trying to make a combat board for an RPG game that can be moved around and resized .

    Since the board needs to be contained within a certain portion of the screen , i'm using a calculation with CanvasToLayerX to pin a sprite to a certain position . This sprite acts as a mask that stops the grid from getting out of it ( using the "source atop" effect ) .

    In the pictures below , the grid is represented as the big red sprite .

    In Firefox , Edge and NW , the mask pins to the exact position . However , in Chrome , the mask pins slighty more to the left for some reason . Here are some prints :





    The zoom % alters the scale of the layer .

    Since the mask needs to be in the same layer as the grid for the effects to work , it means it is also affected by the scaling . For that , it's size compensates for the scale so it remains constant .

    And for the position , i use these calculations :

    (spr_combatbackground is the background window the mask is supposed to be contained in)

    Why is this happening only on Chrome ?

    Is there any better way to do what i am doing ?

    Thanks in advance

  • PS : Here's a sample capx (please test in different browsers):

  • So the mask size and position should always be the same, but the map inside the mask can scale and move?

    I believe you can do this much easier. Put the map on the bottom layer with scale rate=100, put the mask sprite on the layer above it with scale rate=0. Set blend mode=Destination In on the mask layer (not on the mask sprite!). Also set Unbounded scrolling=yes for the layout and scale rate=0 for all other layers.

    You should be able to scale the bottom layer inside the mask.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Thanks for the response , but it didn't work very well . The background went black and the zoom is bugged .

    Here's the altered capx :

  • You need to put all UI controls on a level above. See this file:

    I just realized - you don't need the mask. Just cover parts of the screen with tiledbackground like I did in this file.

  • It works well , there is just one small problem : With this method , i cannot put any layer below the map . That means i cannot use the window frame from before .

    It's not a big deal, but i would like to have the window frame below the map.

  • What do you mean by window frame and why do you need it below the map?

    You can still add levels below or above the map with scale rate and parallax set to 100 and you'll be able to zoom/scroll them. Put all UI controls on the HUD layer above everything else.

    (And, like I said in my previous comment, you can remove the mask layer, it's not really needed)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)