Search the Community

Showing results for tags 'scale'.

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
    • Web Gaming Platform
    • 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 183 results

  1. Using the SHOW_ALL option works just as expected on my browser and my iPhone, but on iPad I see stretched images. I can only assume fro this that it just isnt working on iPad but my code is correct (as it works just as described elsewhere) Nothing fancy here, just general scale setting for all scenarios (within boot init). = Phaser.ScaleManager.SHOW_ALL; = true; = true; Any help or advice would be much appreciated, kind of slowing down the whole go live process Andy
  2. I'd like to get the visual x/y/width/height of a sprite after scaling/skewing/rotating/anchoring it. Can I do that with Phaser? The case: If you flip horizontally a sprite that has {x: 100, y: 100, width: 64, height: 64}, what will your eyes see on the screen? {x: 36, y: 100, width: 64, height: 64}. That's what I'm looking for. However, Phaser tells you:{x: 100, y: 100, width: -64, height: 64}. No big deal, you just do a little math to fix it, kinda like you showed there. That is, if you only scale it. It gets more mathematical when you also change the anchor, and turns into a geometric nightmare if you rotate it too. Phaser is heavily based on Flixel, right? Then my hopes are that you could do it like in Flash, where you can solve all of this by wrapping your sprite into a movieclip and getting the container's x/y/width/height.
  3. 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.
  4. Hey guys, To boost a performance on mobile devices with Full HD screen resolution I'm doing the following thing: 1. Set canvas size like half of full screen 2. Scale the canvas with CSS As a result, the GPU has to do less work, and the scene runs smoothly. Here is the example css: #canvas { position: absolute; width: 40%; height: 40%; -webkit-transform: scale3d(2.5, 2.5, 1.0); transform: scale3d(2.5, 2.5, 1.0); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; top: 0; margin-bottom: 70px; touch-action: none; -ms-touch-action: none; z-index: 0;}Well, this approach worked until I started dealing with picking collisions. The picking mechanism doesn't take in account the scaling. Therefore the pick result is completely wrong. If you run this code without scaling it would work as expected (if you pick sphere, it would write in the console "sphere1"): var createScene = function () { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); // Our built-in 'sphere' shape. Params: name, subdivs, size, scene var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 3, scene, false); sphere.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(Math.PI / 2, -Math.PI/2, 0); var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 50, -10), scene); var light = new BABYLON.DirectionalLight("dir1", new BABYLON.Vector3(0, -1, 0), scene); light.position = new BABYLON.Vector3(0, 30, 0); sphere.position = new BABYLON.Vector3(0,1.5,0); = sphere.position; camera.setTarget(sphere.position); camera.attachControl(canvas, true); scene.onPointerDown = function (evt, pickResult) { console.log("Picked " + + " in x:" + pickResult.pickedPoint.x + " y:" + pickResult.pickedPoint.y + " z:" + pickResult.pickedPoint.z); } return scene;};But if you run it with the above css, it wouldn't work, i.e. picking sphere would give you a null result. Anyone has any idea how to deal with this?
  5. 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
  6. I'd like to scale in SHOW_ALL mode and once the game fits the width of the screen then use RESIZE mode to eliminate letter-boxing. I've been reading "Guide to the Phaser Scale Manager" but I'm still not entirely sure about how to implement it. Maybe something involving USER_SCALE or resize callbacks? Has anyone already implemented something similar?
  7. Hello, guys! That's me again with my foolish questions)) So, the question is: How to stretch tileSprite to fullscreen ? planetSprite = game.add.tileSprite(0, 0, game.width + 500, game.height + 900, planetObject.key + 'Planet');// planetSprite.anchor.setTo(0, 0);planetSprite.scale.set(0.75, 0.6);planetSprite.fixedToCamera = true;and here I have a problem: it looks ok on my screen, but on bigger one this tileSprite is repeated and also it's not stretched to fullScreen on bigger screens image is attached Thank you in advance for your help))
  8. 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!
  9. Hi, With Physics Editor I've made different polygon bodies for my different sprites. However, sometimes I need to reverse one sprite with : mySprite.scale.x = -1;With normal shape body or circle body it works perfectly, but not with my polygonal bodies. They are not reverse Is there a solution to reverse points in my physics JSON file ?? Thanks
  10. Hello all, I'm new to HTML5 and JS game programming. I come from an Obj-c/cocos2d background. I've been struggling to get the Arcade physics to recognize the scaling of a Tilemap layer. The layer is created as follows: ='level');'tileset','tiles');, 50);this.layer ='Tile Layer 1');this.layer.scale.x = 2;this.layer.scale.y = 2;this.layer.debug = true;this.layer.fixedToCamera = false;The layer displays perfectly fine(along with the debug drawing), but the collisions do not scale at all. I have tried altering the collisionWidth and collisionHeight of the TilemapLayer and it doesn't seem to have the desired effect. I am checking for collisions in an update method by this function: game.physics.arcade.collide(sprite,layer);This was posted in regard to Phaser 1.1: I should point out that I am running Phaser 2.0.4 Any help is greatly appreciated!
  11. Hi Guys! How can I update the body of a polygon after changing the scale? Thanks in advance, I'm a noob about Box2d haha Regards, Nicholls
  12. I'm trying to build a game that uses asteroid style controls, with the added ability that the player can change the size of their ship. I can do each separately, but putting them together causes weirdness. I've narrowed the problem down to having arcade physics on when scaling the sprite. Here's my code: var game = new Phaser.Game(400, 400, Phaser.AUTO, 'game');var mainState = { preload: function() { game.load.image('a', 'assets/star.png'); }, create: function() { 0, 0, 400, 400 ); this.player = game.add.sprite( 0, 0, 'a' ); this.player.anchor.setTo(0.5, 0.5); this.player.x = 200; this.player.y = 200; // if I comment out this game.physics lines then scaling works, // but then I don't get acceleration, angularVelocity, and collision game.physics.startSystem( Phaser.Physics.ARCADE ); game.physics.enable( this.player, Phaser.Physics.ARCADE ); }, update: function() { if( game.input.keyboard.isDown(Phaser.Keyboard.A) ) { this.player.scale.x = this.player.scale.x * 1.2; this.player.scale.y = this.player.scale.y * 1.2; } else if( game.input.keyboard.isDown(Phaser.Keyboard.Q) ) { this.player.scale.x = this.player.scale.x * 0.8; this.player.scale.y = this.player.scale.y * 0.8; } }}game.state.add('main', mainState);game.state.start('main');What do I need to change?
  13. Hi I would like to know if there is a way to stretch easily only the middle of a sprite with Phaser, or will it be implemented in the future ? If you know Unity, it's like the GUITexture border settings which specify how many pixels on each edge of a sprite will be unstretched. Thanks and have a nice day !
  14. I have an sprite on the stage in ME, which I scaled down by half. Then I applied physics and changed the body size, making it wider, so it can collide with the worldBounds to my liking. I used the physics tool to enable the highlighting of my physics body to do so. However, it looks good visually, but is too small for the collision. If I change it to the double size, which looks wrong within ME, it collides the way it should. I can imagine, this has to do with the way phaser handles this. Neverteheless maybe a little hint on the tutorial site ( could help others. Or is there a way I'm not aware of? I'm intending to scale up the sprite during the game gradually, so I would have to recalculate the physics body width every time, would I? best, Henryk
  15. Well, I scale my game (1280x720) with setUserScale(scaleFactor, scaleFactor) to the device width (for example: 480x320). When accessing the canvas width it still gives me the original width. How do I get the new size of the canvas?
  16. Hi all. How to scale all(tiles, sprites ect...) except canvas, for game with the width and height of 100% on all devices? game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;if(game.width < 667){game.scale.setUserScale(0.5,0.5) }
  17. Hi, I am developing an app, where I would like to see the orientation of the screen kept to Portrait. After many searches on google, I gave up and just went ahead with building a simple prototype of my app idea. I have now come to a stage where I should deal with the orientation aspect of the app. After studying the book: Phaser Scale manager for Phaser 2.2.2, I have tried to use the following code in my app: if (game.device.desktop === false) { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.forceOrientation(true, false); game.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); game.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); }I am new to Phaser and programming generally. I earned a distinction in the Coursera: Intro to computer programming in Python.I have found that what I have learn't in that course is easily transferable to JavaScript and Phaser, yet, I am still learning. Maybe if this problem can be resolved, it would help other people new to Phaser on the forums also. Codenburger
  18. I have a top down view game in which the camera is centered at the center of the world, and uses lewster32's zoom technique as discussed in this post I am trying to create a background image that fills the entire world, but I have been unable to do so. I am able successfully load the background image using the following code: var background =, 0, "lightBlueBackground");background.anchor.setTo(0.5, 0.5);The background images shows up at the center of the camera view. However, using the following code results in a background that only takes up a small portion of the center of the view. var backgroundScaleWidth = 4000 / background.texture.frame.width;var backgroundScaleHeight = backgroundScaleWidth/16 * 9;background.scale.setTo(backgroundScaleWidth, backgroundScaleHeight);If I use large numbers for the scale values like 5000, I get a larger background, but I can not tell where the world boundaries are. Since I'm dynamically adding items to the world, I want to make sure that they are actually on the world, and not beyond it.
  19. Updated Phaser from 2.0 to 2.2.2. Phaser.ScaleManager.SHOW_ALL behavior has changed. Red frame - game area, black frame - browser window. What wrong?
  20. Hey! After upgrading from a previous version (2.0.something) to 2.2.2 I noticed that my orientation handling code (lifted directly from the Full Screen Mobile template) no longer works. This is my Boot.js: BasicGame = { /* Your game can check BasicGame.orientated in internal loops to know if it should pause or not */ orientated: false};BasicGame.Boot = function (game) {};BasicGame.Boot.prototype = { create: function () { this.input.maxPointers = 1; this.stage.disableVisibilityChange = true; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; // this.scale.minWidth = 480; // this.scale.minHeight = 260; // this.scale.maxWidth = 1024; // this.scale.maxHeight = 768; // 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); this.state.start('Preloader'); }, enterIncorrectOrientation: function () { BasicGame.orientated = false; document.getElementById('orientation').style.display = 'block'; }, leaveIncorrectOrientation: function () { BasicGame.orientated = true; document.getElementById('orientation').style.display = 'none'; }};With 2.0.x phaser.js lib, the above code displays my "please rotate device" image when the orientation changes to portrait. After swapping for 2.2.2 phaser.js, it doesn't work. The functions "enterIncorrectOrientation" and "leaveIncorrectOrientation" never actually run (I tested it with console.log), so I guess either the Signals are not added or Phaser doesn't detect orientation anymore. API change? What should I try instead? I guess I could use .setResizeCallback instead, then add a test for example if window.innerWidth < window.innerHeight then display the orientation image, so there's that. But I'd prefer to use a built-in Phaser's method if possible.
  21. Wins

    2 scale modes

    Hello! I want set for background layer scale mode to Phaser.ScaleManager.EXACT_FIT, and the for game's layer - to mode Phaser.ScaleManager.SHOW_ALL; It's possible? If yes, how I can do this?
  22. Hi friends! One question... ¿How can I scale a sprite with a tween without changing the position with a different anchor at (0.5, 0.5)? var planatasmedio =,, 'planatasmedio');planatasmedio.anchor.setTo(0, 1);//CODE... move my image for example x = -500;game.add.tween(planatasmedio.scale).to({ x: 3, y: 3});//the position changes Thanks in advance! Regards, Nicholls
  23. Hi guys! I want to write an article on my blog about how to compile a game made in Phaser to CocoonJS in spanish... And I would like to know what you recommend? (Specifically to scale the game to Landscape mode) Thanks!
  24. Hi guys, I want to add a tween in my game that scales down a text along a point in the center. It should look something like this: I can achieve this easily with images by setting up achor to (0.5, 0.5), but to my knowledge, bitmaptext does not support anchor. So my question is how can achieve the same functionality with text?
  25. Hi there, I´m having a problem scaling a game for mobile purposes... everything works fine in desktop, the only problem is scaling in mobile, I want to scale using EXACT_FIT for this case but it´s not working at all and I don´t know why. Firs of all, I´m using Phaser v2.0.7 with Pixi.js v1.6, and I can´t use a most recent version of Phaser because it´s not working with my game and cocoonjs, so not new Scale Manager at all In my html, I create the game this way var game = new Phaser.Game(1280, 720, Phaser.AUTO);and the game appears on my cocoonjs launcher but really small, probably is using the minWidth and minHeight... This is my code in Boot.js (I´m using the mobile template), can anyone tell me why is not working?, everything looks fine to me if ({ //THIS PART IS OK}else{ this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; this.scale.minWidth = 480; this.scale.minHeight = 260; this.scale.maxWidth = 1920 this.scale.maxHeight = 1080; this.scale.forceOrientation(true, false); this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); //THIS IS WORKING this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); // THIS IS WORKING TOO this.scale.setScreenSize(true);}