Search the Community

Showing results for tags 'resolution'.

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 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 42 results

  1. I started working on game, which I would like to publish on Android and ios market. How I can set resolution or scale game to most popular devices? I found on google that the most popular resolution is (480, 320) var game = new Phaser.Game(480, 320, Phaser.CANVAS); I test my game (sample asstes) on Asus Zenphone GO (resolution: 720 x 1280 pixels) and this is how it looks (white space on top and sides). How developers scale their games to fit all phones?
  2. Hello, I have my canvas stretching 100% width and height of the page. When running it in a small resolution screen and in a big resolution screen, the whole thing is scaled up. Is there any simple way to simple increase the radius of the camera based on the device resolution instead of having everything scale up? (Everything stays the same size just like regular html elements)
  3. Hi, I am using pixi to display a texture that consists of alternating black and white rows of pixels. Unfortunately, pixi doesn't show these as black and white, but rather shows grey wave-like patterns that look like there is a lot of aliasing happening. That would make sense if the size of the texture did not match the size of the pixi view on which it is shown. Yet in both cases, width and height are 256. An alternative explanation for this could also be that pixi is attempting some form of pixel interpolation, yet my application is created with roundPixels=true and resolution=1. Where am I going wrong here? Thank you, ifru
  4. Hey. I need help, I've been banging my head against this for hours. I've been scaling my game to fit screens on all devices, while maintaining the asset ratios. The game size increases so the controls work where ever you touch. I've run into an issue with Android/Chrome and I'm not sure if it's specific to the browser, or the site, or mobile. It might be a full screen mobile issue all together, but I'm testing it on itch and an android with chrome. The first time the game loads it scales and works perfectly. Then, if I refresh the page or visit it later this happens: The game gets put into the view port ratio set in Itch, and doesn't adjust like it should in fullscreen. This being 640x960. 2:3 ratio, the screen has a higher Y axis. This causes the white bar at the bottom which is unresponsive to the touch controls. I've removed the padding in CSS: <style> html { margin:0; padding:0; } body { margin: 0; padding: 0; } #canvasholder { width: 99vw; height: 99vh; margin: 0 auto; } </style> and my canvas code looks something like this: // ~A Canvas and Game Setup aspect_ratio = window.innerWidth / window.innerHeight; testWidth = 960 * aspect_ratio; //if the aspect ratio stretches the Y axis if (testWidth <= 640) { var canvasWidth = 640; var canvasHeight = 640/aspect_ratio; } // else if it stretches the X axis else { var canvasWidth = 960 * aspect_ratio; var canvasHeight = 960; } //test versions //var canvasWidth = 640; //var canvasHeight = 960; var game = new Phaser.Game(canvasWidth, canvasHeight, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update }); function create() { // ~2.1 Game Scaling game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.refresh(); Maybe I've over complicated the original solution? This worked the way I intended on Desktop tests. You can test it yourself here: Thanks so much, any help is appreciated.
  5. Hi Phaser community, It is my first project with Phaser, I am struggling with devicePixelRatio and physics (arcade) body on ipad. When I set the Phaser.Game resolution to 2 (iPad pixel ratio) my sprites are resizing correctly, but the bodies are still positioned as if the resolution was 1. So the body are not positioned on sprites. Does this ring anyone's bell ? How could I match the body position with the sprite position ? Thank you
  6. Hi, I'm trying to build my HUD with PIXI.Text, but am having problem that the text is bigger when resolution is larger. For example when l load the page with browser at 200% zoom then my HUD ends up being twice as big. I want the text to stay the same size thou - higher resolution should make it look crisper not larger. Any help/ideas for this? Thanks! // create app var app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio, autoResize: true, antialias: true, backgroundColor: 0xFFFFFF }); document.body.appendChild(app.view); // create text var text = new PIXI.Text("TESTING"); app.stage.addChild(text);
  7. i made a html5 mobile game using pixi.js, the problem is the diaplay in mobile screen not very clear, seems like loss half pixels because retina screen? i am not deep understand about real pixel and display pixel~ first i wrote: image resolve not good, like loss half pixels. var width = screen.width var height = screen.height var app = new PIXI.Application(width, height, {transparent : true}) document.getElementById('canvas').appendChild(app.view) var board = new PIXI.Graphics() var coin = new Sprite(TextureCache['back.png']) // radius is a dynamic calculation value coin.width = radius * 2 coin.height = radius * 2 // ... board.addChild(coin) then i tried: // if i set resolution: ratio, i need scale down the board, right? other wise too large on the screen // but after i scale down, the display like before, loss half pixel, why? var ratio = window.devicePixelRatio var width = screen.width var height = screen.height var app = new PIXI.Application(width, height, {transparent : true , resolution: ratio }) document.getElementById('canvas').appendChild(app.view) var board = new PIXI.Graphics() // if i set resolution: ratio, i need scale down the board, right? other wise too large on the screen // but after i scale down, the display like before, loss half pixel, why? board.scale.set(1/ratio) var coin = new Sprite(TextureCache['back.png']) // radius is a dynamic calculation value coin.width = radius * 2 coin.height = radius * 2 // ... board.addChild(coin) radius value base on screen.width and screen.height, it's the value , we can see on chrome devtool's head line, i think it's not the real render pixels. so , i think i need something, render full pixels after retina screen solve, but i dont know how to set on pixi.js or canvas. in html, i think i can make the full pixel picture, than set the width half of it, so on render it's clear, how to do on canvas? if you can't understand my english, just read the code ^ _ ^ Can anyone help me ? thank you very much!
  8. habibieamrullah

    Phaser Retina Resolution in Android Webview

    I'm developing Phaser games for Android devices. I do not use Cordova Phonegap, please do not suggest me to do it. All I do is manually putting my HTML5 and JS files into an assets folder and calling it from Android WebView. Now, the problem is resolution. I always getting jagged images and not satisfied. Before using Phaser, I developed my HTML5 games by setting game's canvas width & height twice larger from device's screen. Then, I simply put css code to downscale the canvas to fit the screen. The result was good, images are crisp. But with Phaser, I can not set canvas width&height just like before. What is the solution?
  9. 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?
  10. Hello, How do I make my canvas look the same on all devices? function PixiPlay(){ var renderer = PIXI.autoDetectRenderer(350,460,{antialias: false, transparent: false}); document.body.appendChild(renderer.view); var root = new PIXI.Container(); I saw a tutorial talking about Pixiv4. But he talks almost nothing about the canvas Can anyone teach me how to do this, in a simple way, please?
  11. Siddi

    Retina Resolution Question

    Hi, I have a question about the resolution in PIXI.js: If I create a PIXI.Graphic object (for example a rectangle) with the size 50 pixels by 50 pixels, this rectangle will be the same size on my desktop machine (devicePixelRatio 1) as a 50 pixel by 50 pixel div element. When I look at the same page with an iPad Air 2 (devicePixelRatio 2), the rectangle drawn with PIXI is twice the size of the div element. In my opinion, on the iPad, both elements should be equally large, right? I have created a CodePen: Thanks for your support!
  12. I'm building my first Pixi game and working on basic services for asset management. My game should support few different resolution asset packs. Pixi handles this fine with resolution values and scaling. Next part I'm working on is to reload higher definition assets when required. Lets say that player starts game on 800x500 embedded window but presses full screen toggle. In this case I'd like to load HD assets on background and then replace the SD assets with newer ones once loading is ready. Before implementation I'd like to know if there is any existing mechanism in Pixi for this kind of operation? Or if not, should I know something specific about Pixi's texture handling to avoid some pitfalls? My current idea is as follows: When user moves to HD mode, trigger reloadAssets event, which kicks of my AssetLoader which loads the set of resources I require at the moment. Loader stores the names and textures to a map in AssetStorage -service. Once this is finished, an updateAssets event is broadcasted. Each Sprite can listen this event and they will update their texture from my AssetStorage -service. The reason I'm slightly insecure about my design is because I don't know exact inner workings of Pixi's resource management. For example does Pixi clear assets automatically, which might mess up my AssetStorage -service? What exactly I need to do when I reload new versions of assets especially regarding the old assets?BaseTexture seems to have update() function, can I sue it for this case? I'm reading about this stuff but decided to drop a question here since these are things I couldn't yet find any clear examples. Also, I'm afraid I'll implement something which is already done better in Pixi
  13. Yohan

    Tilemap resolution

    Hello, I changed the game resolution to detect the device pixel ratio. It works well excepts when I try to display a tilemap. With a resolution of one, the map is displayed properly, but with two (on a Mac retina), the map is half displayed. Do you have any clue about how to fix it? Thank you by advance!
  14. Hi ! I am having an issue with shadow maps, it seems pretty random, but from time to time the shadow map seems to "degenerate" meaning that the shadow map's resolution progressively lowers until the shadow is not visible anymore. I don't know what could cause that, I am not running any scene optimiser and not touching my shadow map during the renderloop so there is no reason its resolution suddently start to lower by itself... I am running the (v2.5.-beta) version. I will try and pose a screenshot of the scene as I can't seem to be able to reproduce it in the playground. Thanks in advance for your time and answer !
  15. I have been searching around and it seems that to be able to support retina displays, the RESIZE scalemode cannot be used. Is this really the case? My game is dependent on the responsiveness and freedom the RESIZE scalemode provides. By setting the resolution according to window.devicePixelRatio, the resolution and the size of all game objects increases. When scaling the game objects down to their appropriate sizes, the click-listeners disappears or gets misplaced. Any nudge in the right direction is very much appreciated!
  16. Hello everybody! There is my fragment shader for PIXI.Filter. I'm using it to change the colour of the area drawed by PIXI's primitives (eg. for gradient effect). All looks good on renderer.resolution = 1 but if i set it into 2 It draws additional line out of the area, and strange big pixels on a complex forms like chart (see screenshots). Help me please :-) precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform mat3 mappedMatrix; uniform vec4 topColor; uniform vec4 bottomColor; uniform float alpha; void main(void) { vec4 result = texture2D(uSampler, vTextureCoord); vec3 mapCoord = vec3(vTextureCoord, 1.0) * mappedMatrix; if(result.a > 0.0) { vec4 mixCol = mix(topColor, bottomColor, mapCoord.y); vec4 fg = texture2D(uSampler, vTextureCoord.xy); gl_FragColor = vec4(1.0, 0.0, 0.0, alpha); // gl_FragColor = mix(fg, mixCol, alpha); // Gradient effect disabled. When pixels are red - it's better to see the bug } else { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); } } Unwanted line out of the area (resolution = 2) Normal result (resolution = 1) Strange big pixels (resolution = 2)
  17. Ziden

    Best way to resize for mobile

    Hello there. I'm making a simple game to understand phaser better. I have made a simple game using this resolution: phaserGame = new Phaser.Game(480, 720, Phaser.AUTO, ''); So, i can center this on screen etc. However, if i wish the game to be resized to fit the screen in desktop and mobile devices, what would be the best way to do ? Thanks again for any attention
  18. Hi, a game needs to run on a 46' screen or 48' screen in full-screen, where the screen orientation is set to portrait mode in PC. The resolution is 1920x1080 as it is 16:9. How should I model the game world, its width and height? And the size of the objects/images of the game? If I make the game world 1080/1920 as well as background image (1080px/1920px) and game object/images relative to these dimensions, will it look ok on full-screen? Thanks
  19. 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?
  20. Hi, just a simple question. I'm planning to make a 2D Puzzle Game similar to CandyCrush (matching 3 type of game) for mobile devices. My question is which resolution should I start with to keep the images sharp while having good performance? Is 1920 x 1080 a good start for a background? I'm planning to develop the assets in HD and just scale them down on screen with smaller dimensions but I'm afraid the resolution might make the game crawl like a snail. Thanks.
  21. 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.
  22. Hello, I am using Intel XDK with phaser to create a mobile game. To scale the game to every resolution I use this code ratio = window.devicePixelRatio || 1; w = window.screen.availWidth * ratio; h = window.screen.availHeight * ratio; var config = { "width": w, "height": h, "renderer": Phaser.AUTO, "parent": 'game', "resolution": ratio }; game = new Phaser.Game(config); This works properly when ratio < 3 but above that game gets stretched vertically so for devices like iphone 6+ and devices with FHD resolution. If i dont provide the resolution parameter all the images becomes blurred. Can someone help me with this problem. Thanks
  23. How can we control engine or canvas screen resolution? Can we with lower resolution get betther Frams per seconds? Can se set fulscreen with resolution 800x600 or 1280x1024 If yes, how can we do it?
  24. I've been looking for information on how to control scaling and resolution of the window, asset, gui, etc. but can't seem to find exactly what I'm looking for amongst the comments/tutorials. If a game were to be released for both standalone desktop (nw.js) and ios/android then it would probably have to support a fair few resolutions and aspect ratios: 1366x768 16:9 19.1% 14'' Notebook / 15.6'' Laptop / 18.5'' monitor 1920x1080 16:9 9.4% 21.5'' monitor / 23'' monitor / 1080p TV 1280x800 8:5 8.5% 14'' Notebook 320x568 9:16 6.4% 4'' iPhone 5 1440x900 8:5 5.7% 19'' monitor 1280x1024 5:4 5.5% 19'' monitor 320x480 2:3 5.2% 3.5'' iPhone 1600x900 16:9 4.6% 20'' monitor 768x1024 3:4 4.5% 9.7'' iPad 1024x768 4:3 3.9% 15'' monitor That was 2014, I'm sure it's just as diverse in 2016. With that in mind, how the hell do you scale things accounting for those variations? Is there a way to have a resolution option (on desktop), like most desktop games? And if so how would one account for that when sizing UI/Assets/World? So far, working with: (would of used code tags but I don't think they're working, it's just all on one line. Or is it just me?) var SCREEN_WIDTH = window.innerWidth * window.devicePixelRatio; var SCREEN_HEIGHT = window.innerHeight * window.devicePixelRatio; var SCREEN_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT; var SCALE_RATIO; if (SCREEN_RATIO > 1) { SCALE_RATIO = SCREEN_HEIGHT / SCREEN_WIDTH; } else { SCALE_RATIO = SCREEN_WIDTH / SCREEN_WIDTH; } var game = new Phaser.Game(SCREEN_WIDTH, SCREEN_HEIGHT, Phaser.AUTO, null, {preload: preload, create: create, update: update}); function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; } ... grid.tileSize = 30 * SCALE_RATIO; Seems to be missing something, as positioning doesn't seem to line up. Is there something else that I should be doing other than sizing/positioning everything based aspect ratio like the grid.tileSize above? The post is based on a camera/world where everything is visible and there's no panning, like looking down at a board game, so nothing would be off screen and everything has to fit. Thanks for any help and/or tips. Kind regards, A Phaser nub.
  25. Hi, I think I have found a bug with Text bounds on high res screens. Please see this code pen, it's just a modified example from the Phaser website to include devicePixelRatio resolution. This means that the example will work fine on screens with window.devicePixelRatio == 1, but will incorrectly center and right justify the text on higher pixel densities. Please confirm this is a bug and I will add to github issues. Cheers!