js如何实现战争迷雾

cocosCreater的初学者,望广大开发者提供回答或者相关链接提供学习,感谢!!!!

2赞

一种方法:
创建一小块纹理 然后拉伸到全屏
在程序运行时动态的修改这个纹理

比如你的屏幕分辨率是960640,那么这个迷雾的纹理可以是3020的一个小纹理 然后放大32倍 这样经过拉伸之后从不透明到半透明到全透明的渐进效果就被拉伸出来了
技术要点:
//拿到纹理id: textureid = texture.getName()
//创建缓存: var buffer = new Uint8Array(width * height * 4);
//设置迷雾中每个像素的alpha值
for (var i = 0; i < n; i++) {
buffer[i * 4 + 3] = 255
}
//更新纹理
gl.bindTexture(gl.TEXTURE_2D, this.textureId)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, buffer)

3赞

CC中有一个MASK,但是没有战争迷雾的延时消失效果。理论上应该可以加一个定时器,让迷雾过一段时间消失,但我没有做过。

1赞

我项目是用shader来做的,但是这样没办法跟war3里面那样,可以记录经过的迷雾,只能算了一个变种

1赞

利用TiledMap中的API就可以解决问题,真的非常好用!
1、取出当前块的渲染图块的number
2、替换为新的渲染图块的number

//脚本
//curtile为当前点的tile坐标,如:[0,0]
MoveLeft:function(curtile){
//获取点的渲染图块return:number(this._layerfog为迷雾层Layer)
//if(this._layerfog.getTileGIDAt(curtile.x,curtile.y)===237){
// return;
//};
let tile2 = this._layerfog.getTileGIDAt(curtile.x,curtile.y);//当前点的渲染number
this._layerfog.setTileGID(tile2+5, curtile.x,curtile.y, 0);//当前点更新(根据战争迷雾的制作原理http://bbs.9ria.com/thread-157487-1-1.html
//this._layerfog.setTileGID(tile2+5>237?237:tile2+5, curtile.x,curtile.y, 0);//上限设置
//特殊的图块渲染,拐角迷雾的处理,当做出来的迷雾更新出现问题的时候参考
// if(this._layerfog.getTileGIDAt(curtile.x,curtile.y)===229){
// //_设置渲染图块为新的参数:number
// this._layerfog.setTileGID(tileL1+1>237?237:tileL1+1, curtile.x-1,curtile.y-1, 0);//R_U
// this._layerfog.setTileGID(tileL2+4>237?237:tileL2+4, curtile.x-1,curtile.y, 0);//R_C
// }
//我说的拐角迷雾

1赞

请问,能给个demo学习下吗?

我的Demo里面其实也就是这样只是重复的脚本而已,上面有附链接看一下原理就理解了、然后了解下cc.TileMap的API
附上源码
战争迷雾.zip (1.1 MB)

3赞

请问你这种迷雾应该是单层的吧 没有像星际争霸那样是两层迷雾吧

是的,单层

mark