Using JavaScript Libraries in C2 without the SDK

Get help using Construct 2

Post » Mon Oct 12, 2015 7:29 pm

Sometimes it's nice to be able to just try out using some JavaScript library in your project without going through the steps to create a plugin and behavior. I could be you just want to experiment, or you're just not familiar enough with the library to design a add-on in a good way. Here's a way you can do that.

The basic process is:

1. add the JavaScript library to the "files" folder of your project. Or just get a url to the library.

2. Load the library. It's similar to using ajax in that the file can take time to load, and it must be loaded before you can use it.
Using the browser object, run this javascript at the start of layout to load a library. In this case "p2.min.js".
Code: Select all
"var js = document.createElement('script');
js.type = 'text/javascript';
js.src = 'p2.min.js';
document.body.appendChild(js);
window.libraryLoaded = false;
js.onreadystatechange = js.onload = function()
{
libraryLoaded=true;
};"

When it's loaded it will set the javascript variable "libraryLoaded" to true.

3. Once the library is loaded you can pretty much use it like the documentation of the library. Keep in mind that without the sdk we're limited what we can access, so we can only communicate numbers and strings back and forth.

On a side note it is possible to access more but it is considered very hacky and will break if you export minified. Still it could be useful in some cases to try out an idea for a plugin.


Example
Here's an example to implement a physics library so that we can do something that's not possible to do with the physics behavior or even my chipmunk behavior: Draw the path an object will follow, including it's bounces off obstacles. Basically it requires doing multiple simulation steps at a time, which would require significant changes to the existing behaviors to do.

So first we pick a library. I picked this one which has pretty good documentation:
https://github.com/schteppe/p2.js

And here's the example capx:
https://dl.dropboxusercontent.com/u/542 ... ysics.capx
It's pretty basic and only does what we need and doesn't do much else.

One quick note in the capx you'll see js like this: "window.foo = value;" instead of "var foo=value;". The reason is "window.foo" makes a global variable and "var" can't be accessed in another execJs action. Both can be accessed with "foo" elsewhere.

I won't cover what I did exactly, you can look at the capx for that, but I basically just followed the examples for p2.js.
Part of it is we need to pass object locations to js. To do that just use "&" to make the text with values:
"window.c2pos = ["& ball.X &","& ball.Y &"]"
Instead of typing the values directly:
"window.c2pos = [100,50]"

And that's basically it to pass values to js. The other way, js to C2, can be done with the Browser.execJS() expression.

Debugging
By using JavaScript you no longer have the luxury of C2 verifying what you typed was correct. You'll likely make typos when you're writing it so you'll want to have the browser's javascript console open to see errors. The shortcut for chrome is shirt+ctrl+c.

Limitations
As stated before without the sdk you're limited what you can access. For something like physics one big one is you can't access an object's collision polygon. For stuff that should draw stuff in your game you have to use the sdk, because the runtime chooses when to draw.
B
92
S
32
G
106
Posts: 5,273
Reputation: 69,457

Post » Mon Oct 12, 2015 9:43 pm

Oh @R0J0hound, I bow before your mastery of c2 and Javascript! This will keep my busy for weeks :).
A big fan of JavaScript.
B
74
S
20
G
69
Posts: 2,207
Reputation: 43,836

Post » Mon Oct 12, 2015 10:31 pm

Glad you found it interesting.

Here are some older examples that use various mod playing libraries. The loading could be simplified, but it deals with multiple js libraries that need to be loaded in order.
request-flodjs-span-class-posthilit-mod-span-xm-music-player_p855435?#p855435

Also on the topic of hacks, here is a benchmark I did with a hack to replace a sprite's texture with a html5 canvas.
viewtopic.php?f=159&t=145402&p=946181&hilit=array#p946181
It requires webgl to be off, then you create a sprite and directly after run this js:
Code: Select all
"window.canvas=document.createElement('canvas');
this.runtime.createRow[0].curFrame.texture_img = canvas;"

After that the js variable "canvas" can be used with html5 canvas drawing you like.
B
92
S
32
G
106
Posts: 5,273
Reputation: 69,457


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 11 guests