Search the Community

Showing results for tags 'scale'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 183 results

  1. hi, it's a subject that appears also often but i can't find a solution who work for me, especially with the new Phaser. I have a portrait game and i want that my game is stretched like that : width = width of the device height is stretched to the height of the device i want no black borders visibles i have try many things without success, i have follow these links : these solution appears to be fine but that don't work at 100% , see my capture screen : var innerWidth =window.innerWidth var innerHeight=window.innerHeight var gameRatio =innerWidth/innerHeight var game = new Phaser.Game(640,Math.ceil(640*gameRatio), Phaser.CANVAS, '', { preload: preload, create: create, update: update }) function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL //doesnt work with the new phaser > it appears that i must use game.scale.refresh() but that doesnt work // game.scale.setScreenSize(true) game.scale.pageAlignHorizontally = true game.scale.pageAlignVertically = true game.load.image("test","") } function create(){ var ech=game.add.sprite(0,0,'test') //resize() } function update(){} have you a an advice to do that ?
  2. Hey ! I was wondering (instead of sleeping) if the scaling behavior for sprite2D is working OK. I have this strange behavior: Scale 1 position(0,0) Scale 0.5 position (0,0) How to know the correct position on the screen after scaling ?? The code: var texture = taskObject.cloneAssetIntoScene(taskObject.assets.faceTexture, scene); var ts = texture.getSize(); var sprite = new BABYLON.Sprite2D(texture, { parent: canvass, id: "sprite1", x: 0, y: 0, invertY: false, spriteSize: ts, scale: 0.5, spriteLocation: new BABYLON.Vector2(0, 0) }); Thanks!
  3. Hey, My code is : var canvass = new BABYLON.ScreenSpaceCanvas2D(scene, { id: "ScreenCanvas", backgroundFill: "#C0C0C040", backgroundRoundRadius: 50 }); I was wondering if this resize behavior was normal, when the canvas is set up it fills the whole screen, i can resize it down with the window, but when the wondow gets bigger than the original size the canvas stop resizing : Begining : Smaller: Larger: The position of the sprite changes between the images, sorry if its confusing, its really the limits of the canvas as seen with rounded borders and color that matters. On the larger size, the rounded border disappear on the right: This happens if I resizes down before resizing up. How can I make it resize to the canvas size for larger sizes ?
  4. Hey, I was wondering if actualSize was intended to give the size after scaling ? Is there a way to get the actualSize after scaling ? For now im using this : var spriteSize = new BABYLON.Vector2(sprite.size.width, sprite.size.height); var scaledSpriteSize = spriteSize.scaleInPlace(sprite.scale); It would be nice to have access to the original size, and the scaled size in separate properties... Also, I was wondering what you think about making vector2 and size function compatible, meaning Vector2.subtract(Size) would work... some kind of abstraction object that transforms every vector/size into a true vector of the same dimension but without the unit (x, width etc...). This would allow for a more fluid development, no @Deltakosh @Nockawa ?
  5. Hello, I can't seem to understand why this is happening: Here, I just want to load a tilemap made in Tiled, it's a 35*15 tile map, each tile is 64*64px as are the tile in my tilesheet (2240*960 in total). So I followed this example from Phaser (apparently some of them are not accurate...) and the layer doesn't resize. I get that on the browser the map is displayed with the total width and height inside the game element which has the size I want, and that's my problem !
  6. Hello, I am very new to phaser but not to Js and I can't seem to understand why this is happening. I have a 35*15 tile
  7. Hello guys, I'm making a plaformer, and I use the tiledmap plugin ( to have best performance on mobile(and it works). There's always a black space below my tilemap : And when I test it with mobile dimension, it looks like that : I wish I could fill my canvas full height with my tilemap with any device, without "y-axe scrolling" or black space. When I try to scale my layer : var winW = window.innerWidth; var winH = window.innerHeight; var height_of_game_in_pixels= 1536; //24tiles*64px var SCALE = winH / height_of_game_in_pixels; map = game.add.tiledmap('mario_niveau_1');, 'essai1'); layer = map.layers[0]; layer.scale.setTo(SCALE,SCALE); layer.resizeWorld(); It's cropping like that... In addition, How can I scale my objects layer for my collision ? Tiled view of my layer : Any ideas ?
  8. I'm experiencing a bug that I was not yet able to reproduce in an isolated environment. I'm using bjs 2.5 alpha. During the loading of assets I'm creating a ScreenSpaceCanvas2D for the preloader UI in my custom loading screen (shown and hidden via a class implementing ILoadingScreen). I created a Sprite2D bar from an image texture (image was loaded previously), and I change the scaleX of the bar according to the loading progress. The bar is not updated accordingly. The scaleX variable is changed properly but visually it looks like it's stuck on scaleX 0 or 1. The values I pass are fine. The bar Sprite2D is a child of a Group2D. I set the origin of the Sprite2D to (0, 0). The bug persists even after the loading is ended if I choose for testing purposes to not hide the preloader UI. I have no idea if this is related to the loading situation or not, I just gave as many details as possible. I tried reproducing scaling a simple Sprite2D on the playground and it worked as expected. Any idea what might be going on here? @Nockawa
  9. Hello there, I'm making a plaformer, and I use the tiledmap plugin ( to have best performance on mobile(and it works). But, does anybody here knows how can I resize my layer like the original function : "layer.resize(x,y);" ? I wish I could fill my canvas full height with my tilemap with any device. In addition, How can I scale my objects layer for my collision ? Any ideas ?
  10. Im using Phaser 2.6.1 If I load the frame from a texture on a tileSprite it shows bigger than the graphic from the file. if I load the same frame on a regular sprite it shows the correct size. //this shows bigger than the real size from the texture file this.backLayer01 = this.add.tileSprite(0,0,,, "scene1", "nubes"); //this shows to be the same size as in the texture file this.backLayer02 = this.add.sprite(0,0, "scene1", "nubes"); On top is the sprite and bottom the tileSprite. I suppose they have to be the same size and have the same position. I'm not doing anything to them in other parts of the code. To load the texture I'm using this code on the preloader: this.load.atlasJSONHash("scene1", "assets/texturas/Escenario01_01.png", "assets/texturas/Escenario01_01.json"); Is this the normal behavior? How can I avoid it? Thanks!
  11. Hi everyone, I'm trying to make a platformer who can run on any smartphone. I have a tilemap with theses features : - 40 Tiles heights -100 Tiles widths - Each tiles is 64x64px. To calculate my scale I simply use that as reference : var SCALE = window.innerHeight/ 2560; //64*40 = 2560px, the height of my tilemap I already made a platformer with 16x16px tiles and every scale worked very well, so i just copy paste that simple code : map ='objects'); map.addTilesetImage('items', 'tiles'); map.setCollisionBetween(0, 16); = Phaser.ScaleManager.RESIZE; layer = map.createLayer('mario_niveau_1'); layer.debug = true; layer.setScale(SCALE,SCALE); layer.resizeWorld(); That's work when my SCALE is better than 1 but not when it's less. My collision are always good, but the map don't show up like you can see below Any ideas ?
  12. bdekk

    Scale tiled map

    Hello everyone. I am trying to load my map made in tiled into my game. However, the map does not scale properly and I cannot see all the objects. Could someone perhaps point me in the right direction? The map does load, it only scales wrong. = new Phaser.Game(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio, Phaser.AUTO, ''); ='level3'); //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset'tiles_spritesheet', 'gameTiles'); //create layers this.backgroundlayer ='background'); this.blockedlayer ='blocked'); //collision on blockedLayer, 5000, true, 'blocked'); // this.backgroundlayer.scale.set(2); //resizes the game world to match the layer dimensions this.backgroundlayer.wrap = true; this.backgroundlayer.resizeWorld();
  13. I am currently adding a sprite to my game with no texture as I just need an invisible draggable area, resizing it to the dimensions I need, then adding a bunch of buttons to it with .addChild(button) so that the buttons follow the sprite when dragged, which works fine, but the buttons adopt the scale of the sprite, which is undesired in this case. How can I reset the scale of a child after it has been added to a group?
  14. Hello, I am using Intel XDK with phaser to create a mobile game. To scale the game to every resolution I use this code ratio = window.devicePixelRatio || 1; w = window.screen.availWidth * ratio; h = window.screen.availHeight * ratio; var config = { "width": w, "height": h, "renderer": Phaser.AUTO, "parent": 'game', "resolution": ratio }; game = new Phaser.Game(config); This works properly when ratio < 3 but above that game gets stretched vertically so for devices like iphone 6+ and devices with FHD resolution. If i dont provide the resolution parameter all the images becomes blurred. Can someone help me with this problem. Thanks
  15. Hey guys I am having some trouble achieving proper scaling and resolution settings on all devices. I will show you what I do at the moment, and please tell me where I am wrong. I am testing this on several devices and on some, the window.screen.width and height is detected in half.... which is weird. //index.html window.onload = function() { //create new Phaser instance this.w = window.screen.width; this.h = window.screen.height; if(this.w < this.h) { this.w = window.screen.height; this.h = window.screen.width; } else if(this.w > this.h) { this.w = window.screen.width; this.h = window.screen.height; } console.log(this.w + "X" + this.h); var game = new Phaser.Game(this.w, this.h, Phaser.CANVAS, 'game', null, false, true, null); game.autoResize = true; game.forceSingleUpdate = true; game.preserveDrawingBuffer = true; game.clearBeforeRender = false; game.lockRender = false; //add states to the game game.state.add('Boot', Game.Boot); game.state.add('Preloader', Game.Preloader); game.state.add('MainMenu', Game.MainMenu); game.state.add('GameMachine', Game.SlotMachine); //start the boot state game.state.start('Boot'); }; //Boot.js create: function () { this.time.advancedTiming = true; this.addScrollPlugin(); //Pass the current game to the controllers SoundController.setGame(; AutoPlayController.setGame(; GameStateController.setGame(; = 1; this.stage.disableVisibilityChange = true; //scale settings if( { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVeritcally = true; //Start Pre-loading this.state.start('Preloader'); } else { console.log( + "X" +; = false; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.forceOrientation(true, false); this.scale.enterIncorrectOrientation.add(this.handleIncorrect, this); this.scale.leaveIncorrectOrientation.add(this.handleCorrect, this); this.scale.refresh(); this.state.start('Preloader'); } }, my phone is Samsung Galaxy S3 Neo with 1280x720 screen, when I set it with window.screen.width and height I get 640x360. This is only on some devices... ... why? I can set hard-coded resolution and it will be fine, but I need to detect it in order to have multi-device support. Any ideas?
  16. See fiddle here: I'm working on a game with tilemaps and arcade physics etc. and I'm running into an issue. I've got a sprite sheet of a running guy and the physics body rectangle is adjusted, so the physics.body only covers the torso of the sprite guy. player.anchor.setTo(0.5); player.body.setSize(30, 56, 10, -3); // width, height, offsetX, offsetY The sprite is always facing right and when the player moves to the left, I just flip the scale.x to -1 So something like this: if (_cursors.right.isDown && player.body.velocity.x >= 0) { // move right player.body.velocity.x = MOVE_SPEED; player.scale.setTo(1, 1); // flip to right } else if (_cursors.left.isDown && player.body.velocity.x <= 0) { // move left player.body.velocity.x = -1*MOVE_SPEED; player.scale.setTo(-1, 1); // flip to left }; The problem is that when the player faces left, the body is outside of the sprite, the body and the sprite don't overlap anymore which screws up the collision detection. Any idea how to solve this?
  17. I've been looking for information on how to control scaling and resolution of the window, asset, gui, etc. but can't seem to find exactly what I'm looking for amongst the comments/tutorials. If a game were to be released for both standalone desktop (nw.js) and ios/android then it would probably have to support a fair few resolutions and aspect ratios: 1366x768 16:9 19.1% 14'' Notebook / 15.6'' Laptop / 18.5'' monitor 1920x1080 16:9 9.4% 21.5'' monitor / 23'' monitor / 1080p TV 1280x800 8:5 8.5% 14'' Notebook 320x568 9:16 6.4% 4'' iPhone 5 1440x900 8:5 5.7% 19'' monitor 1280x1024 5:4 5.5% 19'' monitor 320x480 2:3 5.2% 3.5'' iPhone 1600x900 16:9 4.6% 20'' monitor 768x1024 3:4 4.5% 9.7'' iPad 1024x768 4:3 3.9% 15'' monitor That was 2014, I'm sure it's just as diverse in 2016. With that in mind, how the hell do you scale things accounting for those variations? Is there a way to have a resolution option (on desktop), like most desktop games? And if so how would one account for that when sizing UI/Assets/World? So far, working with: (would of used code tags but I don't think they're working, it's just all on one line. Or is it just me?) var SCREEN_WIDTH = window.innerWidth * window.devicePixelRatio; var SCREEN_HEIGHT = window.innerHeight * window.devicePixelRatio; var SCREEN_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT; var SCALE_RATIO; if (SCREEN_RATIO > 1) { SCALE_RATIO = SCREEN_HEIGHT / SCREEN_WIDTH; } else { SCALE_RATIO = SCREEN_WIDTH / SCREEN_WIDTH; } var game = new Phaser.Game(SCREEN_WIDTH, SCREEN_HEIGHT, Phaser.AUTO, null, {preload: preload, create: create, update: update}); function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; } ... grid.tileSize = 30 * SCALE_RATIO; Seems to be missing something, as positioning doesn't seem to line up. Is there something else that I should be doing other than sizing/positioning everything based aspect ratio like the grid.tileSize above? The post is based on a camera/world where everything is visible and there's no panning, like looking down at a board game, so nothing would be off screen and everything has to fit. Thanks for any help and/or tips. Kind regards, A Phaser nub.
  18. I have a game were the user put stickers on the stage. he can scale them and rotate... The PNG file is in a fitting size so the user can scale it without loosing quality. But, when I scale the image down it is crisp... Why is that and how can I fix it? Thank you :]
  19. Im trying to scale my game so that it fits the whole screen, I don't care about images being stretched at this point, so I'm using the EXACT_FIT scale mode in phaser, which is supposed to scale it so that it fills the whole screen. Its working for the most part, except that only the top and the left side of the screen have little white bars. I've attached a screen shot but it might be hard to see since the background of the post is white. I know my game is scaling all the way because my bg color is set to green and not white, so I think it might be the background of the web browser that the game is running in? I'm using cocoonjs to make the apk that I'm running. Any suggestions on how to get those two little white bars to go away?
  20. mm

    min/max scale fails

    Hello, I'm having an issue with setScaleMinMax property on sprites, I have two sprites, parent and child, the child is set to a min/max scale of .5 and the parent is scaling freely, I'm having odd results when scaling the parent. The parent also rotates, in some angles the child maintains the scale but in others it scales, what can I do to prevent the child from scaling? Thanks.
  21. Is it possible to create a group and configure in such a way that any child with position (0, 0) would be the center of the group instead of its top left corner? As I add bigger sprites to the group and its size increases, things get misaligned. The manual solution seems to involve re-adjusting the positions of the object in the group every time I add/remove something to it, which is kinda ugly.
  22. 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!
  23. Hi, I want to scale both sprite and .json physics file, is that possible and if so, how? I ve seen a few posts about that but no answers. Thank you
  24. Hi everybody, Here's my problem. I have a group, which I scale or rotate. Now if I drag a sprite in it, the sprite moves totally wrong. Its shift is scaled and rotated too! var gr = ;var sp = gr.create( 100, 100, 'face' ) ;gr.scale.x = -2 ;sp.enableInput = true ;sp.input.enableDrag( true ) ; Say, if the group is flipped by group.scale.x = -1, the sprite motion will be mirrored: the sprite and the cursor go different directions. Looks more like a bug of dragging. I'd appreciate any practical advice or workarounds. I have a big tree of nested groups, do I need to implement a multistage cast of the input coordinates? Thank you.
  25. As you probably know, when you are scaling the world in Phaser, the center point by default is (0,0). Been trying to zoom to a mouse pointer's coordinates but failed miserably with no luck. Anyone here managed to get this work?