How to wobble Phaser.Group

[eguneys]

I have a Phaser.group, for my play area. when the game ends, i want to do wobble effect like in phaser examples.

http://phaser.io/examples/_site/view_full.html?d=display&f=bitmapdata+wobble.js&t=bitmapdata%20wobble

I want everything inside the group to wobble like one image. What is the best way to do this?

[lewster32]

Which wobble example in particular? You could tween it up and down, or you could use Math.sin and Math.cos applied to scale.x and scale.y (or equivalent tweens) to make it look a bit like jelly, as in this example: http://jsfiddle.net/lewster32/ALNL2/

[eguneys]

This, http://phaser.io/examples/_site/view_full.html?d=display&f=bitmapdata+wobble.js&t=bitmapdata%20wobble.

[lewster32]

Ah, in that case you'd probably need to use cacheAsBitmap on the group then copy the pixels to a BitmapData object and perform the above effect, as this effect works only on BitmapData. You could maybe get the equivalent effect with a filter, but that wouldn't work on canvas.

[eguneys]

How do you use cacheAsBitmap it's not anywhere in documents. Can you give an example please. Also filter examples on http://phaser.io/examples are broken.

[lewster32]

It's not in the documents at the moment because it's provided by pixi, the underlying rendering engine Phaser uses. I'm afraid I can't be more specific as I have not used it much myself and don't know the details about how you'd do what you're trying to do, but from my understanding, setting .cacheAsBitmap = true flattens the sprite or group into a single texture, which can then be drawn into a BitmapData object. You may not even need the cacheAsBitmap step; as I say I've not tested this yet.

[eguneys]

I found out that RenderTexture.render method draw any display object to the texture.

Now i have to put this texture into a sprite. Then draw this sprite using BitmapData.

 

BitmapData has a function to draw sprites. And it does draw most of the sprites.

But when i build the sprite by giving it the RenderTexture instance, BitmapData doesn't draw the sprite.

 

Here is the example: http://jsbin.com/rokelulo/12/edit?js,console,output

Edit: I am using v2.0.6, since v2.0.5 bitmapData.draw method is changed here is updated jsbin: http://jsbin.com/rokelulo/14/edit?js,console,output

    // make a bitmap data    this.bmd = this.game.make.bitmapData(640, 480);   // OPTION 1: this options works   // build a sprite   // this.bmdSprite = this.game.add.sprite(0, 0, 'bot');   // END OPTION 1    // OPTION 2: this option fails    // build a texture out of my display object (this.renderLayer)    this.bmdTexture = this.game.add.renderTexture(640, 480);    this.bmdTexture.render(this.renderLayer);    // this line gives error on console    // Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D':     // No function was found that matched the signature provided.     // build a sprite with the render texture    this.bmdSprite = this.game.add.sprite(0, 0, this.bmdTexture);    // END OPTION 2    // draw the sprite    this.bmd.draw(this.bmdSprite);

Edit2: Weirdest thing happened i played with jsfiddle a bit and made it to work. http://jsbin.com/rokelulo/16/edit.

But same code doesn't work on my local server, i made sure the phaser files are the same but it still gives the error on my localserver but works fine on jsfiddle.