Combine Babylon.js with Pixi.js

[SinhNQ 45]

Hello,

* Introducing a bit of pixi.js:

 pixi.js has full webgl support, a best framework for 2D game with rendering very fast. Would be great if you want make UI game with pixi.js and combine with babylon.js. (Will I get paid for advertising? NO..🤣)

Demo babylon.js + pixi.js : https://jsfiddle.net/y5q7Lb1v/21/

This is a perfect duo for your web game world, which you can create high quality games. 😁

Moreover, you can also use GSAP for creating high-performance animations.

Demo babylon.js + pixi.js + GSAP lib: https://jsfiddle.net/y5q7Lb1v/28/

[Deltakosh 4311]

Excellent!!!!

[jerome 1734]

amazing !

[SinhNQ 45]

Thanks Dk and jerome! 😃

[Deltakosh 4311]

You should do a PR to the doc site to document how you do it!

[JackFalcon 200]

2D + 3D Hybrid approach is really cool! Might we call it 4D or 5D?

HYBRID MIXES like this can be HIGHLY-EFFECTIVE.

Didn't know Pixi.js + Babylon could work, really intriqued! 

But DID HAVE SUCCESS mixing:

Babylon + GSAP AND

Babylon + jQuery! (surprize!)

Don't laugh. Stop laughing. : )

There is a reason... for mixing Babylon and jQuery.

jQuery.animate turned out to be just as good as GSAP(if not better).... and FREE. : )

Most Importantly: integration is lightweight and seamless.

Example shortly, in upcoming BJS release.

Can't wait to try this...

+1 LIKE for BJS+Pixi.js && HYBRID~5D.

Jack : )

 

[SinhNQ 45]

22 hours ago, Deltakosh said:

You should do a PR to the doc site to document how you do it!

OK i will do it when there is free time. Should i add into Resources/Library folder in the Document?

[SinhNQ 45]

Hi Jack!

I don't think babylon.js can mix with jQuery, jQuery.animate only effect for a object of CSS properties.

With GSAP lib - TweenMax.js is  FREE 😁

[JackFalcon 200]

@SinhNQ,

1) Interpolate range and use callback state to apply state to BJS, is how. Really surprised how well that works. Made transition myself after all of the above ANIMATION REVIEW.

2) Looking into GSAP license, at that time, it was free "non-commercial". Tricky. Perhaps they changed it? : )

[SinhNQ 45]

1) Basically, TweenMax.js  will interpolate the value of the target over time and assign that value to the target.
Above example: the target is ground.rotation, value is y. TweenMax.js will interpolate from current value ground.rotation.y to Math.PI * 2.

2) I have not read the license for a long time, I do not know if they have changed or not. All my games use TweenMax.js for free.  

[Deltakosh 4311]

6 hours ago, SinhNQ said:

Should i add into Resources/Library folder in the Document?

yep please!

[Vorion 9]

Is this the best solution to combine pixi.js and babylon.js? I'm currently also using pixi.js for my game gui, but as I haven't found any examples, I just set up a second canvas for pixi.js. Which one would be better, performance-wise?

My approach looks like this: https://jsfiddle.net/yapv3Lfc/1/

 

[SinhNQ 45]

Hi Vorion!

The use of 2 canvases are the bad performance. With my solution, babylon.js and pixi.js shared webgl context, them will give better performance. 

[abhivaidya 9]

This is really cool!

[Vorion 9]

On 9/19/2018 at 4:27 AM, SinhNQ said:

Hi Vorion!

The use of 2 canvases are the bad performance. With my solution, babylon.js and pixi.js shared webgl context, them will give better performance. 

Ok, thank you, I will switch to your solution then