Using JavaScript Libraries in C2 without the SDK

0 favourites
  • 3 posts
From the Asset Store
With this template you will learn how to use the GooglePlay Games native plugin
  • 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".

    "var js = document.createElement('script');
    js.type = 'text/javascript'; 
    js.src = 'p2.min.js';
    window.libraryLoaded = false;
    js.onreadystatechange = js.onload = function()
    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.
    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: [b]Draw the path an object will follow, including it's bounces off obstacles.[/b]  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:
    And here's the example capx:
    [url=] ... .capx?dl=1[/url]
    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:  " = value;" instead of "var foo=value;".  The reason is "" 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.
    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.
    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.
  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Oh R0J0hound, I bow before your mastery of c2 and Javascript! This will keep my busy for weeks .

  • 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.

    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.

    It requires webgl to be off, then you create a sprite and directly after run this js:

    this.runtime.createRow[0].curFrame.texture_img = canvas;"[/code:1td1srg5]
    After that the js variable "canvas" can be used with html5 canvas drawing you like.
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)