Search the Community

Hi all, Please check out Space Battle game, basically I used sea battle mechanics for single player in space setting. Made with VueJS, no canvas used - animation and isometric grid is made with CSS. Link to the game ? https://chpockrock.itch.io/spaceranger

Hello, everyone! It's been a while since I don't touch this project, but I really wanted some feedback on this. I call it Ready 2 Dance and it is a dance rhythm game that uses PoseNet and PixiJS. Inspired by ParaPara Paradise, DDR, OSU and many others, it consists on hitting the circles in the right time following the song, which would be identical to the choreography from the youtube video. Not all songs include the video choreography right now. Since it is a dance rhythm game that uses posenet, it is required to have a webcam to play. I hope everything goes alright accessing the camera. ? And you would need to get up and dance. ? At this moment all the content is restricted to the dance charts I make, but I wanted to make this open to every logged in user. I'm afraid of the proportions that this is going to take in terms of billing (I'm not familiarized with that) and trolling. I thought about making this an electron app instead, so the users can make whatever they want and share with whoever they want, but I'm not really sure if this would be the best solution. I'm pretty new to programming in general, so I would be really happy to hear any advice and opinions that you have. ? Link to the game: https://parapara-game.web.app/ Screenshots: I hope you like it! kikito

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?

Hello guys, I lost my other html5gamedevs account @Nicholls but I want to share with you guys my new contribution to Phaser 3, a web component to integrate Phaser with any other Framework (Angular, React, Vue.js, etc): https://github.com/proyecto26/ion-phaser This is very useful because you don't need to manipulate the DOM directly using ids and you can use Phaser like any other component. From the GitHub repo you can find some examples, also check from Codepen too: https://codepen.io/jdnichollsc/full/oRrwKM Regards, Nicholls

Hi ! I'm a beginner with both pixi.js and vue.js and I can't manage to import pixi.js in my components. I tried different ways : - Import pixi.js in index.html via the CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script> - Import pixi.js directly in my component (like in the example, it's working perfectly with TweenMax) import PIXI from 'pixi.js' import TweenMax from 'gsap' export default { name: 'home', mounted () { console.log('Mounted home, ready to PIXI') console.log(PIXI) } } The problem is that in my component, 'PIXI' is always undefined. Do you know if it's possible or if it's just me missing something. Thank you in advance.

Hello peeps, I've been trying for a long time now to make it work, but i can't find any new ideas to test out. My project is a vuejs webpack template project i've been able to initialize phaser make things display changing the game's background color on input etc But i can't for the life of me find the way to make sprite input detect pointer. I've followed this tutorial : https://www.sebastianklier.com/node/vue/phaser/game/2017/06/03/node-vue-phaser-webpack.html Here's the code of my game vue <template> <div id="plano"></div> </template> <style> #plano { position:absolute; top:0; left:0; width:1280px; height:640px; margin: 0 auto; } #plano canvas { display: block; margin: 0 auto; } </style> <script> /* eslint-disable */ /* eslint-disable no-unused-vars */ import 'pixi' import 'p2' import Phaser from 'phaser' /* eslint-enable no-unused-vars */ export default{ name: 'phaser', data: () => ({ game: null, sprites: {}, }), mounted () { this.$on('click', function(){ console.log('click') }) let self = this if (this.game == null) { this.game = new Phaser.Game({ width: 1280, height: 640, renderer: Phaser.AUTO, antialias: true, parent: this.$el, state: { preload: function preload () { self.preload(this) }, create: function create () { self.create(this) }, update: function update () { self.update(this) }, render: function render () { self.render(this) } } }) } }, methods: { preload () { this.game.load.image('block', './static/assets/block.png') }, create (phaser) { let self = this; var sprite = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'block') sprite.anchor.set(0.5) sprite.inputEnabled = true sprite.input.enableDrag() sprite.events.onInputDown.add(function() { console.log('sprite down') }) }, update (phaser) { }, render() { var debug debug = this.game.debug debug.inputInfo(32, 32); debug.pointer( this.game.input.activePointer ); debug.spriteInputInfo(this.game.world.children[0], 32, 150) } }, destroyed () { // this.game.destroy() } } </script> As you can see it's pretty simple i just want to be able to drag the block, the debug.spriteInputInfo shows no signs of life. Of course the code works outside of vue ... If anyone got an idea I'll gladly take it, i'm at my wits end.

Excuse me! I have a problem with the game develop. I have 5 states: state1~state5, and every state has preload, create and update 3 function. How should I put them in mounted and methods? In original code: var GameObj = {}; GameObj.Index = function (game) { }; GameObj.Index.prototype = { create: function(){}, update: function(){}, player: function(){} }; And I try to write in VueJS: import 'pixi'; import 'p2'; import Phaser from 'phaser'; export default { name: 'game', props: { height: Number, width: Number, }, mounted() { let self = this; const gameHeight = document.querySelector('#gameBox').offsetHeight; const gameWidth = document.querySelector('#gameBox').offsetWidth; if (this.game === null) { this.game = new Phaser.Game({ width: gameWidth, height: gameHeight, renderer: Phaser.AUTO, parent: this.$el, }); } this.addSate(); }, methods: { addSate() { this.game.state.add('GamePreloader', function() { this.prototype = { preload(Phaser) { ... }, create(phaser) { .... this.game.state.start('GameIndex'); }, }; }); this.game.state.add('GameIndex', function() { this.prototype = { create(phaser) { .... }, memberLogin(phaser) { .... }, }; }); this.game.state.start('GamePreloader'); }, }, data() { return { game: null }; }, }; I don't know if my structure has a fault? Because there is nothing in the canvas to display.

I have pixi combined with vuejs, all works fine except the hot reload, when i update one component then is each of my sprites doubled on the screen. How can a reload the whole renderer? Thanks for help