Ytyse Posted June 7, 2016 Share Posted June 7, 2016 Hello everyone, I'm a French Student in an Engineering school and i need to find the best way to do some animation in HTML5. It seems there's three principal tools : Canvas, SVG and WebGL. According to my recent research, Canvas is more for dynamic animation, if i need to refresh a lot of sprites, etc etc... ,SVG more for graphics, charts and pre-programmed animations and WebGL for 3D. (Tell me if i'm wrong, because i feel like Canvas and SVG can do SAME, i can't see a real difference except about performance) I saw there's a lot of library for Canvas(Pixi.js, Fabric.js, Easel.js...). But what's the "real" difference between them ? Is there a benchmark for that ? Is there a list of features of Pixi.js for example ? I search something concrete to compare theses libraries. If someone could answer that Sorry for my English, Ytyse Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 7, 2016 Share Posted June 7, 2016 If you need smooth lines and stuff, use SVG/canvas. If you need performance, 10.000 particles, or Meshes, or Shader stuff, then WebGL is your choice. PIXI provides API that has both canvas and WebGL implementations. That way you dont have to operate with low-level stuff, and at the same time you can enable optimizations that work for webgl. If you want to use smooth primitives with PIXI - just wrap your own Canvas2d into PIXI.BaseTexture and update it regularly. I dont think that SVG or canvas2d libs will help you to render 100k bunnies : http://www.goodboydigital.com/pixi-js-v4-batching/ PIXI examples: http://pixijs.github.io/examples/ PIXI plugins: 0) SPINE!!! The best skeleton animation editor in the world: https://github.com/pixijs/pixi-spine 1) particles (https://github.com/pixijs/pixi-particles) 2) tilemaps (https://github.com/pixijs/pixi-tilemap) 3) extra filters (https://github.com/pixijs/pixi-extra-filters) 4) compressed-textures (https://github.com/pixijs/pixi-compressed-textures) 5) 3d support (http://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cards.js&title=Cards , https://github.com/gameofbombs/pixi.js) One of the best PIXI games: http://www.celsiusheroes.com/ One of game constructors that uses PIXI: http://www.rpgmakerweb.com/ Neso 1 Quote Link to comment Share on other sites More sharing options...
Ytyse Posted June 8, 2016 Author Share Posted June 8, 2016 Thanks for your answer, it helps me a lot Quote Link to comment Share on other sites More sharing options...
Harrisyu Posted June 8, 2016 Share Posted June 8, 2016 The only reason for me is phaser don't support spine very well but pixi does. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 8, 2016 Share Posted June 8, 2016 2 minutes ago, Harrisyu said: The only reason for me is phaser don't support spine very well but pixi does. Yep, its up-to-date with Spine, and has integration features like "change texture on your attachments PIXI way" Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.