This is my first post in the Play Canvas forum and I’m in the process of porting an existing native mobile game I’ve built to HTML5 with some 3D enhancements.
According to this post http://answers.playcanvas.com/questions/15/how-can-i-add-a-hud-to-my-playcanvas-game and many other similar posts, PlayCanvas recommends using SVG/DOM elements on top of the canvas to create UI and Game HUD. It’s the simplest solution and gives you greater control over things like text. The alternative is using primitives, sprites and bitmap fonts (like in the Flappy Bird project) which is great but I don’t like the idea of creating and managing bitmap fonts or trying to calculate the UV Tiling & Offset manually of a sprite sheet and apply that to each material.
For my game, I plan on using Play Canvas for the 3D game mechanic but I was thinking of using Pixi JS as the Game HUD and UI (menus, etc). The reason being is that it has many features (masking, bitmap filters, support for Texture Packer, etc) that I’d like to implement.
I did some more research into other 3D engines (Three JS) with Pixi and that it’s possible to have 2 canvases (one hidden, one visible) and draw the Pixi canvas onto the Three JS. I’ve attached some links below should anyone want to follow along how I got to this point:
- What is PlayCanvas good for?
- https://github.com/pixijs/pixi.js/issues/1366 (with example)
I just have a couple of questions:
- Has anyone had experience using 2 canvases together (eg. a transparent PIxi canvas on top of a PlayCanvas background)? Were there any issues or performance losses?
- Is it possible to implement the approach suggested of painting the 2D Pixi Canvas onto the 3D PlayCanvas? The example provided cautioned that competing WebGL libraries may not play nicely with each other due to keeping track of the GL. I also read about using a fragment shader to combine one canvas onto another http://stackoverflow.com/questions/12590685/blend-two-canvases-onto-one-with-webgl. Is this something that’s possible with PlayCanvas?
- If using other WebGL libraries are really not recommended, is there a better way to manage Offset & Tiling of a generated spritesheet? (ie. recommended tools, etc)
I’m going to try and build a simple example over the coming days to see what possible but if someone else has tried and even come up with alternate solutions, I’d really like to hear about it.