Search the Community

Hi All, I'm developing simple image editor which is need to load a image and add texts and drawings and save the edited image. But I'm getting this exception when try to use plugin.extract.base64 method for my container. This exception is getting only when device pixel ratio is not equal to one. (PIXI version: 4.8.1) pixi.min.js:17 Uncaught RangeError: offset is out of bounds at Uint8ClampedArray.set (<anonymous>) at t.canvas (pixi.min.js:17) at t.base64 (pixi.min.js:17) Here is my code sample. PIXI.settings.RESOLUTION = window.devicePixelRatio; PIXI.settings.ROUND_PIXELS = false; var container = document.getElementById('editor-container'); this.set('pixiRenderer', PIXI.autoDetectRenderer(container.offsetWidth, container.offsetHeight, {transparent: true})); container.appendChild(this.get('pixiRenderer').view); this.set('stage', new PIXI.Container()); // Load image to pixi var texture = PIXI.Texture.fromImage(img); var image = new PIXI.Sprite(texture); this.get('stage').addChild(image); // On save image var base64 = this.get('pixiRenderer').plugins.extract.base64(this.get('stage'), 'image/jpeg', 1); Note: If not update the PIXI.settings.RESOLUTION to device pixel ratio exception will not be created. But that is applied to keep keep clarity of image and drawings when zooming the web page. If anyone can help it would be great. Thanks.

I was posting this thread at the wrong place (it was in Phaser 2). OK, I am having a very bad time with clickable objects. It works perfectly on desktop browser but when I run it on my Android mobile the hot spot is totally off. Please refer to the attached picture to have an idea what I am talking about. The blue square is the clickable object (it's a .png picture). Tapping the object won't fire the input event but if I tap around the position where I draw the marquee it will. In other words, the clickable area is off of the picture. I found this thread where the OP had a similar issue and mentioned that is could be related to the mobile devicePixelRatio when using Phaser.CANVAS but I couldn't establish a coherent relationship between the DPR and the displacement (otherwise it could be "compensated" with code). I really cannot see how to solve this. I am about to give up Phaser and try a different engine. Any idea?

OK, this is weird. I spent a lot of time trying to figure out why my image objects wasn't firing when I tapped on it (it works on desktop). After several tests I noticed that it happened that on mobile screen the clickable area was off of the image (displaced). I found that someone had a similar issue and figured that it had something to do with devicepixelratio when using Phaser.CANVAS. I couldn't test with Phaser.AUTO because my mobile throws a WebGL error when I try to use it. Any idea how to fix this issue? Thanks!

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

Example: https://jsfiddle.net/b3wtg0hn/ Phaser CE v2.7.7 I display the image with a size of 200 by 200 In the configuration, the devicePixelRatio property with a value 2 I have two problems: 1) The size of the hit (click) area of the sprite is not changing. It is the same as the original file 200x200. But the displayed sprite is 100x100. B the cursor responds to an invisible area 2) The function spriteBounds displays an incorrect position of the sprite bounds. I'm about the green box. I don't know how to fix this. Without using devicePixelRatio everything is blurred on my retina display. It hurts me. I never used CE version. And I have not had these problems on older versions of Phaser. (But then I used method scale.setTo(0.5) for every sprite) Screenshot:

Note5 or Galaxy S6 has devicePixelRatio of 4, how do you guys handle different image to be responsive to all the different device aspect ratio and devicePixelRatio?

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

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.