Drawing with the SDK in Construct 2

1

Tagged

Stats

3,847 visits, 5,857 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 7 Feb, 2012. Last updated 19 Feb, 2019

I figured out understanding it thanks to the new Particle plugin.

I put it here an example (from my comboBox plugin) for devs who needs help about drawing instance in edittime.js.

Draw the initial shape

In the OnCreate function, you set the hotspot of your instance which is the origin point of your shape:

    IDEInstance.prototype.OnCreate = function()
    {
     this.instance.SetHotspot(new cr.vector2(0, 0));
    }

Then in the OnInserted, you set the size of your instance:

    IDEInstance.prototype.OnInserted = function()
    {
     this.instance.SetSize(new cr.vector2(200, 25));
    }

That means your instance's width is 200 pixels (x) and height of 25 pixels.

So this shape is a rectangle with those coordinates:

- top-left corner (0,0) -- the SetHotspot point.

- top-right corner (200,0)

- bottom-left corner (0,25)

- bottom-right corner (200,25) -- the SetSize point.

Now, go to the Draw function (IDEInstance.prototype.Draw).

    renderer.SetTexture(null);
    var q = this.instance.GetBoundingQuad();
    renderer.Fill(q, cr.RGB(240, 240, 240));
    renderer.Outline(q,cr.RGB(0, 0, 0));

- Firstly, I set null as a renderer.SetTexture's parameter because we don't need any texture. We just need to fill the shape with a solid color.

- Then, I save the global shape (GetBoundingQuad()) of my instance in a variable named 'q' (for 'quad').

- And I finally set the fill and borders color.

For both renderer.Fill and renderer.Outline, (q,cr.RGB(0, 0, 0)) defined which is the actual shape and what color has to be set.

(e.g. Here, the borders color of the 'q' shape will be black)

So now, we have a grey rectangle with black borders.

Draw into the first rectangle

To draw another shape direclty into the initial rectangle (which is saved in the 'q' variable), I'm going to create a new quad.

     var q2 = new cr.quad();
         q2.tlx  = q.trx - 25;
         q2.tly  = q.try_;
         q2.trx  = q.trx;
         q2.try_ = q.try_;
         q2.blx  = q.brx - 25;
         q2.bly  = q.bry;
         q2.brx  = q.brx;
         q2.bry  = q.bry;

- The first line creates a new quad, saved into a *'q2' variable (for 'quad2'*).

- The other ones will set the coordinates of each new quad's corner.

(e.g. q2.tlx sets the x coordinate of the quad2's top left corner).

To draw this new quad into the first one, we have to set the 'q2' coordinates in relation to the 'q' coordinates. If we don't, the new quad will be drawn in relation to the layout coordinates.

(e.g. The 'Guidelines' option of my iScroll plugin uses it.)

The following image tries to clarify it.

Now, we have our two rectangles correctly set in our edittime.js.

We have finally to set the fill and borders color, as we did previously for the first shape.

    renderer.Fill(q2, cr.RGB(210, 210, 210));
    renderer.Outline(q2,cr.RGB(0, 0, 0));

As we have to set the color for the second quad, don't forget to replace 'q' by 'q2'.

Done!

That was my first tutorial, hopefully it helps someone.

Don't hesitate to send me your questions and corrections.

Thanks for reading.

  • 0 Comments

Want to leave a comment? Login or Register an account!