Search the Community

I'm working on a game that switches through various states for the menu, main game and game-over screens. for the most part I'm happy for antialiasing to be used on my sprites and particularly my text, as forcing a crisp pixelated render on the whole game can lead to some of the text & sprites looking a little janky. I'm instantiating my game pretty simply: `MY.game = new Phaser.Game(800, 600, Phaser.AUTO, 'game');` I'm not setting any scale modes or special rendering prior to playing the game. In the Game Over state I'm loading a small pixel image I created, and adding some bitmapText to the top of the screen. I'm scaling the pixel image up by a factor of 6, and the bitmap text is set at 32px. On both of these, I set `smoothed = false`, because I wanted both the text and the sprite to appear pixel-perfect, and because I use FF by default (which uses WebGL by default), it will usually smooth out sprites unless explicitly told otherwise. It looks like this: var gameOverText = this.game.add.bitmapText(0, 0, 'FFF', 'GAME OVER', 32); gameOverText.anchor.setTo(0.5); gameOverText.x = Math.floor(this.game.width / 2); gameOverText.smoothed = false; var skull = this.game.add.sprite(0, 0, 'atlas-sprite', 'skull'); skull.scale.setTo(6); skull.anchor.setTo(0.5); skull.x = Math.floor(this.game.width / 2); skull.y = Math.floor(this.game.height / 2); skull.smoothed = false; Here's where it gets weird: if I jump straight from my BootState (which is always loaded before everything else) to my GameOver state, it works perfectly - text and sprite look nice and crisp. However, if I actually go through the game (so, go from BootState to GameState to GameOver state), it doesn't work at all - text is blurry and the sprite looks awful. I've managed to narrow it down to the point at which I start adding sprites: // this.levelData is a previously-loaded JSON map this.parallax = this.add.group(); this.levelData.parallax.clips.forEach(function(element) { var parallax = this.parallax.create(element.x, element.y, 'atlas-sprite', element.name); }, this); (it's worth noting that these loops create sprites way outside of the camera's viewport, as the game is scrolling) If I add `this.state.start('GameOverState')` and return out of the function prior to this loop, my text & sprite in the GameOver state remain perfectly pixelated; if I move `this.state.start('GameOverState')` to after that first loop (or at any point after this), it's as if all of the smoothing arguments are ignored. I've tried a LOT of different methods to try to fix this, but nothing is working. I figured it might be something to do with the world bounds, or the camera position, or the game antialiasing, but nothing seems to work. Any ideas on why this might be happening and how to get around it?

Hello, everyone. I am using an SVG file to render resolution independent textures. My device has a pixel ratio of 3, and so I set the PIXI resolution to 3 for a crisp display. My SVG texture becomes weirdly pixelated if the canvas it is rendered to is too large. This only happens when using the WebGL renderer. I have two comparison pictures: http://imgur.com/a/5bQxM First one crisp (Canvas), second one pixelated (WebGL). The size of the texture is 1528x1528 and my screen resolution is 1920x1080.

Has anyone already tried to make pixelated graphics from a scalable vector (svg) source? I use Inkscape, and I think working with scalable vectors in inkscape is easier than pushing pixels on a raster graphics editor like gimp, because vectors are more easily reusable and easier to change. However, Inkscape always does anti-aliasing when scaling down, which makes art intended to be pixelated look real bad when exported to png (I don't know about Corel Drawn or Adobe Illustrator, I have never used them). I made a bash script (shell script, if you prefer), which I'm attaching to this thread, that uses inkscape to convert an svg file to a scaled up png, and then scale it down with image magick. The result looks better than the file exported directly in low resolution from inkscape, and is easy to fix the remaining issues with gimp (unfortunately, I couldn't get rid of it yet). I have attached also an example svg, with a comparison of what inkscape usually spits out (1), what image spits out when downscaling an upscaled exported image (2) and a fixed up version (3). I have put also the scaled up png. Using this process to achieve the desired result (making pixel art out of vector graphics) is one option, but certainly it is not an optimal process, nor very practical (you should run the script and make the manual fixes every time you change your svg). Does any one know of a better process, that does not involve don't using scalable vectors? Maybe there is an inkscape extension of some sort that exports the png without doing anti-aliasing. Inkscape 0.91 (the upcoming release) will be completely replacing libnr (it's current render engine, developed by themselves) for libcairo (a much more mature and widely used renderer), and it seems cairo allows to disable anti-aliasing when up/down scaling things. But I don't know if inkscape itself will allow to turn anti-aliasing on/off when exporting to png. I remember that, on Windows XP, MS Paint used to let you create curved lines which where not anti-aliased. First you traced the straight line, then you curved it (and after it became normal graphics, which could be edited only like normal raster graphics). I think a vector graphics editor that could display and export graphics in that pixelated way would be very useful in some scenarios. If anyone wants to try my script, just unzip it, and run #svg2pixelart.sh some_svg_file.svg; Unfortunately, it will run on linux only (or maybe on OS X and BSDs also). EDIT: The image is intended to be a 16x16px mushroom, like a super mario mushroom. mushroom.zip svg2pixelart.zip

I am using a low-res bitmap font and I want to have it pixelated. Is it possible to change the scalemode from the font atlas to nearest scaling? Thanks in advance, Josh