Search the Community

Showing results for tags 'blur'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 15 results

  1. There's a new messaging platform where you can chat and play HTML5 games, and the BLUR team behind it wants to focus on helping indie devs showcase their games. The launch jam already started, and you can check the details on their website and in my blog post. You can win some prizes and got your games featured when the app launches in April to get some extra exposure.
  2. Hi everyone, i was trying to pause a scene when the browser window is not active(eg. user switches tab, ctrl/cmd+tab, another window is currently focus,etc). To pause the scene, i need the background music and all animations to be paused, below playground example shows my approach: I got two results: 1. when I click on another window(for example a notepad) that overlapped the browser, the notepad is now focus and the browser is blur, hence both sound and animation are paused, this is expected; 2. when I ctrl/cmd+tab or manually click on another tab to switch tab, only sound is paused but the animation continues playing. looks like $(window).blur(function() {...}); is triggered, but only bgm.pause() work, anim.pause() doesn't work. $(window).focus(function() { anim.restart();; }); $(window).blur(function() { anim.pause(); bgm.pause(); }); any help will be appreciated, thank you!
  3. Hey all, I'm trying to filter an entire group, but I can't seem to succeed, where applying that same filter to a sprite instantly works. I'm working on my first Typescript project and I like it a lot! I have a MainGame class (mainGame.ts) which extends Phaser.State and I have a Container class (container.ts) which extends Phaser.Group When I apply a filter to a sprite that I simply added like: this.body = this.add.sprite(0, 0, 'bgBase'); this.body.filters = [ new Phaser.Filter.BlurY(, null,'') ]; the blur filter is applied. Now when I try to apply the filter to a container which contains Sprites, like: this.container = new Container(; this.container.filters = [ new Phaser.Filter.BlurY(, null,'') ]; does NOT work. But when I apply the filter directly to a Sprite inside the container, like: this.container.someSprite.filters = [ new Phaser.Filter.BlurY(, null,'') ]; the filter is applied as expected. I must be overlooking something important for how I create or add the group, but I keep missing it. I hope somebody has an idea about where to look. Help will be much appreciated!
  4. Hi there ! I got some blurry simple sprite movement when moving and having a camera lerp. It's only when I use more than 60FPS ( 144 exactly ) ( set up with = 144; ) So i tried to block at 60 FPS with = 144; but I got some ghosting like effect. It's really easy to see it on this example : Anyone got an idea to avoid the blur or the ghosting ? That would help me so much
  5. Hey guys, I have add a sprite in the canvas, but I dont know why when I load the phaser web in iPad, the sprite will get blur. I have triedto running on the other tablet, it display properly. The image is 1080 * 1080.
  6. Hi, I wonder why when I use some of IOS device open the phaser game, the sprite displaying on the background will get blur. The resolytion of the source sprite I used 1080 *1080. Normally it shouldn't get blur on any of ios devices?
  7. Hello All, I'm using text and emoji and I'm rendering them on Phaser, but when I to .toDataUrl() the resulting image shows them quite blurry especially the emoji. Is there a way to fix this issue? I'm also using Phaser.Canvas.setImageRenderingCrisp(game.canvas); //for Canvas, modern approach Phaser.Canvas.setSmoothingEnabled(game.context, false); //also for Canvas, legacy approach // Pixel art. game.stage.smoothed = false; // No sub-pixels to remove camera jitter. game.renderer.renderSession.roundPixels = true;But the result is the same, I'm running this on iPhone5s Thanks!
  8. Hello ! I have a problem similar to But im not using Phaser so I don't achieve to resolve my problem. Im working with Pixel Art sprites, and when I want to set the position of an odd width or height with the anchor set at 0.5 the result is blurred because the renderer try to interpolate the pixel. What is the solutions in PIXI to resolve this? Im sorry if my english is hard to read and/or understand. Kind regards of a French Developer who start with Pixi.js
  9. Hello, everyone! I am making a game which features pixel art graphics. I use standard 2dContext of Canvas, and already achieved pixelperfect sprites turning imageSmoothing off. But the problem I have now is nonblurry text As you can see on the screenshot above, horizontal lines on the white character are nice and crisp. Vertical ones, on the other hand, get smeared and blurred. I tried to use trick with adding 0.5 to position (put lines tightly in pixel grid). But that didn't work either (see screenshot above). Even though this method works on rectangles and lines for me. It's important to add, that I use buffer canvas to draw this text on. Afterwards, this canvas is upscaled and drawn to final canvas using drawImage. Text on original canvas without upscaling is blurry too. Also, I have used this tool to create test font (other fonts shared on font repositories give the same problem)
  10. Hello, Like the title says I have a text on a game that appears quite blurry or like it has smoothness applies to it. I was wondering if there is a way to make it more crisp to improve legibility. I'm attaching a screen of how it looks, I think it is quite obvious.
  11. Hey folks! I'm running through an issue with pixi v3. It seems that the blur filter isn't working correctly, or I might have used it in a wrong way, I can't tell. Here's what I'm doing: this.spriteBG = new PIXI.Sprite(PIXI.utils.TextureCache[]);this.spriteBG.cacheAsBitmap = true;this.addChild(this.spriteBG);this.blurFilter = new PIXI.filters.BlurFilter();this.blurFilter.blur = 50;this.spriteBG.filters = [this.blurFilter];The result is weird, the texture seems just duplicated and positioned with a different alpha, not blurred at all. Then, when I try to tween the value, nothing happens.{ blur: this.blurFilter.blur}, .3, { blur: blur, ease: Cubic.easeOut, onUpdateParams:["{self}"], onUpdate:$.proxy(function(tween){ this.blurFilter.blur =; this.spriteBG.filters = [this.blurFilter]; },this) });Did I do something wrong? Thanks!
  12. I am planning a game using Ludei Canvas+. The filter available in examples will support only Phaser.WebGL renderer mode. Is there any way to blur the sprite in Phaser.CANVAS renderer mode?
  13. The #lowrezjam is a jam where you have to make a game with a maximum of 32x32 pixels but you can scale the game up. How can I scale my game up without having blur, and with my awesome pixel art still crispy enough. In this picture you can view the 32x32 game, with a demo image. When I try to upscale my game to 128x128 I get this and I dont know if I have to scale the canvas, or the game... I don't know how to do it! Any help?? This is the code I'm using: Game.prototype = { preload: function() { Phaser.Canvas.setSmoothingEnabled(, false); = 128; = 128; = Phaser.ScaleManager.SHOW_ALL;; },create: function() { this.player =, 0, 'player'); this.player.smoothed = false; },and in Css .game { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: -o-crisp-edges; // OS X & Windows Opera (12.02+) image-rendering: optimize-contrast; // Possible future browsers. -ms-interpolation-mode: nearest-neighbor; // IE width: 128px; height: 128px;}
  14. I've making my first game so far is great but I have a display problem. when I rotate the sprite it become's blurry, same happens on jumping and falling the sprite turns blurry. Can anyone help me fix it. I'm using Chrome with WebGl and WebAudio. is there anyway I can make the sprite to not become blurry...Thanks By the way Wonderful framework I started the styding and making the game last night and I'm closer to finished thank you. And from the google searching I see that the administrators (are those the creators?) are responding quickly... Just great keep up
  15. Im using phaser (1.0.6) for my game, but I suspect this to be so low level so Im putting it here. I have a spritesheet of three frames. The zebras looking to the left are unchanged and simply rendered, those looking to the right are flipped using scale.x = -1. What happens is pretty much what the topic say. The first row shows the behaviour of the system for textures with odd dimensions, the second one is for even sized textures. I render using pixi canvas renderer. Anyone can reproduce this, or knows a better workaround that simply creating all your pix with even dimensions?