Search the Community

Hi everyone! I’ve recently released Uno UI, a library for building high-performance, pixel-perfect user interfaces for WebGPU. GitHub repository Some key features: Works with any WebGPU rendering engine (Pixi, Three.js, Babylon.js, Babylon Lite, PlayCanvas) Use it standalone or with React, Vue or SolidJS Background, foreground, and world-space UI Pixel-perfect parity with DOM rendering High-quality MTSDF text rendering with strokes and shadows Accurate text measurement and layout powered by Pretext Flexbox layout powered by Yoga High performance, with only one draw call per UI frame. Demos and example Background and Foreground UI with Pixi scene in between How to use Pixi with React More examples I've been invited to the Pixi3D beta, and the implementation is ready. I'll share the code and examples here once Pixi3D is publicly available. I’d also like to mention that this isn’t a vibe-coded project or AI slop. I’ve spent the past six months working non-stop to get it to where it is today. If you appreciate the work, please consider giving the project a star on GitHub. I’d really appreciate it! https://github.com/uno-build/ui Please let me know what you think, and feel free to ask any questions.

Hi everyone! I am going to load sound file in vue-pixi. I have no way to do this! Please help me. Thanks

Hi everyone, I wanna use vue-pixi package on my vuejs project, But this package doesnt work properly. Which version of vuejs do I have to use for this package? The package is installed but the Import command doesnt work. vue-pixi is not recognized. Thanks?

I created a Webpack template that sets up a Vue project with Phaser 3 integration. It's really minimal but can get people started. Feel free to hit me with suggestions. https://github.com/Sun0fABeach/vue-phaser3 Cheers

Hi, I have problem with phaser performance. The phaser CPU usage is too high. Configuration : - game is on phaser 3 with vue - main page is on vue with game in iFrame this.gameInstance = new Phaser.Game({ width: properties.width, height: properties.height, resolution: PIXEL_RATIO, "callbacks.postBoot": function() { document.getElementsByTagName("canvas")[0].style.width = properties.width + "px" document.getElementsByTagName("canvas")[0].style.height = properties.height + "px" }, scaleMode: 0, type: Phaser.CANVAS, parent: document.getElementById('game'), title: '☕️ Brunch with Phaser and ES6', // 'My Phaser 3 Game' url: 'https://github.com/samme/brunch-phaser-es6', version: '0.0.1', banner: { background: ['#e54661', '#ffa644', '#998a2f', '#2c594f', '#002d40'] }, fps: { min: 10, target: 60, forceSetTimeout: true, }, loader: { path: 'static/phaser/', }, physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 300 }, }, }, scene: [ LoaderScene, BootScene, DefaultScene, GameOverScene, ], }); CPU usage: - Phaser = 40% - Phaser with vue = 80-90% - main page without iframe = 5-10 % - main page with iframe = 100% js heap size: - Phaser = 50 - 70 MB - Phaser with vue ~ 70 - 100MB - main page without iFrame ~ 50 - 80 MB - main page with iFrame ~ 100 - 150 MB The game is equipped with 20-30 icons, 10 atlases, 19 mp3 sounds and 5 background image, with total size of assets about 3MB. Thank you in advance

If you haven't yet seen A-Frame yet, you should check it out. The gist is that you use HTML tags to define your scene. I was working on porting A-Frame to Vue because the devtools are amazing and the components are expressive and makes your app really reactive. I prefer Vue over React since it's simpler and I don't have to work in JSX. While working on integration with A-Frame I started to notice that the overlap between A-Frame's entities and Vue's components became rather cumbersome and Three.js's API and documentation made the situation worse. I noticed the Babylon.js project shortly after and discovered how awesome it is. I then decided it would be better to make my own ECS using Babylon.js with Vue components. As of right now I have Scene, Entity, Mesh, Light, and Animation components created. Here's a sneak peek: And the code for the scene written in Pug: I'll keep this thread updated as I continue progressing on the project. Let me know if you have any ideas or feedback. You can watch me code it on my Twitch stream this Monday from 2-10pm CST. I just started this project a couple days ago, so it doesn't have documentation yet, but you can see the code on Github or grab it off of NPM as vue-babylonjs

Hi, I've recently started making my new (first) game. I decided to go with ThreeJS and A-frame as framework/engine but these aren't very well prepared for game development (lack features I need) so I've switched to BabylonJS. But with my UI being created in Vue (worked well with A-frame HTML elements) there isn't any advice in Google. I've tried integrating it with my Vue component but in a console it says : I thought it is because of Canvas isn't the correct element by when I tried to log it, it prints it is. I don't know if this integration is even possible. As I said I'm new to BabylonJS and maybe I lack some knowledge.

Hi all, i am trying to use Pixijs inside a vue instance and have encountered a strange issue. I know it might no be directly related to Pixi.js and you can jump to the tl;dr section for a question about how to update sprites locations, thanks, ------------------------------ All worked as expected when i used the particle container example from Pixi's official website. https://jsbin.com/jewapiyuzo/1/edit?html,js,console,output But now I want to have more control over the location of those sprites, like using an array to re-assign x, y, of each sprite. so I add a reference of pixi instance as vue's data element at line 12 and received an error It would throw a similar error if I want to pass a reference of ``maggots`` by using this.pixiInstance = maggots. jsbin seems to have added some protection or sandboxed this but it would caused a stackoverflow if you run this directly inside Chrome. So I am really desperate here on how to access ``maggots`` so I can loop thru and update all its elements... My last resort would be removing the canvas dom element and redraw it everytime i have to update the sprites data. i really don't want to do that Edit1: I am using the import below to import pixi, not sure if this would make any difference. =================TL;DR and Pure Pixijs question========================= Once you have initialized a Pixjs instance and have added sprites to it, what's the best way to access the instance so you can loop and update sprites' x, y values?