Search the Community

Showing results for tags 'bounds'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 33 results

  1. Move camera without bounds

    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?
  2. Center text in container

    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:
  3. 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;, 0x0000FF, 1);, sprite.y-sprite.height/2);, sprite.y-sprite.height/2);, sprite.y+sprite.height/2);, sprite.y+sprite.height/2);, sprite.y-sprite.height/2); bounds = sprite.getBounds(true); //GREEN LINE, 0x00FF00, 1);, sprite.y+bounds.y);, sprite.y+bounds.y);, sprite.y+bounds.y+bounds.height);, sprite.y+bounds.y+bounds.height);, sprite.y+bounds.y); //RED LINE var lowerBoundPixi = getPIXIPointFromWorldPoint(aabb.lowerBound); var upperBoundPixi = getPIXIPointFromWorldPoint(aabb.upperBound);, 0xFF0000, 1);, lowerBoundPixi.y);, lowerBoundPixi.y);, upperBoundPixi.y);, upperBoundPixi.y);, 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!
  4. 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 0, 0, (14+2) * 64, (20+2) * 32);; = 14 * 32; = 20 * 32; // Set the Second world size 0, 0, (2 + 20) * 64, (2 + 8) * 32);; = 20 * 32; = 8 * 32; //Loop var oSprite = jogo.add.isoSprite(posX, posY, 0, imagemCarregada, qualSprite , group); oSprite.anchor.set(0.5); //hero, 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.
  5. 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() {; var newWidth = window.innerWidth / 3; var newHeight = window.innerHeight / 3;, newHeight); = Phaser.ScaleManager.SHOW_ALL; //need to call this to apply new size?, 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(); }, 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!
  6. 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;, 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
  7. Phaser Box2d Bounds are leaving a gap?

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

    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');
  9. 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(, 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 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?
  10. I want to set the bounding box of text. Thanks!
  11. World bounds stopped working

    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.
  12. Help with Bounds and Groups

    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(,, '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 =; // 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(,, 'star'); } } Any help? Thanks!
  13. onWorldBounds callback not firing

    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; = 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 =, 100, 'net');; //Add hoop children markers this.leftMarker =, 40, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker =, 40, 'marker')); this.rightMarker.anchor.setTo(0.5); //Load ball sprite this.ball =, - 100, 'ball'); this.ball.anchor.setTo(0.5); //Setting up the physics environment; = this.GRAVITY; //Setting up the ball physics; 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);, this); //Initialize this.score = 0; this.scoreText =, 10, 'pixel', this.score, 36); this.lastPointerPos = new Phaser.Point(0, 0); //For mobile Phaser.Canvas.setTouchAction(, "auto"); = 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 =, 5); 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.EDGE_CUSHION, - this.EDGE_CUSHION); 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.EDGE_CUSHION) { ballSpawnX = - this.EDGE_CUSHION; } this.ball.x = ballSpawnX; } };
  14. Hello. As I mentioned in title, setting text bounds causes game getting crashes. var bar =; 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?
  15. 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?
  16. Controls in game outside the camera

    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?
  17. 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 API docsumentation: ... the collision Body itself never rotates, it is always axis-aligned ...
  18. Tween bounding box position/size?

    Is it possible to tween the bounding box of a sprite? We have a character that jumps, and when in the jump sequence, there's transparent pixels under the character that we don't want to count as hit area. I know that through `asset.body.setSize()` I can change the size of the bounding box, but where are these properties on the sprite such that I can tween them to and from? Any exmples of this? Thanks!
  19. Hello everyone, here's my issue. In the game you make lines in a tilemap by click (input.onDown) and moving the cursor over them. When you release the cursor (input.onUp) the lines disapear. The problem is: when I move the cursor out the screen, it doesn't detect the event as input.onUp, and I can release the button, come back to the screen and select a new line without destroying the previous one. What I want to know is: is there some way to launch a function when the cursor (in web or mobile) leaves the screen? I've tried some methods, but none of them worked. Thanks!
  20. Hi there. I have a noob question... How I can update bounds of nested sprites? For example: I have a sprite levelSprite =, 0); //now width and height - 32x32This sprite has two childs levelNum1 =, 0, 'game_assets_4');levelNum1.frameName = "gm_level_number_0001.png";levelNum2 =, 100, 'game_assets_4');levelNum2.frameName = "gm_level_number_0002.png";levelSprite.addChild(levelNum1);levelSprite.addChild(levelNum2); // now width and height still 32x32... why? I use phaser v. 2.4.3 Would you be so kind to help me please...
  21. Hey guys, I am trying to set the game world bounds everytime I am zooming in/out of a map however, when I apply a tween to the game world bounds, it is not working. Here is my code var t =; function mouseWheel(event) { var tween = myGame.add.tween(; if (event.wheelDelta > 0 && scale <= 1) { scale += 0.1; sprites.scale.setTo(scale, scale); myPlayer.body.setSize(50 * scale, 50 * scale, 20 * scale, 80 * scale); myHouse.body.setSize(150 * scale, 50 * scale, 20 * scale, 240 * scale); myCharacter.body.setSize(110 * scale, 20 * scale, 0, 120 * scale); myHydro.body.setSize(100 * scale, 100 * scale, 100 * scale, 100 * scale);{width:5263*scale,height:2636*scale},50); tween.start(); //, 0, 5263 * scale, 2636 * scale); } else if (event.wheelDelta < 0 && scale >= 0.5) { scale -= 0.1; } else { t.stop(); } sprites.scale.setTo(scale, scale); myPlayer.body.setSize(50 * scale, 50 * scale, 20 * scale, 80 * scale); myHouse.body.setSize(150 * scale, 50 * scale, 20 * scale, 240 * scale); myCharacter.body.setSize(110 * scale, 20 * scale, 0, 120 * scale); myHydro.body.setSize(100 * scale, 100 * scale, 100 * scale, 100 * scale);{width:5263*scale,height:(2636+getHeight())*scale},50); tween.start(); //, 0, 5263 * scale, (2636 + getHeight()) * scale); }The part that is not working is this var tween = myGame.add.tween(;{width:5263*scale,height:(2636+getHeight())*scale},50);tween.start();The code basically scales down/up a group of sprites including the map whenever the wheel is up/down. That works perfectly! Why do you think the tween is not working on the game world bounds?
  22. when I exit from full screen my player (with its own collision group) stops rebounding against the world edges i've tried various combinations of these with no luck;,0,480,32*11*10) // or ...// this.layer1.resizeWorld();, true, true, true,true)thanks for any advice was also mentioned here by somebody else
  23. Map bounds and player

    I am new to phaser so sorry if this seems like a newb question. I have searched for this with no luck. Maybe I just dont know what I am looking for yet. After creating the world map, I have a bigger map than the player can see. As the player reaches the edge of the map, the player can go outside of my set jpg map that is a width of 5000 pixels by 5000 pixels and can see black past the edge One: How can I keep the player inside the edge of the map and Two: how do I set the map so as the player navigates to the end of the maps edge the map stops showing what is past it This is just a mockup js fiddle but will give the idea. you can move with the arrows, but when you get to the set bounds of the map the player can go past and you see past the bounds Thanks for any help!
  24. Hi guys, What do you think about the following issue? See the canvas using scaleMode RESIZE (width:100%, height:100%) before to open a side menu But after to open the side menu you see: But... This works if you take into account the transforms of the parent element when you get the parent bounds... Thanks in advance, Nicholls
  25. Infinite World Bounds?

    I have an infinitely scrolling tile sprite as the background for my game. I want to use a camera to move instead of creating the illusion of movement by using: bg.tilePosition.x -= player.spd But, since the background is infinite and I need to set the world bounds, it can't be an infinite world. What would be the best way to do this? Thanks