0 Favourites

[SOLVED] How do I canvas snapshot at a lower resolution

  • Hey all,

    So here's the question: I'm trying to create a "level editor" that exports 256x240 pixel png's, but I don't want to work designing the screens at that size, when I try manually changing the "window size" it messes with the mouse tracking I'm using for placing tiles, so is there a way to switch between fullscreen scaling modes (none, letterbox, etc.) during runtime? or is there a different solution I'm not thinking of?

    Thanks

    Brent

  • I doubt that exists based on what I have seen so far.

    Have you thought about using an Array of some sort to store tile locations/ids?

  • The goal of the entire project is to output single screen png's, and aside from my inability to properly change resolution when the snapshot is taken, it works perfectly. Guess I'll just have to 2x or 4x my target resolution for the actual tile placement work, and then downscale the png's manually later to fit the sizes I want... pretty disappointed if I'm being honest

  • Use this expression to get a smaller screenshot. Change w and h for different sizes.

    Browser.ExecJS("
    var w = 100;
    var h = 100;
    var c2canvas=document.getElementById('c2canvas');
    var mycanvas = document.createElement('canvas');
    mycanvas.width  = w;
    mycanvas.height = h;
    var ctx = mycanvas.getContext('2d');
    ctx.drawImage(c2canvas, 0,0,w,h);
    mycanvas.toDataURL();")[/code:6otna5an]
  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • Thanks, R0j0

    I'll give this a try, so if I understand, this expression is doing a momentary resize of the canvas for the sake of the snapshot, regardless of how C2 is fullscreen scaling?

  • It's drawing C2's canvas to a separate, smaller canvas which is used to save from.

  • Awesome!

  • Just as an update, R0j0's suggestion completely solved the issue I was having, this thread is definitely solved.

  • R0J0hound or anyone else. Is is technique cross-platform? I imagine since JavaScript and a canvas are lowest common denominator features I'd think it should supported all platforms.

    Also do I need to set the second canvas to null or dispose of it? Or does that not make a performance difference.

    Thanks!

  • basspenguin

    It should work on any html5 platform I imagine.

    The second will be garbage collected after that javascript is run, since nothing is referencing it at that point.

  • Good deal, makes total sense. Thanks for your help R0J0hound.

    I am running into one problem though. I implemented the code into my game take a canvas snapshot upon a button press. Working backwards I could only get it to work on tickcount==1. The same was true in your example

    If I changed your example to tickcount==2, it stopped working:

    Any guesses? Thanks!

  • basspenguin

    It could be webgl related perhaps? Not sure, I don't use webgl currently.

    It possibility could be that the timing of when c2's canvas is copied is when the canvas is between redraws when it's cleared? That's my only guess and it could be entirely wrong, also when I've looked into a solution in the past I've not had much success.

    A third possibility is no value is ready when invoking a download at that moment. Just a thought and since the built-in snapshot action has a "on canvas snapshot" condition, it may be a possibility. An idea could be to assign the last line of the script to a global var, and in events and then every tick check if the global is set before saving it.

    But taking a step back it may help to just use the snapshot action, since that is known to work.

    Here's how:

    https://dl.dropboxusercontent.com/u/542 ... pshot.capx

    use low quality fullscreen scaling

    set the canvas size

    zoom out the layout so the same stuff is seen.

    wait 0 so c2 has a chance to adjust the layout

    scroll to the center

    take snapshot.

    Then after the snapshot set everything back to what it was.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
0 Favourites
[PLUGIN] Canvas
627 186,628
zenox98's avatar
zenox98
Unread hot topic
0 Favourites
[Plugin] Three.js 3D canvas
134 12,718
Schoening's avatar
Schoening
Unread hot topic
99 10,128
karshinkoff's avatar
karshinkoff