Search the Community

Showing results for tags 'vuejs'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 5 results

  1. 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
  2. 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.
  3. Tykrael

    Phaser + vuejs

    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.
  4. 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.
  5. nor-bu

    Vue js hot reload

    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