Search the Community

Showing results for tags 'scaling'.

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 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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 111 results

  1. Hi there. Does anyone had a pleasure to build a Facebook Instant Game? I've spent two days trying to scale my Phaser game in the Facebook for Android. Currently scaling works nicely on desktop, in a responsive viewport of the dev console, in the mobile Chrome -- namely everywhere, except the Facebook app. Seems like it just ignores my settings, sprites are displayed at full width, despite the canvas (and game) dimensions are correct. Here are my init and boot scripts, the scaling logic is copypasted from a random gist: // init code FBInstant.initializeAsync().then(function() { FBInstant.setLoadingProgress(50); FBInstant.setLoadingProgress(100); FBInstant.startGameAsync().then(function() { /** Config part */ var FIXED_SIZE = 720; var FIXED_MEASURE = 'Width'; /** Name mapping */ var fixedName = FIXED_MEASURE; var resName = fixedName === 'Height' ? 'Width' : 'Height'; var FIXED_NAME = fixedName.toUpperCase(); var RES_NAME = resName.toUpperCase(); /** Measures of document */ var documentElement = document.documentElement; var documentFixed = window['inner' + fixedName]; var documentRes = window['inner' + resName]; var ratio = documentRes / documentFixed; /** Canvas measures */ var canvasFixed = FIXED_SIZE; var canvasRes = FIXED_SIZE * ratio; var screen = {}; screen['CANVAS_' + FIXED_NAME] = canvasFixed; screen['CANVAS_' + RES_NAME] = canvasRes; console.log(screen.CANVAS_WIDTH); console.log(screen.CANVAS_HEIGHT); game = new Phaser.Game(screen.CANVAS_WIDTH, screen.CANVAS_HEIGHT, Phaser.CANVAS); game.state.add('Boot', Boot); game.state.add('Preload', Preload); game.state.add('GameTitle', GameTitle); game.state.add('Main', Main); game.state.add('GameOver', GameOver); //Start the first state game.state.start('Boot'); }); }); // boot code var Boot = function(game) {}; Boot.prototype = { preload: function() { }, create: function() { this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true;;"Preload"); } } Would appreciate any help!
  2. I need to create a project based on a flash project, however, I can't think of a way to replicate this: I was thinking about using graphics but I do not know how to update it when dragging. Is there anyway to create this?
  3. Hello, I have my canvas stretching 100% width and height of the page. When running it in a small resolution screen and in a big resolution screen, the whole thing is scaled up. Is there any simple way to simple increase the radius of the camera based on the device resolution instead of having everything scale up? (Everything stays the same size just like regular html elements)
  4. Hi everyone, I am quite new in game dev and developing simple app using pixi.js and faced with the following issue: when I use simple sprite I can adjust scaling of sprite and it fit let say logic (using set.scale()), but when I change it to TillingSprite, it breaks any consistency for me. Could someone clarify scaling topic for me: 1. TillingSprite: as soon as I change sprite to TillinSprite I see only enlraged top area of asset spread on whole application stage. Reducing scale or size doesn`t display whole picture, it just reduce area of TillingSprite (picture). Please check my class below. I have played with different values of innerWidth/Height, but no desirable results achieved. What is correct way to scale TillingSprite? So scaling behaves the same as for Sprite: function Clouds() { var cloudsTexture = PIXI.Texture.fromImage("assets/images/clouds.png");, cloudsTexture, innerWidth, innerHeight); //, cloudsTexture); this.x = 0; this.y = 0; //this.scale.set(0.3, 0.3); this.tilePosition.x = 0; this.tilePosition.y = 0; }; //Clouds.prototype = Object.create(PIXI.Sprite.prototype); Clouds.prototype = Object.create(PIXI.extras.TilingSprite.prototype); Clouds.prototype.update = function () { this.tilePosition.x -= 0.8; } Thank you in advance,
  5. It used to work without problems. Now buttons and sprites will only be clicked/touched if I press ~100 pixels bellow them. I didn't change anything and the problem only exists on android. I think not even on all devices. I use cordova and the newest phaser version. I tried updating cordova but the problem persisted. I think it might have something to do with how I scale the game, but I have no idea how or why this really happens now. It would be great if someone knows why it happens and how to fix it. Here is my code for scaling: var width = window.innerWidth; var height = window.innerHeight; var targetW = 150; var scale = width/targetW; var targetH = height/scale; game.scale.setGameSize(targetW, targetH); game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; game.scale.setUserScale(scale, scale); game.renderer.renderSession.roundPixels = true; Phaser.Canvas.setImageRenderingCrisp( ; And here is how I create buttons: game.add.button(0,50,'play',function(){;game.state.start('Games');},this);
  6. I'm working on a "fake zoom" function that looks like this: class Zoomer extends Phaser.Group { zoom = (amount = { x: 1.5, y: 1.5 }) => { this.x = -((amount.x * ( / 2)) - ( / 2)); this.y = - (amount.x * ( * 1.15)); this.scale.setTo(amount.x, amount.y); } } The zooming itself works and goes where I want it to but all the masks in the group stay where they are and don't scale at all. This is how I usually create masks on a Phaser.Sprite: createMask() { const graphics =, this.y); graphics.beginFill(0xFFFFFF); graphics.drawRect(0, 0, this.width, this.height); this.addChild(graphics); this.mask = graphics; } How can I make the group scaling/repositioning include the group's sprites' masks as well?
  7. Hello everyone, I'm just making game/app that will check personality and skills of the kids, before they choose their carrier path in life. I have problem with hit area. In web browser everything works properly but when I run my app on mobile device, every sprite is scalling ok, but when I want to click on it I have to click a little bit below and in the right. It looks like sprite change position on the screen after scalling down but hit areas stay in their old positions. Either pixelPerfect = true and false doesn't work. Have you any ideas what is wrong? I'm not including code 'cause whole project is too big now to put everything here, it'll be not clear and won't gave you guys clue what's going on. If that'll be necessery I can try to compress it to some pseudo code or something. And happy new year everyone!
  8. Hey there! I am using the latest Phaser.js from the official website. I am creating a game that is supposed to be 640x480 in size. var game = new Phaser.Game(640, 480, Phaser.AUTO, '', { preload: preload, create: create, update: update }); But the final canvas that is being rendered is 800x600 in size, which would be correct according to my Windows DPI settings of 125% (640*1.25=800, 480*1.25=600). A resolution of 1280x720 will get scaled up to 1600x900 and as a result, everything will look blurred. The website itself is not zoomed in or enlarged in any way using Chrome. How do I disable this "feature"? I want to be able to control the size of the game.
  9. Art Vandelay

    Scaling Uploaded OBJ mesh

    Hi, I am loading an obj file and trying to scale it as shown below. The mesh is loaded but the scaling does not work. What am I doing wrong? var maraca = loader.addMeshTask("maraca", "", "assets/", "Maraca.obj"); maraca.scaling = new BABYLON.Vector3(0.1, 0.1, 0.1); Thanks!
  10. Hi there, First post so sorry if this is in the wrong place. I've been reading posts on this and docs for some time but can't really make sense of it. I starting to learn and teach phaser games to 8-12 year olds. I'm looking for the most readable way for novices to scale up a game so that an original game of 480 x 360 will be displayed as 960 x 720 by default. Any rescaling down based on restricted screen size would be an advantage too but not essential if it complicates the code too much or makes less readable. Many thanks in advance
  11. Hi all I was wondering if Pixi has a method for creating the appropriate sized text when within a scaled container. In my case, I scale the main container so that its height is 1080. In this container, I would create a Pixi.Text object with height 20px. From what I understand, this creates a 20px text object, which is then scaled down when placed in the container. This results in text which is slightly blurry. I'm planning on creating a method which would calculate the true pixel height required, which would then be scaled to the size needed. Is this something which Pixi itself supports, or would I need to build this myself?
  12. ozdy

    Phaser Scaling Question

    Hello guys, currently I'm trying to resize my game to the whole window, while centering a fixed aspect ratio game window in the center, and having padding sprites at the side, but without success. Can you tell me what I should do? Cheers
  13. rrnut

    [Help] Available Screen Space

    I am new to Phaser and mobile. As a learning exercise I am attempting to build a simple demo that renders a Phaser game object in the browser and draws a rectangle around the border of the available visible space. My goal is to make sure I understand how to determine the actual usable space. My game is going to use a board that fills one screen so I do not need (or want) any scrolling. I just want to determine the usable screen space so I can fill it. I have found numerous versions of this question on this forum and others and after trying many of the things discussed I am still not getting the result I am after. Based on reading, I think I should be using window.innerWidth and window.innerHeight to get the dimensions I want. On my desktops (using Chrome and Edge/IE) it works as expected. On my tablets (iPad and Nexus) it works as expected for both portrait and landscape orientations. On my iPhone (6) it works in portrait but when I turn it to landscape (and refresh the screen) the browser's navigation bar covers the bottom. On my Android phone it works in landscape but when I turn it to portrait (and refresh the screen) the browser's nav bar covers the bottom. I have spent a couple days on this so now it's time to ask for help... Is there a property I can use to get the actual usable space in the current browser or will there always need to be tweaking for specific devices? Thanks for any suggestions, DK Edit: So I added a check in the render function to watch for the screen size changing. When a size change is detected it rereads the window.innerHeight and window.innerWidth properties and then resizes the game accordingly. Doing this inside the render function appears to solve the problem. I am going to go with this for now. If anyone has any additional words of wisdom I am still open to suggestions.
  14. I've used libraries in other languages before that provide different types of scaling via viewport types. The best example of what I want is from a library called libgdx for Java, their ScreenViewport. Essentially what I want is to: Fill the screen meaning that there's no black bars or the sides of the game Maintain the pixel ratio meaning that every in-game pixel is equal to one pixel on screen, so no stretching Not maintain aspect ratio meaning that it doesn't matter to my game what the aspect ratio of the game is. Its job is to forget about aspect ratio and follow the above two criteria The way how I'm achieving this is by using Phaser's EXACT_FIT scaling type so that the canvas automatically resizes to fit the window. Then upon resizing, I update the size of the camera and the game's renderer so that they match the new canvas size. Here's the code I have in my create function. this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; // Phaser.ScaleManager.SHOW_ALL USER_SCALE this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setResizeCallback(function () { var width = window.innerWidth; var height = window.innerHeight; console.log('size: ' + width + ', ' + height);, height);, height); }, this); It works fantastic in the horizontal axis, but when the window shrinks vertically, there is some vertical stretching of the pixels. Here's a working example of my issue And here's the code on GitHub, in case it's of any help. Here are some related topics that I've done my research on, in case they are also of help Thank you for reading, any help is appreciated! EDIT: I've isolated the issue, it appears to be that when the game is initially created, the height that I specify is the initial height of the canvas. e.g. var game = new Phaser.Game(16 * 80, 9 * 80, Phaser.AUTO, ''); Phaser's scaling method allows the canvas to grow in height, but not to shrink in height. The renderer is rendering to a much taller canvas (which goes off-screen) than expected, therefore causing the vertical stretching. Any thoughts on how I can shrink the canvas myself? Thanks!
  15. Hello, I cannot figure out how the get an updated Bounding Box after the rotation, position or scaling of a mesh. Here the playground: Thanks in advance for the help
  16. Titus

    Define Game Scaling at Boot

    Hi, Just wondering if it is possible to define the scaling for a game only once in a single state (rather than in every state) and it is applied to all states thereafter? In the game I'm currently making I have a boot state and I want to define the scaling only once in the init function but it doesn't seem to apply to any following states and I have to define these settings on all pages: This is the code I'm using for scaling if it helps at all: init: function() { this.scale.pageAlignHorizontally = true; this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; this.scale.setUserScale(0.445, 0.445, 0, 0); }, I'm sure I must be missing something obvious. Any help would be appreciated.
  17. Hi Guys, I've recently started using Phaser and I'm developing a game to be used in a web browser on PC and mobile. The game has to be displayed in a specific frame size (853 x 480). The game will also have a full screen button that would then scale the game to the user's device window. I have the assets for the game created at 1920 x 1080 and I would like to use them in the game by using Phaser's scaling methods. I have found lots of resources on how to scale the game world to the user's device for full screen but I cannot find a way to scale the game to a specific frame size. Here is where I initialise a new Phaser game. = new Phaser.Game(1920, 1080, Phaser.AUTO, 'game'); The plan is to create the game at 1920 x 1080 and add all the assets to the screen and then resize the game world to 853 x 480. To achieve this, I've tried: this.scale.setGameSize(853, 480); But this doesn't resize any of the assets within the game, only the game window. Do I need to add all the game assets to a group and then scale from there? Another way I could do this is to simply use two different sets of assets, those to be used in the fixed sized window and then when the user goes full screen it would pull the 1920 x 1080 assets and scale them accordingly. I feel like I might be missing something really obvious though, so any help would be appreciated. Thanks
  18. I might be missing something obvious here, but I can't get the Phaser.ScaleManager.SHOW_ALL to function how I want to. So my solution to scaling to different devices follow something similar to this: Now I've made my game canvas size 1920x1280 - I'm aware this is HD, it's for Ipad at the moment. This is an aspect ratio of 3:2, which going by the aspect ratio rules, should be enough to fit inside any container. This works fine inside my browser when testing.. As you can see above, the game is shrunk down small enough to keep the aspect ratio of 3:2 within a 950x778 resolution. This works fine. It doesn't however, work fine on any tested mobile device. i.e: Now what's happening here, is the game is scaling, however it's scaling to make the width 100% of the inner device, but thus forcing the height out of the 3:2 ratio which the letterbox effect was supposed to fix. Am I doing something stupid, or is there a known fix for this? Also, I have tested on 3 browser emulations, and 4 actual devices.. all have the same issue. For reference, here's the code I'm using to get this effect.: // in index // class Game extends Phaser.Game { constructor() { super(1920, 1280, Phaser.Canvas, 'content', null, true); .... } } // in boot // export default class Boot extends Phaser.State { init() { = 1; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; } }
  19. habibieamrullah

    Phaser Retina Resolution in Android Webview

    I'm developing Phaser games for Android devices. I do not use Cordova Phonegap, please do not suggest me to do it. All I do is manually putting my HTML5 and JS files into an assets folder and calling it from Android WebView. Now, the problem is resolution. I always getting jagged images and not satisfied. Before using Phaser, I developed my HTML5 games by setting game's canvas width & height twice larger from device's screen. Then, I simply put css code to downscale the canvas to fit the screen. The result was good, images are crisp. But with Phaser, I can not set canvas width&height just like before. What is the solution?
  20. Hey, I made a post before about scaling for high DPI monitors and thought that I came up with an acceptable solution but here I am again with some of my concerns about scaling and performance on 4k/retina displays. Even when I start from scratch and just draw a circle the performance is garbage. The weirdest thing is that the performance drops as soon as I put 1 pixel of the Chrome window on a 4k screen. So basically I have 2 screens connected and I move the Chrome window off the normal screen towards the 4k screen and immediately the frame rate drops to 30 instead of 60. I've logged the canvas and rendered size and there is no change when I put it partially on the other screen so the same stuff gets rendered. I've done the same to some other games and didn't notice this performance drop at all. It also happens with the examples and the bunny benchmark as shown in the crappy video below So my question is why the performance is suddenly so bad when I move the window over towards the 4k monitor. I would really appreciate if people have any tips on how to make sure the game looks good and performs well on 4k/retina displays. CSS scaling makes the performance better but then everything becomes extremely blurry and it's really not acceptable. Is it even possible to make web games that look great for 4k/retina displays with PIXI or in general?
  21. I'm using Matter.js as my physics engine and Pixi as my renderer and under normal circumstances I've been able to get them to work smoothly. However, I'm trying to do something where all of the objects *except* the player character are scaled down to look like the character is now above them. The scaling works visually in Pixi, but I can't get the bodies from Matter.js to go with it, so there are these "ghost objects" that I can't see but if collide with them then the scaled down objects will be moved. Does anyone have any tips for how to resolve this? Let me know if I need to post a gif if that would help explain the problem.
  22. Hello! I'm trying to scale my game using custom CSS rather than ScaleManager (I have some specific dynamic scaling I'd like to do depending on the browser size and aspect ratio and it's just easier to do it using custom CSS). The problem is that even in NO_SCALE mode, when the browser is resized, the canvas inline style width/height values are always overridden with the game's default width and height. I can't seem to find a way to turn this off so that I can customize the canvas width/height myself. Any ideas?
  23. I have been having problems when I scale my gamemaker 2 html5 game to fit the height of the browser. Once it scales up it no longer detects the mouse position. Without it being scaled to height I am able to click on my enemies, but when it is scaled to browser height I am unable to. I figure it has to do with the scaling to the browser height Thanks in advance! if(os_type == os_windows){ ideal_width = 0; ideal_height = browser_height; start_b_width = browser_width; start_b_height = browser_height; aspect_ratio = browser_width/ browser_height; ideal_width = round(ideal_height / aspect_ratio); if(ideal_width & 1){ ideal_width++; } room_set_width(rm_game, ideal_width); room_set_height(rm_game, ideal_height); surface_resize(application_surface, ideal_width,ideal_height); room_goto_next(); alarm[0] = 60; } //In my alarm window_set_size(room_width,room_height); window_center();
  24. Hi I have a scaling question. I'm working on a multiplayer tile based driving game where the camera is following the car. I want players to see the same of the map regardless of their screen resolution. So for example if I have 1024x768 as my base size and tiles are 64x64 pixels which will mean 1024 / 64 = 16 tile cols will be visible to the player. If someone opens my game with 1280x1080 as their resolution I don't want them to see 1280 / 64 = 20 tiles but instead scale the graphics and tiles to 1280 / 16 = 80 x 80 pixels per tile. Is there any automated way of doing this or do I need to manually calculate everything and scale all my art?
  25. Hey guys, I'm looking for some advice on canvas scaling. We're working on a PixiJS game and want to have the canvas as big as possible based on a set aspect ratio. I've got it all working fine but when I started testing it on our benchmark devices I noticed the performance has dropped horribly. When I scale the canvas using CSS transform the performance is perfect but then the graphic quality is unacceptable. Does anyone have some advice how to get great scaling on any device (including 4k monitors) while still maintaining performance and good graphic quality? --- Good performance but bad quality scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; = '0 0'; = `scale(${Math.min(width / Constants.FIELD_SIZE.x, height / Constants.FIELD_SIZE.y)})`;, canvas.height); Good quality scaling but bad performance scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; canvas.width = width * ratio; canvas.height = height * ratio; = width + 'px'; = height + 'px'; if (height / Constants.FIELD_SIZE.y < width / Constants.FIELD_SIZE.x) { this.scene.scale.x = this.scene.scale.y = height / Constants.FIELD_SIZE.y * ratio; } else { this.scene.scale.x = this.scene.scale.y = width / Constants.FIELD_SIZE.x * ratio; }, canvas.height);