Additional examples with PixiJS?

[bpkennedy]

Hey, really like the project! I'm trying to use this with a Pixi.js game. Having trouble understanding how to use sprites from pixi for the steering behaviors (specifically seek) and your examples are generally using three.js.

Could you provide a basic demo with pixi?

[Mugen87]

Hey, really like the project!

Thank you for the feedback! Unfortunately, I'm not familiar with pixi.js so I'm not sure how easy it is to combine both projects.

The basic idea of using this library is to implement game logic via Yuka's game entity concept. A game entity can have a so called render component which is basically an object primitive of a rendering engine. For example an instance of THREE.Mesh or PIXI.Sprite.

You just copy the transformation of your game entities to your render components each simulation step and ensure they are nicely drawn by your selected rendering engine. This works properly with three.js or Babylon.js however pixi.js is problematic since it's a pure 2D engine. Meaning it defines the sprite's position in pixels/screen coordinates. In Yuka, three.js and Babylon.js, the position values are defined in world units/world coordinates.

I actually don't know how to bring these two different concepts in a meaningful way together with Pixi.js. I've created a fiddle to illustrate the issue:

https://jsfiddle.net/s6mctj3r/4/

[bpkennedy]

Interesting! I do see in the fiddle that the sprite's are moving around a bit, although I don't quite understand how. I will spend some more time fiddling with them and see if I can understand better. Thanks for illustrating the issue!

[Mugen87]

I do see in the fiddle that the sprite's are moving around a bit, although I don't quite understand how.

The problem is that the game entities position values lie in a range let's say [-50,50] world units. Pixi interprets these units as screen coordinates/pixels which usually have a different range (check the app.screen object). Hence, you see only a minor movement.

[Mugen87]

Closing. After some considerations we are not going to add (official) pixi.js examples. The implementation of Yuka is just not designed for a 2D game. The combination might work in certain scenarios but it's best to use a 3D engine.