Search the Community

Hi, my goal is to have a canvas that spans 80% of the users browser and keeps aspect ratio of 16:9. I was trying different approaches throughout today, failing to reach the goal, but here's the idea I came up with that works on paper and in my head, but not in practice. Can anyone see where's the problem in my line of thinking? Conceptually: I pretend I have 1280x720 available and use it to position whatever I want on the canvas, using the 1280x720 coordinates system. Then I find out what screen size I have available and compute following values using following formulas: newWidth = window.innerWidth * 0.8 newHeight = newWidth * (16/9) scaleFactor = newWidth / lastWidth (when this is first called, lastWidth is 1280) In the test environment, I have larger screen than this, so I start with scaleFactor=1.2 and I have two sprite circles, for which I update both coords by sprite.x = sprite.x*scaleFactor equation. For moving the sprites at corresponding scale, this seem to work correctly. Similarly, I thought that doing sprite.set.scale(scaleFactor) or sprite.set.scale(scaleFactor, scaleFactor), will do the job correctly and performed following test: 1. Have it loaded for the first time in big window, with values being properly scaled (success?) 2. Have it loaded in a smaller window by clicking "Restore down" on window control, which scales things down by three times, scale factor 0.3, everything seems legit. 3. Have it loaded back in the big window as in (1), scale factor = 3 (scaling 300% up, as it scaled to 30% before), which works for coordinates, but scale is off (its way bigger, I will attach screens to demonstrate this). Why is 3 happening? // Hopefully minimum viable example of what is going on in my code, with unnecessary/irrelevant parts removed const targetAspectRatio = 16 / 9; const canvasWidthPercentage = 80; const baseWidth = 1280; const baseHeight = 720; let scaleFactor = 1.; const initialWidth = window.innerWidth * (canvasWidthPercentage / 100); const initialHeight = initialWidth / targetAspectRatio; // Keeping track of previous dimensions let lastWidth = baseWidth; let lastHeight = baseHeight; const app = new PIXI.Application({ width: baseWidth, height: baseHeight, resolution: window.devicePixelRatio || 1, }); document.body.appendChild(app.view); /* Here I spawn circles -> redacted from this sample, but attached below */ function resizeHandler() { const newWidth = window.innerWidth * (canvasWidthPercentage / 100); const newHeight = newWidth / targetAspectRatio; scaleFactor = newWidth / lastWidth; // scaleWidth == scaleHeight, due to aspect ratio lock I believe console.table({/* Debug you see in attachments */}) // Update the renderer size app.renderer.resize(newWidth, newHeight); displayedSprites.forEach((sprite) => { sprite.scale.set(scaleFactor) sprite.x = sprite.x * scaleFactor; sprite.y = sprite.y * scaleFactor; console.log("On window resize moved sprite to [x,y]=["+sprite.x+","+sprite.y+"]") }); lastWidth = newWidth; lastHeight = newHeight; } window.addEventListener('resize', resizeHandler); resizeHandler(); Wasn't sure it is relevant, but here's how I spawn those circles: const spawnCircle = (x, y) => { let graphics = new PIXI.Graphics(); graphics.beginFill(0xFF0000); graphics.drawCircle(50, 50, 50); // center coords (x,y) and radius graphics.endFill(); const texture = app.renderer.generateTexture(graphics); const sprite = new PIXI.Sprite(texture); sprite.x = x * scaleFactor; sprite.y = y * scaleFactor; console.log("Spawning a circle at [x,y]=["+sprite.x+","+sprite.y+"]") app.stage.addChild(sprite); displayedSprites.push(sprite); } spawnCircle(150, 100); spawnCircle(150, 300);

I think I'm missing something very basic about how Phaser Tweens operate but I just can't get this simple thing to work. Imagine a very simple scene: canvas of 800x640 red circle in the center two blue lines in a 9:00 position private create(): void { const circ = this.add.circle( 400, 320, 200, 0xff0000 ); const l1 = this.add.line( 0, 0, 400, 320, 400, 100, 0x0000ff ).setOrigin(0); const l2 = this.add.line( 0, 0, 400, 320, 200, 320, 0x0000ff ).setOrigin(0); } So far so good. Now I want to scale this simple figure, same config 1.5x its current size: private create(): void { const circ = this.add.circle( 400, 320, 200, 0xff0000 ); const l1 = this.add.line( 0, 0, 400, 320, 400, 100, 0x0000ff ).setOrigin(0); const l2 = this.add.line( 0, 0, 400, 320, 200, 320, 0x0000ff ).setOrigin(0); this.tweens.add({ targets: [circ, l1, l2], scale: 1.5, yoyo: false, duration: 2000, ease: 'Sine.easeInOut' }); } Expected behavior: the circle expands from the center the lines expand as well, ideally where they meet Actual behavior: As things stand, only #1 fit my expectations. The lines, however, translate as opposed to merely scaling. And the translation seems affected by the scale parameter passed to tweens.add. What gives? What am I missing here? Given the various configurations for "origin" wrt lines in Phaser 3, the worst I was expecting was that the lines would emanate/grow differently than the circle (which emanates from the center/origin). But I definitely expect the lines to stay still/keep their intersection at the circle's center. Can you explain what exactly Phaser is doing here and what might I do to get my desired effect?

Hi, I have a beginner's question about melonjs. If I run '<any sprite object>.scale(2);', then the sprite will move a little to the upper left on the screen, and the sprite's appearance will be about four times as large. The anchorPoint of the sprite is (0.5,0.5)(=default), so I think the sprite can't move, it just doubles the size of the sprite, but what's wrong with my code? My environment is melonjs 8.0.1, browser is chrome, OS is macOS High sierra. Thank you.

Noob here using Phaser. But here's my issue: I'm struggling to get to a perfect scale on the game I'm building. The best option for me so far is Phaser.ScaleManager.RESIZE; But this method doesn't have a limit to the canvas size. If an user has a huge screen, say 30 inches, he'd have a lot of advantage over an user with a medium size screen, say 17 inches. The 30 inches user would have much more view of the world. I've tried to set the canvas to a fixed size, like 1280x720, then dynamically resize the canvas style. And using Phaser.ScaleManager.SHOW_ALL; But it doesn't do the trick because it shows the black borders and I can't get rid of it. To make it clear what I want to achieve, I'm building an online multiplayer game (.io). If you notice the most famous .io games like agar.io, diep.io and slither.io, the game scale is perfect for any screen size. If the screen is too big, the game doesn't show more screen. It just adjusts for a more zoomed game. Here's a gif of what I need and how my game is now: agar.io: https://gyazo.com/94a41e06816b8dc9a1fd4608c0cfa525 Notice that in agario, the screen only goes so far before the game starts to scale. My game: https://gyazo.com/4269ecfb1253b9ddbcd6e917ad1a8602 Notice how much of the world I can see after scaling my game. Meaning that there is no limit for the canvas. Please let me know if you need more information in order to help me out here! Thanks in advance!

Is there a way to scale a Graphics without getting the linewidth scaled as well? For instance: var stage = new PIXI.Container(); var graphics = new PIXI.Graphics(); // Set a fill and line style. var linewidth = 10; graphics.beginFill(0xFF3300); graphics.lineStyle(linewidth, 0xffd900, 1); // Draw a shape. graphics.moveTo(50, 50); graphics.lineTo(250, 50); graphics.lineTo(100, 100); graphics.endFill(); // Now, scale this Graphics. var scale = 5; graphics.scale.set(scale, scale); // all lines now have width linewidth * scale In the example above, the vector "shape" gets properly scaled by a factor of 5. Unfortunately, so does the linewidth. I am trying to render Graphics vector data on top of Google Maps (typically polygons over countries), and when the map gets zoomed in, I want to rescale the data without getting enormous boundaries.

Hi, I don't like to bother, but I don't sure what I'm doing and I need some guidance if it's possible... I have two containers, one for map sprites (320x180px) and the other for UI graphics (who it's resized to native resolution, in my case 1920x1080) My intention is to rescale map_sprites_containter and all its sprites to 1920x1080 in the most efficient way, every frame. So I came up with the idea of render a texture of map_sprites_container, convert it to a sprite and scale it. Is this the best way? Some pseudo code: var bitmap = new Bitmap(320, 180); var renderTexture = PIXI.RenderTexture.create(320, 180); renderer.render(map_sprites_containter, renderTexture); var canvas = renderer.extract.canvas(renderTexture); bitmap.context.drawImage(canvas, 0, 0); canvas.width = 0; canvas.height = 0; renderTexture.destroy({ destroyBase: true }); bitmap.baseTexture.update(); var render_map_sprites = new Sprite(); render_map_sprites.bitmap = bitmap; render_map_sprites.scale.x = 6 render_map_sprites.scale.y = 6 map_sprites_containter.addChild(render_map_sprites);

My game does not scale correctly when the browser loads the game while the window size is made smaller. Another scenario is while in game state, the game will resize correctly, If I try to make the window bigger once again the game will be made out of scale and not usable really. this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

Hi guys. I'm trying to do a "zoom in" effect on a GUI_Object. But when scaling the image leaves the original collision field. How to keep the image centered with the collision field of the button? Before click: After click: Code: game.UI.ButtonInit = me.GUI_Object.extend({ init: function (x, y, image) { this._super(me.GUI_Object, "init", [x, y, { image: image, }]); this.anchorPoint.set(0, 0); this.floating = false; }, onClick: function () { this._super(me.Sprite, "scale", [.8, .8]); }, update: function () { return true; }, draw: function (renderer) { this._super(me.GUI_Object, "draw", [renderer]); } });

Hello, I'm trying to scale the layers of my map, but when I try it shows part of the following tiles, some idea of how to solve this ?, the map is created in tiled, the spritesheet is 16 x 16: CODE create function: map = this.make.tilemap({'key':'01'}); const TilesPacked = map.addTilesetImage('tiles_packed', 'tiles_packed'); const SnowExpansion = map.addTilesetImage('snow-expansion', 'snow-expansion'); groundLayer = map.createDynamicLayer('Wall', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Ground = map.createStaticLayer('Ground', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const OverGround = map.createDynamicLayer('OverGround', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Npc = map.createDynamicLayer('NPC', [TilesPacked,SnowExpansion], 0, 0).setScale(2); player = this.physics.add.sprite(16*3, 16*3, 'characters', 1).setBounce(0.2).setScale(2); preload function: this.load.image('tiles_packed', 'sprites/tiles_packed.png'); this.load.spritesheet('characters', 'sprites/characters.png', {frameWidth:16, framaeHeight:16}); this.load.image('snow-expansion', 'sprites/snow-expansion.png'); this.load.tilemapTiledJSON('01', 'sprites/Maps/02.json');

In Phaser 2 we could tween scale like in the topic linked below. How is this done in Phaser 3? It looks like the sprite Scale property has changed to scaleX and scaleY, which I thought maybe I could tween like this, but this didn't seem to work: this.scene.tweens.add({ targets : [ this.scaleX, this.scaleY ], x: 10, y: 10, ease : 'Linear', duration : duration, yoyo : false, repeat : 0, callbackScope : this });

Hello all. I have a problem with Chrome on Android. When I switch to a fullscreen I can get different results: First one (all is ok): The Second one (a white band at the bottom): The third one when I leave fullscreen mode (white band at the top): I use the following code: this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.forceOrientation(true, false); this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); I get such results only in Chrome on Android. Does anybody know why this occurs and how to solve the problem? Any tips would be appreciated!

Hello. How to make game zoom like a PIXI Viewport?

matterjs always set 1 for body scale parametr after setScale. And it's ploblem for reScale game object. Any solve for it?

Hi guys, How do I make it that the black square moves with the red square but NOT scale? Example: jsfiddle When you click on the small blue square the big white square gets smaller. The big red square scales with the white square. This is what I want but... the little black square should not scale but change position, is that possible? The black square should be in the red square BUT with the same height and width.

Hello, community! I've just started using Phaser 3, and it's a pleasant experience. Special thanks to team for TypeScript definitions. I'm currently trying to implement scale logic for my game. I've read in this blog post that developers considered to change `ScaleManager` in Phaser 3, but I didn't find one in sources. I've also tried to take a look at how resize is handler in Mario platformer from pinned topic. Author used this: scaleMode: 0, //Phaser.ScaleManager.EXACT_FIT, ... but I didn't find `scaleMode` in Config.js object, and also didn't find any reference in Game.js object to this config property. It seems this was a way to scale game in Phaser 2, but not anymore. My current idea is to put all game objects in a 'parent' frame (not sure which object should I used for this btw..), and scale this 'frame' in each Scene on 'resize' event. This feels awkwardly wrong to me, and I'm looking for better approach. Would be very grateful for a hint where to look, or an advise on how to properly implement scaling. Thank you!

Hi, I'm totally new in HTML 5 Games. If I resize my canvas (by calling resize function in preload), those text will become blurry, ugly. Any idea to handle this? Here's the example: https://codepen.io/anon/pen/wxdXKp .

Hello everyone! Ive been tinkering around happily with phaser CE now for my latest browser app. I'm feature complete since yesterday and stumbled upon one last problem i cannot figure out how to address... i tried a couple of things but do not understand why things behave like they do. Basically i have a group of sprites, which i add as a child to another sprite. Now the problem i have is, i calculate a scalefactor for my app to scale it accordingly to the browser/device size and the group seems to scale in a very weird way (the scaling is very inconsistent, on a super small window it gets scaled down super much, on scalefactors close to 1 it is ok...) so what i do (i reduced the code to the affected lines): class MapScreen extends Phaser.Sprite this.anchor.setTo(0.5, 0.5); this.mapSize = 0.52; //0.52 this.scale.setTo(App.scaleFactor * this.mapSize); this.mapGroup = this.game.add.group(); this.stationButtons = []; this.stationButtons.push(this.game.add.sprite(App.gameWidth/2 + (480 * App.scaleFactor), App.gameHeight/2 + (370 * App.scaleFactor), 'point1')); // Anfang 0 // enable animations for buttons and add function for (let i = 0; i < this.stationButtons.length; i++) { this.stationButtons[i].anchor.setTo(0.5, 0.5); this.stationButtons[i].scale.setTo(App.scaleFactor * (this.mapSize + 1.8)); this.stationButtons[i].animations.add("pulse", [0, 1, 2, 3, 4, 5, 6]); this.stationButtons[i].animations.play("pulse", 8, true); this.stationButtons[i].inputEnabled = true; this.stationButtons[i].input.useHandCursor = true; this.stationButtons[i].events.onInputDown.add(function(){this.stationClicked(i)}, this); this.mapGroup.add(this.stationButtons[i]); } this.addChild(this.mapGroup); so, when i leave the last line and do not add the group to the MapScreen, its fine, but as soon as i do it it starts to scale weirdly...?! And i cant figure out how to keep the scale the same when the scaleFactor changes... Thanks in advance

Hello! I have a trouble when scaling down big assets. I just have a stage contains some sprite and i'm doing: stage.scale.x = stage.scale.y = 0.2; https://jsfiddle.net/n67xwb5w/ As a result I have an ugly ragged image. I found a solutions for a simple canvas drawing without pixi http://jsfiddle.net/qwDDP/ from here http://stackoverflow.com/questions/18761404/how-to-scale-images-on-a-html5-canvas-with-better-interpolation Can I achive the same smooth effect after rescaling in PIXI?

I'm having a hard time trying to do something that should be quite straightforward, so I'm not sure what I'm missing. How do we scale an image (to use as a game background) to fit the window? This is my approach, which doesn't work: preload() { this.load.image('bg', 'space3.png'); } create() { const bg = this.add.image(0, 0, 'bg'); bg.width = window.innerWidth; bg.height = window.innerHeight - this.parent.canvasOffset; // I would like to use this.game.width and this.game.height but those values don't exist } If I use bg.scaleX and bg.scaleY and set the values to 2.0, it does work, but what I want is to scale it to fit the window/viewport.

Hi everyone, I'm trying to figure out how to 'reset/readjust' a sprites collider after adjusting the sprites scale. The initial collider setup ( size/offset) is working perfectly at scale 1, with the following : sprite.setSize(44,64,true); sprite.body.offset.y = 44; scaling works great for both sprite and collider with : sprite.setScale(2); the issue is when i set the scale ( to 2 in this example ), the collider now has an offset. is there a built in way to 'reset' this collider so it aligns with the sprite? thanks for your help. var config = { parent: 'container', type: Phaser.WEBGL, width: 300, height: 300, parent: 'phaser-example', physics: { default: 'arcade', arcade: { debug: true } }, scene: { preload: preload, create: create } }; let game = new Phaser.Game(config); let sprite; function preload () { this.load.image('00', '00.png'); } function create () { sprite = this.physics.add.image(400, 300, '00'); sprite.setSize(44,64,true); sprite.body.offset.y = 44; sprite.setScale(2); sprite.setVelocity(100, 200).setBounce(1, 1).setCollideWorldBounds(true).setGravityY(200); }

Hello everybody, Long time I haven't post anything here as my life with babylonjs is going smooth and well. But unfortunetly I am now stuck! I am looking for a way to adapt an advanced texture size depending on the mesh size so that the text on it will keep the same font and shape. I have made a playground to make my request more clear : https://playground.babylonjs.com/#RICIF8 Thanks a lot! Pichou

I have sprites which are all anchored at 0.5 for x and y, and they are often "flipped" via (e.g.) someSprite.scale.x *= -1. Because their anchors are centered, they don't move immediately because of this. However, changing to a negative scale mucks with their size and coordinates, because now a 20px-wide sprite will report a width of -20px, and it also interprets changes to its position inverse to what they were before (sprite.x++ will cause it to move up on the screen). This makes sense and everything, but the sprites' movement and activity is not always related to their scale. I know there must be a simple way to make a mirrored "copy" of a texture which can be swapped out on a single sprite without having to change its scale from positive to negative constantly.

Hi In Phaser2, it was possible to scale a TileSprite so the sprite inside was scaled while being tiled. It doesn't seem to be there anymore in Phase3. Is there a way to achieve this? Thanks!

In my game I have a form that I built with Orange Games' input plugin (https://github.com/orange-games/phaser-input). The input form working great on computer, but on mobile when you tap into an input field, it zooms in, and becomes impossible to see what you're doing, or go to the next field. I tried using scale prevention with meta tags: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"> and: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=2, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> but my game uses "game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL" to look good on all resolutions. So when I put in the meta tags, it doesn't scale initially, and it is too big on mobile. Is there any way to use a meta tag that allows for initial scaling on mobile, but then freezes the scale in order to prevent zooming on input fields?

hi, after get the examples from : https://phaser.io/examples/v2/tilemaps/tile-properties i'm searching to modify the object of the tiles, but i can't modify the alpha and the scale (=> see //HERE THE PROBLEM). how do you do to reach that ? var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update ,render: render}); function preload() { // tiles are 16x16 each game.load.image('tiles', 'tiles.png'); } var cursors; var currentDataString; function create() { // Create some map data dynamically // Map size is 128x128 tiles var data = ''; for (var y = 0; y < 128; y++) { for (var x = 0; x < 128; x++) { data += game.rnd.between(0, 20).toString(); if (x < 127) { data += ','; } } if (y < 127) { data += "\n"; } } // console.log(data); // Add data to the cache game.cache.addTilemap('dynamicMap', null, data, Phaser.Tilemap.CSV); // Create our map (the 16x16 is the tile size) map = game.add.tilemap('dynamicMap', 16, 16); // 'tiles' = cache image key, 16x16 = tile size map.addTilesetImage('tiles', 'tiles', 16, 16); // 0 is important layer = map.createLayer(0); // Scroll it layer.resizeWorld(); game.physics.startSystem(Phaser.Physics.ARCADE); cursors = game.input.keyboard.createCursorKeys(); // Our painting marker marker = game.add.graphics(); marker.lineStyle(2, 0xffffff, 1); marker.drawRect(0, 0, 32, 32); game.input.addMoveCallback(updateMarker, this); game.input.onDown.add(getTileProperties, this); cursors = game.input.keyboard.createCursorKeys(); } function getTileProperties() { var x = layer.getTileX(game.input.activePointer.worldX); var y = layer.getTileY(game.input.activePointer.worldY); var tile = map.getTile(x, y, layer); console.log(tile) //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// //HERE THE PROBLEM tile.scale.x=.1 tile.alpha=.1 // Note: JSON.stringify will convert the object tile properties to a string currentDataString = JSON.stringify( tile.properties ); tile.properties.wibble = true; } function updateMarker() { marker.x = layer.getTileX(game.input.activePointer.worldX) * 32; marker.y = layer.getTileY(game.input.activePointer.worldY) * 32; } function update() { if (cursors.left.isDown) { game.camera.x--; } else if (cursors.right.isDown) { game.camera.x++; } if (cursors.up.isDown) { game.camera.y--; } else if (cursors.down.isDown) { game.camera.y++; } } function render() { if(currentDataString){ game.debug.text('Tile properties: ' + currentDataString, 16, 550); } else { game.debug.text("Click on a tile to reveal the properties of the tile", 16, 550); } }