• Content Count

  • Joined

  • Last visited

  1. Just to add: I suffered with this issue this morning (using Phaser 3.1.6) and `this,cameras.main.roundPixels = true` didn't fix it for me. In the end I used good ol' extrusion on my tiles and that solved it. Reference here: @rich mentions some other tools for creating extrusions for your tilemaps if `roundPixels` doesn't work for you.
  2. I realise this thread is super old, but I wanted to throw my two cents in, because a) I hate grunt, and b) the first time I tried a standard uglify call, it failed and broke everything. For a while now I've used a free GUI tool called Koala (because I'm a sucker for a nice, simple GUI) for compressing CSS & JS in websites. It occurred to me to try it with my first Phaser game, but I wasn't holding out that much hope, because my game comprised 10 states, 18 prefabs, 2 plugins, and for the hell of it I threw in a couple of extra JS files I was using for the overall page. The first time I ran it, it failed (boo!), but then I selected the Harmony (ES6+) option in Koala, and it compiled everything successfully, and the game ran perfectly. I've attached a screenshot of my Koala settings. I created a single `site.js` file, and you use a proprietary syntax in that to include all the relevant JS files; e.g.: // @koala-append "mywebsite.js" // @koala-append "plugins/Sound.js" // @koala-append "states/BootState.js" // @koala-append "states/GameState.js" // etc. etc. Then just select your `site.js` file, hit Compile, and BOOM! All of your JavaScript files are compiled into a single file, with all the comments & whitespace removed, all the variables renamed, and all the other uglifying features you come to expect (as Koala makes use of UglifyJS).
  3. PARTIALLY SOLVED. Thanks to this ambiguously-titled thread, I found the solution for my sprite smoothing issue, at least. I solved it with: var skull =, 0, 'atlas-sprite', 'skull'); skull.scale.setTo(6); skull.smoothed = false; skull.texture.baseTexture.dirty(); The key is that last line, .texture.baseTexture.dirty(), which I guess forces a cache refresh on the texture. Unfortunately, the same trick doesn't work on my bitmapText, even after using generateTexture(). Is there a similar dirty() method I could use for that?
  4. The only time I'm ever explicitly setting the smoothed property is in that last GameOverState, and that's when I'm switching it to false (although I gather that it is enabled by default). I hadn't realised it's actually on the texture rather than the Sprite though, and I guess that makes sense: once the texture has been used, smoothed is implicitly defaulting to true, and that's where it stays thereafter. Because, if I jump straight to the GameOverState and set it to the sprites (with the first in-game use of the image) to false, it works as expected. I would guess that the same is true of a bitmapFont texture too - if I use my loaded bitmapFont anywhere else prior to invoking my GameOverState, I cannot for the life of my get that font to appear nice and crisp at a larger font size than its 'natural' size. Out of interest, is there a straightforward way to set the smoothing on the texture prior to anything else? Or is there a possibility of changing that value after the load by manipulating the cache? Update: So I've just tested this for myself, and the results are interesting: If I create some bitmapText and, the first time I use it, I set that particular instance to to smoothed = false, all subsequent instances will be non-smoothed. However, If I create a second bitmapText instance and set it to smoothed = true, not only will all subsequent instances appear antialiased, but trying to use smoothed = false again will not work. I haven't tested this with my sprite atlas yet, but I expect the results will be the same. Which is weird, but again leads me to wonder if there's any way this can be dealt with maybe at the baseTexture level?
  5. Huh. I don't know why I didn't think of that (aside from all of my images being within an atlas); but that totally works. I'm not super-precious about it HAVING to load from the atlas, but I'm now very curious as to why it wouldn't work under these particular circumstances. Any ideas?
  6. Yup. I just double-confirmed by console.logging the .smoothed property for both sprites, and they're both echoing as false. Like I said, it works exactly as expected as long as I do it before adding a group full of Sprites to the main GameState. If I switch to the GameOverState from any other point prior to the GameState (i.e. skipping that step entirely), it works as expected. It's just that point, where I'm adding sprites that create a group larger than the visible game area, that it stops working.
  7. 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: ` = 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 =, 0, 'FFF', 'GAME OVER', 32); gameOverText.anchor.setTo(0.5); gameOverText.x = Math.floor( / 2); gameOverText.smoothed = false; var skull =, 0, 'atlas-sprite', 'skull'); skull.scale.setTo(6); skull.anchor.setTo(0.5); skull.x = Math.floor( / 2); skull.y = Math.floor( / 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.levelData.parallax.clips.forEach(function(element) { var parallax = this.parallax.create(element.x, element.y, 'atlas-sprite',; }, 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?
  8. I realise this is a super-late response, and it doesn't answer the question directly as it related to tilemaps with Tiled (I have very limited experience with that); however, this thread is the 2nd result on Google for 'phaser cloud platform', and I understood 'cloud platform' in exactly the same way as you, @jansensan - a platform that you could jump up through, and then land on (rather than an actual cloud that was moving). So, again: not an answer with Tiled, but there is already a Phaser example of almost exactly this method: The trick is to set the `platform.body.checkCollision.down` property to `false`. Assuming you're doing this by adding platforms into a `group()`, you can do this with `setAll`: this.platforms =; this.platforms.enableBody = true; // Add the platforms this.platforms.setAll('body.checkCollision.down', false);