Search the Community

Showing results for tags 'scaling'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

  1. 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?
  2. 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); this.camera.setSize(width, height); this.game.renderer.resize(width, 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!
  3. 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.
  4. 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?
  5. 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();
  6. 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?
  7. 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; canvas.style.transformOrigin = '0 0'; canvas.style.transform = `scale(${Math.min(width / Constants.FIELD_SIZE.x, height / Constants.FIELD_SIZE.y)})`; this.app.renderer.resize(canvas.width, 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; canvas.style.width = width + 'px'; canvas.style.height = 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; } this.app.renderer.resize(canvas.width, canvas.height);
  8. 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 () { game.world.setBounds(0, 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 this.fire = game.input.keyboard.addKey(Phaser.Keyboard.W); // Stop the following keys from propagating up to the browser game.input.keyboard.addKeyCapture([Phaser.Keyboard.E]); },
  9. 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?
  10. 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: http://www.babylonjs-playground.com/#4BSOP#3
  11. 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 this.game.world.scale.setTo(this.worldScale); this.game.world.setBounds(0, 0, this.worldSize.width * this.worldScale, this.worldSize.height * this.worldScale); // Reset box2d world bounds this.game.physics.box2d.setBoundsToWorld(); // 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!!
  12. 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 www.punkoffice.com/scan/cat_kasey (use right-click to pan)
  13. 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 = this.game.add.tilemap('map'); map.addTilesetImage('tiles'); map.setCollisionBetween(1, 400); layer = map.createLayer('normal'); layer.scale.set(2); layer.resizeWorld(); this.sprite = myGame.game.add.sprite(200,400,"player"); this.sprite.smoothed=false; this.sprite.scale.setTo(2); this.game.physics.enable(this.sprite); this.game.physics.arcade.gravity.y = 200; //This goes into update function this.game.physics.arcade.collide(this.sprite, layer);
  14. 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.
  15. 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?
  16. 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: http://www.babylonjs-playground.com/#10IKS#1 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?
  17. 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^^
  18. 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: http://www.babylonjs-playground.com/#PSKRF#8 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.
  19. 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
  20. 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 ?
  21. 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?
  22. 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
  23. 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 ?
  24. 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
  25. Hello guys, I'm making a plaformer, and I use the tiledmap plugin (https://github.com/englercj/phaser-tiled) 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'); that.game.physics.p2.convertTiledCollisionObjects(map, '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 ?