Canvas snapshot scaling?

Post reply
2 favourites
  • 12 posts
From the Asset Store
Pixel Destruction of the Drawing Canvas
$5 USD
Pixel Destruction like in "Worms" (Drawing Canvas based)
Aventiy's avatar
Aventiy

  • Hi, can anyone explain to me how the sizing/scaling works with canvas snapshot?

    I have a sprite in the middle of the screen with its origin at top left, I action the canvas snapshot with the following:

    Snapshot X : sprite.x

    Snapshot Y : sprite.y

    Snapshot Width : sprite.width

    Snapshot Height: sprite.height

    The outcome is not what I expect, and to be honest I cannot fathom out how to get it to just be that sprite?

    If I leave all snapshot settings to 0, it does do a snapshot of the full viewport, as expected?

    So what do I need to do to get just the sprite?

    From what I can see , i need to be setting the X,Y,Width & height in Device Pixels, but how do I convert "pixels" to "Device Pixels"?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • If you are talking about Drawing Canvs snapshot, the details are here:

    construct.net/en/make-games/manuals/construct-3/plugin-reference/drawing-canvas

    More specifically look at:

    Expressions:

    PixelScale

    The size of a single canvas pixel in object co-ordinates. See the section Co-ordinate systems above for more information.

    SurfaceDeviceWidth

    SurfaceDeviceHeight

    Returns the current size of the canvas surface in device pixels. These are useful to use when defining a subset area to use in the Save image action.

    The one exception to this is using snapshots to read and write pixel data. In this case snapshot pixels are given in actual pixel co-ordinates rather than object co-ordinates. The PixelScale expression also gives the size of an actual pixel on the drawing surface in object co-ordinates, allowing you to convert between object and pixel co-ordinates.

  • Hi, I’m not talking about the drawing canvas.

    Just simply using the system -> canvas snapshot action.

    I have no use of the drawing canvas. Just a sprite in the middle of the screen which I want to take a snapshot of.

  • I see, my suggestion then would be to multiply everything by: PlatformInfo.DevicePixelRatio

  • Will give it a try, thanks

  • Mikal

    Thanks for the help but unfortunately that still does not give me the correct size?

    I really do not know what you have to do in order to specifically set the size of the snapshot (despite there being settings for it)

    I feel like I have exhausted all possible attempts

  • The snapshot area is given in device pixels (i.e. pixels on the resulting image if you took a full screenshot). That is different to layout co-ordinates (i.e. object positions) which depends on scrolling, scaling, the viewport size, etc.

    The system LayerToCanvasX/Y expressions can convert a layout position to canvas CSS co-ordinates, and then if you multiply that by PlatformInfo.DevicePixelRatio, that should give you the device co-ordinates.

  • The snapshot area is given in device pixels (i.e. pixels on the resulting image if you took a full screenshot). That is different to layout co-ordinates (i.e. object positions) which depends on scrolling, scaling, the viewport size, etc.

    The system LayerToCanvasX/Y expressions can convert a layout position to canvas CSS co-ordinates, and then if you multiply that by PlatformInfo.DevicePixelRatio, that should give you the device co-ordinates.

    Thanks Ashley, Will give this a try!

    Andy

  • Ashley Can you please elaborate a little on this.

    In the Canvas snapshot X and Y I using the following.

    Sprite2.X*PlatformInfo.DevicePixelRatio

    Sprite2.Y*PlatformInfo.DevicePixelRatio

    How do I incorporate the LayerToCanvasX/Y method?

    Thanks

  • The Sprite position is in layer co-ordinates.

    LayerToCanvasX(Sprite.LayerNumber, Sprite.X, Sprite.Y) will give you the corresponding X position on the canvas.

    Then multiply that by the device pixel ratio to get device co-ordinates.

  • Thanks Ashley, what about width and height?

    Edit: I have also done as above and it still ends up taking a snapshot about 20 pixels higher than sprite????

  • I have a sprite called BoardQuestion where the user draws on. It is on layer "Play".

    I used BBox to get the coordinates, and it worked.

    I tried to get part of the BoardQuestion, but I couldn't. i.e.: I have to snapshot the whole sprite.

    I tried using a DrawingCanvas and/or another Sprite that covers only the area I want from BoardQuestion, but every time I take a screenshot, it leaves a part missing or extends outside BoardQuestion.

    Here is my working code so far:

    Ashley CanvasSnapshot is such a nice feature! Please add a more generic approach in the CanvasSnapshot example (i.e. snapshot of a selected area instead of a Sprite or the whole canvas).

Post reply
  • 12 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)