Draw system documentation

Discussion and feedback on Construct 2

Post » Wed Dec 14, 2011 1:17 am

@Ashley

Hey, because I ve got a plenty of interrogations about how the drawing system works (eg add texture from file to a drawn quad, separate colors in a quad, offset system...) I was wondering where can I find a solid documentation about this. I really dont know where to find as well as which keywords to search....
I already need it for my actual plugins and more yet for the upcommings.
Thxsepteven2011-12-14 01:18:51
B
44
S
12
G
13
Posts: 628
Reputation: 10,471

Post » Wed Dec 14, 2011 4:03 pm

There are two modes for plugins to draw in: Canvas 2D and WebGL.

Canvas 2D is just the ordinary HTML5 canvas with a 2D context.

WebGL is too difficult to use at a low level so it's wrapped with a C2-specific class called 'GLWrap' - you can see its methods in glwrap.js in the install directory.

TBH your best bet is to find a similar plugin (e.g. Tiled Background or Sprite) and see how they implement their drawing, and base your plugin off that.
Scirra Founder
B
359
S
214
G
72
Posts: 22,949
Reputation: 178,554

Post » Wed Dec 14, 2011 4:57 pm

Just to be sure, I'm talking about the drawing method directly in edittime, I mean e.g the way of drawing the rectangle with 'ok' inside, of the button plugin in C2.

Anyway, I already did that (look inside plugins code), but I didn't be able to correctly understand yet how this part is structured.

For the moment, I understand how to draw one single rectangle, how to set the fill color, how to add text inside.

Thx @Ashley for answering.septeven2011-12-14 16:57:56
B
44
S
12
G
13
Posts: 628
Reputation: 10,471

Post » Wed Dec 14, 2011 5:53 pm

Oh right I thought you meant the runtime. The edittime is different, it uses the editor's OpenGL renderer through some custom methods that are exposed. It doesn't have many features - only those that are used by all existing plugins. Is there anything you need help with specifically?
Scirra Founder
B
359
S
214
G
72
Posts: 22,949
Reputation: 178,554

Post » Wed Dec 14, 2011 7:06 pm

Yes I do, please.
Firstly, I would need to know how to do this.
For this question, I would love to know how to draw either a second rectangle in the same instance, or set two fill color according to x,y.
I don't know if it's possible.
See the jpeg I did, it would be easier to understand what I mean.


Two other things, but at least one answer will be needed if you want. (both questions I was asking to myself for the same problem)
I wonder how to draw a circle, instead a quad.
/or/
how to insert an image file, as a texture I guess, in a drawn quad.
(it could be an image with same dimension than the quad, or e.g an image of 15x15 for a quad of 75x20, it would need to position it after).

Thanks a lot @Ashley
B
44
S
12
G
13
Posts: 628
Reputation: 10,471

Post » Wed Dec 14, 2011 7:11 pm

A GUI system ? If you make it you'll be famous here :D
B
58
S
13
G
10
Posts: 632
Reputation: 12,505

Post » Wed Dec 14, 2011 7:40 pm

Maybe this might help ..

http://www.williammalone.com/articles/html5-canvas-example/smitchell2011-12-14 19:40:58
B
29
S
12
G
7
Posts: 740
Reputation: 7,839

Post » Wed Dec 14, 2011 7:43 pm

B
29
S
12
G
7
Posts: 740
Reputation: 7,839

Post » Wed Dec 14, 2011 7:44 pm

PS the links might not work if you click them, if not then copy and paste the link into your browser
B
29
S
12
G
7
Posts: 740
Reputation: 7,839

Post » Wed Dec 14, 2011 8:40 pm

@smitchell they're very good links but apparently not usefull for drawing in edittime.
@Kiyoshi what do you mean exactly by a GUI system (examples?)
B
44
S
12
G
13
Posts: 628
Reputation: 10,471

Next

Return to Construct 2 General

Who is online

Users browsing this forum: zackKim and 13 guests