SinhNQ

Combine Babylon.js with Pixi.js

Recommended Posts

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/

Share this post


Link to post
Share on other sites

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 : )

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

@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? : )

Share this post


Link to post
Share on other sites

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. :) 

Share this post


Link to post
Share on other sites
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 :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.