Search the Community
Showing results for tags 'Retina'.
Found 23 results
-
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?
-
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!
-
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?
-
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 logged the canvas and rendered size and there is no change when I put it partially on the other screen so the same stuff gets rendered. I've done the same to some other games and didn't notice this performance drop at all. It also happens with the examples and the bunny benchmark as shown in the crappy video below So my question is why the performance is suddenly so bad when I move the window over towards the 4k monitor. I would really appreciate if people have any tips on how to make sure the game looks good and performs well on 4k/retina displays. CSS scaling makes the performance better but then everything becomes extremely blurry and it's really not acceptable. Is it even possible to make web games that look great for 4k/retina displays with PIXI or in general?
-
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!
-
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.
-
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.
-
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!
-
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)
-
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 property 'scaleMode' of null At this point I am thinking it may just be best to half the scale of my sprites since this is my first game and I don't use a large amount of assets. I still however don't feel its the best solution and wondered if anyone has any other suggestions or examples of how it can be done? Thanks, Jamie
-
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.
-
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.
-
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 (both blurry). 3./ A normal canvas render (also blurry) 4./ A normal canvas render with the CSS scale method used (sharp) I'm considering rolling my own Pixi modification for this. But I prefer not too, since my understanding of Pixi and gfx stuff limits me to brute hacks. Does anyone know if a solution for this is already available somewhere, or perhaps it is already possible with Pixi in some way that I just haven't spotted yet? I found this post that describes the same issue: http://www.html5gamedevs.com/topic/15406-game-blurred-in-a-retina-ipad/?hl=blurry#entry87308 As the asker also found renderer.context.setTransform(ratio, 0, 0, ratio, 0 ,0); does not seem to make any difference. If I use "resolution: ratio" when initializing the renderer, everything becomes bigger (so that would need to be combined with the CSS-scaling I guess). Best regards Torben Rohde
-
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 itself is twice as big and rendered out of position). I have already looked into device pixel ratio and the like, alas without much success. Has anyone else had a similar issue or knows what might be going on here?
-
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 by setting the scale on this SpriteBatch itself. I'm not doing anything else special to try to support this device other than a viewport meta tag. I figure this may be related to the device pixel ratio. I tried to double the size of the tile spritesheet, but the issue still seems to occur.
-
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
-
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.game.world.centerX; this.headerImage.scale.set(this.uniformScale, this.uniformScale);}Cheers, Klaus
-
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.
-
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!
-
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.
-
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 point me in the right direction here, am I doing something wrong? Thanks, Martin
-
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
-
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.innerHeight return the device pixels or the CSS pixels? I can make the same question again using different words . I want to correct the images because I don't like how retina displays resizes my game. So I make my canvas double size 960x640 and use of course bigger sprites. Using the solution above, what should I do to fit my game, stick to the window.innerHeight value or use half of it because then it will be doubled by the display? I hope someone understood my question, if not, I can still ask it in several more different ways, I feel inspired today
