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
    • 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 88 results

  1. 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);
  2. Hello, I created weapon animated from a spritesheet however the images on the sheet where a bit oversized. I know I can make the spritesheet smaller but it kindoff defeats my purpose of learning more in programming;) So when I scaled the weapon itself (fireball) to be half its sprites size its starting position also changed. Therefore I figured I' d anchor the weapon in the right position. But for some reason it keeps stating " anchor = undefined". So, anyone sees whats going wrong here? //This line is the one bugging out. I tried setting the anchor on each bullet and on the weapon itself. The console states 'anchor is undefined" this.weapon.anchor.setTo(0.5, 0.5); var weapon; create: function () {, 0, 1920, 560); game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.arcade.gravity.y = 1000; this.weapon = game.add.weapon(1, "fireball"); // here I scale the weapon the fireball this.weapon.bullets.scale.setTo(0.5); this.weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; this.weapon.bulletSpeed = 300; this.weapon.fireRate = 500; //will use more sprites in the near future this.weapon.addBulletAnimation('fire',[23], 10, true ); this.weapon.trackSprite(player, 0, 0 , false); this.weapon.allowGravity = false; this.weapon.bulletGravity.y = -1000; //here I attempt to set the anchor so the weapon will be pushed to the right startposition this.weapon.anchor.setTo(0.5, 0.5); //this.weapon = action.attack.weapon; console.log(this.weapon); //u create controls cursors = game.input.keyboard.createCursorKeys(); //register hotkey = game.input.keyboard.addKey(Phaser.Keyboard.W); // Stop the following keys from propagating up to the browser game.input.keyboard.addKeyCapture([Phaser.Keyboard.E]); },
  3. Hello, I am creating a game with Phaser and I guess it is quite large, at least there are a lot of sprites. Using Phaser.AUTO which went to Phaser.WebGL on my desktop (i7-4770k @ 4ghz, 16gb RAM, GTX 970 4GB) I can't even maintain a 60fps (usually around 48-55fps) and there is noticeable stutter on 720p. The same is true for my 2015 Macbook Pro 15". I doubt I'd get any better results on a less powerful computer. I heard that using text with WebGL slowed it down a bunch? but that is a question for a different thread I guess. Anyway, I was searching for a way to speed up my game and came across the idea of switching from WebGL to Canvas. I did that, and on my Mac I got a solid 60fps (haven't tested on desktop yet). The only problem is that Canvas does something weird to some of my sprites (specifically ones with thin borders). I have attached two partial screenshots of my game with box sprites. As you can see, one of the box sprites is perfectly box-like, that one is running on WebGL. Once I switch over to Canvas the box sprites look like the other screenshot - lopsided. Is there a way I can fix this?
  4. Hopefully I can explain my problem clearly: Lets say I have 10 cubes and I want to start with the first cube with a scaling factor of 1(all dimensions) and the last cube should have a scaling factor of 0.5 and all cubes between should be interpolated. This is no problem for loosely cubes, I mean cubes without parenting (its just a linear interpolation). But how can I solve the calculation when each cube is the parent of the next cube? Is there an more or less convenient API to calc this situation? Forgotten to say, the cubes are created with a fixed size and they should dynamically updated via scaling factor. Thanks in advance OK, answering myself: after searching and some experiments => the easiest solution is not do directly parenting the cubes. Instead, making a chain of dummy "node"-meshes and parenting the cube to this nodes made the life much easier. Nevertheless, here is a playground to experiment with:
  5. Hello! I'm new to Phaser and Box2D, but I've looked through as many posts as I could find on scaling box2d and am still struggling to get it working well. I'm trying to scale a bunch of sprites, and on each scale step increase the worldsize as well so that I can reset box2d world bounds. I've gotten the world scaling and the sprites scaling, but the physics bodies stay behind. It looks like this: the sprites are beyond the bounds of the world and they are offset from their box2d bodies. Here's what I've tried - using body.setRectangle() to scale the Box2D rectangle as well. I've also noticed that the sprites are scaling faster than the world and are leaving the world bounds. I've been banging my head against the wall for a while and was hoping someone had some wisdom to share. if (this.cursors.up.isDown) { // An internal function that I use to track world scale. This is working fine this.scaleWorld(1); // Scale all the bodies in the world inside a group called stageGroup this.stageGroup.scale.set(this.worldScale); // Set the world scale & reset bounds;, 0, this.worldSize.width * this.worldScale, this.worldSize.height * this.worldScale); // Reset box2d world bounds; // For all sprites in the sprite group, scale them this.stageGroup.children.forEach(child => { // scale x and y child.position.x = child.position.x * this.worldScale; child.position.y = child.position.y * this.worldScale; // This is what I've tried but it's not working child.body.setRectangle(child.initialSize* this.worldScale, child.initialSize * this.worldScale, 0, 0, 0); }); } Thanks!!
  6. I notice if I pan, rotate a bit, then scale and do that whole sequence a few times, the pivot point starts to shift which is noticeable when rotating. Is there a way to prevent the pivot point moving? I'm trying it out here (use right-click to pan)
  7. Hello, it is me again. I have a tileset(16x16 each square) I made a tiled map with it and exported as .json After importing it into Phaser game it works fine, collision works... But when I scale the layer by two, the collision is not working(Debugging the layer shows tile body) Please help me! Also, I am not sure how the values should be in - map.setCollisionBetween(n,m); The code for that: //This goes into create function map ='map'); map.addTilesetImage('tiles'); map.setCollisionBetween(1, 400); layer = map.createLayer('normal'); layer.scale.set(2); layer.resizeWorld(); this.sprite =,400,"player"); this.sprite.smoothed=false; this.sprite.scale.setTo(2);; = 200; //This goes into update function, layer);
  8. Hi, i would like to import an OBJ file into my scene and I have got it. However, I don't get change the position and scale of the mesh. ┬┐How could I do it? This is my code: var loader = new BABYLON.AssetsManager(scene); var edificioB4 = loader.addMeshTask("A2", "", "http://localhost:8080/modelos/A2/", "A2.obj"); BABYLON.OBJFileLoader.OPTIMIZE_WITH_UV = true; loader.load(); Thanks, JuanMa J.R.
  9. Basically, when I zoom out of a tilemap layer the draw region remains the same so the map ends up sitting in the top left corner of my screen when I zoom out: [cap of the top left corner of my game screen, zoom at 0.5] I've tried changing the layer width/height and the layer's canvas width/height but that just reverses the scaling. What can I do to get the tilemap to draw the other areas when scaling?
  10. Hi there, Just a short intro, big fan of BabylonJS library! It got me excited to work on a new project of mine which is my first game. Bear with me now please, as I am fairly new to it, although I'd say I have done my studies on your API and documentation, which looks very attractive. The issue I am having is that when I scale objects bigger, collision goes wrong; Moving objects collide when they have already overlapped. What I expect is that the collision happens as soon as any face of a bounding box touches any face of the other bounding box The more I scale my objects, the worse things look. Please take a look at this playground which is hopefully self explanatory: Further worse, uncomment line 29 which scales the ball bigger and see the obvious overlap with the wall. I messed with the methods and properties in the BoundingInfo but nothing helped. It does not look to me that the BoundingInfo is missing something anyway; as you can see, showBoundingBox = true (i.e. the wireframe) reveals nothing unexpected to my eyes. It's the whatever shape/thing that is used to calculate collision is what seems wrong and does not seem to update with the scaled ball. Shouldn't it?
  11. Hi! I want to make a pixel game with a resolution of 144*256 pixels. I want to keep the pixel look also when I rotate a sprite. So the player is able to see tilted pixels. So i decided to set the real dimension of the game to the full available size like 1920*1080. Then I put everything inside a Group and scale the whole Group up so that the game fits the canvas. Also I'm using the Arcade physics and there is where the problem takes place. The physics bodies are not scaled with the group and so the whole szene is useless^^ So is there a solution to scale a whole stage or the "game" up to maximal resolution but working correctly with a design resolution? The Falsh engine Starling worked like this and that was very handy cause you get the real pixel count of the device without taking care of that. Thanks in advance^^
  12. I'm currently testing things with decals, however my entire stage in on a widen out sphere with `.scaling = new BABYLON.Vector3(25, 1, 25)`. But it seems as if decals are being treated like my sphere was never scaled; they wrap around a round sphere instead of the stretched one. I confirmed the behavior that if you select the box, the decal goes beneath the sphere: So basically do you have any suggestions on how I can tackle my issue? I have considered these approaches: * Replace the sphere with a very similar heightMap. heightMaps can be scaled and decals respect that. However I would prefer not using heightMap for a sphere issue as of now. * Maybe I need to make Babylon get that I scaled the sphere more than just setting .scaling? * Try some wonky texture placing on sphere which I think will be a lot of work Could be something I'm missing as of now which I would gladly get told.
  13. Hello, What am I missing in scaling an object over time? I feel dumb even asking... The code attempt is below: setInterval(function() { for (i = 1; i < 35; i++){ var size = sphere.getBoundingInfo().boundingBox.extendSize; //cylinder1.scaling.multiply(new BABYLON.Vector3(2, 2, 2)); } cylinder1.scaling.x = (size + 1) cylinder1.scaling.y = (size + 1) cylinder1.scaling.z = (size + 1) console.log(i); } }, 1000); Thanks, DB
  14. Hi, I use scaling to make my gameobject "grow bigger", however i noticed it's having an unusual/weird effect on the camera that is a "child" of that object. ( camera.parent = my_gameobject) Basically objects will disappear into blind spots that appear. If scaling is very low, then everything disappears. I also noticed that scaling effects players position/translations even though it shouldnt( i think ). For example if i scale down my object 5 times, then it seems to move/traverse 5 times slower. What other effects does scaling have on a mesh/its children aside of scaling its geometry. Also how do i scale without messing up the camera, or what changes do i need to apply on camera to undo the scaling on its parent ?
  15. Hello, I'm trying to get a coordinate system with (0,0) at the center of the screen. If I understood the API documentation correctly, adding a Container, applying PIXI.Container.setTransform(x, y, scaleX, scaleY, rotation, skewX, skeyY, pivotX, pivotY) and then adding Sprites as children to that Container should apply the transformation to all of them, right? So I created a Container, set x to width/2 and y to height/2, and added Sprites. Problem is, they still appear with (0,0) at top-left corner. Also modifying Container.x/y or Container.position.x/y would not add translations to children Sprites. Of course I could solve the problem by adding the width/2 and height/2 offsets to every sprite I create, but I really think display parameters should be seperated from the model data. What am I doing wrong? Is there a better solution?
  16. Hello, I am trying to make a game with phaser 2.2.8. The should look like an old school gameboy game. So the canvas has the dimensions of 160x144 pixels. The problem is a strange behaviour at the left and the top side of the screen. I attached an example to clarify what i mean. On the left pic the pilot wares glasses. You can see the connection between the 2 lenses. On the right pic the sprite looks compressed by one pixel, the connection disappears. Does someone knows why this happens? Or better how to solve this issue? Thanks, Tom
  17. 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 ?
  18. Hey Guys, I am working on a project that is to be used across devices i.e. desktop, mobile phones and tablets. So here is the approach that I am taking... Our base resolution is 1024 x 576. That is the resolution at which the game will launch. The player can fullscreen at any point and keeping that in mind, we are creating assets that are suitable 1920 x 1080 and are scaling them down. So in order to have it fit into a game with my base resolution, I downscale the assets (in this case to about 53%). So if I have an asset that was meant to be about 125 x 125 when the resolution was 1920 x 1080, it would now be about 66 x 66. However, when I now fullscreen the game on 1920 x 1080 monitor (and hence upscale it), I output the dimensions of the sprite and they still happen to be 66 x 66. What is wrong with my approach? My phaser scalemanager is set to SHOW_ALL. Is there a scaling factor function that can just tell me how much the size of my asset should be depending on the resolution? Regards
  19. 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 ?
  20. scale

    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 ?
  21. I intend to build my next point & click game with Pixi.js and I'm currently exploring its api and capabilities. In my game engine, I'd like to support multiple resolutions so that game would look nice on desktop and mobile. For this purpose I'd need a system which would scale the game properly depending on the device or canvas size on web page. To implement this I'd need basically two systems: 1) Coordinate transformation so that I could develop game in lets say 1920x1080 resolution and set object/sprites positions in that scake and then down or up scale the stage when needed to 800x450 for example. The first way I figured to do this would be to add some kind of transform into render which changes render coordinates of objects by some factor. Or I could just scale the whole stage at the beginning of the game to correct factor. 2) Small resolutions don't need high resolution assets while high def screens need larger resolution assets so I'd like to have simple asset packs for different resolutions. For example 800x450, 1920x1080 and retina resolutions would use different asset packs and game would load only relevant pack when the resolution of the game view is known. Now, I have an idea how to implement this stuff myself but what I'm wondering is if there is any premade functionality in Pixi for these tasks. When googling around I found this thread discussing about @2x suffixes for assets and how they set the resolution for each texture: The thread also links to this old blog post: which talks about how one could load a different asset for retina screens. These resources led me to think that there might be a simple way to implement proper scaling without worrying about coordinates and individual scaling of stuff and loading proper asset packs. So my question in the end is what is the easiest way to implement 1 and 2? Also, how high resolution assets mentioned in blog are supposed to work? Can I just first set the size of my stage/window to some multiply of my "default resolution" and then load higher resolution assets and everything "just works" without having to consider coordinates transformation and individual sprite scaling? For example if I develop on resolution 800x450 and set sprite to center of the screen with something like MySprite(400,225), will the sprite appear in center of the screen when game is scaled to 1920x1080 and uses different resolution asset?
  22. I need to scale a mesh along global axis. The mesh.scaling attribute refers to mesh local axis so it's useless to me. I managed to scale the mesh through the direct manipulation of the worldMatrix, but when i rotate the mesh the worldMatrix is reset to its original values and scaling and position data is lost. I also tried to call the bakeCurrentTransformIntoVertices() function after scaling the mesh, but the mesh loses its position and gets other unwanted behaviours. I'd like to avoid the trick of parenting the mesh and scale the parent instead of the mesh. Is there a way to scale a mesh along a global axis?
  23. UPDATE: Read the thread down to find posts with best solution(s); There is a lot of discussions in this forum about scaling a Phaser Game. I found most of the game devs and examples using a high quality art/assets for games. For smaller devices the canvas is scaled down accordingly. This creates a doubtful question in our minds about the performance impact of overkilling small devices with hd graphics. Well I found the first step to improve that. 1. First of all decide the width and height of your game world. Think of this dimension in an ideal world i.e., 1:1 pixel ratio. So for example if the width and height is 800x480, then adding a sprite on x=0 will be on left most edge and on x=800, it will be on right most edge. This is your logical game width and height. 2. Create the phaser game with the logical width and height. var gameWidth = 800;var gameHeight = 480;var game = new Phaser.Game(gameWidth, gameHeight, Phaser.AUTO, 'game');3. Now do a show_all scaling, so that black bars will appear on non-fitting screen sides. This is added in a method called scaleStage inside the Boot state. if ( { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.minWidth = gameWidth/2; this.scale.minHeight = gameHeight/2; this.scale.maxWidth = gameWidth; this.scale.maxHeight = gameHeight; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize(true); } else { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.minWidth = gameWidth/2; this.scale.minHeight = gameHeight/2; this.scale.maxWidth = 2048; //You can change this to gameWidth*2.5 if needed this.scale.maxHeight = 1228; //Make sure these values are proportional to the gameWidth and gameHeight this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.forceOrientation(true, false); this.scale.hasResized.add(this.gameResized, this); this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); this.scale.setScreenSize(true); }4. Now what the above code will do is scale your game to SHOW_ALL. This will fit your game inside the screen. Black bars appears possibly. We are now going to fill the game into the screen by scaling the canvas up to the point where the black bars are removed. After the above code, add this. var ow = parseInt(,10);var oh = parseInt(,10);var r = Math.max(window.innerWidth/ow,window.innerHeight/oh);var nw = ow*r;var nh = oh*r; = nw+"px"; nh+"px"; = (window.innerWidth/2 - nw/2)+"px"; = (window.innerHeight/2 - nh/2)+"px";document.getElementById("game").style.width = window.innerWidth+"px";document.getElementById("game").style.height = window.innerHeight-1+"px";//The css for body includes 1px top margin, I believe this is the cause for this -1document.getElementById("game").style.overflow = "hidden";5. Now the content will be filled. You can call scaleStage on 'leaveIncorrectOrientation' method too. You can decide the values for gameWidth and gameHeight according to the device resolution(not devicePixelRatio, html5!=native), load the different assets like sd/md/hd accordingly. This time, you need to think about the logical values and the loaded asset dimensions. You may want to multiply screen co-ordinates with the loaded asset scale. I will probably write a blog post on this soon. Thanks for this super cool game library. & Thanks for reading this.
  24. Hello everyone, I wanted to scale my game up in Phaser. So I used world.scale.set(2, 2). Yup everything is scaled up but Not everything is working as expected when I move the camera. The tilemap is file it moves with the camera correctly while any other object added to the world normal sprite or a group with a fixedToCamera = true; Here is a gif that shows the problem I move the camera with 1 tile each time, the red banner is the HUD. Anyone know why this is happening? Here is the code for constructing the objects var dungeonWidth:number = 30; var dungeonHeight:number = 25; this.pcgTiles = new PCGTilemap(, "graphics", 16, 16, dungeonWidth, dungeonHeight); this.pcgTiles.generateCellularMap(0.55, [[1, 1, 1], [1, 0, 1], [1, 1, 1]], 3, 6, 5);, 0, * (1 - 1/ Global.scale) + Global.tileSize * dungeonWidth, * (1 - 1/ Global.scale) + Global.tileSize * dungeonHeight + Global.hudSize * Global.tileSize); var test:Phaser.Sprite =, 100, "graphics"); test.animations.add("default", [0]);"default") this.hudObject = new HUDObject(; this.hudObject.fixedToCamera = true; this.add.existing(this.hudObject); Here is the code for moving the camera: if({ -= Global.tileSize;; } if({ += Global.tileSize;; } if({ -= Global.tileSize;; } if({ += Global.tileSize;; } Anyone can help with this?
  25. Hi all, I have looked around the forums and googled around for the past hour or so to try and figure out a solution to get graphics to look crisp. I have created 2x versions of my assets and load them in based on a switch statement for device pixel ratio. This is however just causing my sprites to double in size but still be blurry. I tried a few other solutions such as the following: This just seemed to cause my game to half in size on my Retina MBP. I thought that this solution may be ideal: However I get this issue: phaser.js:82051Uncaught TypeError: Cannot set property 'scaleMode' of null At this point I am thinking it may just be best to half the scale of my sprites since this is my first game and I don't use a large amount of assets. I still however don't feel its the best solution and wondered if anyone has any other suggestions or examples of how it can be done? Thanks, Jamie