Search the Community

Showing results for tags 'anchor'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Found 33 results

  1. Text anchor issue

    Hi. I'm using phaser 2.6.2 and I have an issue every time I create a text and set it's anchor. The text seem to fly away a great distance after setting it's anchor. Example: if I were to set the anchor to 0.5, the text moves to a location far greater than it's size. If I create a text, it's anchor is at default 0 (top left of text)? If I were to change it to 0.5, rather than the text center itself about the anchor, it goes a great distance away from it, like really far. this.goldCoinsText = this.game.add.text(350.6, 86.1, '5000', {font: "20px Arial", fill: "#ffe488"}); this.goldCoinsText.anchor.set(0.5);
  2. unblurry Phaser.text

    Hello I use Phaser.text in my game. I want to align the text so I use text.anchor.set(0.5). On my small text it work fine but on my biggest text it make it blurry I read on forum to use text.anchor.x = Math.round(text.width * 0.5); but it only make my text disappear Is there an other way to do or maybe I'm doing it wrong question = game.add.text(310,180,questions[nbalea], {fontSize: '32px', fill: '#000' }); question.anchor.set(0.5); question.anchor.x = Math.round(question.width * 0.5); Thank you
  3. hi, i'm coding a pinball game in js with phaser and p2physics. I search how i can do rotation with a anchor point. I want create the rotation for the flipper but method rotateLeft or rotateRight do the rotation by the center's sprites. I want create a rotation around topleft and top right point of the sprite to do a flipper movement. orry for my bad english, thx.
  4. Dancing TextField with right align

    Hello, I have two TextFields. The first one is aligned right by setting anchor.x = 1. The second one is aligned left by default. There is a visual issue if text value of the RIGHT aligned TextField is changing on the different one with different width: the digits are "dancing" a little, while the LEFT aligned TextField stands. Here is the example: https://jsfiddle.net/7dv61c63/ Don't know is it a bug at PIXI but I'll be much appreciated for any suggestion how to fix this issue.
  5. Hello, I have searched a solution for a problem for long time and didn't found, if someone have some ideas I am taking all x) did someone know if it's possible to rotate a group of bodies around an anchor point, I set some bodies for invisble walls and my objective is to turn them around by 90° around an anchor point, I know It must be not very comprehensive so I set up an Image to explain myself. In the screen, I have 2 bodies and I want them to turn around the red dot what must be my anchor point, I know it's impossible in arcade so I tried in P2 physics and impossible to found any solution :/ Thanks for reading, feel free to leave a feedback
  6. How to correct position Phaser Sprites?

    I am experimenting positioning the sprites correctly on the screen when setting anchor to the center of the sprite. However I can not get the expected result. For example, I want to have a group of sprites place on the screen like a tile map. Some sprites are on the edge of the screen and have a graphics object as their texture. While sprites not on the edge are image sprites generated from images. I want the image sprites stay on their tile while have their anchor set to 0.5. Here is my code for the example in this URL http://phaser.io/sandbox/vXVjSgyw/play: (You need to paste my code into the create method to see the result) function create() { // disable these lines, and the other sprite will be blank var sprite = game.add.sprite(0, 0, 'phaser'); // blank sprite will add last used texture var pics = game.add.group(); for (let i = 0; i <= 7; i++) { for (let j = 0; j <= 5; j++) { var b; if (i === 0 || j === 0 || i === 7 || j === 5) { b = new Phaser.Sprite(game) // or game.add.sprite(0,0) var g = new Phaser.Graphics(0,0) g.beginFill(0xFF0000,0.5) g.lineStyle(1, 0xAACCCC); g.drawRect(0,0,100,100) g.endFill() b.addChild(g) b.x = i * 100; b.y = j * 100; } else { b = game.add.sprite(i * 100, j * 100, 'mushroom'); } b.anchor.set(0.5) pics.add(b) } } } When I set all the sprites anchor to 0.5 the image sprites shift to their top left corner. If I only set the edge sprites anchor to 0.5 it looks fine. What is the problem? Does the anchor setting change the texture's position?
  7. Hi all, I'm new to Phaser and I want to ask about something that became a problem for me and sorry for my bad english. So I have shape sprite that I add child to the background sprite. I want to make the background fit the screen size and it working. I also make the shape sprite anchored to middle (0.5, 0.0) so whatever the shape the position still in the middle. The problem came when I try to create collision. If the size is original size then the collision is correct but when I resize the background the collider start to not fit the sprites. I search for this and found out that if I comment out the anchor then the collider is fit to the sprite again. I also already do setting on body size. Here is the list of code I use //scaling background background.scale.set(game.width, game.height); //add physics game.physics.arcade.enable(shape_sprite) //anchor sprite shape_sprite.anchor.set(0.5, 0); //reset shape_sprite collision shape_sprite.body.setSize( shape_sprite.width*shape_sprite.parent.scale.x, shape_sprite.height*shape_sprite.parent.scale.y, shape_sprite.width*shape_sprite.parent.scale.x/2, 0 ); I think maybe I'm doing it wrong. without anchor: with anchor:
  8. Sprite body anchor

    Hello, there is a small difference between the sprite body anchor between phaser 2.6 and older versions. In previous versions the body will anchor with the sprite anchor, meaning that if you set the sprite anchor to 0.5 in both axis the body stayed in the center of the sprite, changing the body size would keep it in centre, in the newer version the body is always anchored to the top left of the sprite regardless the anchor of the sprite. Is this behaviour intended? Just wondering if I should re-center my sprites bodies or if this will change to the old behaviour. Thanks.
  9. I'm using P2 physics, and I'm creating a relatively intricate border around the screen that I want balls to bounce against. I am scaling all assets on the screen for 3 different aspect ratios, depending on the user's screen size. I create the border like this: bgOverlay = otherSpriteGroup.create(gameWidth / 2, gameHeight / 2, "bgOverlay"); bgOverlay.anchor.setTo(0.5, 0.5); bgOverlay.scale.setTo(scale.x, scale.y); bgOverlay.body.clearShapes(); bgOverlay.body.loadPolygon("physicsData", "bgOverlay"); bgOverlay.body.setCollisionGroup(otherCollisionGroup); bgOverlay.body.collides(bubbleCollisionGroup, otherHitBubble, this); bgOverlay.body.static = true; The trick is that I scale all assets using a Phaser Point, scale.x and scale.y. But when I load in the polygon data using bgOverlay.body.loadPolygon, it takes in actual pixel values, and I can't scale bgOverlay.body. I am not sure how to scale the numbers in the physics data. Any ideas?
  10. Sprite body position

    Hi, just upgraded from phaser 2.4.4 to 2.6.2 and I'm having trouble with sprites bodies. My sprites are set to an anchor of x 0.5 and y 0.5, the body was also being set at that position on 2.4.4 version but after updating the body doesn't change position when changing the anchor. Is there any way to move the sprite body to the center of the sprite? Thanks.
  11. I've noticed that "this.player.anchor.setTo(0.5);" will create a bounding box centered on the player.body in Phaser v2.2.2 when "this.game.debug.body(this.player);" is used, but in the latest Phaser v2.6.2, "this.game.debug.body(this.player);" shows a bounding box anchored at top left even if "this.player.anchor.setTo(0.5);" is previously applied. Was this an intentional change or a bug in the new version?
  12. Phaser createLayer set tiles anchor

    Hello, I have an issue with the createLayer() function, My player anchor point is 0.5 but the Tiles in the layer comes with default anchor How I can set all my layer tiles anchor to 0.5? this is the current result (The big red square is the player) And this is the expected thanks
  13. Hi! With this code I try to put a text object in the center of a sprite, which is in its turn is centered relatively to the world. var sprite = game.add.sprite(0, 0, 'phaser'); sprite.anchor.set(0.5); sprite.x = game.world.width * 0.5; sprite.y = game.world.height * 0.5; var text = game.make.text(sprite.width * 0.5, sprite.height * 0.5, "Yo", { font: "10px Arial", fill: "#ffffff", align: "center" }); text.anchor.set(0.5); sprite.addChild(text); But what I get is this: instead of this: What am I doing wrong and how to achive my goal? Thanks!
  14. When manipulating sprites, we can do this.sprite.anchor.setTo(.5,.5), which sets the rotation and "origin" of the sprite to its center, rather then the upper left corner. How can we do the same for the game world? So when we spawn a sprite on (0,0), it spawns to the center of the game world/canvas?
  15. move p2 collision box (anchor)

    Hey, I'm using p2 physics and I have a sprite (pixel line) that is rotating around some point (beginning of the line). For rotation I use angularVelocity. To display my sprite correctly I had to set it's anchor to (0,1) and it works fine, but collision box remained where it was before. Please check out my code and attached image game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.setImpactEvents(true); this.obstacle1CollisionGroup = this.game.physics.p2.createCollisionGroup(); this.obstacle = game.add.sprite(700, 400, "line"); this.physics.p2.enable(this.obstacle, true); this.obstacle.body.setCollisionGroup(this.obstacle1CollisionGroup); this.obstacle.anchor.setTo(0,1) this.obstacle.body.angularVelocity = 0.3; this.obstacle.body.angularDamping = 0;
  16. Hello. I'm having an issue with stripes of pixels from one sprite appearing in other sprites sporadically. I've included an image below. I'm loading a spritesheet made by the free version of texture packer. I then make sprites out of the textures, set anchors to 0.5, set scale to 3. Animations are performed by changing textures. I also emulate a camera by having one container named 'stage' and moving it around based on the player's position and window dimensions. I frequently (but inconsistently) see an extra strip of pixels appear on the left edge of sprites as if the source rectangle were subtly incorrect. Am I not supposed to mix the anchors, scale, and a 'camera' in this manner? I've tried rounding/flooring the x,y positions of certain objects and some visual errors have lessened. I used to have a bug where I would get 1 pixel-wide vertical stripes between tiles which was fixed by flooring the camera container's x and y. However I'm still getting some of these 1 pixel strips from neighboring textures in the sprite sheet. Perhaps these are unrelated visual issues. Here's a picture of one: The pixel strip is to the left of the greenish character. It is particularly odd because it is the only thing that happens to be 1 pixel wide. Everything else is scaled by 3. Here are the sections of code that are involved: // creating the character (well, just the body, its part of // a larger class that adds many things to a container like // the gun and other effects) this.body = new PIXI.Sprite.fromFrame('guy0.png') this.body.scale.x = this.body.scale.y = 3 this.body.anchor.x = this.body.anchor.y = 0.5 this.addChild(this.body) // and later the character is animated like this if (this.animationLastFrameTime + this.animationFrameDelay < now ) { this.runFrame++ if (this.runFrame > 5) { this.runFrame = 0 } this.animationLastFrameTime = now this.body.texture = PIXI.Texture.fromFrame('guy'+this.runFrame+'.png') } // and here is the camera code from an entirely different area of the program // NOTE: Math.round prevents vertical stripes from appearing between the tiles stage.x = Math.round(-player.x + window.innerWidth * 0.5) stage.y = Math.round(-player.y + window.innerHeight * 0.5) Any idea what I'm doing wrong? Thanks!
  17. Hi, i have a custom buttons and i want apply anchor. How to do it? Custom buttons: this.button_start = this.btn("Play a game", this.play_game, 2.03, 15.1, 2, 8.5, 140, 30); btn: function(name, functions, anc1X, anc1Y, anc2X, anc2Y, w, h) { this.button = this.game.add.button(this.game.width, this.game.height, '', functions, this); this.button.name = name; this.button.width = w; this.button.height = h; this.button.anchor.set(anc1X, anc1Y);//Temporary this.text = this.add.bitmapText(this.game.width, this.game.height, 'Text_mainmenu', this.button.name, 46); this.text.anchor.set(anc2X, anc2Y);//Temporary } /* name - the name of the button functions - button function anc1X - first anchor.setX anc1Y - first anchor.setY anc2X - two anchor.setX anc2Y - two anchor.setY */
  18. Setting anchor on group sprite 'destroys' them

    Hello, In my repository hosted on the link below, I have a game I am doing for a research project. You'll notice in the src/game-behaviors.js file, I have a method to create a chicken. However, whenever I try to change the anchor on a created chicken in a group, the chicken renders for a frame or so, then disappears. https://github.com/wheelerj/chickens-in-space I've had to 'offset' the creation coordinate of these chickens in order to fix this, but it causes unwanted behaviors when I want to rotate them, and cause them to oscillate due to gravitational wave effects. Thank you for your help. (I have also asked this question here http://stackoverflow.com/questions/36036793/setting-anchor-on-group-sprite-destroys-them)
  19. I'm a newbie in Phaser and programming as well, so I apologize if this question is stupid. I took this tanks example as a base code. This example is great, while the turret is in the middle of the hull, but in my case it is slightly moved to the front of the tank: If i use the code without changes, when tank turns, his turret is not positioning correctly anymore: So, I googled a bit and found addchild solution: tank.addChild(turret); turret.x = 11; turret.y = 0; Now it looks great, turret stays on its correct position at any circumstances: BUT, STOP! What is this??? Turret's anchor (or rotation point) is positioning in a wrong place, it does not move with tank and stays in the same place of the "map". Moreover, bullets fire from the same position and do not move with tank as well: And it will stay there, no matter what happens. The situation is changing if I add: turret.x = tank.x; turret.y = tank.y;to update() section. Now anchor and bullets are in the right place and moving with tank. But turret is trolling me again: As its coordinates are updating, it runs ahead all the time. This thing is driving me crazy for at least past 3 hours and I have a feeling, that I'm missing something very simple. Full code (sorry, didn't find how to put it in hide): var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });function preload () { game.load.image('bullet', 'asset/shell.png'); game.load.image('tank', 'asset/games/tanks/tank1.png'); game.load.image('turret', 'asset/games/tanks/turret.png'); game.load.image('earth', 'asset/games/tanks/scorched_earth.png'); game.load.spritesheet('kaboom', 'asset/games/tanks/explosion.png', 64, 64, 23); }this.bullets = bullets;this.fireRate = 1000;var land;var tank;var turret;var explosions;var currentSpeed = 0;var cursors;var bullets;var fireRate = 1000;var nextFire = 0;function create () { // Resize our game world to be a 2000 x 2000 square game.world.setBounds(-1000, -1000, 2000, 2000); // Our tiled scrolling background land = game.add.tileSprite(0, 0, 800, 600, 'earth'); land.fixedToCamera = true; // Our bullet group bullets = game.add.group(); bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.createMultiple(30, 'bullet', 0, false); bullets.setAll('anchor.x', 0.5); bullets.setAll('anchor.y', 0.5); bullets.setAll('outOfBoundsKill', true); bullets.setAll('checkWorldBounds', true); // The base of our tank tank = game.add.sprite(0, 0, 'tank', 'tank1'); tank.anchor.setTo(0.5, 0.5); tank.animations.add('move', ['tank1'], 20, true); // This will force it to decelerate and limit its speed game.physics.enable(tank, Phaser.Physics.ARCADE); tank.body.drag.set(0.2); tank.body.maxVelocity.setTo(400, 400); tank.body.collideWorldBounds = true; // Finally the turret that we place on-top of the tank body turret = game.add.sprite(0, 0, 'turret', 'turret'); turret.anchor.setTo(0.15, 0.5); tank.addChild(turret); //turret.x = 11; //turret.y = 0; // Explosion pool explosions = game.add.group(); for (var i = 0; i < 10; i++) { var explosionAnimation = explosions.create(0, 0, 'kaboom', [0], false); explosionAnimation.anchor.setTo(0.5, 0.5); explosionAnimation.animations.add('kaboom'); } tank.bringToTop(); turret.bringToTop(); game.camera.follow(tank); game.camera.deadzone = new Phaser.Rectangle(150, 150, 500, 300); game.camera.focusOnXY(0, 0); cursors = game.input.keyboard.createCursorKeys();}function update () { if (cursors.left.isDown) { tank.angle -= 4; } else if (cursors.right.isDown) { tank.angle += 4; } if (cursors.up.isDown) { // The speed we'll travel at currentSpeed = 300; } else { if (currentSpeed > 0) { currentSpeed -= 4; } } if (currentSpeed > 0) { game.physics.arcade.velocityFromRotation(tank.rotation, currentSpeed, tank.body.velocity); } land.tilePosition.x = -game.camera.x; land.tilePosition.y = -game.camera.y; turret.x = tank.x; turret.y = tank.y; turret.rotation = game.physics.arcade.angleToPointer(turret); if (game.input.activePointer.isDown) { // Boom! fire(); } }function fire () { if (game.time.now > nextFire && bullets.countDead() > 0) { nextFire = game.time.now + fireRate; var bullet = bullets.getFirstExists(false); bullet.reset(turret.x, turret.y); bullet.rotation = turret.rotation; game.physics.arcade.moveToPointer(bullet, 1500); }}function bulletHitPlayer (tank, bullet) { bullet.kill();}
  20. Flash -> Texture Packer -> Phaser

    Hi guys, I'm using Flash to create graphics, exporting to a swf file, importing into Texture Packer and then exporting to a JSONArray. If you set your Flash stage size the same as your Phaser stage size, then the workflow is potentially very efficient. I should be able to add all my different sprites to the stage and they will appear in exactly the right spot right? Well this does work, but when I try to change the anchor point I'm running into problems. If I use 'Trim' mode in TP, the anchor point is then based on the Flash stage size, rather than the bounds of the sprite, so this is no good. If I use 'Crop, keep position' mode in TP, the anchor point is now correctly based on the sprite bounds, but the spriteSourceSize values are no where to be seen in Phaser. I can still see the correct spriteSourceSize object in the json file, but it seems because "trimmed" is now set to "false", that these values don't make it into Phaser at all. So yes, I can fix the problem by changing all "trimmed" values to true, but this is not ideal. Has anyone else run into the same problem? Any ideas for how to get around this? Am I doing something stupid? Thanks! Matt.
  21. Hello ! I have a problem similar to http://www.html5gamedevs.com/topic/2244-sprites-of-odd-dimensions-blurred-when-flipped/ But im not using Phaser so I don't achieve to resolve my problem. Im working with Pixel Art sprites, and when I want to set the position of an odd width or height with the anchor set at 0.5 the result is blurred because the renderer try to interpolate the pixel. What is the solutions in PIXI to resolve this? Im sorry if my english is hard to read and/or understand. Kind regards of a French Developer who start with Pixi.js
  22. Set anchor point of sprite by pixels?

    A problem of mine is that the sprite.anchor.setTo() uses scale (for example, 0.5 means the 0.5 the height of the sprite, not 0.5 pixels). I need to set the anchor point at a specific point outside the sprite. How can I accomplish this?
  23. Where's my sprite, Phaser?

    I'd like to get the visual x/y/width/height of a sprite after scaling/skewing/rotating/anchoring it. Can I do that with Phaser? The case: If you flip horizontally a sprite that has {x: 100, y: 100, width: 64, height: 64}, what will your eyes see on the screen? {x: 36, y: 100, width: 64, height: 64}. That's what I'm looking for. However, Phaser tells you:{x: 100, y: 100, width: -64, height: 64}. No big deal, you just do a little math to fix it, kinda like you showed there. That is, if you only scale it. It gets more mathematical when you also change the anchor, and turns into a geometric nightmare if you rotate it too. Phaser is heavily based on Flixel, right? Then my hopes are that you could do it like in Flash, where you can solve all of this by wrapping your sprite into a movieclip and getting the container's x/y/width/height.
  24. P2 anchor.set Issue in Sandbox!

    https://phaser.io/sandbox/edit/tpauMNLC When i try to enable p2 physics for a sprite i get Uncaught TypeError: Cannot read property 'set' of undefined. for the object.anchor.set(0.5); of @method Phaser.Physics.P2#enableBody. Please check the link above. Also how do i go about debugging in Sandbox? I have tried putting breakpoints in VM#### but a new one starts everytime i refresh or change something so that didn't work.