noobshit Posted June 13, 2016 Share Posted June 13, 2016 I want to create game with unlimited world. I decided to make world wrap to move player and items to new position when player reaches end of world. wrapHorizontal() { let padding = game.width/2; let player = this.intoHell.player; if ( player.x + padding > game.world.width) { this.wrapped.x += 1; this.intoHell.player.x = padding; this.intoHell.background.sky.tilePosition.x += 2*padding; this.intoHell.items.x -= game.world.width - 2*padding; } else if ( player.x - padding < 0 ) { this.wrapped.x -= 1; this.intoHell.player.x = game.world.width - padding; this.intoHell.background.sky.tilePosition.x -= 2*padding; this.intoHell.items.x += game.world.width - 2*padding; } } But it makes items/sky blink. I use this function everytime in update() and I move player using body.velocity from arcade physics system. What can be cause of this behavior? intohell.zip EDIT: https://github.com/noobshit/intohell Link to comment Share on other sites More sharing options...
noobshit Posted June 14, 2016 Author Share Posted June 14, 2016 var game = new Phaser.Game(512, 512, Phaser.AUTO); var Demo = (function () { function Demo() { } Demo.prototype.preload = function () { game.load.image('player', 'assets/player.png'); game.load.spritesheet('coin', 'assets/coin.png', 44, 40); game.load.image('sky', 'assets/sky.png'); }; Demo.prototype.create = function () { game.world.setBounds(0, 0, 1024, 512); this.sky = game.add.sprite(0, 0, 'sky'); this.player = game.add.sprite(256, 256, 'player'); this.items = game.add.group(); for (var i = 0; i < 50; i++) { var x = game.rnd.integerInRange(0, game.world.width); var y = game.rnd.integerInRange(0, game.world.height); this.items.create(x, y, 'coin'); } this.cursors = game.input.keyboard.createCursorKeys(); game.camera.follow(this.player); }; Demo.prototype.update = function () { var speed = 10; if (this.cursors.left.isDown) { this.player.x -= speed; } else if (this.cursors.right.isDown) { this.player.x += speed; } var padding = game.width / 2; if (this.player.x + padding > game.world.width) { this.player.x = padding; this.items.x -= 2 * padding; } else if (this.player.x - padding < 0) { this.player.x = -padding + game.world.width; this.items.x += 2 * padding; } }; return Demo; }()); game.state.add('Demo', Demo); game.state.start('Demo'); <html> <head> <script src="js/phaser.min.js"></script> </head> <body> <script src="js/demo.js"></script> </body> </html> I'm using phaser 2.4.8. How it looks in chrome... https://vid.me/7kuZ Link to comment Share on other sites More sharing options...
Recommended Posts