Snapshot Canvas

Get help using Construct 2

Post » Mon Sep 03, 2012 6:46 pm

I've looked for a simple explanation to implement this feature but can't find a demo of how this would work.

When initiated, where does the captured image go and how would I call it?

Here's what I'm looking to do:

Objective: Switch from Layout 1 to Layout 2 with a slide transition.

- on click capture image snapshot of Layout 1
- take Layer 1 snapshot and overlay on Layout 2
- switch to Layout 2
- slide Layout 1 image (sprite) to reveal Layer 2.

Ideas?
bon4ire2013-04-18 18:12:54
B
31
S
6
G
4
Posts: 160
Reputation: 5,998

Post » Mon Sep 03, 2012 6:56 pm

I made an example some time ago but using the Canvas plugin instead of the snapshot feature:

Swipe Layouts Example

I guess it's also possible to do it taking a snapshot and dynamically loading it into a sprite, but I haven't tried yet.Animmaniac2012-09-03 18:56:56
Scirra Employee
B
129
S
45
G
15
Posts: 705
Reputation: 15,413

Post » Mon Sep 03, 2012 8:13 pm

Interesting. This is pretty much exactly what I wanted to do

It would also be doubly interesting to see if the native snapshot canvas could work it.

Excellent example btw!
B
31
S
6
G
4
Posts: 160
Reputation: 5,998

Post » Mon Sep 03, 2012 9:38 pm

The 'snapshot canvas' action calls 'on canvas snapshot' a moment later, at which point the system expression (IIRC 'CanvasSnapshot') has the JSON data of the image which can then be loaded in to a sprite or whatever.
Scirra Founder
B
359
S
214
G
72
Posts: 22,949
Reputation: 178,544

Post » Tue Sep 04, 2012 5:11 pm

I adapted my example to use only the snapshot feature without the Canvas plugin, works the same:

Swipe Layouts 2 (no Canvas)
Scirra Employee
B
129
S
45
G
15
Posts: 705
Reputation: 15,413

Post » Wed Sep 05, 2012 2:23 am

This is great! Looking through the code, it looked like a drop in replacement (almost). :D

Exported this to CocoonJS and while it worked great in iOS, it didn't work on android. For some reason it's not responding to touch commands. Although on PC it works fine.


B
31
S
6
G
4
Posts: 160
Reputation: 5,998

Post » Wed Sep 05, 2012 1:48 pm

@bon4ire : if I remember well there's no "toDataURL()" (necessary for the "take snapshot" action to occur.
@Ashley : did you worked around that on Android ? I know there's a polyfill for Android : http://code.google.com/p/todataurl-png-js/
Did you already used it ?
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Sun Sep 09, 2012 9:56 pm

I've included a capx of what I'm currently having a problem with right now.

https://www.dropbox.com/s/vd4inmjr9lc1oen/TapSlideProblem.capx

Drag any of the flowers around with your mouse and click the green box. A snapshot is taken and it slides to the left.

While this works when fullscreen is off, it doesn't work properly when fullscreen is set to Scale. Why? If you move the flowers around and reclick, it doesn't update CanvasSnapshot.

Also, in the scale mode, the sprite size shrinks and overlays the previous snapshot. Not sure what's going on. Is there a way to clear CanvasSnapshot before retaking?

bon4ire2012-09-09 21:57:44
B
31
S
6
G
4
Posts: 160
Reputation: 5,998

Post » Sun Sep 09, 2012 10:34 pm

It doesn't work when scaling is enabled because although the sprite is the size of the window, because the display is scaled it is resized and no longer appears to be the size of the window.

This is a little tricky to solve - you need to resize the sprite larger by the amount the layer has been scaled. TBH, canvas snapshotting wasn't really designed with this in mind.
Scirra Founder
B
359
S
214
G
72
Posts: 22,949
Reputation: 178,544

Post » Sun Sep 09, 2012 10:40 pm

Actually, I found a way to fix it. You need to position and size the sprite in terms of the viewport, rather than the window size. You should get in the habit of always using the viewport expressions (ViewportLeft, ViewportTop, ViewportRight, ViewportBottom) rather than the window size expressions because the window size is kind of irrelevant when the display has been scaled.

https://dl.dropbox.com/u/15217362/FixedCanvasSnapshot.capx
Scirra Founder
B
359
S
214
G
72
Posts: 22,949
Reputation: 178,544

Next

Return to How do I....?

Who is online

Users browsing this forum: austinblackbelt and 14 guests