Search the Community

Showing results for tags 'center'.



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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 19 results

  1. Move stage pivot so that element is center

    Hey everyone, I want to center an element (in this case a graphics element) in the center of the screen. https://jsfiddle.net/user/adnanchang/fiddles/ As you can see from my code, I am changing the position of the graphics and bringing it to the center of the screen. I don't want that. I want to actually move the pivot/position of the stage in such a manner that the graphics then looks like it is to the center of the screen. Also, would it be possible to save the original position of the stage?
  2. Zooming a graphic/container/element on click

    Hey everyone! I am trying to achieve a zoom on an element using PIXI I have currently a graphics rectangle (see first image) It is the child of my stage which is the main container being rendered. My main container is as big as the browser screen. On clicking the graphics element I want the stage to zoom in in a way that I get this output (see second image) As you can see on the desired output I want the rectangle to take up the whole container. I am confused with what pivots do I choose and what new positioning do I set to achieve this and till what point do I scale this?
  3. 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:
  4. I used to have a function that center the player sprite in the camera, like this (in the camera class): centerOver: function(sprite) { const vx = sprite.x - (this.width / 2) - this.x; const vy = sprite.y - (this.height / 2) - this.y; this.translate(vx, vy); }, translate: function(vx, vy) { this.x += vx; this.y += vy; } So that the player can be in the middle of the screen and the camera follows the player smoothly. vx, vy are the horizontal velocity and vertical velocity. with and height is the camera's width and height, and this.x, this.y represent the top, left position of the camera in the map. But now I am developing a MMO game. The player's position is no more smooth all the time. It may occasionally jump a bit when the latency is too high, but I still want the player to be in the center of the camera. What should I do?
  5. Centering text in Text2D

    How do I make the Text2D text centered? As in centering the actual text according to the Text2D origin, not centering the Text2D within its parent. Do I pass the desired origin in options in the Text2D constructor? I tried doing that and I didn't see any change, maybe I did it wrong?
  6. I'd like to be able to transform a bunch of meshes at the same time. To do that I would create an empty mesh and make that their parent. When I rotate this group I'd want it to rotate around the center so I'll need to place this parent mesh within the center of all the children. I've looked around for a function that can calculate the center from multiple points. I saw Vector3.Center() but that only takes 2 vectors. Is there a way I can calculate the center of multiple meshes? Or could I use Vector3.Center() in a loop to get the exact center?
  7. I am experiencing an odd problem aligning the text of a BitmapText to the center. I am successfully able to wrap the text by using the "maxWidth" property, but the alignment of the text is uneven / jagged (see attached screenshot). It doesn't align to the center, some words are more to the left, and some are more to the right. I can't understand what's going on. I am using the code below (typescript): let hintText:Phaser.BitmapText = this.game.make.bitmapText(0, 100, "MSR", "", 25, "center"); hintText.maxWidth = 310; this.add(hintText); hintText.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut mattis velit. Cras placerat fermentum dictum. Donec at semper enim. Donec euismod pulvinar volutpat."
  8. 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?
  9. Centering the scene/container

    Hello, first I would like to thank everyone supporting the Pixi.js framework because it is awesome! Thank you a lot! Now, to my question. It is probably very simple, but I can not seem to get my head around it. I have a container which contains everything the game comprises of. What I would like to do is center it in the middle of the screen. By default, container is at the left border of the screen. What is the simplest way and how would I do it to center my scene/container in the middle of the screen? Snippet of a code: var width = 1280;var height = 720;var baseWidth = Math.floor(window.innerWidth);var baseHeight = Math.floor(window.innerHeight);var aspectRatio = baseWidth/baseHeight;var renderer = PIXI.autoDetectRenderer(width*aspectRatio, height, {backgroundColor: 0xFFFFFF}); document.body.appendChild(renderer.view);// create an new instance of a pixi stage with a grey backgroundvar stage = new PIXI.Container(); // I WANT TO CENTER THIS CONTAINER
  10. Center & style several texts together

    Hi, I would like to create 2 instances of Phaser.Text, each with a different text size, and center them to the middle of the screen as if they were 1 block of text. for example something like that: 1st row of text 2nd row of text is there a quick and easy way to do that? thanks! Lior
  11. How to center stage on browser?

    Hello all! The only thread on this topic seems to be this one, and I cannot get any of the suggestions to work for me. Can anyone give me a way to center my game? Thank you!
  12. addPolygon change position image

    Hello, I have a problem when I use addPolygon. Polygon change position image. When I turn on debug I see images, and new shape draw in center. Second problem I don't now why image and shape Polygon is different. How fix this problem ? I not seen problem when I use addRectangle. Image and new shape is corect in tile 70px x 70px. Code: function create() { ... groups.tile = game.add.group(); groups.tile.enableBody = true; groups.tile.enableBodyDebug = true; groups.tile.physicsBodyType = Phaser.Physics.P2JS; groups.tile.collideWorldBounds = false; ... var obj = groups.tile.create((x * map.width) - (map.width / 2), (y * map.height) - (map.height / 2), spriteName, numberTile); obj.body.static = true; obj.body.fixedRotation = true; obj.body.collideWorldBounds = true; obj.body.clearShapes(); var myPolygonArray= [ [0,0], [0,70], [70,70], [70,46], [25,46], [25,0]]; obj.body.addPolygon({}, myPolygonArray); } Example:
  13. tilemap not centered

    Hello everyone So i have been messing around with tilemaps on the mobile device but i seem to be running into a centering issue. I have tried doing rest on the tilemaplayer but that doesnt work or setting the anchor point. attached is the screen shot of what I am talking about. the code is as follow map = game.add.tilemap('map');map.addTilesetImage('wall'); layer = map.createLayer('Tile Layer 1'); game.load.image('wall', 'maze/wall.png'); game.load.tilemap('map', 'maze/map.json', null, Phaser.Tilemap.TILED_JSON); anyone have any suggestions on centering this? thanks
  14. How to center text?

    How can I center the font? I have tried using game.world.centerXbut the text still ends up not in the center. any ideas?
  15. Why don't text center?

    Why not centered on the sprite?????? var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'game_div'); var scale = window.innerHeight/9; var main_state = { preload: function() { game.load.image('hello', 'assets/bird1.png'); }, create: function() { this.hello = this.game.add.sprite(20, 20, 'hello'); this.hello.width = this.hello.height = scale; var text = game.add.text(0, 0, '10', {font: parseInt(scale/2)+'px arial', fill: '#aaa'}); this.hello.addChild(text); text.position.x = (scale - text.width)/2; text.position.y = (scale - text.height)/2; }, update: function() { } }; game.state.add('main', main_state); game.state.start('main');
  16. OutOfBoundsKill doesn't work

    At first, It works perfectly. Then I change the world by game.world.setBounds(-500, -300, 1000, 600) and sprite.outOfBoundsKill = true doesn't work. Don't kill it. I tried to make the condition manually by: if(sprite.inWorld === false) sprite.kill()But in this case, never create any. My version is v1.1.6 in the Chat IRC they told me to upgrade, I tried and the whole game breaks, I'm not able to migrate now because the calendar. Any idea? So much thank you, R
  17. Centering bitmap text

    Hi! I have a problem of centering BitmapText after it has been updated with setText method and it's dimension changed. Does someone know how to do it? I have my text defined as:this.score = new game.BitmapText('0', {font: 'soupjustice64w'});this.score.position.x = game.system.width/2;this.score.position.y = game.system.height/2;game.scene.stage.addChild(this.score);And then I update it and want to set new position: this.score.setText('300');this.score.position.x = (game.system.width/2)-(this.score.textWidth/2);this.score.position.y = game.system.height/2;But this doesnt work :/
  18. Center Fullscreen

    Hey guys, I think this is a newbie question. I'm using this.stage.scale.startFullScreen(); to make my game go fullscreen. When it does, the game is off to the side and doesn't fill the whole screen. I was wondering how I could center the game? Thanks, and I'm using the basic mobile template if that helps.
  19. centering canvas

    I've just started with phaser, and I'm wondering how I should center the canvas on the screen. I see that phaser can manage scaling, so I wonder if it could do the centering, or if I should mess with CSS myself, and how exactly.