Search the Community
Showing results for tags 'blur'.
Found 17 results
-
Hi all, i've been messing with something for a couple days. I'm passing in a transparent blurred PNG to a shader, as well as a solid PNG background, and running it through a grayscale shader. If I simply display the pixels of the blurred PNG, it is output on top of the solid background as expected. The grayscale part of the shader works fine. However, the grayscale portion of the photo has a harsh transition to the background. It doesn't fade nicely and follow the alpha of the blurred PNG, like a blendMode would. I realize they are different things, but I feel like I am missing something obvious, and that it should work as I'm expecting. I have a playground setup to demonstrate the issue. Ignore the ugliness of the assets, it gets the point across better https://www.pixiplayground.com/#/edit/0ZaLP0UrUIPKfyHU_S3-o In the photo attached, the desired result is on the left (from Photoshop Color BlendMode). The right is the result from the playground. You can tell that the grayscale area on the right is much larger, since I believe that any alpha that is NOT 0, it being set to 1. I would like to try and maintain the alpha from the original blurred PNG. It may not seem like much but it really kills what I'm going for with the aliased edge like that. Thank you!
-
https://www.babylonjs-playground.com/#2ARI2W The edge of the button will blur, just like adding a blur filter. -
Hey there! I am using the latest Phaser.js from the official website. I am creating a game that is supposed to be 640x480 in size. var game = new Phaser.Game(640, 480, Phaser.AUTO, '', { preload: preload, create: create, update: update }); But the final canvas that is being rendered is 800x600 in size, which would be correct according to my Windows DPI settings of 125% (640*1.25=800, 480*1.25=600). A resolution of 1280x720 will get scaled up to 1600x900 and as a result, everything will look blurred. The website itself is not zoomed in or enlarged in any way using Chrome. How do I disable this "feature"? I want to be able to control the size of the game.
-
Hi there, everytime I have to make a game that pauses when the canvas loses the focus (jquery blur()) I struggle with lines and lines of stupid lines of javascript and I´m pretty sure there´s something simpler than my way to do that. I have a normal sprite on the game that pauses/unpauses the game, and I would like to do exactly the same when the canvas focus/blur... how do you guys handle this?
-
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: http://babylonjs-playground.com/#1MZCTQ 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(); bgm.play(); }); $(window).blur(function() { anim.pause(); bgm.pause(); }); any help will be appreciated, thank you! -
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(this.game, 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.game); this.container.filters = [ new Phaser.Filter.BlurY(this.game, 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(this.game, 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!
-
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 this.game.time.desiredFps = 144; ) So i tried to block at 60 FPS with this.game.time.desiredFps = 144; but I got some ghosting like effect. It's really easy to see it on this example : http://phaser.io/examples/v2/p2-physics/kill-and-revive Anyone got an idea to avoid the blur or the ghosting ? That would help me so much
-
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?
-
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!
-
Hello ! I have a problem similar to http://www.html5gamedevs.com/topic/2244-sprites-of-odd-dimensions-blurred-when-flipped/ 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
-
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.
-
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.options.id]);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. TweenMax.to({ blur: this.blurFilter.blur}, .3, { blur: blur, ease: Cubic.easeOut, onUpdateParams:["{self}"], onUpdate:$.proxy(function(tween){ this.blurFilter.blur = tween.target.blur; this.spriteBG.filters = [this.blurFilter]; },this) });Did I do something wrong? Thanks!
-
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?
-
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(this.game.context, false); this.game.scale.maxWidth = 128; this.game.scale.maxHeight = 128; this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.setScreenSize(); },create: function() { this.player = this.game.add.sprite(0, 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;}
-
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
-
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?
