Draw system documentation

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.

Thx

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.

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.

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?

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.

<img src="http://dl.dropbox.com/u/27157668/construct2/images/comboBox_drawing.jpg" border="0">

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

A GUI system ? If you make it you'll be famous here :D

Maybe this might help ..

http://www.williammalone.com/articles/html5-canvas-example/

This might help to -- http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

PS the links might not work if you click them, if not then copy and paste the link into your browser

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?)

Well no a gui system exactly i meant more controls, more good-looking etc... But there's a distance between runtime and edittime so nice looking controls with css3 would be possible on runtime but not on edittime right now. The idea just poped by seeing your post :)

HTML elements pack.

kiyoshi: you might wanna look this plugin, and also, septeven already released a beta version of his combobox. All in the plugins section.

Ah , i forgot about the elements pack. Great work indeed. Thanks for pointing out :)

Ashley well, do you think it's possible ?