Hi!
First of all I’d like to thank @labris for starting this project and for the opportunity to be a part of this exciting however exhausting experience! Thanks goes to all the friends for supporting us on the forum! The Typescript Starter Pack I’ve created is based on @RaananW 's base project (ts/webpack/es6) so thank you for creating it buddy! Though, it still doesn’t make a coffee!
The Javascript examples are based on the existing YUKA examples and we followed the original coding style, used the existing examples code structure to save time and deliver the examples ASAP. The code quality is not something I’m proud of but they are more than enough to demonstrate YUKA’s capabilities and how to glue BabylonJS and YUKA together. By examining the examples you should be able to avoid all the trouble we had making these two awesome frameworks working nicely together. Please do not make us wrinkles by commenting/trolling like 'do you know that you can use the beforeRender
callback instead of window.requestAnimationFrame
. It already happened and you bet we are aware of these BabylonJS functions.
The TypeScript examples are another story and I wanted to write as clear BabylonJS code as I could. I wanted to separate YUKA and BabylonJS as much as possible and not to tightly couple the two frameworks together with performance but readibility as well in mind. It’s an overnight production so I bet there will be a lot to improve so feel free to comment/contribute. The TS examples are just simple ones and you will have a totally different setup for your real game. It’s a good idea to test YUKA stuff in small isolated steps and the TS starter is a good piece of code to try different YUKA behaviours with it.
A short list of what you should be aware of:
- try to avoid parented
TransformNodes
with YUKA. YUKA will place your object in world space.Use YUKA’s parenting instead.
- you must scale, rotate and position your mesh before registering it as a YUKA
renderComponent
and bake the transformations into the vertices and freeze the world matrix of your mesh before doing so.
- you must register your Mesh/TransformNode/Camera on the YUKA entity by setting it as a
renderComponent
and pass the syncFunction
which will take care of syncing your BabylonJS object’s position/rotation/scaling into with the YUKA world’s position.
const entity = new YUKA.GameEntity()
entity.setRenderComponent(mesh, syncFunction)
-
syncFunctions
:
For syncing a TransformNode
with the YUKA entity use this method:
private _sync(entity: YUKA.GameEntity, renderComponent: TransformNode) {
Matrix.FromValues(...(entity.worldMatrix.elements as FlatMatrix4x4)).decomposeToTransformNode(renderComponent)
}
If it doesn’t work for you try this one:
renderComponent.getWorldMatrix().copyFrom(BABYLON.Matrix.FromValues(...entity.worldMatrix.elements))
For the camera
use this:
private _syncCamera(entity: YUKA.GameEntity, camera: Camera) {
camera.getViewMatrix().copyFrom(Matrix.FromValues(...(entity.worldMatrix.elements as FlatMatrix4x4)).invert())
}
- you must register your YUKA entity in the
YUKA.EntityManager
with it’s add
function
- you must update the YUKA EntityManager’s time (make steps in YUKA world) to make things moving like this:
private _time: YUKA.Time = new YUKA.Time()
this._scene.onBeforeRenderObservable.add(() => {
const delta = this._time.update().getDelta()
this._entityManager.update(delta) // YUKA world step
})
I am really amazed by YUKA’s capabilities.
Do you want a first person shooter? There is a First Person Controller in the examples just sync your camera with it.
Do you want AI for your NPCs? YUKA is at your service.
Do you want to move in 3D space but do not let your player walk through walls or obstacles without checking collisions? Use YUKA’s navigation capabilities and there is an example for this as well.
Do you want a homing missile? A few lines of code will do the job!
And many many more…
I bet, once you get familiar with the YUKA concepts you’ll be amazed as am I and you will solve complex game tasks in no time!
Comments/contributions are welcome!
Have a nice day coders!!
R.
The JS examples are using the latest BJS libraries from the CDN. BJS5 is under development so maybe something will break. Please let us know in case you encounter any issues.