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
    • Facebook Instant Games
    • 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 118 results

  1. 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 ?
  2. 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 ?
  3. 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?
  4. 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?
  5. 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.
  6. 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?
  7. 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
  8. Hello everyone, The magority of tutorials you can find on the internet regarding the making of mobile games all cover the actual gameplay. But I can't find a good tutorial on the actual setup of the game like choosing the screen res and how to scale the game so it will work on almost all devices. I do not necessarily mean a step by step rundown, which would actually not be a bad idea. Can you someone give me a guideline on how to understand, use and setup a game for full mobile release? Thank you so much in advance, Very kind regards, Cedric
  9. Hey Babylon citizens! Hope you are all doing well! I have big scene imported from 3dMAX. I have planes (meshes) in this scene where I dynamically put pictures as textures. And I need to scale my planes (meshes) to fit ratio of the picture before adding picture as a texture. But the problem is this planes are randomly located in scene. So they are just placed in a 3d world with different angles and positions. I did not find a solution in a forum. So basically I have plane (mesh) with height and width and I need to adjust height depends on picture ratio. But just mesh.scaling.x/y/z = ... is not working because this meshes are rotated. Do I need to get vector of left or right edge of my mesh and then apply scaling by this vector? Or is there any other way to achieve my goal? Thanks!!!
  10. <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>M N B</title> <script src="js/phaser.js"></script> </head> <body> <script type="text/javascript"> window.onload = function() { var width = window.screen.width; var availwidth = window.screen.availWidth; var height = window.screen.height; var availheight = window.screen.availHeight; var textStyle = { font: "20px Arial", fill: "#ffffff"}; var game = new Phaser.Game(availwidth , availheight, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload () { //game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image('red','assets/red.png'); game.load.image('green','assets/green.png'); } function create () { game.stage.backgroundColor = "000000"; var graphics =,0); graphics.lineStyle(1,0xffffff,1); var box_width = (availwidth/10)-5; var box_height = (availheight/10)-5; last_start = box_width*10; last_end = box_height*10; //draw vertical lines for(var i=0;i<=last_start;i+=box_width){ graphics.moveTo(i,0); graphics.lineTo(i,last_end); } //draw horizontal lines for(var j=0;j<=last_end;j+=box_height){ graphics.moveTo(0,j); graphics.lineTo(last_start,j); } } function update(){ } }; </script> </body> </html> When I run the above code, and emulate it in Google Nexus 7 using Intel XDK, it does not show the last horizontal line (image below) On the other hand, when I emulate it in Apple Ipad (image below), it shows the complete grid perfectly (even though I need to scroll down to see the last line) Ques 1: Why is the above difference coming? Ques 2: Why is there a scrollbar coming when I am scaling the content properly? Thanks in advance.
  11. Hey guys, I've put a lot of time and energy into trying to find the best / correct methodology for scaling my games ready to port to Android, IOS and Windows. However everywhere I turn, there seems to be conflict, inaccurate posts, half implemented code and dodgy at best results. I was wondering if anybody here knows of a decent article, code library or learning resource where I may tackle this problem once and for all. Just to clarify, I'm using Cordova at the moment, and I'm very happy with the results thus-far, so it's not that I'm looking to switch, though I will if there is a library that makes a perfect solution. I'm more looking for a clean, effective and efficient way to get my games / apps to scale to different screen sizes, aspect ratios and pixel density. From what I've read, this is somewhat of a cumbersome undertaking, but I'd appreciate any input! Thanks
  12. Having a lot of trouble getting pixel art graphics to not be blurry. There are a lot of people having the same problems I find, but many articles are 2 or 3 years old. I have tried canvas, pixi.js and phaser for displaying graphics, phonegap and Intel XDK for making apps. Even solutions that work on desktop don't seem to work on mobile devices because of the higher dpi. It's still blurry. This method of scaling also apparently breaks touch input, so any solutions for that would be appreciated. I think the main problem is the browser is scaling the canvas pixels up to match the dpi. I want to be able to work without anything getting scaled. Is there any hope? It seems like something we should have solved by now...
  13. Hello, I've got a strange looking render order issue. The "original", non-scaled object(s) appear fine. They render correctly as I might expect. See before-scaling image. However, I applied a scaling about the Z axis (new Vector3(1,1,-1)), and it got all wonky. Almost like the render order was out of wack. See after-scaling image. How do I tell the scene which order to render? Or better yet, how to group them so that it's a non-issue? Thank you...
  14. I'm creating a game targeted at multiple mobile devices including ios, android and RIM blackberry. All these devices have multiple screen resolutions and varying aspect ratio's. My game is a side scroller, similar to Run-Pixie-Run. I quite like the idea of scaling the tiles / sprites up to match the vertical resolution of the screen, and then just exposing more or less of the right-hand-side depending on the horizontal resolution, as is done in Run-Pixie-Run. What is the best strategy for this? Is there support in Phaser / Pixi to assist with this? I attach 3 image examples of how Run-Pixie-Run scales.
  15. Hello everyone! I am just getting in Game development in Phaser. I am trying to create Android application and I am using this: to convert my Phaser code into .apk file. Everything works great and it is the same as in the browser. Also I am scaling the content with devicePixelRatio. However, after the last update(today) of the Android WebView there is a problem with my app... I can't see the whole world and everything is hidden anywhere outside the display. I tried some things, but nothing can fix my problem! I am looking forward for your replies! See the pics before/after:
  16. I am wondering if there is a way to scale or resize an importMesh. I need to enlarge the mesh from its original import size. I am currently doing the following, but it has no effect on the size of the mesh: BABYLON.SceneLoader.ImportMesh("", "meshes/", selectedMesh, scene, function(addedMeshes) { // tried this addedMeshes[0].scaling.x = 67; // Also tried this addedMeshes[0].scaling = new BABYLON.Vector3(67, 67, 67); }); Is there a way I can just resize/scale the imported mesh?
  17. Hi , i have exaclty the problem specified in this old thread with Phaser v2.4.4 but none of workaround wrote works for me. When I inkect game into div a vertical scrollbar is shown. If i put no parent HTML element during game creation the scaling works fine. Any idea? Thank you
  18. Hi all, I have picked back up a project I started a while back and have run into some issues. I decided to upgrade from 2.2.2 to 2.4.4 assuming that all of the effort and improvements will be a benefit. I learned that the scaling API had changed a little, so I fixed my code to use the appropriate methods, discarding the deprecated ones. That eliminated the exceptions I was seeing. Unfortunately, though the game now runs, I have found that my FPS has dropped from around 55-60 to 5-15. I can toggle between these two versions of Phaser 2 and instantly see the difference in FPS. Everything else about the game looks the same and nothing is being reported in the logs. The only clue I have is that the drop in FPS occurs when the tilemap is scrolling. My game uses the following APIs/functionality: Tilemaps (made in Tiled), collisions set using, 4);Audio (mp3)Tried out both Canvas and WebGL rendering (no perceptible difference)Arcade physicsI'd greatly appreciate any tips/gotchas I should be watching for. Is there some flag I should be setting to correct the scolling problems? Thanks!
  19. Hello everyone, i'm trying to use mesh.renderOutline = true to get an outline on an object which has been scaled in one direction. But instead i get a floating plane in this direction. I guess the outline is made by inserting planes under the faces of the mesh and letting the edges "stick out" and there is some problem with scaling of the target mesh. Here an example in pg: I hope someone can help me. A workaround would be to create every time i want to scale my box a new box with the right dimensions. But as the scaling may happen every frame i suppose this would not be good idea. Thanks and Greetings, moreAPI
  20. Hi all! I'm doing a platformer game and I'm thinking about optimisation. I was wondering if it could be a good idea to scale down all my original assets, and scale them up in the game (to reduce loadings). So my first question is : what's the cost of scaling? Is this technique worth it or are the gains meaningless? Then, I was trying to apply that to the tilesets of my map and I'm struggling with API. These three methods seem to badly interact : cache.getImage() : return an HTML image (how is that useful, really?) or an image. Here I fetch my downscaled image.tilemap.addTileset() : takes a string key or a bitmapData. Not an image! So I create a bitmapData from the image (fetched in cache), and scale it uptileset.setImage() : takes an image! Damn. I have to change my newly created bitmapData back to image. In my game I change the tilesets' images every now and then, so I have to use these 3 methods. The fact that tilemap.addTileset() doesn't take an image as parameter is very weird and forces me to go from image to bitmapData, and bitmapData to image. Is there something I'm missing? Is there an easier way to do that? Thanks guys!
  21. In (re)acquainting myself with Pixi for some hobby projects, I put together a simple example and walkthrough of scaling to fit device dimensions, using hi-res resources, animating a sprite, doing some basic parallax scrolling with tiling sprites, and assembling spritesheets with TexturePacker: I hope it's of use to somebody, and would love to hear any comments about any errors or sub-optimal code. Thanks!
  22. hi, I just found out I had to multiply the pivot matrix values to compensate the object scaling is there no way to have the matrix transform applied AFTER the scaling ? mesh.setPivotMatrix(BABYLON.Matrix.Translation(10,0,0)); // got to multiply by 10 to compensate 0.1 scale ...mesh.scaling=new BABYLON.Vector3(0.1,0.1,0.1);also I found odd that "mesh" is used as the object holding everything instead of beeing the object holding only faces and vertices like in any other 3D api regards
  23. Hi all, I'm new to these forums, but really want to share what I've made with everyone. Not for my own sake but to help all those other game developers out there that have trouble deciding what resolutions/aspect ratios to target. I built this utility to help me visualize how common aspect ratios display on any screen size when stretched to fill the screen as much as possible. All you have to do is deploy the URL on any device to see how a game of size 4:3, 3:2, or 16:9 will display. You can even just use your browser and stretch the window to the target size so you can do all your planning from the PC. however I recommend loading it up on the device as there are software bars and URL bars to consider! In any case, please take a look - I feel we all have something to gain from having a visual aid when planning our target resolutions. Just click the banner below! You can also see an augmented version of this scaling logic in action in our upcoming title, Dragonfly Zero. Click the banner below and stretch the window to whatever size you want. The game will scale and implement extra filler as is appropriate for the aspect ratio - regardless of how tall or wide you make it! --------------------------------- UPDATE (5/7/14): Made changes requested by turnA, designated v2.0 This version includes both portrait and landscape in the same utility for ease of testing New screenshots as well Notes: There may be minor discrepancies of 1-2px either visually, or represented in the information panel. Each box includes it’s border as a representation of it’s aspect ratio. This means the game screen box will overlap the borders when matching aspect ratios. The utility will automatically switch between portrait and landscape orientations (if height exceeds width in landscape, or width exceeds height in portrait). The orientation label also works as a button. Portrait mode is somewhat restricted on landscape displays (text size reduction), works best on flipped monitors and portrait displays. SCREENSHOTS Landscape - iPhone 5S, safari (iOS) Portrait - iPhone 5S, Safari (iOS) Landscape - PC, Google Chrome (windows)
  24. Hi there, I've got an issue, and I guess "it's not a bug it's a feature", but when applying scaling to an object and setting an other object's parent as the aforementioned object, the scaling of both objects becomes the same, even if parenting is set up after applying scale on the parent. Here is a Playground to demonstrate the issue : Playground link Here you can see that the sphere's scaling should be (1, 1, 1), the default scaling, but instead it has the same scaling as its parent (2, 3, 5), even if the scaling has been set up before linking those objects. I guess that Babylon sets the scaling matrix of the parent to be the same as its childs (I'll investigate the source code to confirm that), but it shouldn't, every child should have their own scaling matrix, and change their scaling vector relatively according to their parent. That's how I would do it anyway... Thanks in advance for your answers
  25. Heya, I'm building a game in which I can enter a building, which I'm handling via states. In other words, when my character overlaps with the door, the program starts a new state in which the interior of the building is built. Now, I want the interior to have smaller dimensions than the world, so I want to change the game size when I start this new state. I tried this: create: function(){ //game size was 1000x700, I want to scale it to 700x450 game.width = 700; game.height = 450; //rest of creation code...}I also tried things like changing camera bounds, world bounds, world size, but method above shows the most promise. The problem, however, is that the resize for some reason does not show until I click away from my browser tab and back. Calling game.width in the console yields 700 at all times, but it doesn't show it as such until tabbing out and back. On top of that, the contents of the game (floor, furniture, character) are scaled down when the game resizes, defeating the purpose. I don't understand why it would, since there's no scaling anywhere in my code. Any help would be greatly appreciated.