Search the Community

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?