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

  1. Scale on resize

    Hello everyone, this is my first time posting here and I am incredibly new to babylon .I've scoured the net looking for a solution to this problem with none yet. I'm using engine.resize() on window resize listener and this seems to work when I resize the window vertically. However, there seems to be no horizontal scaling available and when resizing the window horizontally, the image gets cut off instead of shrinking. Anybody have a solution?
  2. Fix position after scale

    Hi guys. I'm trying to do a "zoom in" effect on a GUI_Object. But when scaling the image leaves the original collision field. How to keep the image centered with the collision field of the button? Before click: After click: Code: game.UI.ButtonInit = me.GUI_Object.extend({ init: function (x, y, image) { this._super(me.GUI_Object, "init", [x, y, { image: image, }]); this.anchorPoint.set(0, 0); this.floating = false; }, onClick: function () { this._super(me.Sprite, "scale", [.8, .8]); }, update: function () { return true; }, draw: function (renderer) { this._super(me.GUI_Object, "draw", [renderer]); } });
  3. Game world scale problem

    Hi. My game size is : var game = new Phaser.Game(640, 780, Phaser.CANVAS, 'game'); I have resized it to :, 10000); player position : this.player = this.add.sprite(320, 9952, 'player');; When I am using scaling, such as :,2); or gofull: function () { if ({; } else {, false); } }, it set my player and camera position 0, 0 ( at the top of the game ), when using gofull() function it only changes position when fire stopFullScreen(), with startFullScreen() there is no problem I'm probably wrong to use resized world and scale.
  4. Problems in Landscape mode

    Hi everyone!, I've just started to use Phaser's framework, so I don't have enought knowledge about it. I did a game (test it here), it works well on pc's browser. The problem were when I tried to do it mobile friendly. I tried to do that (on boot's state): if (!game.device.desktop) { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.refresh(); } When I test it in my phone (portrait mode) it works good . The problem is when I rotate the screen (landscape mode), it doesn't scale well(I can't see the bottom). Portrait view: Landscape view: (I can't see the bottom) What is the problem ?? Thanks!!
  5. Hi everybody, To thank the users of this forum who helped me a lot, i put my template available to help new beginners or someone else. This template offers : correct scaling without stretching effect portrait mode (for landscape mode you must invert width and height) works with cocoon in webview+ and canvas+ mode (deviceready implemented) upload the file in and run it. simple example with prototype and inheritance use the states (i personnaly put all the states in a single file but you can quite put them in separate files, it's necessary to inform them in index.html eg: <script src="src/otherfile.js"></script> This template is based on : and how to adjust the scale is based on: Now my template for the beginners , index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>example_test_scale</title> <link rel="shortcut icon" href="favicon.png" type="image/x-icon" /> <style> body { margin: auto; display: table; position: absolute; border:0px; top: 0px; left: 0px; padding: 0; margin: 0; background: #ffff00 } </style> <!--necessary for cocoon.js--> <script src="cordova.js"></script> <script src="src/phaser.js"></script> <script src="src/main.js"></script> </head> <body> </body> <script> document.addEventListener("deviceready", function() { setTimeout(function() { navigator.splashscreen.hide(); }, 5000, false); }); (function() { //start with a game with these resolution : 1280-1920 // personnaly i find it offers the best graphics for all devices but may slow some devices. // after put a safe zone //1280+200 > 1480 //1920 +350 > 2270 (350 is 200*1.5 > ratio from 1920/1280) var safe_zone_width=1480 var safe_zone_height=2270 var w = window.innerWidth ;//* pixelRatio, var h = window.innerHeight ;//* pixelRatio; var lw, lh; if ( h > w ) { lw = h; lh = w; } else { lw = w; lh = h; } var aspect_ratio_device = lw/lh; var aspect_ratio_safe_zone = safe_zone_height / safe_zone_width; var extra_height = 0, extra_width = 0; if (aspect_ratio_safe_zone < aspect_ratio_device) { // have to add game pixels horizontally in order to fill the device screen extra_height = aspect_ratio_device * safe_zone_width - safe_zone_height; } else { // have to add game pixels vertically extra_width = safe_zone_height / aspect_ratio_device - safe_zone_width; } game = new Phaser.Game( safe_zone_width + extra_width, safe_zone_height + extra_height, Phaser.CANVAS, 'game'); game.state.add('boot', boot); game.state.add('preloader', preloader); game.state.add('the_game', the_game); game.state.add('next_screen', next_screen); game.state.start('boot'); })(); </script> </html> my main.js //initialize variables here var test="1...2...3" var text="hello from sprite" //example of prototype => a simple sprite _sprite = function(game,posx,posy,picture){ this.picture=picture this.posx=posx this.posy=posy //call the class sprite from Phaser,game,this.posx,this.posy,this.picture) this.anchor.setTo(.5,.5) game.add.existing(this) } _sprite.prototype=Object.create(Phaser.Sprite.prototype) // say hello from sprite _sprite.prototype.say_hello=function(){ alert(text) } //use another prototype but with the previous parameter from _sprite, it's inheritance _super_sprite=function(game,posx,posy,picture,super_power){ //call the first prototype,game,posx,posy,picture) this.super_power=super_power this.scale.setTo(2,2) } _super_sprite.prototype=Object.create(_sprite.prototype) // add a new characteritic to this prototype _super_sprite.prototype.show_super_power=function(){ alert(this.super_power) } var boot = { preload: function() { }, create: function() { //to scale the game = Phaser.ScaleManager.SHOW_ALL; = true; = true; //red color to see the background of the game itself // you must change the background in the index.html to have the same color in the background game // > change the yellow in red it's only to see how the game is scalling = '#ff4000''preloader'); }, }; var preloader = { preload: function() { this.load.image('green_circle', 'img/green_circle.png'); this.load.image('white_circle', 'img/white_circle.png'); }, create: function() {'the_game'); //do not use arrow function like this var some_function=()=>{alert(test)} //it works on webview+ mode but not on canvas mode var some_function=function(){ alert(test) } some_function() } }; var the_game = { create: function(){ //to center an object in your game use this: this.green_circle = this.add.sprite(,,'green_circle') this.green_circle.anchor.setTo(.5,.5),function(){'next_screen')},this); //use prototype => sprite with white_circle this.white_circle=new _sprite(game,,1800,'white_circle'),function(){this.white_circle.say_hello()},this); //use another prototype with inheritance this.super_white_circle=new _super_sprite(game,,1500,'white_circle','i am superman'),function(){this.super_white_circle.show_super_power()},this);,function(){this.super_white_circle.say_hello()},this); }, }; //for the next screen => next state, the green_circle move to top and alpha is minder var next_screen = { create: function(){ console.log("next") this.green_circle = this.add.sprite(,300,'green_circle') this.green_circle.anchor.setTo(.5,.5) this.green_circle.alpha=.5 }, }; And finally you could download all the template below( To launch the app, go to template/www/index.html or upload the file in and run it. Enjoy ! ps : an interesting link to review the basis from javascript in 5 minutes >
  6. drag event when sprite scaled

    hi everyone, Here is the problem I meet, I have a sprite and I can drag it in the right way when game has normal scale but when I change scale by; things become different. the sprite moving distance become twice as my cursor moving distance, when the scale becomes 3 the distance also become triple as well. so do you gays have any good ideas for sync cursor and sprite position, many thx.
  7. How to scale entire game up

    Hi, I'm extremely new to Phaser and I've started going through the src and examples to convert a game. One thing I can't figure out though, is how to scale up the entire game. I know I can scale up a particular sprite, but how would you scale up the entire game? Also is there anything extra I would have to do to keep the "pixel art" feel of the game when scaling? Apologies if this is blindingly obvious, but I've come to Phaser from working with Impact and I'm trying to "unlearn" as it were! Have to say I'm impressed with the framework, though I am looking forward to the completed docs! Thanks
  8. 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!
  9. Displacement filter scale issue.

    Hi, I've long wanted to implement a neat looking invisibility effect for my game, tried using DisplacementFilter, but stumbled upon an issue with scale property. While it works correctly to displace areas under the displacement sprite I created, it also displaces entire container on which the filter is applied. I presume its from non existent knowledge about the subject and how those filters work, but I'm still hoping for either a fix or a reasonable explanation if anyone can help me with this please. Everything in my code follows DisplacementMap example on (one with the grass and magnifying glass). What is different is my stage tree. I have 3 containers for each layer and inside those there are separate containers for chunks that hold the map data, since it comes from the server. const playerSprite = new PIXI.Sprite(new PIXI.Texture(PIXI.utils.TextureCache['player.eyes'])); const displacementSprite = new PIXI.Sprite( new PIXI.Texture(PIXI.utils.TextureCache['player.normal']) ); let displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); playerSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); playerSprite.scale.set(globalScale, globalScale) this.scene.addChild(playerSprite); this.scene.addChild(displacementSprite); displacementFilter.scale.x = 20; displacementFilter.scale.y = 20; displacementFilter.enabled = true; displacementSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); displacementSprite.scale.set(globalScale, globalScale) return { scene: this.scene, filter: displacementFilter }; the return value from this block is added to the main stage container, and filters are applied to bottom 2 layers. Should i perhaps look into filterArea? Here is the undesired effect on the edges. You can also see the slanted top layer on the trees. so 2 layers are moved by the filters scale property.
  10. I'm trying to create a dash fade effect behind the player when it's executing the dodge ability. I'm doing this with a particle emitter (dashEm). It's all good except from one thing the particle sprites on the trail aren't going in the player direction, they don't scale in X axis. How it should be in both directions: The actual problem, when player goes to left: The Player scaleX changes whenever the player presses left or right key. measures.last.dir = (pressedKeys.right)?1:-1 player.scale.setTo(measures.last.dir*2.5, 2.5) The emitter min and max scale are set to 2.5 same as player. dashEm = game.add.emitter(0, 0, 200); dashEm.makeParticles('particleDash'); dashEm.minParticleScale = 2.4; dashEm.maxParticleScale = 2.6; dashEm.lifespan = 400; dashEm.minRotation = 0; dashEm.maxRotation = 0; dashEm.minParticleSpeed.setTo(0, 0); dashEm.maxParticleSpeed.setTo(0, 0); dashEm.gravity = -1400; // fix global gravity The update. If the dodge happens I update the emitter position, set the trail direction(particles speed), and release them. dashEm.x = player.x; dashEm.y = player.y; dashEm.minParticleSpeed.setTo(-100*measures.last.dir, 0); dashEm.maxParticleSpeed.setTo(-1000*measures.last.dir, 0); dashEm.emitParticle(); What I've tried in update I've tried to attach the emitter as a child of player. But when the player changes its direction (scaleX) emitter also change and trail suddenly change too (logical it's his child). I've tried to change directly emitter scale. It works fine for right direction but when facing left the emitter and trail just disappear. dashEm.scale = new Phaser.Point(1*measures.last.dir, 1) I've tried to use setScale emitter method. But all it does is reduce the scale of the particles to 1. Not even put them in the right direction, no matter what values I enter. sx = 2.5 *measures.last.dir sy = 2.5 dashEm.setScale(sx, sx, sy, sy) I've tried modifying every property in the emitter that has something to do with the word scale and nothing works. I'cant use the default minParticleScale & maxParticleScale because this properties modify the both axis X & Y. I just need to change X axis, otherwise the trail would be upside down. Last thing! Reading the docs I've found in minParticleScale the sentence "If you need to control each axis see minParticleScaleX" but there's no such property nor function!. Hope I posted it well. Thanks for the help guys!
  11. Hi everyone! I'm currently building a Phaser tap tap like game for mobile devices. Using Phaser for the first time, I digged into the hard topic of scaling my game for multiple screen sizes and pixel ratios. After looking at every available scale modes, I choosed to go for Phaser.ScaleManager.RESIZE which looks perfect for what I want (changes the Game size to match the display size). The game looks good on my desktop screen but seems blurry when using an iPhone or Samsung Galaxy S8. I looked at many forum topics but the answer to the question of making a game "responsive" doesn't look clear. Is there anything I can do to make my texts and pictures not blurry on devices where the pixel ratio is higher than 1? Like scaling my game according to the pixel ratio without distorting it?
  12. i want to zoom to player position using pixi features. According to this comment. A camera is as easy as setting container pivot point to user position and move the container position to the canvas center. How about do a little more and zoom to the user position and make it look natural? I am currently using this const scaleDelta = -0.1; const offsetX = - (user.x * scaleDelta); const offsetY = - (user.y * scaleDelta); const currentScale = container.scale.x; let nScale = currentScale + scaleDelta; container.position.x += offsetX; container.position.y += offsetY; container.scale.set(nScale); This works when I am not using a camera, but looks jumpy when I add a camera. What is the solution with a camera?
  13. Hi, when I create an empty image, I always get a 32x32 pixels image. //As you can see, I'm not passing any 'key' this.img =, y); Then, even after adding a rectangle to my Phaser.Image, its size is still 32x32. this.rect = new Phaser.Graphics(game); this.rect.beginFill(color, alpha); this.rect.drawRect(0, 0, 200, 100); this.rect.endFill(); this.img.addChild(this.rect); And if I manually set the image width and height properties, it would scale the image children. So, how can I create an empty Phaser.Image of a specific size? Edit: I'm not sure this is the right way of doing it, but I guess I could give this image a texture with the size I need.
  14. Need help scaling TilemapLayer

    I'm trying to scale a tilemap using TilemapLayer.setScale but it blurs tiles, is there any way to scale tilemap with full quality? Phaser's scaling: Tiled zoom:
  15. Hello all, My colleagues and I from the Illinois Institute of Technology are conducting a research study to develop a measure of prior videogame experience (PVGE), intended to help develop and use learning games. Currently, we are trying to link situational and dispositional factors with PVGE through an online survey to validate the new scale. Please help us with the research by participating in this brief and confidential survey, approved by the university's institutional review board. The link is provided: I would be glad to answer any questions or concerns. Thank you!
  16. I'm trying to get my tilemap to scale and I'm basically following the example here: However, what ends up happening is the tilemap itself will scale but the frames won't. I can't record a GIF because for some reason the screen randomly flashes white when running the PIXI app, but here are some screenshots which may be helpful:
  17. Hello! I am the P2 physics. I have a sprite scaled. My problem is that the polygon loaded to the sprite does not scale with it. It is possible to scale the polygon?
  18. Scale text question

    So, I have a text in size 200x50, and wan't to scale it down precisely 2 times (100x25) option 1) Scale 0,5. This sucks, as the quality is crewed (more on up-scale, less downscale, but anyways it is..) and I can't afford that in my project. option 2) FontSize/2. This sucks as well in my case, because it wont be precisely 100x25. So are there any alternative options, so I get the precise size and quality as well? Some kind of scale + re-render, duno?
  19. Hi there, I'm trying to zoom out the entire game world from the center.. unfortunately I see no method for the camera for zooming out so I'm scaling the directly with, 0.5);Unfortunately, this scales around the top left of the screen. I've tried setting the anchor on the as well as the pivot to the center of the world or the center of the stage to no avail. Is it possible to achieve what I'm trying to do? Thanks for any thoughts - Nick
  20. My game does not scale correctly when the browser loads the game while the window size is made smaller. Another scenario is while in game state, the game will resize correctly, If I try to make the window bigger once again the game will be made out of scale and not usable really. this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  21. Hi Everyone, Completely new to Phaser so I am, embarrassingly, having problems even just scaling an image down. Code looks like this: var game = new Phaser.Game( 800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload(){game.load.image('cat', 'cat.png');} function create(){ game.stage.backgroundColor = "#8A2BE2"; game.add.sprite(0,, 'cat'); } function update(){ } Could Someone show me how to set the size of the image, cat? At the moment it is far too big. Thanks in advance
  22. I have made a demo that the sprite will scale to a bigger size on some event. However its texture gets blurry and resolution changed so the sprite looks very awful after scaling to a bigger size. Is there a way to scale but maintain the visual quality of the texture without changing the resolution of the texture? How about replacing the texture with a new one? This is all I can think about but I am afraid of the performance cost. I am using CanvasRenderer by the way.
  23. Hi everyone sorry for the "tongue-twisted" title. I am making a player sprite inside a container and it works like this: when I move my player sprite on some occasions such as the sprite touches some other sprites on the container, the container scales smaller but the player sprite will scale bigger. However what I get for now is the player sprite will scale with its container. If the container becomes smaller the player sprite will become smaller too. Whatever scale I use on the sprite is useless. Is there anything I can do to change to what I want? Do I need to move the player sprite out of the container? If I do this their relative positions are hard to observe. Can somebody point out a direction for me please?
  24. I'm creating a tile-based game where the game is set to always have ten tiles vertically and scale every tile to fit as such. At certain window sizes, however, there are gaps every few tiles running vertically. Strangely enough these lines only run vertically and not horizontally. I'm assuming this is because of the non-round scaling (a typical number is something like 2.496875). Any ideas how to fix this?