AnLim

Hello. I have already written to your forum before... - thank you so much for the prompt help at that time.
Now, when working with pixi-spine, I have a few more questions about its functionality.
1. Is it possible through JS to catch the coordinates where the character looks directly addressing the skeleton?
Example: There is an animation of "eye movement", I want to make the eyes move behind the mouse position.
2. Is it possible to directly ask or make a trigger when the animation ends exactly? So that I can know for sure, its status is true/false.
3. Does pixi spine allow two skeletons to run simultaneously in the same scene?
Example: I have a "background" skeleton and a "character" skeleton. I want to run them simultaneously so that the "character" is on top of the animated "background".
AnLim
  • Messaggi: 7

Mario

Note that we are not the creators of pixi-spine, so we aren't super familiar with it. pixi-spine is based on spine-ts, so I can really only speak to that part.

1. Yeah, that is possible, but it heavily depends on your skeleton as well as how you setup your pixi scene. If you can provide us with a simple example, I can see if we can help more directly.
2. Sure, just attach a listener to the AnimationState that drives your skeleton. The pixi-spine people have a Wiki entry on it: https://github.com/pixijs/spine/blob/master/examples/spine_events.md, and here's our documentation on animation state: Applying Animations - Spine Runtimes Guide
3. Sure, just create multiple PIXI.spine.Spine instances and add them to the scene.
Avatar utente
Mario

Mario
  • Messaggi: 3274

AnLim

ScreenShot_20221104154435.png

1. I have a stroking animation that, when pressed with the mouse in the head area, should trigger and last until the user releases the mouse. We need an example of how to link a specific event to user input.
You also need to add a slight deformation of the bone relative to the mouse position to cause the effect of "head movement".
2. It is unclear how to implement this through JS, with any appeal, one of the skeletons is reset. Could you show some examples of the implementation of this function, for spine-js?
3. Considering my questions, what is the most convenient way to implement such functionality? It is desirable that this engine has good documentation, because most of the examples on your website and git are devoted specifically to the implementation of spine for c#.
Ideally, I would like to implement animation on a stock spine, which should be more convenient in the future.
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.
AnLim
  • Messaggi: 7

Mario

How you can react to a mouse click/touch depends on what framework/engine you use. E.g. are you using straight DOM events, something pixi provides, something else? The respective docs of whatever you use should tell you how to react to such an event. That's not something we can help with.

Once you are inside the function that reacts to the mouse/touch event, you can then playback an animation on the skeleton. In our spine-ts runtime, that looks like this, provided you have a skeleton an and animation state:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-webgl/example/barebones.html#L46

pixi-spine exposes these objects to you, so you use the same API there.

If you want to drag bones around based on user interaction, then you can find an example how to do that here:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-webgl/example/bone-dragging.html

This is based on our spine-ts runtime, using the WebGL backend to render things onto a HTML canvas. You can apply pretty much all of this to pixi-spine as well, the only difference is where you get the mouse/touch event from and possibly what coordinate system you are using. pixi-spine is using and exposing our spine-ts runtime as well. So does Phaser. That means the core APIs like Skeleton, or AnimationState are the same in all of them. What changes is how rendering is done, and how you get user input etc. That's something we can not help with, as that is Phaser/PixiJS specific.
Avatar utente
Mario

Mario
  • Messaggi: 3274

AnLim

Hello. Again, sorry to bother you.
Practice has shown that it is impossible to do what we have planned on pixi-spine. Can you throw off examples of the implementation of the functionality that I described above, but on pure spine-js?
I mean: the stroking effect (cursor tracking) and simultaneous display of two skel.

That is, how to implement such a thing, but on a clean spike, but with specific examples in JS, the documentation on the site does not disclose this issue.
And is there any database of examples from the spine community, with specific implementations of certain mechanics for JS?
AnLim
  • Messaggi: 7


Torna a Русскоязычные пользователи Spine