ability to use third party libraries with behaviours

[blurymind]

We now have this fantastic ability to create behaviours in the event sheet.
We also have the ability to write js code- straight in the event sheet.

But what use is writing js code for your game, when you cannot import any third party js libraries? This is literally the biggest weakness in our api atm imo. Compared to this:
https://www.construct.net/en/make-games/addons/1/javascript

Including third party libraries to extend a GD game is very difficult.

So the request here is simple- make it easy. As easy as typing import MyClass from "myscriptsFolder/MyClass" in the monaco editor. Or as easy as an event sheet action.

WIthout third party libraries, our extension ecosystem is not going to get any of the cool things happening in opensource html5 gamedev world.

That is kind of where construct3's js is still ahead of gd. Most of their extensions are based on some library that the dev simply exposed to construct:
https://www.construct.net/en/make-games/addons/plugins

[Bouh]

In gd4 I've copy paste socket.io inside js events , why I can't do same in GD5 ? If socket.io is global (window.socket) I should have the possibility to get in all JS events Le sam. 1 juin 2019 18:15, Todor Imreorov <notifications@github.com> a écrit :

…

We now have this fantastic ability to create behaviours in the event sheet. We also have the ability to write js code- straight in the event sheet. But what use is writing js code for your game, when you cannot import any third party js libraries? This is literally the biggest weakness in our api atm imo. Compared to this: https://www.construct.net/en/make-games/addons/1/javascript Including third party libraries to extend a GD game is very difficult. So the request here is simple- make it easy. As easy as typing import MyClass from "myscriptsFolder/MyClass" in the monaco editor. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1077?email_source=notifications&email_token=AAMX4DUJBRAZ63RSVTYGPN3PYKOCBA5CNFSM4HSA2GOKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GXDICMA>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAMX4DTHHLUWRVGSQJEBVWLPYKOCBANCNFSM4HSA2GOA> .

[4ian]

So while I agree that adding support for "raw" JavaScript file is interesting, there is something that I want to clear:

That is kind of where construct3's js is still ahead of gd. Most of their extensions are based on some library that the dev simply exposed to construct

All of these plugins require JavaScript to be written, aka, they are the same as GDevelop extensions right? And of course it's possible to add any arbitrary JS library/file to a GDevelop extension, that's how Physics or Tween extensions are working 😊
See:

https://github.com/4ian/GDevelop/blob/master/Extensions/TweenBehavior/JsExtension.js#L56

So I think that you're slighlty confusing the fact that GDevelop allow you to use JavaScript (which is not yet the case for C3 - afaik it's being added right now) and the fact that C3 have plugins with third party libraries? Or is there something that I am missing?

Most of their extensions are based on some library that the dev simply exposed to construct

So tell me again if I'm mistaken, but it's perfectly possible to re-develop all the extensions, that are on the page you linked, for GDevelop.
Or did I miss something and it's somehow easier for C3?

I know that this is not the main point of the topic, but I want to get our facts straight 😊It's important because there are so much important things to do on GDevelop that I don't want to develop things "because C3 is ahead of GD" to discover later than in fact GD is on the same point (and even more advanced as allowing JavaScript in your events).

To get back to what you're asking, is the solution of Bouh potentially usable? Best way to have me work on something for GD is to actually show me a proof of concept using for example a library embedded in a JS event that works. At which point I will have a valid, proven use case to allow arbitrary JS files to be included - which will need rework of the exporters and make things like minification more complex.

(Again, I understand that this would be an interesting feature, it's just that I don't want arguments that are biased because it's a dangerous way to prioritise things)

[4ian]

Said in other words: if tons of JS plugins exist in Construct to re-use JS libraries, that they are done by written plugins in JS and knowing that we can do the same in GDevelop, then the question is:

• Why don't we have people doing the same for GDevelop?

Question for which there are multiple hypothesis:

• 1. Writing an extension for GDevelop is work difficult?
• 2. We have less developers in the community?
• 3. Or the fact that we can add JS libraries like I shown (https://github.com/4ian/GDevelop/blob/master/Extensions/TweenBehavior/JsExtension.js#L56) is not known and so you think it was not possible?

If it's 1, we can surely make it easier to write extensions - or see why it's harder and how to improve that. If it's 3, we can enhance the doc. If it's 2, GDevelop is growing so hopefully we'll get more people contributing :)

I know that I am a pain, but I really want us to explore all available options before risking to bloat the software. Simplicity is something that is hard to achieve, and supporting things like "import MyClass from "myscriptsFolder/MyClass"" is actually a very complex feature involving JS bundlers, syntax transformers and all kind of things that will make me spend 2 months of my time doing this - while maybe a line in the doc or a way to include files to Extensions made in GD will be enough :)
But for now I'm not sure what is the proper solution, that's why I'm asking all the questions 😉

[4ian]

Turns out there is already a card on the roadmap: https://trello.com/c/jnT2J2Td/230-add-support-for-embedding-arbitrary-js-files-in-the-game

I'm linking the discussion here.

[blurymind]

There is a card yes. Sorry I totally forgot this was requested in the past.
It will really help with prototyping extensions if we could include js files directly in the event sheet, yes.

The motivation behind this is to make development of extensions in GD more and more enjoyable and encourage the development of extensions. From my point of view the ability to import js libraries is very important for creating extensions. Almost everything I am interested in making an extension of depends on it

[4ian]

Fair enough, for now I have no better solution than asking you to put the whole file in a JS event but I see the idea. Could be part of extensions that you can create in GD (so basically, that would call addIncludeFile, like in extensions).

[blurymind]

If I create 2 js code events, one after the other, can I call functions declared in event A inside event B?
I will give this a try with a simple js library. Pasting it's minified contents in an event and trying to call a method from it in event B

[4ian]

Not out of the box because declarations in JavaScript are scoped to the function where they are running (in other words, what you declare in event A stays in event A).
The solution is to:

• Attach what you want to share to an object that will be shared between event A and B functions. In GDevelop, this is for example runtimeScene. Be super careful and name your variable with a very explicit name like "runtimeScene._extensionXXXMyStuffThatIsShared" to be sure that it won't collide and destroy something (method or variable) that belongs to runtimeScene.
• OR Attach what you want to share to a global. For example gdjs. Same safety rule applies
• OR Attach what you want to share to window variable, which in JS make the variable global. i.e: window.MyLibrary = function() { /*...*/} means that I can then do MyLibrary() anywhere in the codebase.

Historically, JS libraries used the third approach, exposing themselves in a global variable. Things have improved with the introduction of JavaScript bundlers, allowing you to require files and bundle everything inside a single JS file that you import in your index.html (this is what is done for GDevelop IDE). This requires libraries to "export themselves" using something called AMD or CommonJS. See https://medium.com/computed-comparisons/commonjs-vs-amd-vs-requirejs-vs-es6-modules-2e814b114a0b for what seems a good explanation.

In practice, most libraries are still doing a dual approach of both exposing themselves to be used in a CommonJS environement (i.e: "require") AND can also expose themselves as a global on the window object (this is called UMD: universal module definition. If the library says it support UMD, then it can be used as a global in the browser. For example, shifty.js is UMD)

The game engine and GD events/JS code is still using the "good old" approach of having a bunch of files without bundlers or anything - notably because this is simple (for preview it's especially important to be fast) and avoid bundlers adding weird stuff or applying transforms to the JS that would be unwanted. This means that everything is located under gdjs object. Any extension using a third party library must include the file containing the library (using addIncludeFile) and be sure that the library is exposing itself as a global.

So at the end, what does all of this has to do with using libraries in a JS code event? If the library is exposing itself on window, you should be able to:

1. paste it in a JS code event
2. be sure that this JS code event is only executed once when the game launch/scene is started.
3. be sure that the library is available on window (depends on the library, but usually it's explained in the README)
4. if it's not exposed on the library, you can still console.log it in the JS code event (after you pasted the library minified code) and expose it to window:

// Code of the library

console.log(MyLibrary); // Will crash if it's not here
window.MyLibrary = MyLibrary; // MyLibrary is now available anywhere
// You can also expose it on GDJS, but be careful:
gdjs.ExtensionXXXMyLibrary = MyLibrary.

5. Enjoy :)

Let me know if you can get something working this way.

[blurymind]

Thank you @4ian :) I will give this a try tonight

[blurymind]

It works for something simple I wrote. For bondage.js I get this error:

Uncaught TypeError: Cannot read property '_babelPolyfill' of undefined
    at Object.<anonymous> (code0.js:94)
    at Object.<anonymous> (code0.js:94)
    at t (code0.js:94)
    at Object.<anonymous> (code0.js:94)
    at t (code0.js:94)
    at code0.js:94
    at Object.gdjs.New_32sceneCode.userFunc0x8254e8 (code0.js:94)
    at Object.gdjs.New_32sceneCode.eventsList0x825424 (code0.js:111)
    at Object.gdjs.New_32sceneCode.eventsList0xb22f0 (code0.js:427)
    at gdjs.RuntimeScene.gdjs.New_32sceneCode.func [as _eventsFunction] (code0.js:1089)
websocket-debugger-client.js:21 WebSocket connection to 'ws://127.0.0.1:3030/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

https://raw.githubusercontent.com/jhayley/bondage.js/master/dist/bondage.min.js

This is a very old minified compile of
https://github.com/jhayley/bondage.js

I assume this is related to babel, which is used in ALOT of libraries, to compileto a minified file for including in other projects

[4ian]

Do you have this issue when simply running the preview without using bondage at all or do you have some code calling bondage? Can you paste it here if so?

[blurymind]

when calling bondage.
I find that in order to execute nested functions, you have to do this

window.myFunc = function(evt="err"){
    console.log(evt)
    window.myFunc.sub = function(){
        console.log("subfunc")
    }
}

when usually the case for libraries you import is:

window.myLibrary = function(evt="err"){
    sub = function(){
        console.log("subfunc")
    }
}

You can try with the js version of
http://depts.washington.edu/madlab/proj/dollar/pdollarplus.html
which is not minified. Try executing a function or logging it to console

[blurymind]

Actually I get it with a black screen, simply by declaring bondage as

window.bodagejs=function(){
 ...minified contents...
} 

no need to call it

[4ian]

What if you paste directly the minified content without adding the window.bodagejs=function(){, this seems strange to me? This seems strange to me to do this, you wont get bondage in it, just a function executing a bunch of stuff.

Can you share the project with me? Will be easier to debug.