How do I CAPTURE IMAGE from layout's full size?

  • Hi All,

    On my current code, the only way I can export PNG is by using the browser's Snapshot feature.

    The problem is that it's acting like: "What you see on screen, is what you get".

    and also: "The current size of the window resolution is what you get".

    My project's full layout size is: 3840 x 2160

    the layout starts with viewport size of: 1920 x 1080 the user can zoom in/out, exporting takes a snapshot of what's seen on the screen based on the current window size.

    if I'm NOT on full screen mode it will capture a smaller resolution based on the size of the window.

    The PROBLEM is:

    If I want to capture and export (not sure if I should call it snapshot) .PNG of the FULL SIZE of my layout and NOT based on what you see is what you get, even if the window is tiny or full screen to CAPTURE the full size of the layout is what I'm trying to do.

    What I want to achieve is:

    to CAPTURE the full layout size 3840 x 2160 resolution no matter what the current size of the window, the camera position or zoom is. just to CAPTURE a full layout resolution to .PNG file!

    Can somebody PLEASE explain how to do this?

    Any screenshots of such code or step-by-step will be very helpful for me to follow as I'm still a noob and I'm guessing that it's not that simple to achieve.

    Thanks ahead!

    Tagged:

  • Alon;

    I want to do the same thing--and I would like to point out that some layers in my layout change their opacity or are invisible. So when the capture is done I need to set these layers for the capture.

    Yours

    Winkr7

  • Simple answer - make one snapshot, paste it on a Drawing Canvas, scroll to the next portion of the layout, make another snapshot, paste, scroll, snapshot, paste, scroll.. until you've covered the entire layout.

    Here is a demo (you will need C2 with Paster addon):

    construct.net/en/forum/construct-2/how-do-i-18/export-2048x-images-paster-132184

  • Thanks for sharing dop2000 :)

    So there is no similar way to do this on C3 ?

    I do have C2 but it means I'll need to build all my project from scratch..

  • Alon Yes, you just need to use Drawing Canvas (C3) instead of Paster (C2)

  • Alon Yes, you just need to use Drawing Canvas (C3) instead of Paster (C2)

    Thanks for the reply NOAH. since I'm a noob, I don't even know how to access the Drawing Canvas, is it a built-in or object, and more important how do I actually program such thing, sorry for the confusion.

    Any example files, screenshots or anything visual that can help will be very appreciated.

    Thanks ahead! :)

  • Alon I think you will learn much better if you take some time to mess around with C3 on your own. The forums can be a great help when you get stuck but if you use them as a crutch you will never gain self-sufficiency and will always end up stuck at every little new problem. For example, with your question as to whether Drawing Canvas is built-in or an object, it would take you less than a few minutes to search in all the places it could be located in C3, and then you would find it

    Just some advice :)

  • Thanks for your advice NOAH. I'm learning as I go, it's a really good practice no doubt.

    To be honest, since yesterday I'm still trying to "upgrade" my current canvas snapshot into... my goal which is: capturing the full layout resolution instead of the current window size unfortunately without luck it's much more complicated to my level.

    If I'll have no choice, I'll probably have to limit my users to capture WYSIWYG (What You See Is What You Get) which is the current working feature on my project.

    Maybe if there is a C3 Plugin/Addon or work-around that can help me capture full resolution of the layout in more simple steps or ease of use (compare to the built-in options that are not for my level of understanding) I'll be happy for anyone can recommend me so I'll have a look and give it a try, instead of give up on another useful feature for my software.

    Thanks ahead for any help! :)

  • After few more attempt with the Drawing Canvas Object:

    So I'm trying to replace the built-in system Snapshot with the Canvas Object save image so I can finally capture the FULL LAYOUT RESOLUTION instead of just the current window display.

    I tried to follow the hints on the manual to use "SavedImageURL" but it seems like I cannot use it in the URI to invoke download of the saved PNG the same way it was working on the snapshot version.

    On the screenshot I show the line that I try to replace with "SavedImageURL" but.. I'm stuck since it's probably not how it works, I don't understand how do I invoke my saved image from the canvas.

    The code I'm trying to "upgrade" from system snapshot to Drawing Canvas Save Image:

    This is where I stuck:

    Help please?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • If you need to load screen snapshot to DrawingCanvas, and then save DrawingCanvas image to disk, I think you need something like this:

    Note, that you need another empty sprite (ExportSprite) to load CanvasSnapshot, which you then paste onto the DrawingCanvas. ExportSprite and CanvasSnapshot should be the same size (big enough to fit the screenshot) and placed at the same position.

    .

    Also note, that DrawingCanvas actions "Save snapshot", "Load snapshot" etc. have nothing to do with the System "Take snapshot" action. They just happen to use the same word "snapshot".

    .

    If you need to save the entire layout, which is larger than the screen size, you will need to repeat steps in event #2 multiple times. Each time scrolling to a new position, taking new snapshot, loading into ExportSprite and pasting onto the DrawingCanvas. Refer to that demo from R0J0hound I posted earlier.

  • Thanks for the quick detailed reply dop2000 I appreciate it! :)

    At the moment I want to focus on export the full layout resolution to PNG so, without making this complicated way like in the example on the C2 file, there is no way to do it with the built-in C3 using "One Click" to capture? like the display snapshot? (but for the full layout resolution)

    I'm asking because I don't know how to translate the Paster example from C2 I did try and gave up on it yesterday after so many guesses of how to translate it to C3 with the drawing canvas object.

  • Now with my example on how to transfer screen snapshots through a sprite into Drawing Canvas, you can try again :)

    .

    Actually, you can probably make an image of the entire layout much easier. Simply set DrawingCanvas size to layout size and paste all objects on it (Created_Objects family or whatever). Then save and download. You don't need to make screen snapshots.

    You probably would want to paste objects one by one ordered by their zIndex.

  • Now with my example on how to transfer screen snapshots through a sprite into Drawing Canvas, you can try again :)

    .

    Actually, you can probably make an image of the entire layout much easier. Simply set DrawingCanvas size to layout size and paste all objects on it (Created_Objects family or whatever). Then save and download. You don't need to make screen snapshots.

    I will give it a try thanks!

    Actually that's what I did exactly, I made the Drawing Canvas Object to cover the full layout which is the exact resolution of 3840 x 2160 hopefully to grab it in one click!

    I don't know how to paste the "Created_Objects" Family to the canvas but I want it to capture specific layers like I did before with the system snapshot way (before I used the Drawing Canvas Object).

    I hope I'll be able to make it work.

  • Obviously my code is wrong, but it's a progress, you showed me that "DrawingCanvas.SavedImageURL" which I wondered what to put on the URI section so that's great!

    I get a black colored .PNG file after I click the EXPORT button and get some weird resolution, not the full resolution of the layout which is 3840 x 2160 but this weird resolution: 3360 x 1890 ...

    I don't know about the weird resolution, but I think that the way I put the Drawing Canvas (resized covering the full layout 3840 x 2160) is on a dedicated layer UNDER the instance layer with the objects I want to include is also a part of the issue beside my code.

    I also need the .PNG to be transparent and capture the instances layer above. (that's how the simple snapshot worked and I was happy with).

    Maybe it should be ABOVE every other layer I want to include? I don't know how to tell the Drawing Canvas what layers to include or exclude... it's a guess for me.

  • I don't see any "DrawingCanvas paste object" actions in your code. If you are not pasting anything, the saved image will be blank.

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