Skeleton object - none of the official dragonbones demo files work

[blurymind]

Trying to load anything from https://github.com/DragonBones/DragonBonesJS/tree/master/Pixi/Demos/resource simply crashes gd.

It appears to be looking for a non existent variable. To replicate, load the example skeleton project and replace its skeleton and texture json resources with anything from the dragonbones repository.

If this bug is unsalvagable, perhaps it would be better to do it with the official pixi implementation?

Check out these demos https://pixijs.io/examples/#/plugin-dragonbones/eyetracking.js https://pixijs.io/examples/#/plugin-dragonbones/robot.js

can we make the eye tracking demo in gd? No :)

[GustavoMarciano]

as a dragon bones user i'm scared of the current Skeleton implementation ,it looks like a time bomb

[blurymind]

Were you able to actually load anything from it into the current implementation? Even the demo in the project is glitching with body parts of the dragon flashing and disappearing

[GustavoMarciano]

I tried but i only got a black screen

[blurymind]

when you export as 4.* db format, it still gives black screen?

[GustavoMarciano]

4.0 db and...

[blurymind]

@4ian I think it would be worth investigating how much work it would take to create an extension using the official DB implementation. I am now tempted to look into this, but am not sure where to even begin.

[4ian]

@blurymind Right this seems unstable to say the least - though maybe it's a simple issue and would be easy to fix. But in the long term, might be safer to look at official libraries for DragonBones or another skeletal animation library.

To start, you would do like an usual extension with an object. You would need to add the library as a JS include file for your object (it's possible, much like how it's done for Shifty for the Tween behavior):

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

Then you would need to feed the json resource (like it's done in the existing extenion) to the library (instead of doing this in a hand made implementation of a Skeleton object like it's done now). If you're using a library targeted at Pixi.js, you would probably get a Pixi object that you can display (like done in any other object, you "just" need to expose the Pixi object:

https://github.com/4ian/GDevelop/blob/b19a27e6cf3bc725c35bd1f87a1883ec7f61a80f/Extensions/ParticleSystem/particleemitterobject-pixi-renderer.js#L151-L153

)

Finally, once you have something that can be properly loaded and displayed on screen, comes the "fun" part: wiring GDevelop usual objects capabilities to this object. The hardest will probably be the collision. You could start simple and have the hitboxes being just a bounding rectangle around the object. It's what is done by Text object, TiledSprite and in fact any object apart from Sprites. Then to finish, the special action/conditions related to your object: setting an animation, changing speed, etc...

[blurymind]

To be fair I am mostly interested in the animations part and not so much about collisions. Would it be ok if as a starting point the dragonbones object handles only what it's designed to - the animations?

Even for our basic platformer example we use a separate red box to handle collisions. Having the logic separated to another object also keeps it simple :) so I wouldn't mind to handle platforming or any movement with the basic red box and just attach my dragonbones avatar to it, for as long as that dragonbones object can take advantage of its design - swapping character atlases, blending animations, smooth transitions, etc. These are more lucrative to me than getting all body parts read as collisions :)

The api lets you get any bone position and rotation, so you would be able to attach things to bones of course. It's a big API, so my approach to it would be to partially expose it, initially only the most important essential parts of it. Then later on, go more advanced :) if collisions are hard, I will leave them for another pr. I can't think of a lot of uses for having them on each body part anyways.

On Sun, Sep 29, 2019, 10:44 PM Florian Rival notifications@github.com wrote:

@blurymind https://github.com/blurymind Right this seems unstable to say the least - though maybe it's a simple issue and would be easy to fix. But in the long term, might be safer to look at official libraries for DragonBones or another skeletal animation library.

To start, you would do like an usual extension with an object. You would need to add the library as a JS include file for your object (it's possible, much like how it's done for Shifty for the Tween behavior):

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

Then you would need to feed the json resource (like it's done in the existing extenion) to the library (instead of doing this in a hand made implementation of a Skeleton object like it's done now). If you're using a library targeted at Pixi.js, you would probably get a Pixi object that you can display (like done in any other object, you "just" need to expose the Pixi object:

https://github.com/4ian/GDevelop/blob/b19a27e6cf3bc725c35bd1f87a1883ec7f61a80f/Extensions/ParticleSystem/particleemitterobject-pixi-renderer.js#L151-L153

)

Finally, once you have something that can be properly loaded and displayed on screen, comes the "fun" part: wiring GDevelop usual objects capabilities to this object. The hardest will probably be the collision. You could start simple and have the hitboxes being just a bounding rectangle around the object. It's what is done by Text object, TiledSprite and in fact any object apart from Sprites. Then to finish, the special action/conditions related to your object: setting an animation, changing speed, etc...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/1242?email_source=notifications&email_token=ABRRWVL3XH43E2U7CLPFKTDQMEOUZA5CNFSM4I3PO3V2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD737OAY#issuecomment-536344323, or mute the thread https://github.com/notifications/unsubscribe-auth/ABRRWVLQVMUKSW6R2JOIDMDQMEOUZANCNFSM4I3PO3VQ .

[4ian]

Yes feel free to take a look at it and collisions can be improved later - as you said it's fine to start with basic hitboxes :)

[blurymind]

@4ian how does one include pixi extensions? I am trying to add my bbcode extension https://github.com/blurymind/pixi-multistyle-text/blob/master/demo/index.html

But gd's renderer is complaining that it is undefined

Decided to do it first as it is simpler than dragonbones and will teach me how to make objects in the IDE.. I kind of started by forking the video extension

I am trying to get my MultiStyleText class imported and used in registerInstanceRenderers - since it needs to create a MultiStyleText object. This is in jsextension.js. Seems impossible or I am missing something

[blurymind]

If we can't include pixi extensions to the renderer, my assumption is that we will never be able to draw a dragonbones object in the IDE. I will try to see if the runtime renderer will let me use a pixi extension tonight. If that doesn't work, there is a blocking problem preventing us from implementing anything relying on pixi extensions (dragonbones, spine, multistyle-pixi-text bbcode renderer)

I am actually surprised we never used pixi extensions before. Or maybe I am missing something?

[4ian]

AFAIK, pixi extensions are nothing special. Just grab the built js files and include it.

[blurymind]

AFAIK, pixi extensions are nothing special. Just grab the built js files and include it.

I try to include it like this:

 const object = extension
      .addObject(
        'ObjectExample',
        _('ObjectExample'),
        _('Displays an ObjectExample.'),
        'JsPlatform/Extensions/videoicon32.png',
        ObjectExample
      )
      .setIncludeFile('Extensions/ExampleJsObject/exampleruntimeobject.js')
      .addIncludeFile(
        'Extensions/ExampleJsObject/dist/pixi-multistyle-text.umd.js'
      );

but then further down the file when I try to use it

  function RenderedObjectExampleInstance(
      project,
      layout,
      instance,
      associatedObject,
      pixiContainer,
      pixiResourcesLoader
    ) {
      RenderedInstance.call(
        this,
        project,
        layout,
        instance,
        associatedObject,
        pixiContainer,
        pixiResourcesLoader
      );
....
this._pixiObject = new MultiStyleText('');
      this._pixiObject.anchor.x = 0.5;
      this._pixiObject.anchor.y = 0.5;
      this._pixiContainer.addChild(this._pixiObject);
      this.update();
}

It doesnt find MultiStyleText. Is there a way to include js files in jsextension.js?

[4ian]

I try to include it like this:

That's the proper way to do it, but this is for the runtime object, i.e: the running game extension. Here, you're trying to use it in the IDE, which is a totally separated environment. :) You're writing here the RenderedInstance, which is the "preview" of a runtime object.

So right now there is sadly no easy way to require things in JsExtension.js - well I've never tried :) So two things:

• Either forget the RenderedInstance for now and write the gdjs.RuntimeObject for the game - I know that the preview in the scene editor is important, but starting with the object that is used in the game might be a good idea too.
• Either try to require the file with require at the top of the file, but I'm unsure which path will be used and that probably won't work at all with the web-app. I can work later to see what's the proper way to import things from JsExtension.js - was not a priority because even things using "extensions" like particles were never displayed in the scene editor.

But using your include, you should be able to use MultiStyleText in your runtime object.

[blurymind]

@4ian I got it to work with require :D

works in electron, unfortunately crashes the web app though. Can I use optionalrequire? :D

Anyways, will try to start a pr going over the weekend

[blurymind]

@4ian is there a way to set color in the object properties? I tried

      objectProperties.set(
        'Color',
        new gd.PropertyDescriptor(objectContent.color)
          .setType('color')
          .setLabel(_('Base color'))
      );

also some way to make the text input area bigger? Like in the text object?

Another teaser- now running in game :p

still crashes webapp, waiting for a solution on that one

[4ian]

I got it to work with require :D

Great! Quite nice, I was not planning this to work but glad that it's working :)

Can I use optionalrequire? :D

Won't work on the web-app too, the web-app will need special adaptations in BrowserJsExtensionsLoader to list additional files to be bundled :) The difference between Electron and the web-app is that:

• Electron has file on disk and can require them even if we don't know their existence at the time of the build
• While the web-app must know all the files to bundle them into (one or multiple) JS files.

For now, I would say don't care about the web-app and I'll help to add support for this once we identify what we need exactly to require.

is there a way to set color in the object properties?

Not for now, you can set the type "color" as you did but you'll have to implement a "color" field in https://github.com/4ian/GDevelop/blob/master/newIDE/app/src/PropertiesEditor/PropertiesMapToSchema.js and then handle this new field in https://github.com/4ian/GDevelop/blob/master/newIDE/app/src/PropertiesEditor/index.js - probably by using ColorField. (Basically, your property is passed to PropertiesMapToSchema, which create a Schema, which is passed to PropertiesEditor, which is rendering the fields of the "Schema").

See also this document for slightly more explanations: https://github.com/4ian/GDevelop/blob/master/newIDE/docs/Properties-schema-and-PropertiesEditor-explanations.md

also some way to make the text input area bigger? Like in the text object?

Nothing like this, should probably be another type like "text" or "textarea" instead of "string", and then same thing: handle it in PropertiesMapToSchema, which create a Schema with a new field, which is passed to PropertiesEditor, which is rendering the field as a <TextField> with multiline={true}).

Another teaser- now running in game :p

Good job! 👍

[blurymind]

for the color value type I need it in hex format, should I add to the colorpicker the ability to take the color as a hex? Right now it only takes as input rgba, but does return also hex

[blurymind]

OK I added the color input type to schema and allowed it to take in hex, since more js libs use it over rgb. It detects if the incoming value is an object or not

[4ian]

Going back to the original thread subject, two things: 1) I've seen example of supports on Pixi.js of other libraries like Spine: https://pixijs.io/examples/#/plugin-heaven/spineboy-pro.js 2) If Dragonbone current implementation in GD is too unstable/not usable - I'll prefer to deactivate it for now (or make it accessible from developer mode only).

[blurymind]

Going back to the original thread subject, two things:

1. I've seen example of supports on Pixi.js of other libraries like Spine: https://pixijs.io/examples/#/plugin-heaven/spineboy-pro.js
2. If Dragonbone current implementation in GD is too unstable/not usable - I'll prefer to deactivate it for now (or make it accessible from developer mode only).

On 1 > spine has a hefty price tag, thus why I decided against investing my time in working on an implementation. Dragonbones is free,so more people can use it. I don't intend to spend 300+ $ so I can get deformations in my characters. Creature2d is similar situation, although the deal there is better. You can export to dragonbones format from blender3d via an addon too. On 2> Probably good idea, since there is no way to open dragonbones files in it atm, or at least we haven't found one. Not sure what @Lizard-13 did in terms of export settings to get his example file to load - but even loaded it is glitching out - body parts disappearing, etc. It looks broken unfortunately. The complex code to do the rendering and the lack of maintenance on it is what ultimately drives towards the decision to use the official js API - it has a community and maintainers behind it and the weigth for maintaining it is not on us

[4ian]

I've disabled the extension for now, thanks anyway for trying it and @Wend1go for exposing it in GD5. Unfortunately for now we can't keep it as it is, as Blurymind explained too in his last message.