EvilB

Members
  • Content count

    14
  • Joined

  • Last visited

  1. roundedRect as mask

    An extremely late reply here, but worth mentioning that the reply from cloakedninjas turns out to be more valuable that I first guessed. I recently discovered that Phaser.Graphics use way more resources than Phaser.BitmapData, so the addition from cloakedninjas helped me transform what I used to do with graphics to bitmapdata and the performance of my game increased with 300% So if people suffer from a big fps drop and use a lot of phaser graphics, worth investigating if you really need the graphics or can produce the same thing in bipmapdata
  2. Scale Group and maintain position

    I had spend quite some time on finding a way to mask an image and scale the group of the 2, but thanks Batzi's post I understood I should not group them and transform the group, but just attach the mask as a child to the sprite itself. works like a charm, thanks a lot!
  3. Filter on group not working

    ahhh, found it... I changed my approach a bit and got it to work without any complaints from the Typescript compiler. For who's interested, this is how I now apply my blur filter: var groupBlur = new Phaser.Filter['BlurY'](this.game, null, ''); groupBlur.blur = 36; this.testGroup.filters = [groupBlur]; There is probably a better and easier way, but I'm not Pro enough to figure out the better way...
  4. Filter on group not working

    Any chance you happen to know how I can increase the intensity of my blur? as mentioned above I apply my blur like this: this.testGroup.filters = [ new Phaser.Filter.BlurY(this.game, null, '') ];
  5. Filter on group not working

    It works when I do it like this: module Game { export class Container extends Phaser.Group { someSprite: Phaser.Sprite; positionX: number; positionY: number; constructor(game: Phaser.Game, x:number, y:number) { super(game, game.world, 'Container'); this.positionX = x; this.positionY = y; this.create(); } create() { var someSprite = this.game.add.sprite(this.positionX, this.positionY, 'someSprite'); someSprite.anchor.setTo(0.5); this.add(someSprite); } } } Per Samme's advice I added Container to the display-tree and I add the Sprite to the group in a different way. The combination of all does the trick, even though I still have some reading to do to understand why this was the solution. Thanks for your help Samme! much appreciated!
  6. Filter on group not working

    argh, unfortunately that's not it. When I add the frame (null) and parent (this) to the Sprite, the application hangs because of a RangeError "Maximum call stack size exceeded" and I see that it keeps trying to create the Sprite over and over again. I'm also not sure the issue is with the sprite, since it does blur when I filter just the sprite (directly). So my hope was that adding the Container to the display tree, but replacing null with game.world unfortunately did not do the magic... Any other ideas? I'm searching everywhere, but it turns out that the amount of articles and forum posts on Typescript issues is way less that Javascript issues (but I'm still excited by Typescript, don't get me wrong!). All help is welcome!
  7. Filter on group not working

    Thanks for your help Samme! You have a point. I tried the following in MainGame: testGroup: Phaser.Group; this.testGroup = this.game.add.group(); this.testGroup.add(this.someSprite); this.testGroup.filters = [ new Phaser.Filter.BlurY(this.game, null, '') ]; and this works, so I must be doing something wrong in my Container class, which looks like this: module Game { export class Container extends Phaser.Group { someSprite: Phaser.Sprite; positionX: number; positionY: number; constructor(game: Phaser.Game, x:number, y:number) { super(game, null, 'Container'); this.positionX = x; this.positionY = y; this.create(); } create() { this.someSprite = this.game.add.sprite(this.positionX, this.positionY, 'someSprite'); this.someSprite.anchor.setTo(0.5); } } } which I call from MainGame like this: testGroup: Container; this.testGroup = new Container(this.game, this.world.centerX, this.world.centerY); this.testGroup.filters = [ new Phaser.Filter.BlurY(this.game, null, '') ]; This shows me the sprite, but the filter is not applied. As mentioned before, the filter is applied when I in this example call: this.testGroup.someSprite.filters = [ new Phaser.Filter.BlurY(this.game, null, '') ]; By the way, when I apply the filter like this: this.testGroup.filters = [ new Phaser.Filter.BlurY(this.game) ]; Typescript throws an error. Or is that not what you meant when you wrote that the BlurX/BlurY constructors should have just 1 argument?
  8. Filter on group not working

    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!
  9. The simple solution to this is to not trim the sprites in TexturePacker (set "Trim mode" to "None"). I was hoping somebody would have a beter solution, because this does result in slightly bigger spritesheets, but at least by applying this way of working, I can put all my background layers into 1 sprite sheet, which saves several HTTP calls...
  10. Hey there, I ran into an issue when I tried to create a parallax effect for a side-scroller. I first got the parallax effect working by loading each image individually and adding it as a tileSprite to the game. That went well, so I thought why not create a spritesheet for the different layers , which I created using TexturePackers atlas JSON presets. Now the issue: all layers load well when I load them like: this.mountains = this.game.add.tileSprite(0, 0, 733, 420, 'background', 'mountains.png'); but because this does not seem to use all the data that is stored in the JSON file, the transparent pixels that were cropped off by TexturePacker, are not taken into accounting and the texture is stretched all the way to the expected dimension. To fix it I have to manually adjust the scale using tileScale after the tileSprite has been loaded, but there must be an easier way and I must be overlooking something. So long story short, Phaser does load the correct sprites from the spritesheet, but the dimensions and positioning data seem to remain un-used. Thanks in advance for your help!
  11. Masking a gradient fill not working

    OK, finally I found out what I was doing wrong... it was kind of stupid, but let's post the solution, in case anybody else runs into a similar mistake. The mask is supposed to be applied to a sprite and I was applying it to the bitmapData instead of a sprite. So in my code I had to replace: this.game.add.sprite(0, 0, bmpData);with: var gradientSpr = this.game.add.sprite(0, 0, bmpData);So that there was a sprite available to apply the mask to and then instead of applying the mask to MyBmp, I applied the mask to gradientSpr, which made my last line look like: gradientSpr.mask = maskGph;
  12. I'm struggling with a problem similar to this one where I try to mask a rounded rectangle shaped part of a gradient fill. I'm pretty new to Phaser and searched like crazy for a solution but could not find one, so therefore I created a new topic for this. I must be overlooking something and I hope somebody sees what I do wrong or has already found a solution to this. Is it not possible to mask bitmap-data with a graphic perhaps? And if so, is there a dynamic way around this? I tried using a PNG to mask, which worked fine, but that limits my flexibility and re-usability, so I'd really like to figure this out. This is what happens: I am able to see the gradient background as well as the rounded rectangle, but I can't seem to turn the rounded rectangle into a mask that actually works. To be sure it is not a positioning issue, I made the background to be masked, a full-screen rectangle and I positioned the mask in the range of that background. This is what I try (which does not work for me): // draw the shape that contains the gradient var myBmp = this.game.add.bitmapData(800, 600); var myGrd = myBmp.context.createLinearGradient(0, 0, 0, 600); myGrd.addColorStop(0, '#090000'); myGrd.addColorStop(1, '#C50000'); myBmp.context.fillStyle = myGrd; myBmp.context.fillRect(0, 0, 800, 600); this.game.add.sprite(0, 0, myBmp); // draw the rounded rect mask var myMask = this.game.add.graphics(0, 0); myMask.beginFill(0x000000); myMask.drawRoundedRect(620, 500, 140, 30, 10); myMask.endFill(); // apply the mask myBmp.mask = myMask; I created a codepen for this: here Any help would be highly appreciated!
  13. Extending Phaser.Group

    I have a related question... in omarojos example, is it possible to remove the custom group? I have a similar set-up, but removing the group with something like: this.game.destroy(this.warp);does not work for me. It might be a scoping issue in my case, but before I crack my head I'd like to be sure that removing a custom group is at least possible. All help appreciated!
  14. roundedRect as mask

    I'm struggling with a similar problem here where I try to mask a rounded rectangle shaped part of a gradient fill. I'm also pretty new to Phaser, so I must be overlooking something and I hope somebody sees what I do wrong or has already found a solution to this. I am able to see the gradient background as well as the rounded rectangle, but I can't seem to turn the rounded rectangle into a mask that actually works. To be sure it is not a positioning issue, I made the background to be masked, a full-screen rectangle and I positioned the mask in the range of that background. This is what I try (which does not work for me): // draw the shape that contains the gradientvar myBmp = this.game.add.bitmapData(800, 600);var myGrd = myBmp.context.createLinearGradient(0, 0, 0, 600);myGrd.addColorStop(0, '#090000');myGrd.addColorStop(1, '#C50000');myBmp.context.fillStyle = myGrd;myBmp.context.fillRect(0, 0, 800, 600);this.game.add.sprite(0, 0, myBmp);// draw the rounded rect maskvar myMask = this.game.add.graphics(0, 0);myMask.beginFill(0x000000);myMask.drawRoundedRect(620, 500, 140, 30, 10);myMask.endFill();// apply the maskmyBmp.mask = myMask;Edit: I was able to find a solution to my issue, which I posted: here, maybe someone can benefit of it, but to be honest it was just a silly mistake...