SinhNQ 45 Report post Posted September 14, 2018 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/ 8 kuuuurija, trevordev, jerome and 5 others reacted to this Quote Share this post Link to post Share on other sites
Deltakosh 4315 Report post Posted September 14, 2018 Excellent!!!! Quote Share this post Link to post Share on other sites
jerome 1734 Report post Posted September 15, 2018 amazing ! Quote Share this post Link to post Share on other sites
SinhNQ 45 Report post Posted September 15, 2018 Thanks Dk and jerome! 😃 Quote Share this post Link to post Share on other sites
Deltakosh 4315 Report post Posted September 17, 2018 You should do a PR to the doc site to document how you do it! Quote Share this post Link to post Share on other sites
JackFalcon 200 Report post Posted September 17, 2018 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 : ) 1 Deltakosh reacted to this Quote Share this post Link to post Share on other sites
SinhNQ 45 Report post Posted September 18, 2018 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? Quote Share this post Link to post Share on other sites
SinhNQ 45 Report post Posted September 18, 2018 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 😁 Quote Share this post Link to post Share on other sites
JackFalcon 200 Report post Posted September 18, 2018 @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? : ) Quote Share this post Link to post Share on other sites
SinhNQ 45 Report post Posted September 18, 2018 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. 1 JackFalcon reacted to this Quote Share this post Link to post Share on other sites
Deltakosh 4315 Report post Posted September 18, 2018 6 hours ago, SinhNQ said: Should i add into Resources/Library folder in the Document? yep please! Quote Share this post Link to post Share on other sites
Vorion 9 Report post Posted September 19, 2018 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/ 1 JackFalcon reacted to this Quote Share this post Link to post Share on other sites
SinhNQ 45 Report post Posted September 19, 2018 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. 4 Deltakosh, Vorion, Sebavan and 1 other reacted to this Quote Share this post Link to post Share on other sites
abhivaidya 9 Report post Posted September 20, 2018 This is really cool! Quote Share this post Link to post Share on other sites
Vorion 9 Report post Posted September 20, 2018 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 Quote Share this post Link to post Share on other sites