ctx.drawimage in construct2 how to ?

For developers using the Construct 2 Javascript SDK

Post » Sun Sep 21, 2014 7:40 pm

I'm trying to make a plugin where i need to draw a image on the canvas runtime. Examples of javascript on the internet shows ctx.drawimage etc. But that does not work with Construct2. I did a quick look in the official sprite plugin. And used the method in "Load image from url". It works but offcourse it's buggy. How can i simple draw something on the canvas is there a documentation or example of this ?
B
31
S
10
G
3
Posts: 310
Reputation: 6,056

Post » Sun Sep 21, 2014 7:46 pm

B
92
S
32
G
109
Posts: 5,290
Reputation: 70,991

Post » Sun Sep 21, 2014 7:55 pm



Great plugins, looking now in your source to learn what you did :)
B
31
S
10
G
3
Posts: 310
Reputation: 6,056

Post » Sun Sep 21, 2014 9:45 pm

"Load image from URL" should work fine. The most common problem is cross-domain security restrictions - the server you load from has to explicitly allow you to load the image remotely.

By default Construct 2 uses WebGL rendering, so will call your plugin's drawGL function instead of draw (which is for canvas2d). You need to write both and have them render the identical thing.
Scirra Founder
B
397
S
236
G
88
Posts: 24,408
Reputation: 194,496

Post » Sun Sep 21, 2014 10:03 pm

Ashley wrote:"Load image from URL" should work fine. The most common problem is cross-domain security restrictions - the server you load from has to explicitly allow you to load the image remotely.

By default Construct 2 uses WebGL rendering, so will call your plugin's drawGL function instead of draw (which is for canvas2d). You need to write both and have them render the identical thing.


Offcourse "Load Image from URL" works great, the bug was somewhere else. Just did a clean code with the example of R0J0hound and got the same problem :

What i'm doing :

Code: Select all
acts.OpenCam = function ()
{
var img = CocoonJS["Camera"]["startCapturing"](0, this.width, this.height, 30);
var ctx=this.ctx;
ctx.drawImage(img,0,0,this.width,this.height);
this.runtime.redraw = true;
this.update_tex = true;
}


Funny enough this works only if i don't add an object to the game (Sprite, text etc).
If it's only the Canvas plugin in the project and i fire the OpenCam function on start of layout it works great.
I'm exporting in CocoonJS mode, the plugin is for cocoonjs camera.

I'm trying to get the camera from IOS for AR effect to use as background, and CocoonJS Camera function is working with IOS.
Also tried this to get the camera for IOS but that failed: how-do-i-get-picture-from-filechooser-to-sprite_t115951
B
31
S
10
G
3
Posts: 310
Reputation: 6,056

Post » Mon Sep 22, 2014 7:30 am

You can't draw anywhere other than in your plugin's draw() or drawGL() callback. If you draw in an action it will ignore the object's scrolling and Z order, and overdraw it with the rest of the game.
Scirra Founder
B
397
S
236
G
88
Posts: 24,408
Reputation: 194,496

Post » Tue Sep 23, 2014 9:02 pm

@Ashley
How should i draw it to keep the camera on ? Because the way i'm doing it, the camera stops when another object spawns. I made a quick demo of the problem.

Can you please check what I'm doing wrong in this plugin ( includes the plugin & capx project in the .zip ) :
https://yadi.sk/d/DenXnfBEbdGUZ

For a demo of the plugin open this url in cocoonjs canvas+ launcher:
http://www.weebe.nl/camera
B
31
S
10
G
3
Posts: 310
Reputation: 6,056

Post » Tue Sep 23, 2014 9:21 pm

I'm not sure what you mean by "keep the camera on", but if you mean keeping it always on-screen, don't code your plugin to do that. The user will put it on a 0-parallax layer if they want that.
Scirra Founder
B
397
S
236
G
88
Posts: 24,408
Reputation: 194,496

Post » Tue Sep 23, 2014 9:59 pm

@Ashley
The problem is, the camera shuts off and shows its sprite color when another object gets spawned. So it only works if it's the only object in the layout. I don't want to keep the camera always on, but i want him to not stop without users command. It's a weird bug. The demo should first show the back camera of the mobile device in cocoonjs, after 5 seconds i spawn a blue sprite and the camera stops. :S
B
31
S
10
G
3
Posts: 310
Reputation: 6,056

Post » Wed Sep 24, 2014 2:36 am

@stctr

One easy way is making a behavior of rojo's canvas plugin, to display something on the canvas, so that you don't need to maintain the code of canvas-to-engine side.
B
108
S
26
G
271
Posts: 4,471
Reputation: 151,777

Next

Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 0 guests