引言
什么??
近日,语雀崩了、阿里云崩,阿里云崩完、滴滴崩......
“大厂P0级故常频发,是真的降本增笑吗?”
从事游戏行业多年,虽然没有体验到大厂们的P0故障(宕机几个小时),但是也体验过不少服务器疯狂宕机、连环宕机等等。
笔者认为,他们可能代码或者文档里面缺少这个(非迷信):
本文给大家演示下如何用Cocos生成类似上面的佛祖注释,佛祖保佑,永不宕机。
本文源工程可在文末获取,小伙伴们自行前往。
佛祖生成原理
生成佛祖注释,我们有以下两种方案:
- 手动注释:我们可以和上图的效果一样,通过灵活的双手和丰富的艺术细胞去拼成一个佛祖。
- 代码生成:我们可以通过代码,把佛祖的图片转成字符,达到以下效果。
其中核心的方法是通过接口读取到图片的像素数据,然后把不同的像素颜色去替换成不同字符,形成一个视觉效果。
下面是核心的代码接口(源于陈皮皮),获取像素数据:
/**
* 获取像素数据
* @param node 节点
*/
public static getPixelsData(node: cc.Node) {
if (!cc.isValid(node)) {
return null;
}
// 节点宽高
const width = Math.floor(node.width),
height = Math.floor(node.height);
// 创建临时摄像机用于渲染目标节点
const cameraNode = new cc.Node();
cameraNode.parent = node;
const camera = cameraNode.addComponent(cc.Camera);
camera.clearFlags |= cc.Camera.ClearFlags.COLOR;
camera.backgroundColor = cc.color(0, 0, 0, 0);
camera.zoomRatio = cc.winSize.height / height;
// 将节点渲染到 RenderTexture 中
const renderTexture = new cc.RenderTexture();
renderTexture.initWithSize(width, height, cc.RenderTexture.DepthStencilFormat.RB_FMT_S8);
camera.targetTexture = renderTexture;
camera.render(node);
// 获取像素数据
const pixelsData = renderTexture.readPixels();
// 销毁临时对象并返回数据
renderTexture.destroy();
cameraNode.destroy();
return pixelsData;
}
方法大概知道了,我们一起来看看如何在Cocos中实现。
生成佛祖实践
1.接口测试
我们先简单地测试下接口是否可行。
创建一个Cocos项目。
直接在项目生成自带的Helloworld.ts
脚本中测试。
通过cc.find
找到我们的Cocos的Logo,然后通过cocos.on()
添加一下点击事件。
var cocos = cc.find("Canvas/cocos");
cocos.on(cc.Node.EventType.TOUCH_END, () => {
this.ImageToString(cocos);
}, this);
然后通过下面的核心步骤,将Cocos图标转成字符串。
- 通过上面
getPixelsData
方法获取到图片的像素数据。 - 从左到右、从上到下遍历像素的颜色,每个像素4个byte。
- 把读取到的像素颜色r、g、b值做灰度处理,公式
Math.floor(r * 0.299 + g * 0.587 + b * 0.114);
- 通过不同的灰度替换成对应的字符,字符从深到浅排列:
@*#$%XB0H?OC7>+v=~^:_-'.
。 然后把字符连接起来,形成注释图,代码如下。
ImageToString(image: cc.Node) { var data = Helloworld.getPixelsData(image); let strs = ""; var rate = 1; for (let j = 0; j < image.height; j = j + 2 * rate) { for (let i = 0; i < image.width * 4; i = i + 4 * rate) { //灰度处理 var index = j * image.width * 4 + i; var r = data[index++]; var g = data[index++]; var b = data[index++]; var grayRGB = Math.floor(r * 0.299 + g * 0.587 + b * 0.114); //取出对应的字符 var stringIndex = Math.floor(grayRGB / 256 * (this.strings.length)); var value = this.strings[stringIndex]; strs = strs + value; } strs = strs + "\n"; } console.log("%s", strs); }
效果演示如下:
可以看出,效果全都是用密密麻麻的字符拼接而成:
2.资源准备
想要生成佛祖的注释代码,我们首先要找一张佛祖的照片,图片源于网络。
然后把佛祖添加到场景中去:
3.测试代码
同理,我们给佛祖图片添加一下点击事件:
var fozu = cc.find("Canvas/fozu");
fozu.on(cc.Node.EventType.TOUCH_END, () => {
this.ImageToString(fozu);
}, this);
4.效果演示
运行游戏,点击一下佛祖,可以看到控制台生成了密密麻麻的字符。
我们来近距离看看。
5.形成注释
最后我们只需要把字符拷贝到代码里面,然后形成注释即可。
Cocos的Logo:
佛祖:
生活不易钱难赚、时常整活我说算。今日转发文章,来年佛祖保佑。
结语
本文源工程可通过私信发送佛祖获取。
近日,笔者受麒麟子(深耕游戏引擎与游戏开发15年,每一滴干货都源自商业项目实践)的邀请,以嘉宾的形式加入知识星球,星球主要用于:
- 导师教学
- 学习问题交流
- 新人入门与进阶
- 招聘与就业机会分享
- 面试题集锦
- 面试经验分享
总的来说,星球的目标只有一个:提供优质内容,搞学习。感兴趣的小伙伴可以扫码了解和捧场。
我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。
AD:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。
实不相瞒,想要个赞和在看!请把该文章分享给你觉得有需要的其他小伙伴。谢谢!
推荐专栏:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。