Search the Community

Need some help. I try to find what I am missing hear for days. But I don't get it.. Maybe someone of you can point me in the right direction. A moving sprite, that is followed by the camera, disappears on "certain" areas. For example in one scene: it disappears in the upper left and most left areas of the scene. In some others on all areas around the borders of the world. - Tilemaps and every other object are still visible. 1. The moving sprite does not involve any alpha 0 / 1 settings 2. The moving sprite does not die/destroy 3. The moving sprite does not set any kind of BlendMode 4. The moving sprite does not set any visibility 5. There are NO overlays that could cover up the moving sprite 6. Worldbounds and main cameras bounds are set (code below) this.physics.world.setBounds(0, 0, this.map.widthInPixels * SCALE, this.map.heightInPixels * SCALE, true, true, true, true); this.cameras.main.setBounds(0, 0, this.map.widthInPixels * SCALE, this.map.heightInPixels * SCALE); I also tested adding a second camera, it is the same behavior, but here I can see, any time the moving sprite disappears, the camera background is set to a different color... and I don't know why this is happening. The game's code is too much to post it all. But basically, the only thing with bounds that is set, are the two lines, I posted here. At this time it is quite confusing and I already spend days investigating in it. I got no clue, why this is happening. Any hint is highly appreciated! cheers

I just tried to set the world bounds for a player sprite in a responsive game with the following config: const config = { width: window.innerWidth * window.devicePixelRatio, height: window.innerHeight * window.devicePixelRatio, parent: 'canvas', type: Phaser.AUTO, physics: { default: 'arcade', arcade: { gravity: {y: 2500}, debug: false } }, scene: [ Preloader, Game ] }; In the game itself, i created a player sprite like this: this.player = this.physics.add.sprite(this.screenWidth * 0.2, this.screenHeight * 0.5, 'coin'); this.player.setCollideWorldBounds(true); It places the object correctly, and on desktop the player object hits the ground and stops there. On mobile, it does not stop at the bottom though, because of the pixel ratio. Is that a bug? Or is there just some settings to use setCollideWorldBounds correctly on mobile devices and responsive games?

Hello, I've started using phaser just recently, I'm making a RPG game, and so far I've been learning how to make tilemaps, use spritesheets, animate sprites, and I'm falling in love with the framework, I just have a little problem. My player is set to collide with World Bounds, and it works for every bound, except the top one. I'm using the es6 webpack template, here's my, so far piece of code. create() method of my Game.js class. (I have nothing else in update, since I manage that in my own Sprite Class) this.game.world.setBounds(0, 0, 100 * 32, 100 * 32) this.game.physics.startSystem(Phaser.Physics.P2JS) this.game.time.advancedTiming = true this.game.stage.smoothed = false this.game.physics.p2.setImpactEvents(true) /* SET GAME MAP */ this.map = game.add.tiledmap('map') this.player = new Player({ game: this.game, x: 0, y: 0, lookId: 0, health: 100, mana: 100 }) this.game.world.setBounds(0, 0, 100 * 32, 100 * 32) Sprite Class import Phaser from 'phaser' import { Outfits } from './Outfits' const IMAGES = '../../assets/images/' const LOOK = { UP: 0, DOWN: 4, RIGHT: 2, LEFT: 6 } export default class extends Phaser.Sprite { constructor ({ game, x, y, lookId, health, mana }) { super( game, x * 32, y * 32, Outfits[lookId].sheets[0], Outfits[lookId].frame ) this.outfit = Outfits[lookId] this.mana = mana this.health = health this.smoothed = false this.anchor.setTo(1, 1) game.physics.p2.enable(this) this.body.setRectangle(32, 32) this.body.debug = true this.body.fixedRotation = true this.body.offset.x = -16 this.body.offset.y = -16 this.cursors = game.input.keyboard.createCursorKeys() game.camera.follow(this) game.add.existing(this) } /** * SETS A NEW FRAME TO THE PLAYER SPRITE LOOKING */ playerPosition (difference) { let spriteId = this.outfit.frame + difference let lastSprite = 143 if (spriteId > lastSprite) { this.loadTexture(this.outfit.sheets[1]) return spriteId - lastSprite } else { this.loadTexture(this.outfit.sheets[0]) return spriteId } } update () { this.body.setZeroVelocity() console.log('World position', this.worldPosition) // this.animations.play('moveUp', 5, true) if (this.cursors.up.isDown) { this.frame = this.playerPosition(LOOK.UP) // if (this.worldPosition.y <= 0) return this.body.moveUp(1000) // this.animations.play('up', 5, true) } if (this.cursors.right.isDown) { this.body.moveRight(1000) // this.animations.play('right', 5, true) this.frame = this.playerPosition(LOOK.RIGHT) } if (this.cursors.down.isDown) { this.body.moveDown(1000) this.frame = this.playerPosition(LOOK.DOWN) // this.animations.play('down', 5, true) } if (this.cursors.left.isDown) { this.body.moveLeft(1000) this.frame = this.playerPosition(LOOK.LEFT) // this.animations.play('left', 5, true) } // // if (this.game.camera.atLimit.x) { // console.log('LimitX', this.game.world) // // starfield.tilePosition.x -= (ship.body.velocity.x * game.time.physicsElapsed); // } // // if (this.game.camera.atLimit.y) { // console.log('LimitY', this.game.world) // // starfield.tilePosition.y -= (ship.body.velocity.y * game.time.physicsElapsed); // } // this.game.input.keyboard.onUpCallback = e => { // this.player.animations.stop() // if (e.keyCode == Phaser.Keyboard.UP) { // this.player.frame = this.playerStartingFrame + 3 // } // if (e.keyCode == Phaser.Keyboard.DOWN) { // this.player.frame = this.playerStartingFrame // } // if (e.keyCode == Phaser.Keyboard.LEFT) { // this.player.frame = this.playerStartingFrame + 9 // } // if (e.keyCode == Phaser.Keyboard.RIGHT) { // this.player.frame = this.playerStartingFrame + 6 // } // } } } In summary my player does collide with world bounds but only bottom, left and right, not top.

Hello people, I have a problem with collision in my demo game. (800x800 pixels) It won't allow me to walk around. also there is no worldbounds because it doesn't work too. I have checked the console in different browser, but theres no error. EDIT: Yes, I have been checking out the examples etc, but got no clue what am doing wrong. window.RPG.Game.Main = function () { this.cursors = null;};window.RPG.Game.Main.prototype.preload = function() { // World map this.load.tilemap('demo-map', 'assets/tilemaps/demo-map.json', null, Phaser.Tilemap.TILED_JSON); // Sprites // {1} = Width frame // {2} = Height frame // {3} = how many frames - leave blank if frames fill up the entire PNG. this.load.spritesheet('player', '/assets/sprites/chara0.gif', 32, 32); // Images // {1} = Image name (in the map.json) // {2} = Image path (on the server) this.load.image('items', '/assets/sprites/items.png'); this.load.image('font0', '/assets/sprites/font0.png'); this.load.image('icon0', '/assets/sprites/icon0.png'); this.load.image('tiles', 'assets/sprites/map1.gif'); this.load.image('npcs', '/assets/sprites/npcs.png'); this.load.image('pad', '/assets/sprites/pad.png'); this.load.image('x', 'assets/sprites/x.png');};window.RPG.Game.Main.prototype.create = function () { //1 Physics this.game.physics.startSystem(Phaser.Physics.P2JS); // Camera controls this.cursors = this.input.keyboard.createCursorKeys(); this.game.world.setBounds(-800, -800, 1600, 1600); // Scaling the Camera to better zoom this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; // Define map variables var map, backgroundLayer, blockedLayer; // Load the map and objects map = this.add.tilemap('demo-map'); map.addTilesetImage('map1', 'tiles'); map.addTilesetImage('x', 'x'); map.createFromObjects('objectLayer'); // Render the background layer backgroundLayer = map.createLayer('backgroundLayer'); backgroundLayer.resizeWorld(); // Render the blocked layer blockedLayer = map.createLayer('blockedLayer'); blockedLayer.resizeWorld(); // Render the object layer map.createFromObjects('objectLayer'); blockedLayer.resizeWorld(); // Create player this.player = this.game.add.sprite(this.game.world.centerX,this.game.world.centerY, 'player'); // 0 = down // 1 = up // 2 = left // 3 = right this.player.direction = 0 // Animate player // 0, 1, 2, = which frames // 5 = frequency of change this.player.animations.add('walkD', [1, 0, 2], 5, true); this.player.animations.add('walkL', [9, 10, 11], 5, true); this.player.animations.add('walkR', [18, 19, 20], 5, true); this.player.animations.add('walkU', [27, 28, 29], 5, true); // Camera follows player position this.game.camera.follow(this.player); //1 physics enable on player //+ set body //+ collide with world bounds this.game.physics.p2.enable(this.player); this.player.body.setCircle(28); this.player.body.collideWorldBounds = true; };window.RPG.Game.Main.prototype.update = function () { //1 Stop moving on collision this.player.body.setZeroVelocity(); // Movement code here};

i am using this function to check if a body that jumped over a ramp (and therefore was set to sensor=true) has left the worldbounds and should be killed. this works for all edges of the world except for the left one.. i can manage to make it work by asking for if (body.x <0) {killit }but if i use the intersects method it will always return true even if x is much smaller than 0 if i console.log the game.world.bounds i get: b.Rectangle {x: 0, y: 0, width: 3200, height: 2560, offset: function…} so with the worldbounds it seems everything is ok.

In an example, using timers to spawn an object, the objects themselves drop to the bottom of the "world bound". How would I implement collision detection to the bottom of the world bound. In other words, how do I identify when the object touches the bottom of the world bound. My plan was to replicate this timer and remove the object when it touches the bottom of the world bound. How would I implement this. So far I've created a 'remove' function for when I figure this out. Pseudo code of what I was trying to do is down below: update function: this.game.physics.collide(objectGoesHere, [BOTTOM OF WORLD BOUND GOES HERE] , this.REMOVEFUNCTIONHERE, null, this);What would go in the "Bottom of World Bound Goes Here" to make it so that the object when colliding with the bottom of the world bound, like in the link given above, executes and then I can call a function to remove it. Thank you in advance.