Jump to content

Search the Community

Showing results for tags 'retina'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • 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 23 results

  1. Good evening! I am creating web-game using pixi js. I have got blury sprites, shapes, text - everything. How can i fix it? I have macbook pro 2015. I think maybe physical and vitual pixels not assigned properly, feeling like 1 vitual pixel of pixi = 4 or 9 physical pixels. I tried set resolution to 2, 3, but it didn`t solve the problem. How can i fix it?
  2. 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 = ra
  3. 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&a
  4. Hey, I made a post before about scaling for high DPI monitors and thought that I came up with an acceptable solution but here I am again with some of my concerns about scaling and performance on 4k/retina displays. Even when I start from scratch and just draw a circle the performance is garbage. The weirdest thing is that the performance drops as soon as I put 1 pixel of the Chrome window on a 4k screen. So basically I have 2 screens connected and I move the Chrome window off the normal screen towards the 4k screen and immediately the frame rate drops to 30 instead of 60. I've logge
  5. 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: http://codepen.io/fresh5/pen/jBxNjO Thanks for your support!
  6. I'm looking for right way to manage my assets that for device with hd screen used default atlases, but for device with full hd screen or retina used 2x size atlases.
  7. hi all, currently I got a question about new Game() constructor as the define, the width and height are pixels. e.g. The width of your game in game pixels. If given as a string the value must be between 0 and 100 and will be used as the percentage width of the parent container, or the browser window if no parent is given. but when I use iphone 5s (1136 pixel width, 568 pt width) to create a 640 width game, it can not display fully, it looks that only 568 display in the screen. so I want to know how to understand this situation, thanks.
  8. 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!
  9. 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(u
  10. Hi all, I have looked around the forums and googled around for the past hour or so to try and figure out a solution to get graphics to look crisp. I have created 2x versions of my assets and load them in based on a switch statement for device pixel ratio. This is however just causing my sprites to double in size but still be blurry. I tried a few other solutions such as the following: This just seemed to cause my game to half in size on my Retina MBP. I thought that this solution may be ideal: However I get this issue: phaser.js:82051Uncaught TypeError: Cannot set pro
  11. Hi, I have a small problem on understand how i can work with retina in Phaser. On my mac with retina, the images are so blured. A 48x48 image represent my multiplayer game latency. If i put an image with 96x96, the image is bigger and the game size is the same, only this image is bigger. What is the correct way to do it? thanks.
  12. Does phaser support swapping out sprites based on pixel density? I have folders for 1X, 2X, 3X, etc and I want to preload all of the assets in that folder based on pixel density. I then want to apply a global scale so that every thing in the app is scaled correctly. I also want to design my game using a resolution of 320x480 and have all the coordinates scale as well. I've tried using USER_SCALE but it does not appear to do anything.
  13. Hey fellow Pixies, I have blurring issues with my Pixi stuff. At first I thought that this was somehow a Pixi issue (core issue, or me using it wrong). Then I found out this is a general issue with canvas and devicePixelRatio. http://www.html5rocks.com/en/tutorials/canvas/hidpi/ http://phoboslab.org/log/2012/09/drawing-pixels-is-hard I made a small repro myself: http://openspace.subsero.dk/subsero/rohde/pixi_blurring_repro_2/ It shows: 1./ The raw button img tags as shown and scaled by the "normal browser renderengine". 2./ A Pixi playground with the native and retina versions of the image
  14. In my game on retina devices all graphic assets are rendered twice as big and out of position (e.g. if a button is usually centered, part of it will be displayed in the bottom right corner, the rest is out of screen). If I however load the game, switch to another tab and back to the game, then press a button the graphics revert back to normal scale and position and everything works fine. What's even more odd is that when the graphics are too big, the areas where I can click a button remain normal (e.g. if I have a button in the middle of the screen I can click it just fine, even if the graphic
  15. I'm using pixi 2.2.5, and recently tried my project out on a retina ipad. I'm running into a strange texture resizing issue. This is probably my fault somehow, but I am struggling to figure out how to get the ipad to resize the texture properly. As you see in the attached image, it seems mobile safari is off by 1 pixel when trying to render each tile sprite. This makes it look like theres some space between each tile because it is actually partially rendering the bottom of the tile above this one in the texture. The tile sprites themselves live in a SpriteBatch, and I'm doing some resizing b
  16. I found a topic about retina support in Panda.js but it's about the old pixi versions, I just want to ask how can I make it work for now? Well I realize bamboo does not have retina support, those texts and lines are blur. I just checked the canvas element which does not have width and height set to twice of css size. It won't work even set system.retina to true. Can anyone give me some advice? Ragards, Sean
  17. 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 ancho
  18. Hello, Thanks to the amazing v2 of PixiJS, managing devicePixelRatio has become a lot easier. However I'm still not very sure of how everything works and I'm wondering how I should deal with my PIXI.Text ? If I have a DisplayObjectContainer, on a retina display (ratio = 2), can I draw a text, let's say 16px height, into a 8px "retina" height ? I know how to do it with PIXI.BitmapText, it's easy because I only have to load a _@2x BitmapFont and it works fine. But what about classic text ? Thanks a lot ! Regards, JDW.
  19. 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.rend
  20. 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.
  21. Hi guys, I've been playing around with Phaser for the last couple of weeks and I'm really loving it, very easy to work with and fun too! I have come across an issue however, I'm sure I'm probably doing something silly so I'm hoping someone can point me in the right direction. The issue: I come from a web dev background, so for my images, I've made them double the size and then using scale.setTo(0.5,0,5) to shrink them to the size I want them to display at. That's all fine, however when I use the game on my iPhone the images appear rather blurry instead of nice and crisp. Can anyone poi
  22. Hi, Does Phaser support supplying high resolution graphics (@2x) for retina displays? I cant find any information on this. If so, how do you go about implementing this? Thanks
  23. I'm having a little trouble to understand this: I have a canvas, let's say 480x320, and I use a div container to resize it. CSS.canvas { width: 100%; height: 100%; }JSresize(); //Here using window.innerWidth and window.innerHeight I find the dimensions of the device and I apply those measurements to the div container so the game gets resized via CSS.Viewport<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> If I use this code on a retina device, will it display the game correctly stretched or double sized? Different pov, same question: will window.in
  • Create New...