Search the Community

Hi Myself and my friend are currently working on a game using Phaser 2.8.4 and have noticed an odd graphical glitch that we can't seem to diagnose or get rid of. As you can see in the attached GIFs when a sprite gets near to the left or top edge of the viewport it compresses and when it moves away it extends back to its original form. Those are static sprites but it seems to affect all sprites. This does not occur at the right or bottom edges of the viewport. Does anyone have any insight as to what is going on here? Thanks!

So I'm getting these weird collision glitches, where I get knocked back randomly. This only seems to happen when I set my sprite's body's width to 8, as opposed to the sprite's width of 16. I'm using Arcade physics, if that makes a difference.

Hi there, Is there any kind of renderer.sortObjects() or renderer.depthTest() like other frameworks have? I have several transparent objects (alpha < 1.0) on the scene and sometimes renderer behaves glitchy (please see attachment). Theoretically, could write a function for sorting meshes by a distance to camera and set .alphaIndex, but it doesn't solve the problem with self-intersection like frame does c) & b). Babylon.JS 3.01, materials are PBRMaterial() with .disableDepthWrite = false and .alphaMode = 2. Any ideas? Thanks in advance!

Hi everyone Finished working on game made with Phaser for #gbjam5 , here's link https://quiphop.itch.io/codeine-massacre So, all U need to do is find codeine and survive trip with shotgun. For new info please read description under the game on itch.io. Thanks for reading this! <3

Hello everybody! I have recently submitted a game to the js13k competition and looking to know what people think of it! The game is a space invaders style game, with everything from a store, to mobile support. Check it out here! http://js13kgames.com/entries/anti-virus

Hello, I just started with Phaser and on nearly every HTML5 canvas I'm getting a large black square covering the left side and then tiny squares that flicker on the right. And then sometimes things get cut off or doubling happens. I'm using the latest version of Chrome. Has anyone else had this problem?

Hi! I added water material (latest from Github repo) to my BJS (2.3 alpha) scene, showed it to my friend and got back print screen below. It also flickers from time to time. Graphics card is Nvidia Geforce 550 Ti, with latest drivers (updated today) Issue can be reproduced on BJS Playground in the materials section for water: http://www.babylonjs-playground.com/#1SLLOJ#17

I tried to build scene using very huge value of position XYZ and got some glitches. http://www.babylonjs-playground.com/#1180R5#1 Strange behavior of scene when you move the camera around. And faces look bad on zoom-in.

I have a game that is only 11mb right now, but after finally wrapping the game with CocoonJS, I noticed the the game would go from 60fps to <15fps in about 10 seconds. I think the only way the game could be slowing down is having something like an infinite array; I have an array that I push to to get the direction of a swipe, then I set that array to an empty array to prevent an infinite array.

Hi there. I'm currently scratching my head at a little graphics glitch I've been having. I'm hoping someone here can help me out. http://i.imgur.com/af7tUsG.jpg These lines occur intermittently, and only when moving. Here is the setup: The tiles each have their own container, with usually around 2-3 sprites for walls and 1 for floors. The positions of the tiles are set once, and added to a world container. Empty solid grey space is just empty, no containers/sprites. The world container is then added to the root container and translated around the camera. So despite the fact that I have handed all control over the translation of individual tiles to Pixi, this still happens. I'm honestly stumped. Thank you for any support you could give me on this matter.

I am using PIXI v3.x and I have added a bunch of sprites to a container. The container looks like this: Which is confusing to me because each square sprite is flush with the others so the black lines in between don't make any sense. The lines also seem to get larger and smaller when I zoom in and out or move the container. The original images for the sprites look like these: Can someone help me figure out where these black lines are coming from and get rid of them? Regards, Jordan

Hi! Im on the final stages of my development in my Phaser Game Its a simple game of using the accelerometer to guide a ball to a hall and navigating through walls I extensively tested this game on the web browsers and its ok but when I use phonegap and tested it on mobile phones the FPS ranges from 20 - 45 ish which was still ok for me until the game suddenly falls apart by physics glitch. Is this about the lag or just that there is a physics problem? Here; Ball.GameEasy = function(game) { keys = null; ball = null; walls = null; timer = 0; totalTimer = 0; timer2 = 0; loop = null; firstRun = true; level = 1; //sfx_bounce = null; maxLevels = 5; audio = true; timer3 = 0; gamedif = 0; };Ball.GameEasy.prototype = { create: function() { this.add.sprite(0, 0, 'screen-bg'); panel = this.add.sprite(0, 0, 'panel'); panel.body.immovable = true; walls = this.game.add.group(); walls.add(panel); pauseButton = this.add.button(320-36-8, 8, 'button-pause', this.managePause, this); //audioButton = this.add.button(320-36-8-36-8, 8, 'button-audio', this.manageAudio, this); //audioButton.animations.add('true', [0], 10, true); //audioButton.animations.add('false', [1], 10, true); //audioButton.animations.play(audio); timerText = this.game.add.text(15, 15, "Time: "+timer, { font: "24px Cambria", fill: "#ffff00" }); levelText = this.game.add.text(120, 10, "Level: "+level, { font: "16px Cambria", fill: "#ffff00" }); totalTimeText = this.game.add.text(120, 30, "Total time: "+totalTimer, { font: "16px Cambria", fill: "#ffff00" }); fpsText = this.game.add.text(15,40, "fps: "+timer3, { font: "16px Cambria", fill: "#ffff00" }); hole = this.add.sprite((320)/2, 90, 'hole'); hole.body.immovable = true; hole.anchor.setTo(0.5, 0.5); hole.body.setCircle(5,15,15); ball = this.add.sprite((320)/2, 450, 'ball'); ball.anchor.setTo(0.5, 0.5); ball.body.bounce.setTo(0.3, 0.3); ball.body.setCircle(11, 12, 12); ball.body.linearDamping = 1; ball.body.collideWorldBounds = true; keys = this.game.input.keyboard.createCursorKeys(); window.addEventListener("deviceorientation", this.handleOrientation, true); /*if(!loop) { loop = this.game.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this); //loop = this.game.time.events.loop(1500, this.updateCounter, this); level = 1; }*/ this.createLevel(level); //sfx_bounce = this.game.add.audio('bounce'); }, createLevel: function(lvl) { // create levels manually // TODO: import from level editor switch(lvl) { case 1: { //totalTimer=0; gamedif = 0; timer2= 0; timer = 11; this.game.paused =! this.game.paused; walls.create((320-128)/2, (480-32)/2, 'element-w').body.immovable = true; break; } case 2: { timer = 11; this.game.paused =! this.game.paused; this.game.paused =! this.game.paused; walls.create(72, 320, 'element-w').body.immovable = true; walls.create(200, 320, 'element-h').body.immovable = true; walls.create(72, 150, 'element-w').body.immovable = true; break; } case 3: { timer = 11; this.game.paused =! this.game.paused; this.game.paused =! this.game.paused; walls.create(64, 480-128, 'element-h').body.immovable = true; walls.create(320-96, 480-128, 'element-h').body.immovable = true; walls.create(0, 240, 'element-w').body.immovable = true; walls.create(128, 240, 'element-w').body.immovable = true; walls.create(200, 52, 'element-h').body.immovable = true; break; } case 4: { timer = 11; this.game.paused =! this.game.paused; this.game.paused =! this.game.paused; walls.create(110-32, 480-128-32, 'element-w').body.immovable = true; walls.create(0, 240, 'element-w').body.immovable = true; walls.create(320-128, 240, 'element-w').body.immovable = true; walls.create(30, 150, 'element-w').body.immovable = true; walls.create(128+30, 150, 'element-w').body.immovable = true; break; } case 5: { timer = 11; this.game.paused =! this.game.paused; this.game.paused =! this.game.paused; walls.create(220-32, 480-128, 'element-h').body.immovable = true; walls.create(92, 480-128-32, 'element-w').body.immovable = true; walls.create(0, 240, 'element-w').body.immovable = true; walls.create(128, 240, 'element-w').body.immovable = true; walls.create(256, 240, 'element-h').body.immovable = true; walls.create(180, 52, 'element-h').body.immovable = true; walls.create(52, 148, 'element-w').body.immovable = true; break; } case 6:{ timer = 11; this.game.paused =! this.game.paused; walls.create(190,320,'element-w').body.immovable = true; walls.create(0,320,'element-w').body.immovable = true; walls.create((320-128)/2, (480-32)/2, 'element-w').body.immovable = true; walls.create(256, 150, 'element-h').body.immovable = true; walls.create(40, 150, 'element-h').body.immovable = true; break; } case 7:{ timer = 11; this.game.paused =! this.game.paused; walls.create(190,320,'element-w').body.immovable = true; walls.create(0,320,'element-w').body.immovable = true; walls.create((320-128)/2, (480-32)/2+40, 'element-w').body.immovable = true; walls.create(256, 150, 'element-h').body.immovable = true; walls.create(40, 150, 'element-h').body.immovable = true; walls.create(206, 118, 'element-w').body.immovable = true; walls.create(0, 118, 'element-w').body.immovable = true; walls.create(256/2+14.5, 113, 'element-h').body.immovable = true; break; } case 8: { timer = 11; this.game.paused =! this.game.paused; walls.create(220-32, 480-128, 'element-h').body.immovable = true; walls.create(92, 480-128-32, 'element-w').body.immovable = true; walls.create(0, 240, 'element-w').body.immovable = true; walls.create(128, 240, 'element-w').body.immovable = true; walls.create(256, 240, 'element-h').body.immovable = true; walls.create(180, 52, 'element-h').body.immovable = true; walls.create(52, 148, 'element-w').body.immovable = true; break; } case 9: { timer = 11; this.game.paused =! this.game.paused; walls.create(220-32, 480-128, 'element-h').body.immovable = true; walls.create(92, 480-128-32, 'element-w').body.immovable = true; walls.create(0, 240+24, 'element-w').body.immovable = true; walls.create(128, 240+24, 'element-w').body.immovable = true; walls.create(256, 240+24, 'element-h').body.immovable = true; walls.create(180, 52, 'element-h').body.immovable = true; walls.create(180-70, 52, 'element-h').body.immovable = true; walls.create(24, 360, 'element-w').body.immovable = true; walls.create(220-32-60, 480-128+68, 'element-h').body.immovable = true; break; } case 10: { timer = 11; this.game.paused =! this.game.paused; walls.create(220-32, 480-128, 'element-h').body.immovable = true; walls.create(92, 480-128-32, 'element-w').body.immovable = true; walls.create(0, 240+24, 'element-w').body.immovable = true; walls.create(128, 240+24, 'element-w').body.immovable = true; walls.create(256, 240+24, 'element-h').body.immovable = true; walls.create(128+24, 240+24-60, 'element-w').body.immovable = true; walls.create(0+24, 240+24-60, 'element-w').body.immovable = true; walls.create(128+24+128, 240+24-60, 'element-w').body.immovable = true; walls.create(128, 240+24-60-24-32, 'element-w').body.immovable = true; walls.create(0, 240+24-60-24-32, 'element-w').body.immovable = true; walls.create(128+128+24, 240+24-60-24-32, 'element-w').body.immovable = true walls.create(24, 360, 'element-w').body.immovable = true; walls.create(220-32-60, 480-128+68, 'element-h').body.immovable = true; break; } default: { break; } } }, updateCounter: function() { timer=timer-(timer3/timer3); timer2++; timerText.content = "Time: "+timer; totalTimeText.content = "Total time: "+(totalTimer+timer2); if(timer==0) { //gamedif=1; //this.game.add.text(320/3, 480/2, "GAMEOVER", { font: "36px Cambria", fill: "#ffff00" }); totalTimer=0; timer=0; timer2=0; level=1; this.game.state.start('GameOver',true,false,gamedif); //this.game.paused =! this.game.paused; //this.buttonContinue = this.add.button(0, 0, 'gameover', this.mainM, this); //this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.game.state.start('MainMenu');, this); } }, mainM: function(){ this.game.state.start('MainMenu'); }, managePause: function() { this.game.paused =! this.game.paused; }, manageAudio: function() { // turn on/off the audio audio =! audio; audioButton.animations.play(audio); console.log('audio: '+audio); }, update: function() { if(!loop) { //loop = this.game.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this); loop = this.game.time.events.loop(1000, this.updateCounter, this); level = 1; } timer3 = this.game.time.fps; fpsText.content = "FPS: "+timer3; var force = 10; if(keys.left.isDown) { ball.body.velocity.x -= force; } else if(keys.right.isDown) { ball.body.velocity.x += force; } if(keys.up.isDown) { ball.body.velocity.y -= force; } else if(keys.down.isDown) { ball.body.velocity.y += force; } this.game.physics.collide(ball, walls, this.wallCollision, null, this); this.game.physics.collide(ball, hole, this.finishLevel, null, this); }, wallCollision: function() { //sfx_bounce.play(); }, finishLevel: function() { if(level >= maxLevels) { //totalTimer += timer; //alert('Congratulations, game completed!\nTotal time of play: '+totalTimer+' seconds! exit the game'); alert('Congratulations, Easy game completed!\nTry the Medium Difficulty'); timer = 0; level = 1; //totalTimer = 0; this.game.state.start('MainMenuMedium'); } else { alert('Congratulations, level '+level+' completed!\nTotal time:'+timer2+''); this.game.paused =! this.game.paused; timer = 0; level++; totalTimeText.content = "Total time: "+timer2; levelText.content = "Level: "+level; this.game.state.start('GameEasy'); } }, handleOrientation: function(e) { var x = e.gamma; // range [-90,90] var y = e.beta; // range [-180,180] ball.body.velocity.x += x/2; ball.body.velocity.y += y; }};`How can I stop the physics glitch? Im using an old version of phaser.min.js which is about 376 kb now its 724 phaser 2.2.2 but my problem is when I use the new one the code tells me a problem about Phaser.StageScaleMode is undefined Will updating phaser version solve this problem? Thanks

In my code im trying to have 3 diff colour blocks spawn in various areas on the screen, but one of the three red blocks spawns exactly on top of a blue one every single time. It makes no sense as I am using a math.random and have even used a game.add.text to make sure that the numbers aren't exactly the same yet it keeps happening. The relevant code is in green, thanks for any help. My code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,});var Rx = Math.random () * 800; // ball spawns in a random placevar Ry = Math.random() * 600; // X and Y coordinate for each colour blockvar Bx = Math.random () * 800; var By = Math.random() * 600;var Gx = Math.random () * 800 var Gy = Math.random() * 600;var text; var colours = ["redBlock","greenBlock","blueBlock"];var colour = colours[Math.floor(Math.random()*2)]; function preload() {cursors = game.input.keyboard.createCursorKeys(); //allows keyboard inputthis.game.load.image("block","assets/block.png");this.game.load.image("redBlock","assets/red.png");this.game.load.image("greenBlock","assets/green.png");this.game.load.image("blueBlock","assets/blue.png");} function create() {this.game.physics.startSystem(Phaser.Physics.ARCADE);this.game.scale.pageAlignHorizontally = true; //centers canvasthis.game.scale.pageAlignVertically = true;this.game.scale.refresh(); for (var i = 0; i < 3 ; i++){Rblock = this.game.add.sprite(i * Rx,i * Ry,"redBlock"); // x and y are randomy coordinates the ball spawns atthis.game.physics.arcade.enable(Rblock);Rblock.body.velocity.setTo(200,200);Rblock.body.collideWorldBounds = true; Rblock.body.bounce.set(1);} for (var i = 0; i < 3; i++){Bblock = this.game.add.sprite(i * Bx,i * By,"blueBlock"); // x and y are randomy coordinates the ball spawns atthis.game.physics.arcade.enable(Bblock);Bblock.body.velocity.setTo(200,200);Bblock.body.collideWorldBounds = true; Bblock.body.bounce.set(1);} for (var i = 0; i < 3 ; i++){Gblock = this.game.add.sprite(i * Gx,i * Gy,"greenBlock"); // x and y are randomy coordinates the ball spawns atthis.game.physics.arcade.enable(Gblock);Gblock.body.velocity.setTo(200,200);Gblock.body.collideWorldBounds = true; Gblock.body.bounce.set(1);} player = this.game.add.sprite(10,10,"block");this.game.physics.arcade.enable(player);player.anchor.set(0.5);player.body.drag.set(100);player.body.maxVelocity.set(300);//player.scale.setTo(0.2,0.2);player.body.collideWorldBounds = true; game.add.text(16,16,Rx + Ry);game.add.text(16,40,Bx + By);} function update() { if (cursors.up.isDown){this.game.physics.arcade.accelerationFromRotation(player.rotation,200,player.body.acceleration);}else{player.body.acceleration.set(0);}if (cursors.left.isDown){player.body.angularVelocity = -300} else if(cursors.right.isDown){player.body.angularVelocity = 300;}else{player.body.angularVelocity = 0;}}

I'm trying to spawn a randomly coloured block and to do so I am using math.random and the console says everything is loading but the assets aren't loading. There are no errors in it but can anyone find an error that might be causing the assets not to load? Parts of the code that's relevant is coloured green. Thanks for any help. My Code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,});var x = Math.floor(Math.random () * 800); // ball spawns in a random placevar y = Math.floor(Math.random() * 600);var text; var colour = Math.random() * 3;function preload() {cursors = game.input.keyboard.createCursorKeys(); //allows keyboard inputthis.game.load.image("block","assets/block.png");this.game.load.image("redBlock","assets/red.png");this.game.load.image("greenBlock","assets/green.png");this.game.load.image("blueBlock","assets/blue.png");} function create() {this.game.physics.startSystem(Phaser.Physics.ARCADE);this.game.scale.pageAlignHorizontally = true; //centers canvasthis.game.scale.pageAlignVertically = true;this.game.scale.refresh(); block = this.game.add.sprite(x,y,"colour"); // x and y are randomy coordinates the ball spawns atthis.game.physics.arcade.enable(block);block.body.velocity.setTo(200,200);block.body.collideWorldBounds = true; block.body.bounce.set(1); player = this.game.add.sprite(10,10,"block");this.game.physics.arcade.enable(player);player.scale.setTo(0.2,0.2);player.body.collideWorldBounds = true;} function update() { player.body.velocity.x = 0;player.body.velocity.y = 0; if(colour < 1){colour = "redBlock";} if(colour < 2){colour = "blueBlock";} if(colour < 3){colour = "greenBlock";} if(cursors.left.isDown){player.body.velocity.x += -200; } if(cursors.right.isDown){player.body.velocity.x += 200;} if(cursors.down.isDown){player.body.velocity.y += 200;} if(cursors.up.isDown){player.body.velocity.y += -200;}}

http://kittycopter.blaspix.com/ Make flying Kitty and collect stars while avoiding cactus and flying frogs!Invite your friends to see who can get the highest score!Available On iPhone, iPad, Android, Mobile Web, Facebook.com Made with Panda.js, Glitch and CocoonJS

http://kittycopter.blaspix.com/ Make flying Kitty and collect stars while avoiding cactus and flying frogs!Invite your friends to see who can get the highest score!Available On iPhone, iPad, Android, Mobile Web, Facebook.com Made with Panda.js, Glitch and CocoonJS I want to thank in particular @enpu for its pleasant supports and his awesome work.

This is the main question, I posted it on Stack Overflow so here's the link: http://stackoverflow.com/questions/17132342/html5-canvas-collision-with-ball-physics-glitch

This is just awesome - so many classic sprites to spot