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
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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 44 results

  1. 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.
  2. 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!
  3. 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.
  4. Hi guys, I'm having a slight problem getting my head round using the Phaser.RESIZE scale mode with devices which have a higher pixel ratio than 1. The game resizes fine, but on modern iOS and android devices, the game loses its 'crispness', and objects become blurry, particularly smaller text. I know this is down to higher pixel densities of these devices, but I've not managed to find a solution for the canvas to utilise these extra pixels, as resize mode seems to be bound to the physical document dimension (I'm creating a responsive game which will fill the device/webpage window on either orientation, so sadly the SHOW_ALL approach won't work). Just wondering if anyone had uncovered any solution, or had any advice, as there doesn't seem to have been any conclusion on other similar posts. Thanks as always!
  5. Is there a way to detect the device's resolution on which the game is running? I'd like to scale things in my game based on that. For some reason, when I try my game on a different PC monitor, the height is not always the same so a black bar at the bottom is shown whenever I scroll the camera down. On my PC monitor, that bar isn't shown and it is limited to the edges of the map I am using.
  6. 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)
  7. Hi, I just started working with Pixi.js and am trying to scale down sprites without losing the resolution. For example, if I have an image of size 72x72 and apply a scale to it such as: var texture = PIXI.Texture.fromImage("image.png"); var sprite = new PIXI.Sprite(texture); sprite.scale.x = 0.1; sprite.scale.x = 0.1; This scales the size down nicely, however the image becomes extremely blurry. Is there a way to fix this? I have tried using PIXI.SCALE_MODES.NEAREST but it produces the same effect
  8. PIXI.autoDetectRenderer supports pixicelDeviceRatio as resolution parameter. Following code works good in Android Chrome and Opera but not in Android browser (4.2.2) and Android Firefox var renderer = PIXI.autoDetectRenderer(640,360,{backgroundColor:0xFFFFFF,resolution:window.devicePixelRatio || 1});); Android browser shows noting(white screen) Firefox , browser is clashed. This works in Android browser also Firefox but image rendered with poor quality. var renderer = PIXI.autoDetectRenderer(640,360,{backgroundColor:0xFFFFFF}); Please see below screenshot. Android Chrome or Opera with resolution setting without resolution setting. Is there anyway to show high quality without resolution setting? screen shot's devicePixcelRatio is 3 My goal is fit container to device width when page loaded. Loading image size is 1920 x 1080;
  9. Hi! First of all, i'd like to thank you guys for this awesome tool I am in the process of adopting to Phaser from Kinetic. I've previously used Kinetic for creating responsive micro games targeted mobile devices and so far I'm blown away by Phaser. Anyways, I'm having some trouble figuring out how to use the ScaleManager RESIZE property. I want the canvas to fill the entire screen and resize the different elements manually. I've therefore setup a resize callback where I based on the target dimension calculate a scale factor i apply to the sprites. Eg, I have a sprite that should be anchored to the top center, so I resize it using the scale property and translates it to the center. This works very well and gives me the responsive design I want. However, the sprite loses its crispyness/sharpness when rendered on a retina display. If i instead use the SHOW_ALL scalemode with no manual scaling it will look as sharp as it should. I did not have this behavior with Kinetic, so i guess i'm doing something wrong? So I guess my question is; how should I use RESIZE scale mode, together with manual scaling and still maintain sharpness of sprites? Below is an example of how I scale a header that should always be centered at the top of the screen using the resize callback: GameController.prototype.resize = function (width, height) { var scaleX = width / this.targetWidth; var scaleY = height / this.targetHeight; this.uniformScale = Math.min(scaleX, scaleY); this.headerImage.position.x =; this.headerImage.scale.set(this.uniformScale, this.uniformScale);}Cheers, Klaus
  10. Hey there! I was thrilled to hear that pixi now supports retina screens. But somehow it won't work on TilingSprites? //Global VariablesmyDisplayResolution = window.devicePixelRatio; if(myDisplayResolution === 2){ ww = $(window).width()/2; wh = $(window).height()/2;} else { ww = $(window).width(); wh = $(window).height();}rendererOptions = { antialiasing:true, transparent:true, resolution:myDisplayResolution}//FullscreenStage Constructorfunction rendererstage(type, cavansid, width, height){ if (type == "fullscreen"){ width = ww; height = wh; } this.renderer = new PIXI.autoDetectRenderer(width, height, rendererOptions); document.getElementById(cavansid).appendChild(this.renderer.view); this.interactive = true; this.stage = new PIXI.Stage(0x000000, this.interactive); }//Stage Constructorfunction welcomestage() { if(myDisplayResolution === 2) { // load a retina texture if the resolution is 2 // because of the @x2 in the name pixi will assume the textures resolution is 2 this.logoTexture = PIXI.Texture.fromImage(logourl_2x); } else{ // load a normal texture if the resolution is one this.logoTexture = PIXI.Texture.fromImage(logourl); } //Sprites this.letter = new Object(); this.letter.n1 = new PIXI.TilingSprite(this.logoTexture, 27, 38); //Add to Stage this.rendererstage.stage.addChild(this.letter.n1); //Animate Method this.animate = function(){ that.rendererstage.renderer.render(that.rendererstage.stage); requestAnimationFrame(that.animate); }}//init function (called on body load)function init() { //Hide Overflow -> No scrollbars $('html, body').css({ 'overflow': 'hidden', 'height': '100%' }) welcomestage = new welcomestage(); requestAnimationFrame(welcomestage.animate); }Also, I noticed that in your documentation you talk about auto-dedecting the resolution with the "@2x" at the end, but in your code-sample the file ends with "@x2" Thanks for your help!
  11. Hi, i was a flash programmer , and i made some games using the starling framework when making a game i always have 2 sets of graphics resolution( x1 for old devices and x2 for retina). with phaser : how to switch out for higher resolution graphics and scale up on retina devices.? have i to use a resolution x1 for website and x2 for mobiles ? any idea? code ? examples? are welcome.
  12. Hello everyone, I just started to develop HTML5 games and I've come with a doubt about it... What resolution should I use in my games?, I heard someone before say 320*480 and 480*320 is a nice bet, but I don't know if that is still the case with all mobile devices getting bigger screens... So to make a concise question: What resolution is the safest bet?
  13. what is the best way to scale the game from 720x720 to 720x1280?
  14. I currently want to build a game for iPhone (I have a 5s) using Phaser and CocoonJS. I'm just wondering what the best/most optimized initial game size would be for this! aka for this code: var game = new Phaser.Game(800, 600, Phaser.AUTO, 'icicle-man');What would be the best options to replace 800 & 600 with? -Thanks
  15. Hello, we develop a new side-scrolling platform game, is about a car that jump different obstacles and uses turbo (nitrous like need for speed). We are going to use 2 main buttons, for jump and accelerate with turbo, register mouse listener and mapping them to touch listener in case we detect a touch device (moderniz library for example). We construct the game under 480x320 resolution, we use a main div scale 100% to the screen and centered canvas that scale width ratio (480x320). And are going to use two group of images, low res and high res and load them. We need recomendations. our idea is correct??? what resolution or width of the screen we use to select low resolution and high resolution? what image resolution we could use for high resolution? Any opinion will be apreciated.
  16. Few questions. Ok so a HTML5 game is a collection of files? there's no bundle or zip of all the files together say like an .ipa file or .swf ? If the above is true, how does your game get hosted by websites? do you just send them all of the individual files? What's the norm for the above though? you sending all your files to a website? or them iFrame linking to the game hosted on your own site/host? How does it work with screen sizes/resolution, so for example in Flash I'd use 800x600 in iOS I would use 960x640, but does the HTML5 game need to be coded to run in all of those situations (web and mobile) or it usual to target a particular format? and how would I set up either of those situations in Phaser? What are the HTML5 game resolutions that websites are most interested in?Thanks for any advice!
  17. Hi! From what I could observe, html5 mobiles games are usually made in a 320x480 resolution and in portrait. This is a general rule for sponsorship? if I run a bit to this rule, I will have less chances? Otherwise, what are the limits? and games in portrait instead of landscape are preferable? Thanks for listening.
  18. I was wondering if we develop HTML5 game with low resolution such as 160 x 240, 320 x 480, etc. would bring good performance due to drawing process. Is that true?
  19. Hi all, I'm currently building a reusable framework in GameMaker Studio that deals with scaling and orientation on mobile and tablet devices, that I can build all of my future html5 games on. All of my games will be made at either 320x480 or 480x320, and I plan to offer them to sponsors and portals. When dealing with devices with a screen resolution of 320x480, such as iPhones, displaying the game at 1:1 ratio will mean that a portion of the game at the bottom will not be visible under the browser bar, and so would be filled with a logo or filler graphics perhaps. The issue is that because GameMaker studio makes it so easy to export to other formats I also plan to release the same games as iOS and Android native apps. Designing this way would mean that I have to design two versions of the game; a native version taking up the entire screen and an html5 version that fits within the iOS bars. (I've hidden the top browser bar but you can't remove the bottom browser bar or top iOS bar). The scaling solution I've come up with takes the entire 320x480 canvas and scales it up or down to fill whatever space it can, whilst still respecting aspect ratio. However on iPhone this leaves scrollable spaces at either side, as shown below: This solution is the easiest for me as I only need to design each game to fit 320x480 and then scale it up or down to suit, but would sponsors (booster media for example) be happy with this or could it hinder my chances? Thanks in advance. Edit: I wasn't sure whether to put this in the coding or sponsor section so feel free to move it if necessary!