updated Plugin tutorial (Release: 221)

For developers using the Construct 2 Javascript SDK

Post » Sun Mar 20, 2016 11:06 am

Hello,

does anybody have an updated tutorial for creating a simple plugin?

The "https://www.scirra.com/tutorials/352/plugins-roll-your-own-with-the-javascript-sdk" Tutorial doesn´t work with the current version, because of the .draw function call in the "instanceProto.drawGL = function (glw)"!

As i heard, we should only use the drawGL function, but is there an example? My test was:
Code: Select all
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);

in the .draw function -> how do i adapt this to the drawGL?

Thanks in advance
B
7
Posts: 5
Reputation: 291

Post » Mon Mar 21, 2016 5:00 am

@ConstructorRichi

See the official text plugin, it could draw at canvas2d or webgl both.
B
108
S
26
G
260
Posts: 4,435
Reputation: 146,193

Post » Tue Mar 29, 2016 3:38 pm

Hey ConstructorRichi, :)

I made my own modified version of the SDK template files, with some extra information comments, and a more graphical style of divider comments to break up and mark the different sections of code.

I'm planning on making a tutorial to go along with my modified version of the SDK at some point, but I can upload a copy for you to take a look at now in case it might help. :)

https://dl.dropboxusercontent.com/u/382 ... mplate.zip


You may alraedy know this, but the one really important step in creating a plugin is to make sure the "id" value you choose for the edittime.js file, matches two spots in the runtime.js file.
In my SDK mod the places that must match are marked in both files with the following placeholder text:

XXXXXXXXXXXXXXXX_MyPluginID_XXXXXXXXXXXXXXXX

(Note the "ID" in the placeholder text.)


edittime.js
(Note the first placeholder is for the NAME, not the ID. Only the ID has to match between files.)
Code: Select all
//╔════════════════════════════════════════════════════════════════════════════╗
//║///////////////////////////////   Settings   ///////////////////////////////║
//╚════════════════════════════════════════════════════════════════════════════╝
function GetPluginSettings()
{
   return {
      "name":         "XXXXXXXXXXXXXXXX_MyPluginName_XXXXXXXXXXXXXXXX",
      "id":         "XXXXXXXXXXXXXXXX_MyPluginID_XXXXXXXXXXXXXXXX",


runtime.js
(You may need to scroll down a little to see both placeholder spots.)
Code: Select all
//╔════════════════════════════════════════════════════════════════════════════╗
//║/////////////////////////////   Plugin class   /////////////////////////////║
//╚════════════════════════════════════════════════════════════════════════════╝

//----------------------------------------------------------------
// *** CHANGE THE PLUGIN ID HERE *** - must match the "id" property in edittime.js
//          vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
cr.plugins_.XXXXXXXXXXXXXXXX_MyPluginID_XXXXXXXXXXXXXXXX = function(runtime)
{
   this.runtime = runtime;
};

//----------------------------------------------------------------
(function ()
{
   /////////////////////////////////////
   // *** CHANGE THE PLUGIN ID HERE *** - must match the "id" property in edittime.js
   //                            vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
   var pluginProto = cr.plugins_.XXXXXXXXXXXXXXXX_MyPluginID_XXXXXXXXXXXXXXXX.prototype;




C2 plugin video tutorial - by John Velojet
I found this nice walk-through for setting up a super simple plugin from start to finish.
https://www.youtube.com/watch?v=ZlgJ4ts00C4
(This is actually the first tutorial I use to make a working plugin, back when I started looking into making plugins.)
B
26
S
17
G
8
Posts: 323
Reputation: 6,021


Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 0 guests