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

Get help using Construct 2

Post » Sat Dec 13, 2014 7:15 am

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
Last edited by brent_hamel on Sat Dec 20, 2014 6:19 pm, edited 1 time in total.
B
70
S
10
G
9
Posts: 300
Reputation: 8,962

Post » Tue Dec 16, 2014 12:38 am

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?
https://www.ravenheart.ca/home
Company name changed to avoid Facebook-type shenanigans

"Someone once told me I bite off more than I can chew...

I told them I would rather choke on greatness than nibble on mediocrity."
B
22
S
6
G
1
Posts: 1,414
Reputation: 4,822

Post » Tue Dec 16, 2014 3:45 am

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 :(
B
70
S
10
G
9
Posts: 300
Reputation: 8,962

Post » Tue Dec 16, 2014 6:39 am

Use this expression to get a smaller screenshot. Change w and h for different sizes.
Code: Select all
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();")
You do not have the required permissions to view the files attached to this post.
B
91
S
31
G
102
Posts: 5,232
Reputation: 67,250

Post » Tue Dec 16, 2014 7:06 am

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?
B
70
S
10
G
9
Posts: 300
Reputation: 8,962

Post » Tue Dec 16, 2014 7:39 am

It's drawing C2's canvas to a separate, smaller canvas which is used to save from.
B
91
S
31
G
102
Posts: 5,232
Reputation: 67,250

Post » Tue Dec 16, 2014 7:56 am

Awesome!
B
70
S
10
G
9
Posts: 300
Reputation: 8,962

Post » Sat Dec 20, 2014 6:18 pm

Just as an update, R0j0's suggestion completely solved the issue I was having, this thread is definitely solved.
B
70
S
10
G
9
Posts: 300
Reputation: 8,962

Post » Sun Jul 26, 2015 3:34 pm

@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!
B
45
S
11
G
7
Posts: 144
Reputation: 6,419

Post » Sun Jul 26, 2015 7:38 pm

@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.
B
91
S
31
G
102
Posts: 5,232
Reputation: 67,250

Next

Return to How do I....?

Who is online

Users browsing this forum: Magistross, tarek2 and 2 guests