Yuka Game AI + Babylon.js Examples - the 1st Release

Dear friends,

Our small team (@labris and @roland) is very glad to present the 1st release of “Yuka Game AI + Babylon.js Examples”. One may say that this is all what you need for a web-based 3D game.

Link: Yuka | Examples with Babylon.js

Here is just a very short list of Yuka.js features:

  • 3D Game Entity and Game Entity Manager
  • Finite State Machine
  • Entity Brain with Goal Evaluator
  • Navigation Mesh and Graph Algorithms
  • Perception: Line of Sight and Memory System
  • 3D Steering Behaviors
  • Save/Load built-in function
  • And many more!

GitHub: GitHub - eldinor/yuka-babylonjs-examples: Yuka Game AI + 3D rendering with Babylon.js

Moreover, @roland created fantastic “Yuka Game AI + Babylon.js Typescript Starter Pack” with 2 ready-to-use examples with Navigation Mesh and Steering Behavior + Empty Boilerplate with extensive code comments.

GitHub: GitHub - eldinor/yuka-babylonjs-ts-starter: Yuka Game AI + Babylon.js Typescript Starter

Many thanks to all who helped us and answering our questions! Feedback is welcome!

41 Likes

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! :smiley: 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! :smiley: :smiley:

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. :stuck_out_tongue: :see_no_evil:

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:

  1. try to avoid parented TransformNodes with YUKA. YUKA will place your object in world space.Use YUKA’s parenting instead.
  2. 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.
  3. 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)
  1. 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())
}
  1. you must register your YUKA entity in the YUKA.EntityManager with it’s add function
  2. 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. :vulcan_salute:

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.

9 Likes

Awesome work. So glad to see this!

We are probably not going to make any major changes until the final release, so assume this won’t happen, but would be great to know if it does!!

You guys rock :slight_smile:

3 Likes

This is great, thanks. Do you know if its possible to apply some of yuka’s functionality like ie. following in 3D space. I mean not moving around the floor but more like flying bird or a plane.

1 Like

Of course it is. Why don’t you check the examples page? :face_with_monocle: You might be interested in the Pursuit and/or Seek examples.

Thanks, I looked through the examples. Most of the examples are walking around the floor. The use-case I have in mind is chasing/shooting bot planes in a flight simulator.

2 Likes

Actually all YUKA behaviors are working in 3D space. It’s a good idea to tweak the examples a bit so the entities will be moving along all axes. Thank’s for pointing this out!

I’ve modified one of the examples so it’s obvious that it’s in 3D. You can preview the modified example here. I think this is exactly what you are after.
https://yuka.babylonjs.xyz/js/steering/pursuit/

Seek with camera controls, so you can rotate the camera and check that it’s moving in 3D:
https://yuka.babylonjs.xyz/js/steering/seek/

@labris will update the official examples page later.

2 Likes

This is perfect, cant wait to shoot down some airplanes :slight_smile:

2 Likes

Shoot’em all! Keep us posted on your work! Thanks!

1 Like

Ok, guys! So I’ve quickly modified the js examples to be more 3D. The repo is updated.

@labris is quite busy now and he will update the examples page later. The preview is already available here:

Enjoy!

@kri100s Thanks for the comment :slight_smile:

1 Like

Updated!

3 Likes

Man! you guys rock!! This is excellent

2 Likes

@PirateJC we need to spread the word here :wink:

1 Like

The current high score in Yuka | Hide And Seek is 27 frags! Can you guys beat it? :muscle:

LOL
image

No worries, that’s the same amount of frags I have achieved for the first time :smiley: I played it like 50 times since then while I was coding the example, so:

image

I’ve asked my younger son to play it. Second try, 26 frags.
image

This is pretty badass! I think I’m gonna have to play around with this a bit on my off time. Great job @roland and @labris!

2 Likes

@PolygonalSun
Thank you buddy! :muscle:

Added the new Corridor example - Yuka | Corridor + Follow Path

3 Likes