Search the Community

I am using Phaser 2 and I am trying to get it working with quasar framework, but I just keep stumbling into errors. I suspect it may be a webpack configuration issue, coupled with package incompatibility issues. The relevant section of my `quasar.conf.js` file is as follows const webpack = require('webpack'); const path = require('path'); const phaserModule = path.join(__dirname, '/node_modules/phaser/'); const p2 = path.join(phaserModule, 'build/custom/p2.js'); const phaser = path.join(phaserModule, 'build/custom/phaser-split.js'); const pixi = path.join(phaserModule, 'build/custom/pixi.js'); module.exports = function (/* ctx */) { return { .... extendWebpack(cfg) { cfg.resolve.extensions = ['.js', '.vue', '.json']; cfg.resolve.alias.p2 = p2; cfg.resolve.alias.pixi = pixi; cfg.resolve.alias.phaser = phaser; cfg.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules|quasar)/, }); cfg.module.rules.push({ test: /\.(frag|vert)$/, // loader: 'gl-fragment-loader' loader: 'raw-loader', }); cfg.module.rules.push({ test: /pixi\.js/, loader: 'expose-loader', options: { exposes: { globalName: 'PIXI', moduleLocalName: 'PIXI', override: false, }, }, }); cfg.module.rules.push({ test: /phaser-split\.js$/, loader: 'expose-loader', options: { exposes: { globalName: 'Phaser', moduleLocalName: 'Phaser', override: false, }, }, }); cfg.module.rules.push({ test: /p2\.js/, loader: 'expose-loader', options: { exposes: { globalName: 'p2', moduleLocalName: 'p2', override: false, }, }, }); cfg.plugins.push(new webpack.DefinePlugin({ // Required by Phaser: Enable the WebGL and Canvas renderers. WEBGL_RENDERER: true, CANVAS_RENDERER: true, })); }, }, }; }; My `package.json` file is as follows (Please ignore the use of Phaser and Phaser-ce. I know one can be used in place of the other, but I have been trying different configurations) { ... "dependencies": { "@quasar/extras": "^1.0.0", "amazon-cognito-identity-js": "^4.5.4", "axios": "^0.18.1", "core-js": "^3.6.5", "cross-fetch": "^3.0.6", "phaser": "^2.4.6", "phaser-ce": "^2.18.0", "quasar": "^1.0.0", "vue-paystack": "^2.0.4", "vue-social-sharing": "^3.0.5", "vue-worker": "^1.2.1" }, "devDependencies": { "@quasar/app": "^2.0.0", "@quasar/quasar-app-extension-dotenv": "^1.0.5", "babel-eslint": "^10.0.1", "eslint": "^6.8.0", "eslint-config-airbnb-base": "^14.0.0", "eslint-loader": "^3.0.3", "eslint-plugin-import": "^2.20.1", "eslint-plugin-vue": "^6.1.2", "expose-loader": "^1.0.0", "raw-loader": "^4.0.2", "script-loader": "^0.7.2" }, ... } My gameplay page is as follows <template> <div> <div :id="containerId"></div> </div> </template> <script> /* eslint-disable no-unused-vars */ import 'pixi'; import 'p2'; import Phaser from 'phaser'; /* eslint-enable no-unused-vars */ export default { name: 'game', data() { return { game: null, containerId: 'gameScreen', }; }, props: { width: { type: Number, default: document.body.clientWidth, }, height: { type: Number, default: document.body.clientHeight, }, }, mounted() { const self = this; if (this.game === null) { debugger; this.game = new Phaser.Game(this.width, this.height, Phaser.CANVAS, this.containerId, { preload: function preload() { self.preload(this); }, create: function create() { self.create(this); }, update: function update() { self.update(this); }, }); } }, methods: { preload(game) { ... }, create(game) { ... }, upload(game) { ... } }, }; </script> The most recent error (there have been many) is shown below

Hello guys, I've just uploaded my first Phaser(2) project, called "Gotham Shadow". This is a Pacman type of game, taking part in the Batman universe (cause i love Batman!). If you want to, let me know if you have any ideas or tips, i'll hope you'll enjoy : https://gmoliner.itch.io/gotham-shadow

I am trying to create multiple PIXI.Texture instances using a Phaser.RenderTexture as the base. This does not seem to work though. When I set the texture on a sprite it just appears blank. Doing the same with a baseTexture from the cache seems to work. const texture = new PIXI.Texture(renderTextureInstance, new PIXI.Rectangle(0, 0, 200, 200), new PIXI.Rectangle(0, 0, 200, 200)); // DOES NOT WORK const texture = new PIXI.Texture(game.cache.getBaseTexture('buttons'), new PIXI.Rectangle(0, 0, 200, 200), new PIXI.Rectangle(0, 0, 200, 200)) // WORKS I also tried using the renderTextureInstance.baseTexture reference and neither seem to work. When I create a sprite using the renderTexture it works just fine. Is this Some limitation of RenderTextures in the Phaser 2/CE code? Is there a workaround? thanks

Hello, I want to spawn an enemy on different location every second on my screen. is there such thing like this? Im using emitter to spawn random images on my screen but it generate only in one place. how can i generate image in different place every second?

I found in the oficial site Phaser.io good books TO DOWNLOAD, but I need real books not only for Phaser but a good book to get introduced in this world of HTML5 gamedev, even without a framework. It's just to get started. I've been studying JS and I think I'm prepared to go to a framework, but I don't have a mind setted in this "gamemaker" world. ? So, what I need is a real book to order, about phaser or about HTML5 game development. I hope someone could understand it?

I want to build a top down, twin stick shooter and I wanted some help in figuring out the best way to implement it. There will be other buttons on screen as well. A static joystick is fine, no need of a dynamic one. I have tried out the vjoy plugin, but I didn't find it good enough as it only had events for up, down, left and right. I want more specific information. Should I just use pointers or is there a way to implement nippplejs, or is there a better option?

I have one array having 3 phaser groups as follows code:1 exp_s = game.add.group() ; exp_s.physicsBodyType = Phaser.Physics.ARCADE ; exp_s.enableBody = true ; exp_s.scale.setTo(0.9) ; exp_m = game.add.group() ; exp_m.physicsBodyType = Phaser.Physics.ARCADE ; exp_m.enableBody = true ; exp_m.scale.setTo(0.7) ; exp_l = game.add.group() ; exp_l.physicsBodyType = Phaser.Physics.ARCADE ; exp_l.enableBody = true ; exp_l.scale.setTo(0.5) ; em_group.push(exp_s,exp_m,exp_l) ; added animations as follows: code:2 em_group.forEach((group,index)=> { group.callAll('animations.add','animations', `blink${index+1}`, [0,1,2], 10, true) ; group.callAll('animations.play', 'animations', `blink${index+1}`) ; }) ; now inside a loop event i'm creating meteors using : meteor = em_group[index].create(xpos,-150,sprite_alias,0) ; here sprite_alias is the id given to the spritesheet of meteors. But when meteors are created in game, animation is not starting. but if i use code 2 in loop event it will start animation but so many animation calls are reducing the performance of my game. Pls help to fix this problem.

I am trying to make a game so I tried to load a tileset, to help me make the game, but when I try to play my game, this shows on the console- ```Cannot read property 'addTilesetImage' of undefined``` This is my code: ``` Ball.Level1 = function (game) {}; Ball.Level1.prototype = { create: function () { var map; var layer; this.map.addTilesetImage('element-h'); this.map.addTilesetImage('element-w'); this.map = this.game.add.tilemap('map', 32, 32); this.layer = this.map.createLayer(0); this.layer.resizeWorld(); } }; ``` this is what I pre-load! ``` this.load.image('element-w', 'img/element-w.png'); this.load.image('element-h', 'img/element-h.png'); this.load.tilemap('map', 'img/Teste.csv'); ``` Thank for your help!

I'm working with 2.6.2 and drawing some webfonts directly instead of bitmap fonts. I know rendering a vectorial font is an expensive operation and I was thinking of just rendering it to a separate BitmapData and then use the BitmapData as an image instead, but since Phaser 1 performance on text rendering seems to have improved a lot, so I was wondering if these optimizations are maybe already done behind the scenes by Phaser, but didn't find anything on the source code so far. Does anybody know?

there seems to be something wrong with the code, one button has to slow down and one button to speed up when I add this code, this.downButton = this.add.image(80, 530, 'up-bubble').setInteractive(); this.upButton = this.add.image(230, 530, 'down-bubble').setInteractive(); this.input.on('gameobjectup', function (pointer, gameobject) { if (gameobject === this.downButton && this.spinSpeed > 0) { this.spinSpeed -= 0.1; } else if (gameobject === this.upButton && this.spinSpeed < 9.9) { this.spinSpeed += 0.1; } }); but, when I add this code between generateBalls (), it doesn't work at all, it doesn't work, generateBalls() { const hitArea = new Phaser.Geom.Rectangle(0, 0, 32, 32); const hitAreaCallback = Phaser.Geom.Rectangle.Contains; const circle = new Phaser.Geom.Circle(400, 300, 220); const balls = this.add.group(null, { key: 'balls', frame: [0, 1, 5], repeat: 5, setScale: { x: 3, y: 3 }, hitArea: hitArea, hitAreaCallback: hitAreaCallback, }); this.downButton = this.add.image(80, 530, 'up-bubble').setInteractive(); this.upButton = this.add.image(230, 530, 'down-bubble').setInteractive(); this.input.on('gameobjectup', function (pointer, gameobject) { if (gameobject === this.downButton && this.spinSpeed > 0) { this.spinSpeed -= 0.1; } else if (gameobject === this.upButton && this.spinSpeed < 9.9) { this.spinSpeed += 0.1; } }); Phaser.Actions.PlaceOnCircle( balls.getChildren(), circle); return balls; } generateDance() { this.spinSpeed = 0.003; return this.tweens.addCounter({ from: 220, to: 160, duration: 9000, delay: 2000, ease: 'Sine.easeInOut', repeat: -1, yoyo: true }); } update() { this.playerEyes.update(); Phaser.Actions.RotateAroundDistance( this.balls.getChildren(), { x: 400, y: 300 }, this.spinSpeed, this.dance.getValue()); } I took the code from the Phaser 3 example this is https://phaser.io/examples/v3/view/tweens/tween-time-scale

Hey guys!...I am new to Phaser. I have an issue. When I am printing text on screen the text and its stroke is getting blur. What should I do now. Text is looking ugly

Hi I am new to game development. I have an issue.. here is the screenshot of my game which I am developing. My screen is scrollable with phaser_kinetic scroller. When I scroll the sheets with numbers it should be masked from the white line and and disappear the part of group sprite which is crossing the line. How can I achieve that. I used graphics to mask. But the graphics also hides the background. I dont want background to be hidden.

I have created a mobile game called Fantasy Wars released on the Apple App and Google Play store. I have been focused on developing the sequel to the game, so I have not had much time focusing on adding features and updates to Fantasy Wars. Fantasy Wars is a turn-based strategy game where six fantasy races: Humans, Orcs, Elves, Undead, Dwarves, and Drow combat on a world map similar to the board game Risk. Each race has a distinct special making them all unique. I am looking for a game designer that can come up with adding new features to the game including new fantasy races. The new races need to be balanced and unique in regards to their special and strategy. Finally, for anyone interested, please try out and understand the game before contacting me.

I am trying to put all my phaser 3 games into one ionic 4 application. I found the following example which works perfectly for phaser 2 (https://store.enappd.com/product/ionic-phaser-game-framework-ionic-4/). however when I try to update to phaser three the screen goes blank. I imagine one of the problems is to do with how scenes have replaced states. does anyone have any ideas how to get around this or is this example workable anymore?? below is some code export class HomePage { constructor(private menuCtrl: MenuController) { game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'space- invaders', { preload: this.preload, create: this.create, update: this.update, render: this.render } ); that = Object.create(this.constructor.prototype); } preload() { this.load.image('bullet', 'assets/phaser/bullet.png'); game.load.image('enemyBullet', 'assets/phaser/enemy-bullet.png'); } } game.load works for phaser 2, if I use this.load in ionic it throws the following error ‘Property ‘load’ does not exist on type ‘HomePage’.’ With these changes to phaser is this method even possible??

How to drag sprite on a path like there https://cdn-factory.marketjs.com/en/mcdonalds-playable-ad/index.html ? Thanks a lot!

I have a group that contains a large number of children that are P2 physics objects. When I tween the group the sprites all move correctly, but their collisions occur in the position they were prior to the tween. Is there a good way to update the position of the bodies of all the children? Heres some super simplified code incase it helps: game.physics.startSystem(Phaser.Physics.P2JS); const collisionGroup1 = game.physics.p2.createCollisionGroup(); const collisionGroup2 = game.physics.p2.createCollisionGroup(); const targetsGroup = game.add.group(0,0); const ammoGroup = game.add.group(0,300); const target1 = targetsGroup.create(0,0, "key"); const target2 = targetsGroup.create(50,0, "key"); game.physics.enable(target1, Phaser.Physics.P2JS); game.physics.enable(target2, Phaser.Physics.P2JS); target1.body.setCollisionGroup(collisionGroup1); target1.body.collides(collisionGroup2); target2.body.setCollisionGroup(collisionGroup1); target2.body.collides(collisionGroup2); const bullet = ammoGroup.create(0,0, "key2"); game.physics.enable(bullet, Phaser.Physics.P2JS); bullet.body.setCollisionGroup(collisionGroup2); bullet.body.collides(collisionGroup1); game.add.tween(targetsGroup.position).to( {y: "-100"}, 300, Phaser.Easing.Quadratic.Out, true ); Any help would be greatly appreciated, cheers

I Use "phaser-ce": "^2.10.0". I want to integrate razorpay payment gateway in phaser es6 webpack. There is sample code in razorpay this is the URL - https://github.com/razorpay/razorpay-cordova . In this URL i add the plugin. But i don't know how to import into sample state or any other methods there ? Any one share your knowledge how to import plugins? Please Help Us.

How to load sound in a game at runtime using ajax call

I'm using the Phaser Editor (newest version, 1.5.3) to make a game, and the "Run Phaser Project" button won't work at all, nothing happens when I click it when my project is open. The internal browser option works but it doesn't seem to have a console log, which I need to be able to see. I have no idea what's going on, is this a bug? Thanks in advance!

hi, I'm try load an image from url for my game.it shows cross origin error. I try like this,(sample code) game.load.baseURL = 'url'; game.load.crossOrigin = 'anonymous'; game.load.image('image', 'assets/images'); If anyone know solution to load image from url please help me. Thanks in advance.

I'm trying to add a bubble-pop spritesheet animation to my game. I have added other sprites fine, and when I add the sprite for the bubble, everything is still good. However, when I go to add the animations, I get an error, "Cannot read property 'add' of undefined. How can I animate the bubble? var config = { type: Phaser.AUTO, width: 1366, height: 768, parent: "canvas", scene: { preload: preload, create: create} }; var game = new Phaser.Game(config); function preload () { this.load.image('freeplayBG', 'images/freeplay-BG.png'); this.load.image('shark', 'images/nice-shark.png'); this.load.spritesheet('bubblePop', 'images/bubble_pop_under_water_spritesheet.png', {frameWidth: 394, frameHeight: 511} ); } function create() { //Set background this.add.image(685, 384, 'freeplayBG'); //Set shark and make draggable var shark = this.add.sprite(200, 300, 'shark').setInteractive(); this.input.setDraggable(shark); this.input.dragDistanceThreshold = 16; this.input.on('drag', function (pointer, gameObject, dragX, dragY) { gameObject.x = dragX; gameObject.y = dragY; }); //create the bubble sprite var bubble = this.add.sprite(700, 300, 'bubblePop'); console.log(bubble); //Sprite {_events: Events, _eventsCount: 0, scene: Scene, type: "Sprite", parentContainer: null, …} console.log(bubble.animations); // undefined console.log(this) //Scene {sys: Systems, game: Game, anims: AnimationManager, cache: CacheManager, plugins: PluginManager, …} bubble.animations.add('pop'); //error happens here bubble.animations.play('pop', 10, false, true);

How to add and use blendModes in phaser. And how to use blendModes to bitmap images. Thanks,

How can i enable input for bitmap

How can I lebel my sprites with a text when I click on them? I have some different sprites that I need to give different names through clicking on them. Thanks in advance.

I'm writing a 2D space shooter. It started as a single player Phaser2 game a couple of years back, and now it's multiplayer with socketcluster.io providing the back end on node.js. The game is at the point where performance is starting to matter (and degrade), and I'm having a bad time rendering the slither.io-quantity of sprites on the screen. I'm probably just writing bad code, and I'm quite happy to work through that myself, but I'm not sure that I'm using the right frameworks underneath, and I'd like some help sorting that out before I start working through the problems I am having. What I'm wondering is whether I should persist with Phaser2 and socketcluster.io and debug my performance issues here (Chrome dev-tools reckons that most of my time is being spent in drawImage or textaImage2D in Phaser2), or if I should first upgrade from Phaser2 to something else like Phaser3 or PIXI4? Perhaps socketcluster is not as important as I once thought? Can anyone give me a kick in the right direction on this? Thanks!