关于模仿流体的一点构思

来个果冻

jdfw.gif
](http://upload-images.jianshu.io/upload_images/1744941-78b07f08d22f9a57.gif?imageMogr2/auto-orient/strip)
至于调用,只要放一张
6.png

这样的小圆图,创建一个精灵-用

auto ac1 = CCLiquid::create(1, CCSizeMake(12,12), 3, 22);
pSprite->runAction(ac1);

看起来是不是有点像果冻,或者说点击果冻的时候
这个流体的术是什么,在我们点击的时候到底对这张图片做了什么操作
CCliquid这个函数的创建放在CCActionGrid3D这里,liquid的创建传入了四个参数
执行时间、切割细致程度,弹动次数,弹动幅度

void CCLiquid::update(float time)
{
    int i, j;
    for (i = 1; i < m_sGridSize.width; ++i)
    {
        for (j = 1; j < m_sGridSize.height; ++j)
        {
            ccVertex3F v = originalVertex(ccp(i, j));
            v.x = (v.x + (sinf(time * (float)M_PI * m_nWaves * 2 + v.x * (1.0f - pow(time,4))*0.01) * m_fAmplitude * m_fAmplitudeRate));
            v.y = (v.y + (sinf(time * (float)M_PI * m_nWaves * 2 + v.y * (1.0f - pow(time,4))*0.01) * m_fAmplitude * m_fAmplitudeRate));
            setVertex(ccp(i, j), v);
        }
    }
}

这里你和cocos2d该文件下的原函数做对比可能也发现了

//原函数
v.x = (v.x + (sinf(time * (float)M_PI * _waves * 2 + v.x * .01f) * _amplitude * _amplitudeRate));
//不变原效果的小改造
v.x = (v.x + (sinf(time * (float)M_PI * m_nWaves * 2 + v.x * (1.0f - pow(time,4))*0.01) * m_fAmplitude * m_fAmplitudeRate));
yuan.png

这里多了一个 (1.0f - pow(time,4)) 这是因为原函数将一个图形的顶点进行拉伸后,到时间结束,状态并没有将它复原,动作完成这时候time=1.0f 带入原函数
v.x = v.x + sin(v.x0.01) 到结束的时候X轴还是多出了sin(0.01v.x)
因此我所加的 (1.0f - pow(time,4)) 作用便是在结束的时候把动画拉回来,同期修复的还有ccwave3d,CCRipple3D ,CCshake3d,CCwaves 好吧这算一个方法,当然,仅仅修改原本存在的小bug这算什么事,那我多唠两句吧!

用wave3d试试

我们让水波动起来


bowen.gif
 D.imgp("illustrated/bg.png", 0, 0):anchor(ccp(0, 0)):to(self)
-- 水波纹1
    local ripple1 = D.imgp("illustrated/ripple.png", 0, 0):anchor(ccp(0, 0)):to(self)
    local waves3D = CCLiquid:create(8, CCSize(10, 10), 4, 10)
    local RepeatForever = CCRepeatForever:create(waves3D)
    ripple1:runAction(RepeatForever)

简单的Shader模仿

jdfw.gif

好吧,敢用Shader的前提是你所用的框架处理shader的垃圾回收处理做的不错,不会因为开一小会就卡的不行,这里我直接放源码,原理就是像素点的偏移

#ifdef GL_ES
    precision mediump float;
#endif
//固定模式传入长宽,resolution即分辨率 CC_Texture0为自身像素 PosX,PosY为鼠标位置
//v_texCoord 图片全屏时候等于 vec2( gl_FragCoord.x/width, (1.-gl_FragCoord.y/height) ); 

uniform float width;
uniform float height;
uniform float PosX; 
uniform float PosY; 

#define resolution vec2(width,height)
uniform sampler2D CC_Texture0;
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
//uniform float time;
#define time CC_Time.x

const float PI = 3.1415926535897932;  
const float speed = 0.2;  
const float speed_x = 0.3;  
const float speed_y = 0.3;  
 
const float intensity = 3.0;  
const int steps = 8;  
const float frequency = 4.0;  
const int angle = 7; 
 
const float delta = 20.0;  
const float intence = 400.0;  
const float emboss = 0.3;  


float col(vec2 coord)  
{  
    float delta_theta = 2.0 * PI / float(angle);  
    float col = 0.0;  
    float theta = 0.0;  
    for (int i = 0; i < steps; i++)  
    {
        vec2 adjc = coord;
        theta = delta_theta * float(i);
        adjc.x += cos(theta)*time*speed + time * speed_x;  
        adjc.y -= sin(theta)*time*speed - time * speed_y;  
        col = col + cos((adjc.x*cos(theta) - adjc.y*sin(theta))*frequency)*intensity;  
    }
    return cos(col);
} 
void main()
{

    vec2 p = (gl_FragCoord.xy) / resolution.xy, c1 = p, c2 = p;  
    float cc1 = col(c1);  
 
    c2.x += resolution.x/delta;  
    float dx = emboss*(cc1-col(c2))/delta;  
 
    c2.x = p.x;  
    c2.y += resolution.y/delta;  
    float dy = emboss*(cc1-col(c2))/delta;  
 
    c1.x += dx;  
    c1.y += dy;  
    float alpha = 1.+dot(dx,dy)*intence;  
    gl_FragColor = v_fragmentColor*texture2D(CC_Texture0,vec2(c1.x,1.-c1.y))*(alpha*alpha);//*(alpha) *v_color*(alpha);  
}                                                                                       

等等...发生了什么情况,我刚插了一张gif结果前面写的东西不见了...这是有长度限制?那就先到这里吧!--ByBBChangwei-16-04-04

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容