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 99 results

  1. 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
  2. [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.
  3. 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!
  4. 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
  5. 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.
  6. 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
  7. 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?
  8. 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?
  9. 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();
  10. 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?
  11. 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);
  12. Euhm scaling a weapon/bullets

    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]); },
  13. 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?
  14. Scaling tilemap disables collision

    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);
  15. 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:
  16. Scaling Box2D sprites and world?

    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!!
  17. 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)
  18. Importing OBJ file

    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.
  19. Change draw area of tilemap??

    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?
  20. 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?
  21. 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^^
  22. 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.
  23. 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
  24. 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 ?