[ 截图 + shader 模糊制作呼出毛玻璃界面效果 ]

Creator 2.x
#1

最终效果：

制作思路：

  1. 暂停按钮按下，截图当前画面，

  2. 获得当前画面之后，利用该纹理生成一个精灵，

  3. 为该精灵添加 shader 模糊效果，将精灵置于图层最前

  4. 弹出菜单界面，

  5. 游戏逻辑暂停（只有按钮能够响应）

因此实际游戏暂停画面会在截图画面之后

该工程基于 creator 1.4.2

仅用于原生平台，iOS真机测试无异常，

不过可能会需要调整模糊效果

1.5.2-beta.2 运行会报错：

Simulator: jsb: ERROR: File …\auto\jsb_creator_auto.cpp: Line: 245, Function: js_creator_Scale9SpriteV2_setInsetTop
Simulator: js_creator_Scale9SpriteV2_setInsetTop : Error processing arguments

希望官方予以修复。

完整的工程 ↓
setting.rar (497.9 KB)

制作思路参考了该贴：

http://blog.csdn.net/nono_o/article/details/45891757

截图的相关代码参考了该贴：

http://forum.cocos.com/t/creator/40750

模糊 shader 的相关代码参考了该贴：
http://forum.cocos.com/t/creator-shader/36388

12赞
#2

点赞加粗文字

#3

renderTexture.getSprite().getSpriteFrame();好像是因为这句话报的错，希望官方人员看一下。。

1赞
#4

已经修复了，等正式版即可

#5

这个报错在1.5.2正式版里还是有的，我对比了下代码，好像没有什么修改
不过这个使用了另一个方法避开了这个报错，

ps:
this.bg.getComponent(cc.Sprite).spriteFrame=renderTexture.getSprite().getSpriteFrame();//这里会报错(这里写法似乎不对)

替换为：
let cst = renderTexture.getSprite().getTexture();
let size = cst.getContentSize();
let sf = new cc.SpriteFrame(cst, cc.rect(0,0,size.width,size.height), false,cc.p(0,0),cc.size(size.width,size.height));
this.bg.getComponent(cc.Sprite).spriteFrame=sf;

但是有个问题，截出来的图是上下颠倒的，需要反转一下(node.scaleY=-1)//这个颠倒不知道是正常还是不正常

2赞
#6

虽然没有使用楼主的shader，但还是感谢楼主的奉献精神，
我这里使用的是官方自带的shader，效果还可以
example_Blur.fsh.zip (1.0 KB)

大概使用方式
glProgram_state.setUniformVec2(“resolution”, cc.p(size.width,size.height));
glProgram_state.setUniformFloat(“blurRadius”, 15);
glProgram_state.setUniformFloat(“sampleNum”, 7);

2赞
#7

感谢分享!

#8

上下颠倒,应该在shader 里给纹理坐标系 乘上vec2(1,-1)

#9

mark

#10

请教大神 这个.fsh该如何使用
是直接加cc.sprite上?
那后面的背景 会一起模糊吗
可以给简单的demo看看吗?

#11

马克 ~