How can I simulating mud/slime like this (http://www.emanueleferonato.com/2012/05/16/simulating-mudslime-with-box2d-bitmaps-and-filters/) by cocos2d-html5 ?
the example is AS3 in flash. I want to know how to implement it by html5
Hi,
You can use Box2d or chipmunk to simulate mud/slime by Cocos2d-html5.
The samples about Box2d/Chipmunk at: http://www.cocos2d-x.org/html5-samples/samples/tests/index.html
And Hao Wu(http://www.cocos2d-x.org/users/2890) had implemented this effect.
Hopes that helps.
David
Hi David thank you for your reply. I have seen that example of chipmunk. It’s not the result I want. you can see the effect in that link. That link is written by action script3. I can’t find any bitmap deal class like blur or some other filters in cocos2d-html5
I don’t think the blur effect exist in our engine.
The problem with Canvas is that the manipulation with pixel level is pretty slow, and we don’t want to make our engine non stable to use.
But maybe there is a solution, here is an image process engine which runs on browser: http://camanjs.com, with this engine, you can firstly process your original image to generate an image with blur( camanjs create image element as output ), then you can use the image created in our engine.
Hope that’s a solution.
Huabin
Sorry I made a small mistake,
The blur effect has been implemented in cocos2d-x by OpenGL shader, so it will be easy to apply it in cocos2d-html5. But still, it will only work on WebGL render mode, not canvas render mode which is the only option on mobile browsers.
All depend on your need.
Otherwise, you can even implemented some alternative effects like blur with cc.RenderTexture, e.g.: draw 10 concentric circles with gradual changed opacity from 255 to 0, so that it looks like a blur circle. But if you want blur on image, I can’t figure out other solutions than shader or Camanjs
Huabin
Hi Huabin LING:
Thank you very much.
the mud/slime in that link is implemented by this way
- add some box2d circle shape in the world.
- draw an transparent bitmap on a canvas.
- draw some small white circle on that transparent bitmap(not directly add these white circle as sprite to the world). and set the white circle as the userdata of box2d circle shape.
- apply an blur filter on that transparent bitmap.
- apply an threshold on that transparent bitmap. (threshold is a method in action script 3. it likes an magic wand in photoshop.it can select some very close colors and replace these colors to another color).
so how can I copy this to cocosx2d-html5 ?
I can first add some white circle sprite to layer. and add a blur transparent image sprite overlay the white circle sprite. but I don’t know how can I implement the “threshold” in html5 and javascript
Theoretically, you can do the same thing
If the transparent bitmap isn’t too big, you can cache it on a small offscreen canvas, and apply your blur filter manually. Then you got your blur bitmap.
I don’t understand what the threshold do exactly, but in theory a threshold is for remove some range of color. Basically it’s also a pixel level manipulation, you can use canvas’s getImageData and setImageData function to do it.
Once you have done all that on your cached offscreen canvas, you can create a cc.Texture2D with it. Then you can use it as a texture in Cocos2d-HTML5.
Note that:
You can’t use it with JSB, because JSB only accept image file or data as an input to cc.Texture2D.
If you want to use JSB, I suggest you use the shader language to do the blur.
Huabin
yes, threshold is for remove some range of color. and make the blur bitmap have a hard edge. thank you very much. I’ll try your way. thanks _
Yes, i have done this effect,
its kinda simple
first, you need a sprite that is a blurred dot, then you attach that to a physics circle body, the circle needs to be much smaller than the sprite
then you draw all the dots to a render-texture with additive blending,
then you draw that render-texture with alpha-test shader.
You need to tweak the size of the circle shape, the dot sprite, and the alpha-test cutoff point to make everything look right
Hi Hao Wu:
thank you for your comment.Your comment give me lots of help. But I am beginner with cocos2d-html5. can you give me some example code? My email address is 541906326@qq.com
Could you guys share some code??? thanks