Search the Community

Hey!, I have started learning Pixi.js. What I am trying to do is fill the whole screen, but preserve the pixel art style and ratio. I tried using renderer.resize() but it simply changes the viewport. Suppose I have a game at 320x240 resolution, and my screen is 1366x768. So my game should zoom 3x and new resolution should be 960x720. But the new screen should use nearest neighbor scaling

Hello folks! I'm developing a project which consists of a canvas and a set of menus and navigation tools to navigate into the scene. The project must be available both on desktop and tablet devices (not mobile phone). I have no problem with the desktop version of the project, but the tablet version causes some weird bugs I couldn't fix for now. I test the mobile rendering of the website on Google Chrome Developer Tools with device mode activated (Google Chrome version: 41.0.2272.101). The problem is that, on viewport resizing, the canvas won't resize properly when the width of the viewport gets below 980 px. As my DOM body has a CSS width set at 100%, its min-width follows the highest width among its element. Every element of my body have a CSS width of 100% (including the render canvas). But the width CSS property of the canvas can't get below 980 px (at pixel ration: 1; 1960 px at pixel ration: 2; etc...). And so, the body CSS width get stuck at 980 px too... Also, as the width of the viewport gets lower than 980 px, the height property of the canvas gets higher. I tried a first workaround in the JS code, like this: // engine: the engine used in the canvas// canvas: the DOM canvas element$(window).on("resize", function(){ var width = window.devicePixelRatio * window.innerWidth; var height = window.devicePixelRatio * window.innerHeight; engine.setSize(width, height); engine.resize(); canvas.width = width; canvas.height = height;});The result is that, even if the canvas in the HTML code gets the corrects width & height, the scene doesn't get the correct size! It looks like the scene is still stuck at 980px wide, and the height continues to rise. I tried a second workaround in the render loop, still in the JS code, like this: _this.engine.runRenderLoop(function(){ _this._scene.render(); var width = window.devicePixelRatio * window.innerWidth; var height = window.devicePixelRatio * window.innerHeight; _this._scene.width = width; _this._scene.height = height;});The result is... still the same situation. Can't set a viewport width below 980 px without getting this problematic situation, and the body doesn't fit into the viewport (you have to horizontally/vertically scroll to see the rest of the DOM body). You can easily reproduce this bug with any BJS playground code, with Google Chrome and device mode activated. Try to reduce the width of the viewport below 980 px and see what happens ;-) if you have any effective solution I'll be glad to see it! :-)

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.

During creating a pixelart game, i found that it would be better to use small-size images and scale them up depending on player's screen resolution. But there were smoothed and blurry: (small image - original size, 2 - resized by canvas, 3 - resized in graphicsGale - original size) I tried different methods to use nearest-neighbour algorithm to make images sharp. Finally, i made it with: bufcontext.webkitImageSmoothingEnabled = false; bufcontext.mozImageSmoothingEnabled = false; But it doesn't work in IE and Opera. What kind of method can cover all(5) browsers? Also tried this for canvas, but it doesn't help:#canvas { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: -o-crisp-edges; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; }