When export the screenshot, how can I ensure its size?

Post reply
0 favourites
  • 13 posts
From the Asset Store
Food Sprites 16x16 Pixel Size
$14 USD
220 Food Sprites in 16x16 pixel size. Perfect for items for a retro style game.
BerserkerLewis's avatar
BerserkerLewis

  • I have a sprite on the layout, and I've implemented logic where only the area covered by that Sprite is captured when taking a screenshot (using the "System: Snapshot Canvas" action) 

    > -> System: Take snapshot of canvas (PNG, quality 75, offset LayerToCanvasX(1,Sprite.BBoxLeft,Sprite.BBoxTop)×PlatformInfo.DevicePixelRatio, LayerToCanvasY(1,Sprite.BBoxLeft,Sprite.BBoxTop)×PlatformInfo.DevicePixelRatio size Sprite.Width×(PlatformInfo.CanvasDeviceWidth÷ViewportWidth(1)) x Sprite.Height×(PlatformInfo.CanvasDeviceHeight÷ViewportHeight(1)))

    via)

    If I export the screenshot, how can I ensure its size? Let's say I want to export a specific area of the screen at an exact size of 277x277 pixels. How can I achieve this? Normally, when taking a screenshot, it adapts to the screen size, but I want to capture a particular area at a fixed resolution.

    One way it can be done is by turning off the full-screen mode in the display properties. However, this approach doesn't allow me to export it to Android. Please assist me.

    Here is the c3p.

    Edit:1

    Another way I think it is possible is that Before exporting the screenshot, resize it to the desired resolution, but I don't know how to resize it to a certain size and then let the user export that.

  • Hi, where you load the image you have to select keep current size, instead of resizing

  • Hi UltraLion thanks for your response, Yes I already did that, and it keeps the current size but the issue lies in the moment when I took the screenshot, If you resize the viewport (just making it bigger or smaller), depending on the size of the viewport that resultant screenshot is varied. This is a bit difficult to convey, please check the attached c3p.

    But I believe this is the expected behavior of Snapshot Canvas action, I'm looking for a way to fit it to my requirement that is no matter what the viewport size is, I want to export a fixed-size screenshot of a particular area.

    Another way I think it is possible is that Before exporting the screenshot, resize it to the desired resolution, but I don't know how to resize it to a certain size and then let the user export that.

  • You can load the screenshot into an empty sprite, resize the sprite to your desired size and screenshot it again. Or paste the sprite onto a drawing canvas and save the image from the canvas.

  • I think I get the idea, but I'm not sure how to make it happen. Can you please show me how this works in the events?

  • Try searching the forum, there may be similar examples.

    You might also need to use PlatformInfo expressions for resolution calculations.

    construct.net/en/make-games/manuals/construct-3/plugin-reference/platform-info

  • I tried it with Drawing Canvas, but no matter what I tried, DC not working at all.

    Means, not fetching any object or color at all. I never used DC, I read the manual, but still couldn't figure out why it's not working.

    I took the screenshot into a sprite, Now how to transfer that sprite data to Drawing Canvas, and resize the DC to the desired size, then export, Please help me with the action/event.

    Not sure what I am doing wrong, I tried it startup the layout, disable the Antialiasing property option, etc.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Most of these actions are asynchronous - if you see a little clock icon to the right of the action, it means that the result will be delayed and you need to use an appropriate trigger (like "On Canvas Snapshot") or "Wait for previous action to complete". I suggest you study a few tutorials.

    So the correct sequence is something like this: 

    System make snapshot
Wait for previous action to complete
Sprite load image from CanvasSnapshot
Wait for previous action to complete
Sprite set position to DrawingCanvas
Sprite set size to ...
DrawingCanvas Paste Sprite
Wait for previous action to complete
DrawingCanvas Save Image
Wait for previous action to complete
Browser download DrawingCanvas.SavedImageURL

    None of these actions should be run on every tick!

  • Here is what I tried but still not working.

    Here is the test c3p.

    For e.g. I resized the sprite, let's say 3000x3000, and now it is present on the layout, just need to download the sprite with the same resolution.

  • All the steps work, the file is saved. You just need to find the right formulas to calculate the resolution.

    I can tell you that LayerToCanvasX and LayerToCanvasY conversions are not needed. When taking a snapshot simply specify X=Sprite.BBoxLeft, Y=Sprite.BBoxTop, Width=Sprite.width and Height=sprite.height

    But then you need to resize the sprite and canvas to the right resolution before pasting.

    Check out this post, maybe it will be useful:

    construct.net/en/forum/construct-3/general-discussion-7/canvas-snapshot-layertocanvas-168819

  • Okay, I understand what you are pointing out,

    Just to confirm this is where you want me to put this right?

    I can tell you that LayerToCanvasX and LayerToCanvasY conversions are not needed. When taking a snapshot simply specify X=Sprite.BBoxLeft, Y=Sprite.BBoxTop, Width=Sprite.width and Height=sprite. Height

    You just need to find the right formulas to calculate the resolution

    No matter what I tried the below action does not honor the DrawingCanvas size, it just exports it proportional to the viewport size. 

    -> Browser: Invoke download of DrawingCanvas.SavedImageURL with filename "ss"

    This is the exact reason that happened to me with the CanvasSnapshot so that is why I posted this question. I request you to please check the attached c3p.

    Check out this post, maybe it will be useful:

    construct.net/en/forum/construct-3/general-discussion-7/canvas-snapshot-layertocanvas-168819

    This is the exact link I placed on my original question and inside the attached c3p too, based on that logic I created the c3p 😅

  • Just to confirm this is where you want me to put this right?

    Sorry, I was wrong, the snapshot size needs to be in device pixels. And your formulas there were working.

    DrawingCanvas is required to change the resolution. You can use "set resolution" action, and the image will be exported with that resolution. The canvas and the sprite need to have the same origin point position.

    dropbox.com/scl/fi/iolct3pft9f9il8wvnwoh/ScreenShot-question2.c3p

  • Thank you so much 😊

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