Search the Community

Hello, I have a problem with my pixiJS App, i have many sprites that I can move in my scene and my goal and create a plan with collisions between sprites, for that I use the bump plugin and the rectangleCollision fuuntion :https://github.com/kittykatattack/bump/ let collision = b.rectangleCollision(selectCont,c2,true,false,true); It's works (the middle case on the pic)if my sprite have no rotation but if i want to apply a rotation on my sprite the collisions doesen't work (left and right case in the pic). I thnik it's a problem with sprite bounds but i have no idea. Can you help me please ? ?

Hi, I was playing around with a selection tool in my application and i wanted to highlight the current selected objects with a simple outline. However i noticed very strange behavior that i will illustrate below: this image was created using the (debug) code that you can find below, some observations and info: using sprite position + sprite width / height etc, has a weird offset that can see by comparing the blue line to the green line. using getbounds from PIXI and getbounds from box2d give the same result, yay! my graphic is drawn using coordinates around (0,0), so can be negative and positive coordinates body = this.selectedPhysicsBodies[i]; fixture = body.GetFixtureList(); while(fixture != null){ aabb.Combine(aabb, fixture.GetAABB()); fixture = fixture.GetNext(); } //BLUE LINE var sprite = body.myGraphic; this.graphics.lineStyle(2, 0x0000FF, 1); this.graphics.moveTo(sprite.x-sprite.width/2, sprite.y-sprite.height/2); this.graphics.lineTo(sprite.x+sprite.width/2, sprite.y-sprite.height/2); this.graphics.lineTo(sprite.x+sprite.width/2, sprite.y+sprite.height/2); this.graphics.lineTo(sprite.x-sprite.width/2, sprite.y+sprite.height/2); this.graphics.lineTo(sprite.x-sprite.width/2, sprite.y-sprite.height/2); bounds = sprite.getBounds(true); //GREEN LINE this.graphics.lineStyle(3, 0x00FF00, 1); this.graphics.moveTo(sprite.x+bounds.x, sprite.y+bounds.y); this.graphics.lineTo(sprite.x+bounds.x+bounds.width, sprite.y+bounds.y); this.graphics.lineTo(sprite.x+bounds.x+bounds.width, sprite.y+bounds.y+bounds.height); this.graphics.lineTo(sprite.x+bounds.x, sprite.y+bounds.y+bounds.height); this.graphics.lineTo(sprite.x+bounds.x, sprite.y+bounds.y); //RED LINE var lowerBoundPixi = getPIXIPointFromWorldPoint(aabb.lowerBound); var upperBoundPixi = getPIXIPointFromWorldPoint(aabb.upperBound); this.graphics.lineStyle(1, 0xFF0000, 1); this.graphics.moveTo(lowerBoundPixi.x, lowerBoundPixi.y); this.graphics.lineTo(upperBoundPixi.x, lowerBoundPixi.y); this.graphics.lineTo(upperBoundPixi.x, upperBoundPixi.y); this.graphics.lineTo(lowerBoundPixi.x, upperBoundPixi.y); this.graphics.lineTo(lowerBoundPixi.x, lowerBoundPixi.y); So we already found that using sprite position + width/height etc gives a weird result, but it will get funkier: Here you can find an object rotated 90 degree, some observations: blue line has become irrelevant as it doesn't account for rotation PIXI bounds are exactly the same as box2d bounds, again yay! But look at this! This is an object rotation around 45 degrees, observations: Uhh PIXI are you drunk? I tried to debug what is going on here, but i cant seem to figure it out. I tried also to just use positive coordinates in my drawing but didn't seem to change a thing. Any idea's what's going on here with any of these 2: Why do i have this weird offset in the first image with the blue line? Why is PIXI bounds not working for objects rotated around 45 degrees (or anywhere between the 90 degrees intervals)? Thanks in advance!

Hi all, We are drawing ~10k interactive sprite circles. We are grouping them in separate PIXI.Containers (sectors). Inside those we do another grouping, this time we use particleContainers to speed up with sprites inside. The problem is - when I try to calculate local bounds of sector container which is certainly filled with particle containers and with sprites - it returns width = 1, height = 1. Can it be the case because of particleContainers? Thanks!

Hello guys. I use: this.load.atlas('spriteName'); to load a sprite. To see its bounds and body (for interacting with other objects) we can use: this.debug.body('spriteName'); this.debug.spriteBounds('spriteName'); At the beginning these sizes are the same but we can change body size in such a way: (docs) this.spriteObject.body.setSize(width, height [, offsetX] [, offsetY]); The question: how to change sprite bounds? Is there any way? Thanks in advance.

Is there a way (I'm sure there is) of expanding the world bounds and setting their coordinates and width and height properties? Otherwise the bounds stay the size of the view-port and I need them bigger. Thanks in advance.

My goal is to make the player stay centered on the canvas at all times, even when he reaches the boundaries of the world. This is how it is now: https://gyazo.com/ea478d70b78201ad51aa6ae09b2649a6 And I've modified the code to be like this: deadland = game.add.tileSprite(world.x1 - 1200, world.y1 - 1200, world.x2*2, world.y2*2, 'deadland'); land = game.add.tileSprite(world.x1, world.y1, world.x2, world.y2, 'earth'); land.fixedToCamera = false; land.boundsPadding = 100; game.world.setBounds(world.x1 -1200, world.y1 -1200, world.x2*2, world.y2*2); game.physics.startSystem(Phaser.Physics.P2JS); deadland.alpha = 0.7; land.alpha = 1; But now the player isn't stopping at the 'earth' size bounds. He goes all the way to the 'deadzone': https://gyazo.com/634d578985d1aef1f6ccb6f51e17f65f How do I do it so the player won't go beyond the 'earth' bounds? Thanks!

Hello, i have this script which is based on the tutorial: i want the player to navigate through the world, but it's constrained to a 800x600 box, (as this is the world WxH), the "game" world is a GIF 4096x3500. maybe this is not the correct way, could you please lead me into the correct way? this is the code: http://cypunkdb.net/t/phaser/tut1b/part7.html thanks

Hi all, I am recently developing a game which needs a physics bounds like a rounder rectangle. I looked through the docs but find no way to achieve that. Help me, thank you all~

I was hoping someone could point me in the right direction here. I see that I can set world bounds to detect when a sprite is out of bounds of that world. But I don't think that will help in what I am trying to do. I have a background image and a sprite. When the sprite reaches near the edge of the screen, the camera needs to pan the screen. My question is, is there a way to determine when the character reaches, for example, the edge of the screen to the left(minus 20 pixels or so) so that I can begin panning the camera then?

So this seems like it should be fairly simple, I want the camera to always follow the player even if they go outside the bounds of the map. How would I do that?

Hi, My query is this: I use the Cocos creator tool to position a text. When you export the position of this element and then integrate it into my phaser game, it happens that the selected position is slightly different from what is previewed in the Cocos tool. I suspect it is due to how both tools draw the font in their respective container. As you can see in the attached images, in the tool the text is centered in its container, however, in Phaser, when debugging the edges of the text, you can see that the font is positioned upwards. In short, both containers are in the same position but the texts are drawn in different positions. Is there any way to modify how Phaser draws the text in his container? As additional information, both texts are centered and added to a sprite as a child. The way the text is positioned varies according to the font used. Cocos tool Phaser:

I'm trying to make game resize appropriately to size of the window/screen. Everything's working out great, except for the tilemap. It seems like the rendering bounds are not updated. (typescript) onResize() { this.game.scale.refresh(); var newWidth = window.innerWidth / 3; var newHeight = window.innerHeight / 3; this.game.scale.setGameSize(newWidth, newHeight); this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //need to call this to apply new size? this.game.camera.setSize(newWidth, newHeight); for (var i = 0; i < this.tilemap.layer.length; i++) { this.tilemap.layer[i].width = newWidth; this.tilemap.layer[i].resizeFrame(this.tilemap, newWidth, newHeight); this.tilemap.layer[i].crop(new Phaser.Rectangle(0, 0, newWidth, newHeight), false); this.tilemap.layer[i].updateCrop(); } this.game.camera.follow(this.player.sprite, Phaser.Camera.FOLLOW_TOPDOWN, 0.8, 0.8); } As you can see I've tried everything, I would've expected resizeFrame or crop to do something, but unfortunately they don't. Do note that the rest of the game updates the size correctly, as the fish get rendered in the widened area just fine. Any ideas how to update the tilemap to the new size? Thanks!

I made two maps with Tiled, start with Isometric then I have changed to Ortogonal and set the width to 32 pixels. I have a Javaascript function to read the JSON map and use "game.add.isoSprite" to show the sprites in Browser. When did I make maps with diferent sizes it didn't work in the same way. First town map (Stade 1): widh: 14 pixels height: 20 pixels this.hero.anchor.setTo( 0.5 ); Second town map Stade 2: widh: 20 pixels height: 8 pixels this.hero.anchor.setTo( 1.1 ); I set up the anchor with diferent value and then then hero walk over the map. // Set the First world size this.game.world.setBounds( 0, 0, (14+2) * 64, (20+2) * 32); this.game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE); this.game.physics.isoArcade.bounds.widthX = 14 * 32; this.game.physics.isoArcade.bounds.widthY = 20 * 32; // Set the Second world size this.game.world.setBounds( 0, 0, (2 + 20) * 64, (2 + 8) * 32); this.game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE); this.game.physics.isoArcade.bounds.widthX = 20 * 32; this.game.physics.isoArcade.bounds.widthY = 8 * 32; //Loop var oSprite = jogo.add.isoSprite(posX, posY, 0, imagemCarregada, qualSprite , group); oSprite.anchor.set(0.5); //hero this.hero.game.add.isoSprite(x, y, 0, loadImage, imagem , grupo); //In the First Map this.hero.anchor.setTo( 0.5 ); //In the Second Map this.hero.anchor.setTo( 1.1 ); I use a lot of values and didn't work equality in two maps. My englsh isn't good.

Howdy, In my game I lock the cursor to canvas, so I use a pointer lock and then track/draw a "virtual cursor" manually. However, this causes sprite click callbacks to no longer trigger: sprite.inputEnabled = true; sprite.events.onInputUp.add(this.OnSpriteClick, this); Is there any way to get it working ? As a workaround, I figured I can manually check but I am having a hard time since figuring it out. sprite.getBounds() returns local bounds - how do I translate the my cursor position to sprite's local space? I couldn't find a matrix member under Sprite definition in the docs... Any

Hi, Does anyone know what can be an issue? I am having a gap on the right and on the bottom with Phaser Box2d.

Okay so I have a rectangle boundary and I have 4 circles. Each of which I want to collide within this boundary. Is there a way to collide each sprite within this boundary without using p2? var rectangleBoundary = new Phaser.Rectangle(0, 120, 900, 1800); var c1 = game.add.sprite(200, 350, 'qcircle'); var c2 = game.add.sprite(500, 190, 'qcircle'); var c3 = game.add.sprite(120, 30, 'qcircle'); var c4 = game.add.sprite(590, 120, 'qcircle');

Hi, new to Phaser. I am having a little difficulty understanding the concepts of the Stage vs the World, which one controls what is rendered, and why they apparently don't match my Game dimensions. I am using Phaser 2.6.2. I create a Game with width 607 and height 1080 (16:9 portrait, would be pixel-perfect in fullscreen), and in my boot script I set scale mode to SHOW_ALL and set pageAlignHorizontally to true. In my first level, I set the game.stage.backgroundColor, and I create a group of buttons, and I set the buttonGroup.alignIn(this.game.world.bounds, Phaser.BOTTOM_CENTER). As expected, I see what appears to be the correctly sized rectangle, scaled down slightly to fit within my non-fullscreen browser window, with a row of buttons at the bottom. However, I noticed that there seems to be an "edge" in my game where rendering stops. I added a debug rectangle set to the bounds of my button group, and I didn't see it. I then set the y value to be bounds.y -100, to push it "up", and this is what I see: You can't see the pointer, but you can see the pointer debug location, the y value is 919, and the pointer is a the bottom edge of the visible part of the green debug rectangle (that should be the height of the buttons). And you can also see that rendering is getting cut off on the right, before the right edge of the Game (as seen by the background color). But yet - the buttons are still visible, and they are below the point where the rendering seems to be getting cut off? I then did some logging, and found out that the bounds of the World and the Stage do not match the dimensions of the Game (these are numbers for game.world.getBounds() and game.stage.getBounds()): world x: -156 world y: 0.5 world height: 75 world width: 920 stage x: -156 stage y: 0 stage height: 920 stage width: 920 Now, the 920 height of the Stage seems to match where the rendering is getting cut off at y = 920 in the screenshot. The World numbers make no sense to me at all, and I can't figure out what corresponds to the right side edge of the rendering. I was under the impression that without explicitly resizing the World, it would be the same dimensions as my Game? So my questions are: What is causing the rendering to cut off where it is? Does the World bounds define what gets rendered, or does the Stage bounds define what gets rendered? Why aren't my Stage and World dimensions the same as my Game, considering I did not explicitly size or resize either one? Why are the buttons still visible even though they appear below the line where rendering is getting cut off? If the Stage bounds do not match the dimensions of my Game, why did game.stage.backgroundColor appear to correctly color in the the background of what I expected the Game dimensions to be? Bonus question: The answer here: Says that you can put UI elements in the Stage.. should I be adding my buttons to the Stage? How exactly do you do that? I had added them by adding a group to the Game, then adding the Button objects to the group. Does that mean they live in the World? Or the Stage?

I want to set the bounding box of text. Thanks!

Hi, I´ve been using Phaser version 2.4.2 and everything has been working fine expect for triangle collision shapes made in TIled. They trigger collisions with setPostBroadphaseCallback even if a sprite is not colliding with the shape. Oddly it only affects slopes. So i´ve tried updating Phaser to the ce edition if that would remove the bug, but only got a new one. My players sprite is spawned on the right edge of the screen. Changing world.setBounds doesnt make a difference. Also im unable to create the players sprite anywhere else in its create function. The x and y coords have no effect. What changed in Phaser version 2.4.7 that broke my game? 2.4.7 Is the version after the bounds bug appears. Any help would be appreciated.

Hi everyone! I'm looking to have sprites generated randomly within another sprite's bounds. I've seen examples of bounds used within sprites, like so for example (from this Phaser example): // Our sprite that will act as the drag bounds bounds = game.add.sprite(game.world.centerX, game.world.centerY, 'pic'); // And the sprite we'll drag sprite = game.add.sprite(300, 300, 'atari'); sprite.inputEnabled = true; sprite.input.enableDrag(); sprite.input.boundsSprite = bounds; However, I haven't seen this applied on a group of random sprites? And when I try this method on my group, it doesn't seem to work. Here is my code so far... I'm attempting to have the stars sprites randomly created within the room's image bounds. var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('star', 'assets/images/star.png'); game.load.image('room', 'assets/images/room.png'); } function create() { //*** The image I'd like to use for bounds room = game.add.image(210, 232, 'room') // Create random Star group starGroup = game.add.group(); // And add 3 sprites to it //** I'd like to have these sprites generated within the room's bounds only for (var i = 0; i < 3; i++) { starGroup.create(game.world.randomX, game.world.randomY, 'star'); } } Any help? Thanks!

Hello, I am trying to make a small basketball free-throw game similar to the emoji basketball game on Facebook. I was following along with an example from Phaser (World Bounds Event) to try to respawn the ball when it hit the edge of the screen. I've tried to implement that below (see code) but the respawn function never fires. Does anyone know what I'm doing wrong? Envirolympics.TestGame = function (game) { //Variables this.score = null; this.scoreText = null; this.ball = null; this.net = null; this.leftMarker = null; this.rightMarker = null; this.launched = false; this.lastPointerPos = null; //Constants this.GRAVITY = 980; this.SHOOT_FORCE = 850; this.EDGE_CUSHION = 10; }; Envirolympics.TestGame.prototype = { create : function () { //Load net sprite this.net = this.game.add.sprite(this.game.world.centerX, 100, 'net'); this.net.anchor.setTo(0.5); //Add hoop children markers this.leftMarker = this.net.addChild(this.game.make.sprite(-50, 40, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker = this.net.addChild(this.game.make.sprite(50, 40, 'marker')); this.rightMarker.anchor.setTo(0.5); //Load ball sprite this.ball = this.game.add.sprite(this.game.world.centerX, this.game.world.height - 100, 'ball'); this.ball.anchor.setTo(0.5); //Setting up the physics environment this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.physics.arcade.gravity.y = this.GRAVITY; //Setting up the ball physics this.game.physics.arcade.enable(this.ball); this.ball.body.bounce.setTo(0.35); this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; this.ball.body.collideWorldBounds = true; this.ball.body.onWorldBounds = new Phaser.Signal(); this.ball.body.onWorldBounds.add(this.respawn, this); //Enable input this.ball.inputEnabled = true; this.game.input.onDown.add(this.track, this); this.game.input.onUp.add(this.launch, this); //Initialize this.score = 0; this.scoreText = this.game.add.bitmapText(10, 10, 'pixel', this.score, 36); this.lastPointerPos = new Phaser.Point(0, 0); //For mobile Phaser.Canvas.setTouchAction(this.game.canvas, "auto"); this.game.input.touch.preventDefault = false; }, update : function () { //TO DO: //detect collision with net markers //determine if scored //respawn }, track : function () { //Update the last finger position this.lastPointerPos.x = this.input.x; this.lastPointerPos.y = this.input.y; //Set the ball physics to be still this.launched = true; this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; }, launch : function () { if (this.launched) { this.launched = false; this.ball.body.moves = true; this.ball.body.allowGravity = true; //Get the direction of finger swipe, normalize it, and apply a scalar to the velocity of the ball var direction = new Phaser.Point(this.input.x - this.lastPointerPos.x, this.input.y - this.lastPointerPos.y); direction.x = this.game.math.snapTo(direction.x, 5); direction.y = this.game.math.snapTo(direction.y, 5); Phaser.Point.normalize(direction, direction); if (direction.y < 0) { this.ball.body.velocity.setTo(direction.x * this.SHOOT_FORCE, direction.y * this.SHOOT_FORCE); } } }, respawn : function () { console.log("Does this function even run?"); //Set the ball physics to be still again this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; //Spawn the ball in a new, random location var ballSpawnX = this.game.rnd.integerInRange(this.ball.width + this.EDGE_CUSHION, this.world.width - this.EDGE_CUSHION); ballSpawnX = this.game.math.snapTo(ballSpawnX, 10); //Make sure the ball is in the boundary we set if (ballSpawnX < this.ball.width + this.EDGE_CUSHION) { ballSpawnX = this.ball.width + this.EDGE_CUSHION; } else if (ballSpawnX > this.world.width - this.EDGE_CUSHION) { ballSpawnX = this.world.width - this.EDGE_CUSHION; } this.ball.x = ballSpawnX; } };

Hello. As I mentioned in title, setting text bounds causes game getting crashes. var bar = game.add.graphics(); bar.beginFill(0x000000, 0.2); bar.drawRect(FirstCave.position.x, 100, FirstCave.width, 230); var style = { font: "bold 25px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" }; CaveName = game.add.text(FirstCave.position.x, 100, "Kopalnia Złota", style); //CaveName.setTextBounds(0, 100, 100, 100); Code is from THAT example. Did I made mistake somewhere?

I have a bouncing ball and I want to detect that the ball has "hit the floor" in my game. Is there any predefined method for detecting this?

I'm have a camera effect in my game that shakes the camera when you shoot an enemy. However, the game has to have some on screen buttons for tablet devices and I don't want these to shake. Ive currently got these in a group. Is it possible to have these outside of the camera so they aren't affected by the shake?

Top-down lawnmower driving around in a yard with flowers. I'm checking collisions between flowers and the lawnmower. Problem is when I'm driving the lawnmower at a 45 degree angle past a flower (sprites do not overlap) the game cuts the flower down. I t tried troubleshooting and the debug.body(flower) and game.debug.body(lawnmower) show my their Bounds boxes (they overlap) and from there comes my question. Why doesn't the bounding box rotate when I change the sprite angle? I've tried looking for ways to change the angle but game.debug.body(lawnmower).angle does nothing. EDIT: I think I found the answer myself. From Phaser.io API docsumentation: ... the collision Body itself never rotates, it is always axis-aligned ...