半色调抖动与近景透明


Dithering4

话说,上个月神秘海域4 出了开发者日志, 其中的半色调近景透明技术让我非常感兴趣, 毕竟非常多游戏要用到这个功能, 比如很多RPG游戏,近景的墙壁如果遮挡住主角,就会半透明。 而且半透明又是很消耗性能的,这篇日志也提到使用半色调技术是因为性能考虑。

开发者日志地址 : http://www.paopaoche.net/tv/99983.html

之前一直没空,在研究了2天半色调技术后,终于渲染出了我的半色调皮卡丘!!
Dithering

之后,上周看 火猫tv 的 dota2 马尼拉比赛直播的时候,发现 dota2的新地图也用到了类似的技术, 如图中的柱子 😀
我想估计这个技术应该会慢慢铺开,不过玩家能不能马上接受这种像素风的半透明效果就另说咯。

Dithering2Dithering3

— 未完待续, 周末有空的话, 会补充 贝尔矩阵的求解过程,可以自己计算任意 偶次方长度的矩阵。

Unity3d Compute Shader

=。= 准备开始花1个小时探讨这个复杂的 Compute Shader的, 结果从家里拷贝做的 Demo 在女朋友的小霸王笔记本上运行不起来。。只能明天回家在写了。。

就是这个破显卡 🙁 Intel HD Graphics 3000

—–

I’m back…

话说, Compute Shader 能做什么呢,可以把大量的并行计算丢到GPU去计算,因为GPU并行计算的能力爆表
举例来说呢
1.大规模粒子特效,计算粒子的位置,大小,颜色等等(当然传统粒子也可以做到这点,通过传入时间值和带有时间的公式来计算位置,但是Compute Shader 可以实现带有逻辑更复杂的效果, 而且编码更加简单)
2.烟雾,液体的模拟
3.可以做贪食蛇 =.= 像这样
ComputeSnake

继续阅读“Unity3d Compute Shader”

Unity3D 中的高度雾

fog
图中有2个效果, 分别是 HDR(做法在这里uniy3d-hdr_bloom/, 高度5的白色高度雾
不过除了雾以外,其他都不重要.

unity3d 一直都有一个距离雾,也可以说是深度雾,随着物体的远近慢慢渐变颜色,设置在 Window->Lightning->Fog(Unity 5.x)

这次来实现一个u3d中没有的,从低到高,而不是从远到近的雾效 – 高度雾。

之前做这个效果之前,有查阅些资料,有看到某外国的大大做了个类似的效果,地址在这里 altitude-fog
我们将要做的效果和这个差不多,但是区别在于,老外的做法是需要场景中的每个物体都添加一个雾效材质,这个雾效Shader是判断物件顶点Y轴在世界坐标系中的位置,然后 (FogEnd – 物体Y) / (FogEnd – FogStart) 算出一个在Y轴方向的雾效颜色比例,最后差值一下。

继续阅读“Unity3D 中的高度雾”

Unity3D Geomerty Shader

Geomerty Shader 是 SM4.0 Directx 9.0c 中引用的新技术, 它的位置位于 Vertex Shader 和 Fragment Shader 之间, 可以对一组(多个)顶点进行编程

Geometry Shader 可以自定义输出方式
PointStream
LineStream
TriangleStream
分别是 点,线,面
这样如果想做线框模式渲染,就非常的简单

上个线框模式图
LineStream

继续阅读“Unity3D Geomerty Shader”

浅谈 Unity3D 的 RenderQueue

突然发现换了阿里云的空间就支持 wp的 中文链接了,好赞。。

言归正传,今天做了一个 光晕的效果, 参考的是Nehe 的Opengl教程, 以前一直没做过这个东西就有点好奇,做完后,发现效果特别赞,又简单,但是遇到了 RenderQueue 的一些bug,记录一下。

unity3d_overlay2

有人肯定会说Unity3d 自身可以创建 LensFlare 效果,为什么还要自己搞,我看了下,貌似 LensFlare必须绑定到 Light 上才有效果,而且准备素材的时候很麻烦,简单的黑白图调色都不行,还是自己写吧。

再说说 Nehe教程中判断 某点 是否在视野内, 是通过获取相机的视椎体,然后监测某点是否在视椎体的6个平面内。。。 感觉这个真麻烦,直接将 点 通过 mvp 矩阵转换到屏幕空间,然后判断该点坐标是否 x,y > 0 && x,y < 1 即可。 好吧,又跑题了。。。 u3d_overlay_1

如图,编写了一个Shader, RenderQue=”Overlay” ZWrite Off ZTest Off
发现在场景有其他 GameObject 的地方,图片都能正确的挡住它们,但是当背景为天空盒的时候,确被天空盒挡住了, 根据常识理解这不应该, 天空盒应该是在实体层渲染的, 不应该会挡住, 然后在 Shader 中就算改成 Overlay+99999 也是毫无效果。。。

继续阅读“浅谈 Unity3D 的 RenderQueue”

隔了1年最近看了看Egret 做了个Demo TP:AE94AD6A

游戏也放上来罢,一个读大学时做的flash小游戏,就打算移植不过,没用用Egret提供的转换工具,全部手写移植,也是为了熟悉下语法

游戏地址 http://www.dreamfairy.cn/h5/poom/

在游戏制作上,看了看还是算蛮成熟的。

EUI的结构类似 MyGUI 且提供了可视化编辑器这店挺爽。 MyGUI官方的编辑器好无语。。

在创建的Game项目模板中,默认是加载所有资源再进游戏,感觉挺不科学,不过在做完这个demo后也就释然了,在微信和opera上跑起来,简单的逻辑就有掉帧2~3帧,不使用webgl. 手机上也用不了,所以只能做小游戏,大型游戏的话就需要打包app了,另说。

语法上,所有的AS3类型,在 egret 包中都基本实现了,不过实践了大半后,觉得一些地方用TS的特点更棒。
比如

public createParticle(idxPos : {x : number, y : number}){
    //TODO
}
请不要无脑复制转载本文, 由 dreamfairy 原创, 转载请注明出处 本文地址 http://www.dreamfairy.cn/blog/2016/01/15/make-a-demo-with-egret/

ASer 转过来一般参数可能会写 idxPos : egret.Point
但是当项目合作有些人不是ASer, 而是JS 同学的话,用Object限制参数类型就是一个很棒的选择,既可以兼容 egret.Point,也可以兼容一个 JS 同学些的 相同属性的 Object 了。

也有一些不科学的地方
比如 所有的成员属性,都需要以 “this.” 开始,好烦
函数定义不需要中间的 “function”表示,经常容易写错。 比如这样写是错的 : public function 函数名
没有const, int 等等。

同时在开发的时候,一些新的特性有兼容问题
比如我写了个 map = new map 在 opera浏览器上正常解析, 在微信中打开会出现创建失败, 所以map 都用传统的 {} 就好,也万能。。。

然后说说配置问题
egret的资源都配置在 json 中。 但是假如游戏交付后,一些前端web同学不熟悉你的配置,想修改游戏中的一些初始信息就不方便了。

所以完全可以前端web同学在游戏的 index.html 中配置一些初始属性给游戏用
比如这样
index.html

<head>
    <ts_param id="xxx" str="fuck me"/>
</head>
<body>

在TS中可以这样读取

        var x = document.getElementById("xxx");
        var data = x.getAttribute("str");
        consolog.log(data); // output = fukc me

是不是很方便~~

最后JS 和 TS 之间的交互也非常简单,熟用 window 这个中介即可

举个例子,我想TS调用JS的一个函数,然后JS函数中创建一句话回传给TS,TS再从html中读取一个参数后合并字符串返回给JS. 最后JS弹窗显示这句话。

首先在 JS 中顶一个函数像这样

    <script>
        function myFunction()
        {
            var str = 'Hello World Java Script!';
            var tsFun = window["TS_Main"].onJsCallMe;
            if (tsFun) {
                var result = tsFun(str);
                alert(result);
            }
        }
    </script>

在TS中这样写

//test call js
var jsFun = window["myFunction"];
if (null != jsFun) {
   window["TS_Main"] = this;
   jsFun();
}

    //test js call ts
    public onJsCallMe(str: any): any {
        //test get html data
        var x = document.getElementById("xxx");
        var data = x.getAttribute("str");
        return data.toString() + " and " + str;
    }

是不是很有意思, 使用 window[“TS_Main”] = this; 就可以不需要定义静态方法了,这样的话,也起到了函数的分类作用,用window的一个key 来标示所在类

最后放个游戏的源码,在git上
https://github.com/dreamfairy/EgretPooms

Loog time no see~

很久,很久,很久没有写博客,好像都有半年的样子了 😀
一直都在忙项目的说~
好歹游戏游戏上线了,目前正在公测beta阶段
KindomsCHarge
相关主页在FB上啦 https://www.facebook.com/kingdomscharge

我表示一个人完成所有技能表示心理好虚~一共170+个技能。
顺带提供一下apk网盘地址吧~
http://pan.baidu.com/s/1c0m4eo4

cocos2d-x-2.x APK 打包问题汇总

很久没有发全技术文章了。。。
今天折腾了几个小时,终于编译成功一个复杂的cocos2d-x-2.x 项目了。。其中遇到的坑数都数不过来。

1.资源目录中不能包含中文路径,否则打包失败

2.XML配置表中不能包含全角符号,否则加载失败

3.在部分低端手机上,SpriteSheet 的大小达不到 2048 * 2048 会导致闪退

由于项目使用了rapidxml, 而 rapidxml 又调用了 Boost 所以这里要编译boost的相关库
boost_system 和 boost_iostreams

Boost相关问题

4.Boost的HPP文件,不需要加入 Android.mk 中,这是一个类似于.h文件一样的东西,不需要填

5.Boost的库需要用NDK打包成库
1)下载最新的Boost 1.55 http://iweb.dl.sourceforge.net/project/boost/boost/1.55.0/boost_1_55_0.zip
2)使用cygwin 编译 bootstrap.sh 生成 b2.exe, bjam.exe
3)修改 /tools/build/v2/user-config.jam 内容如下

继续阅读“cocos2d-x-2.x APK 打包问题汇总”

在Cocos2dx中,自由的更换滤镜

cocso2dxgodray

可以通过网盘下载gif看看动态效果
http://pan.baidu.com/s/1jGoRER0

也可以看看移植前的stage3D版本的效果
http://www.dreamfairy.cn/blog/index.php/2014/05/10/create-a-god-ray-effect-in-stage3d.html

又一个月没写博客了,先吐槽下,怎么广告这么多。。。 每天都要删,插件都顶不住了。
然后再吐槽下之前某网友好像是叫as3er的看了我的god ray教程,然后自己在away3d中实现了但是缺少了遮挡这个god ray中最体现效果的功能。 这先不说,这位同学看就看了,理解了就好了嘛,反而不满我不发源码~ 我也不知道该说啥 摊手. 国内的开源社区条件是一直很恶劣的,以前我也完整开源,现在只能有选择的开源了,我还没有那么伟大到不用考虑薪水问题,而无私贡献。之前廖成在 Particle 做的 幻影和热流效果就不开源,我做了详细的讲解但也不开源,没有必要跟他人起矛盾,但我觉得对于有经验的程序员这些讲解已经足够了。

回归正题,cocos2dx纯粹的代码堆积,毫无美感,这是用了一段时间的体会,API的不稳定也是大忌,有点赞同云风大叔的想法了。 最近要在 CCSprite 上做各种效果,以网络上的教程来说,只能创建多个 自定义CCSprite, 每个特定滤镜,最后不断切换。。。 对于从AS毕业的我来说,太坑了。

于是打算实现带滤镜接口的CCSprite,我没有一部分程序员的毛病,比如重复造轮子,触控的程序员估计大部分都有这毛病,看看cocos2dx中大量的重复功能函数库。 于是找到了 zrong 同学写的 CCFilteredSprite github 上在这里
https://github.com/zrong/cocos2d-x-filters 而且这货在 quick 和 cocos2dx 3.x 中貌似继承了。 由于我不想装win8, 所以用不了 3.x , 因为是开发弹幕游戏,担心lua顶不住,不能用quick. 又因为项目是用 cocos2dx 2.2.4 搞的,这个库不完全兼容,所以只能做修改或者重写了。

我试着重现AS3 的 多个滤镜,但是 cocos2dx 在 2.x 版本对于 renderTexture 的封装。。。无力吐槽, 要实现仅能大改了,于是放弃了这个想法,还是单个滤镜吧。

接下来上代码
继续阅读“在Cocos2dx中,自由的更换滤镜”

在Stage3D中创建God Ray

传说中的上帝之光

实际上 上帝之光有2种实现方式
1.真的光
2.使用阴影体

阴影体的Demo 在前两篇文章里就有了。
本文是使用真实光来做

直接上Demo

具体做法,参考Demo中的左上角两张Debug图。

将所有遮挡物和光圈都渲染到纹理
然后在片段着色器中判断像素的颜色,是光圈则加亮,不是光圈则设置为无像素,有时候某些材质的颜色会近似光圈颜色,因此在渲染遮挡物的时候,直接将它们的Color输出为0即可,只需要它们的轮廓。
将光圈渲染到纹理并混合之前的轮廓纹理图,这样就能制造出被遮挡的光圈(残缺的光圈), 同时根据光圈的位置,对光圈的像素做指向性衰减像素采样。
最后和主场景的RTT混合即可。

ps: 原本想做HDR的, 但是10张的RTT性能实在是坑不起,还是算了。 过几天把这个GodRay 整合到之前的水体反射里看看效果。