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, just want to know if this behavior is expected: when you set a Billboard mode to a mesh with a parent then the child mesh won't inherit scaling: Is there any way to avoid that? (other than changing the scaling to the child too)
  2. 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: The code is very much based around Pixi, but it's easy to understand without being familiar with that API, and I thought the article makes enough broad points to be worth crossposting to this general 2D forum in hopes that others may find it useful. Thanks!
  3. IkazuDasWhale

    Scaling sprites as they are preloaded

    Ohaio, I'm making a game with a pixelated aesthetic and want to know if I can scale sprites as they are loaded into the game in the preload function. I've created all my pixelart at pixel level but want them to appear in game at 3 times the size. I'm aware that I can scale objects afterwards in the create function however it'd be preferable to scale beforehand to minimise the amount of code needed. I also tried scaling groups of objects but this made the positioning relative to the world very messy. The last method, which I know is the simplest, is to scale all of the pixelart before loading it into the game however if its possible to keep the assets as small as possible that'd again be preferable. Another problem I've had with scaling is trying to disable the smooth scaling that appears to be default. Many Thanks
  4. cloakedninjas

    Scaling for HiDPI displays

    This seems to be a frequent topic in here and after reading : I'm not really any wiser. As Phaser has developed code snippets become obsolete and links die. My current thinking is that I want my game to run at 1x resolution - let's say at 640 x 360. Let's also say I have game assets at 1x, 2x and 3x generated and will load the correct set in based on devicePixelRatio during Preload. I'd like to scale my entire game up based on the dpr and then with CSS scale it to fit. But logically my game code still thinks its running on a 1x device. Could someone show me how you would scale the game like this? And where to do this, (in Game's constructor?)
  5. Hi friends, Help me please, How can I set the TilemapLayer position in the bottom on the canvas when the scale mode is Phaser.ScaleManager.RESIZE? My demo: Thanks in advance, Nicholls
  6. Hi guys, How I can scale a website using Phaser as exist any tutorial? I think it's very interesting! Regards
  7. Rainbow Discus

    Scaling Matrix

    I read this blog post by OkijinGames: In the post, he explains how he handles scaling: Is there any way to do this in Phaser? The way I used to handle scaling was to apply a scaling factor to everything in the game, but OkijinGames' method seems much more convenient.
  8. hexdecks

    "Zooming into" a specific point.

    Hello, I understand that we can "zoom" into a displayObjectContainer using the 'scale' property. I currently have one large such container which contains all of my graphics. However, on increasing the scale point, the screen zooms into the top left corner of the screen (presumably some kind of anchor point?). Is there any way to have the screen scale towards a specific point or anchor? i.e Zooming into the cursor position for example. At the moment, the displayObjectContainer seems to have no anchor property. ie. (Can we achieve a 'zoom' into a specific x/y point?) or even just a decimal anchor point of some sort? Much appreciated, Jordan
  9. EliasJorgensen

    How do i scale my game in 2.4.2?

    Hey guys I just switched from Phaser 2.0.1 to 2.4.2, but now the code i used to scale my game is not working anymore. This is the code i used in 2.0.1 in my scripts create() function: this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.scale.pageAlignHorizontally = true;this.scale.pageAlignVertically = true;this.scale.setScreenSize( true );How do i scale my game in 2.4.2? Thanks
  10. I'm building an authoring tool which needs to allow users to input images and later position and scale those images. What's the best way to implement image/sprite scaling using Pixi.js 3.x using draggable anchor points? I've also posted this question on stackoverflow:
  11. I may be missing something very simple, but I am quite new to using Phaser. I am creating a game where I have two platforms on the screen. I created a single sprite for the left platform, and tried flipping it to create the right platform, however, after doing this I found the player no longer collided with it. I rendered the body, and after moving the platform from the far right, found the body no longer matched with the sprite position. This can be seen in this image: In my code I set this sprite up, like this: this.rightBranch = this.add.sprite( - 256,, 'branch');this.rightBranch.scale.setTo(-1, 1);this.rightBranch.anchor.setTo(0, 1);;this.rightBranch.body.immovable = true;I could create a second sprite, flipped, and just use that, but I am curious whether I can scale the sprite and make sure the body is scaled with it.
  12. I was having some scaling problems with my game, until just a few minutes ago, and I am wondering if someone might be able to help me understand why I saw this behaviour. I wanted the game to scale, keeping the same aspect ratio, such that it always fit within the borders of the browser window. Initially I had created a div in my HTML file called 'gameContainer' which is where I injected my game when creating my game object. So in index.html I had this line in the body to define the container div: <div id="gameContainer"></div>I created the game on Window.onload window.onload = function() { var game = new Phaser.Game(960, 640, Phaser.AUTO, 'gameContainer'); game.state.add('Boot', JumpFrog.Boot); game.state.add('Preloader', JumpFrog.Preloader); game.state.add('MainMenu', JumpFrog.MainMenu); game.state.add('Game', JumpFrog.Game); game.state.start('Boot');};and the scaling was set in Boot.js this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.scale.pageAlignHorizontally = true;this.scale.pageAlignVertically = true;However, when I tested the game, I saw this kind of behaviour, where the game is now scaled to fit the screen, and requires a scroll bar: After looking at a few tutorials I decided, on a whim, to remove the gameContainer div in the html file, and just tell it to create the container, and this worked much better. There is still a scrollbar but I can see the entire game, and in addition, when I change the size of the browser, both vertically or horizontally, the game changed size to be within the borders. I am wondering why this is happening. Also, is there any way to ensure that no scrollbars show up? It is much better now, but I would prefer it fit within the browser window and not do this.
  13. Hello, Currently I am trying to use scaling mode Phaser.RESIZE. On desktop it seems to be working. However, I have a device with a resolution of 1280 x 720 and a device pixel ratio of 2. So then a logical resolution of 360 x 640. My problem is that whenever I use the Resize scaling mode the game always ends up scaling to the logical resolution, instead of the full resolution. I end up with the game taking up one quadrant of the screen. I have had success with usign Phaser.SHOW_ALL for mobile screens but I want to be able to dynamically switch from landscape and portrait with a fullscreen. Help apprecianted! Thank you
  14. I have a canvas with a set aspect ratio of 16:9 and I am resizing the renderer every time the window size changes game.resize = function() { var original = _default_screenWidth / _default_screenHeight; var designer = window.innerWidth / window.innerHeight; if ( window.innerWidth < _default_screenWidth || window.innerHeight < _default_screenHeight ) { if ( original > designer ) { game.renderer.resize(window.innerWidth,window.innerWidth/original); } else { game.renderer.resize(window.innerHeight*original,window.innerHeight); } = game.renderer.width; = game.renderer.height; game.stage.scale.x = game.renderer.width / _default_screenWidth; game.stage.scale.y = game.renderer.height / _default_screenHeight; } }; window.addEventListener("resize",game.resize);Problem is if I tap certain buttons (PIXI.Container) , they are not firing, only if i tap a little bit lower, so it's only the Y axis that's off. Here is the code for the button if ( ) { button.container.interactive = true; button.container.buttonMode = true; button.container.tap = function() { button.Press(); }; }If the window does not need any scaling then everything works fine.
  15. Gods

    Phaser with Cordova Scaling

    My game scales perfectly in the browser but when I build it in cordova there is black bars on the bottom. I am using 320x480 and Phaser.ScaleManager.SHOW_ALL; anyway to have the cordova version scale without black bars? any examples? please share! thanks
  16. blameMike

    Sprite Scaling

    Is there a way in Phaser to smoothly scale all my sprites so they're 2 or even 3 times as large as the art? Flixel has something built in for this and I can't really seem to make it happen with Phaser. My graphics are pixel art style so perfect scaling would be lovely. I tried just setting the scale.x and y on a sprite and it's kind of blurry. Any insight would be great. Thanks in advance!
  17. Hello all! I'm having a problem developing a Phaser game for mobile devices, the aspect ratio is fixed as 4:3, so I adjust the canvas size to keep that aspect ratio. When the user is changing the orientation, the canvas is keeping the same aspect ratio but is getting bigger. My problem is when I set the new size to Phaser game object, it is upscaling the content inside and is pixelated. My code looks like this: var taskAspect = 4/3, screenHeight = window.innerHeight, screenWidth = window.innerWidth, screenAspect = screenWidth / screenHeight; if (screenAspect < taskAspect) { game.width = screenWidth; game.height = game.width / taskAspect; } else { game.height = screenHeight; game.width = game.height * taskAspect; }My question is: is possible to change Phaser game size telling Phaser: "ey, I want to change game size but please don't scale content inside!!" ? Thanks a lot!
  18. Hi I've been experimenting with USER_SCALE and have almost got exactly what I need from it. I want to take the initial game size, and fit it to the screen by stretching the axis with the biggest difference from the screen dimension (X in this instance) and have the other axis stretch to maintain aspect ratio. This does that... init() { this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; var scaleX = parent.innerWidth /; var scaleY = parent.innerHeight /; var scaleAxis = scaleX > scaleY ? scaleX : scaleY;, scaleAxis, 0, 0); = true; = true; }Which has the desired effect of the other axis (Y) being bigger than the screen. My issue is that I can't see how to center it so that equal amounts are lost from the top and the bottom, instead of it all being from the bottom. I'd be very grateful for any nods towards the blindingly obvious.
  19. flowabuse

    Physics for arc graphics object!

    How can I add physics to a object like this : ? I am trying to make a breakout game and i want to use an arc that moves and scales in a circular manner ( exactly like the progress bar in the link) , that would be my paddle that would not allow a ball to reach the center. Can this even be done?
  20. I'm trying to scale one of the pandajs demo games to fit a parent container on a webpage, I've been trying to use: game.scene.stage.scale.set(0.5,0.5), where my thinking was that I would have to calculate the scale factor using the difference between the parent's dimensions and the game's resolution. This doesn't feel like the right solution. I also have to scale the game for each scene, which also doesn't feel right. I'm not sure if I'm missing some kind of feature like phaser where you can state the game's parent then set the game to "SHOW_ALL" or something? I'm really trying to get the hang of Pandajs seems like a cool framework. Any help would be really appreciated.
  21. I have am trying to flip a sprite using sprite.scale.x = -1; This works fine however because I have scaled the sprite previously (Just part of my game mechanics to have different sized enemies) it seems to set the width of the sprite to the origional width values of the image. I was hoping someone could help me to fix this problem as I have been struggling with it. Thanks in advance
  22. Howdy, This is the main problem from the other thread about moving with collisions. Ray casting just doesn't seem to work right as soon as the mesh is scaled (along the y axis?). This really seems like a bug to me ... or I am doing something horribly wrong here :-/ Can that be fixed somehow?
  23. Hey there, I'm new to Phaser development and am currently trying to build a zoomable, draggable world map. Dragging works fine, but I can't get the zooming to work correctly. The background of my world map is Sprite containing the background image. This sprite is in a Group with some other sprites (something like cities on the map). When I now scale the whole group using something like game.add.tween(mapGroup.scale).to({x: scaleX, y:scaleY}, 50, null, true);everything works fine, but the anchor for scaling is always the upper left corner. With Sprites, I can set the anchor property to define where the anchor of the scaling is located, how would I do that for a whole group? My goal is: If I point the mousecursor at let's say New York on the world map, then zoom in, the mousecursor should still be located at NY after the scaling. This is probably pretty obvious for someone experienced with 2D graphics development, any help would be greatly appreciated. Thanks a lot
  24. Hi, I looked around but haven't found anything. Is there a way to scale a sprite's x,y,width,height by specifying some parameter? The idea is: if I developed some thing on screen 100x50 and let a sprite be x,y,width,height=50,25,10,5, when the really device scaled 10 times larger 1000x500, I want the sprite to be 10 times larger to be looking right and position to be 10x10, 5x10 If there is not, is the best way to extend a sprite? Thanks
  25. owen

    Screen scaling problems

    Hi all. Easy newbie question. I am trying to scale my game so it does this: - on mobile screens it fills the screen (max HD resolution) - on desktops it fills to a max of 640 x 790 I am doing this in my start() function: // scale to fit screen (or try to...) game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.minWidth = 640; game.scale.minHeight = 790; game.scale.maxWidth = 1080; game.scale.maxHeight = 1920; game.scale.refresh();What appears to be happening is the game is scaling (yay!) but the canvas is not, the canvas remains fixed in size so it's chopping off the rightmost and lowermost parts of the game when the game becomes bigger than the canvas. How can I get it to scale the canvas itself which contains the game too? Example of it going wrong is here: I am sure this is simple but I'm stuck for ideas. Thanks! Owen