引言
什么？？
近日，语雀 崩了、阿里云 崩，阿里云崩完、滴滴崩......
"大厂P0级故常频发，是真的降本增笑吗？"
从事 游戏行业多年 ，虽然没有体验到大厂们 的P0 故障(宕机几个小时)，但是也体验过不少 服务器疯狂宕机、连环宕机等等。
笔者认为，他们可能代码 或者文档 里面缺少这个(非迷信)：
本文给大家演示 下如何用Cocos 生成类似上面的佛祖注释 ，佛祖保佑，永不宕机。
本文源工程可在文末获取，小伙伴们自行前往。
佛祖生成原理
生成佛祖注释，我们有以下两种方案：
-
手动注释：我们可以和上图的效果一样，通过灵活的双手和丰富的艺术细胞去拼成一个佛祖。
-
代码生成：我们可以通过代码，把佛祖的图片转成字符，达到以下效果。
其中核心的方法是通过接口读取 到图片的像素数据 ，然后把不同的像素颜色去替换 成不同字符，形成一个视觉效果。
下面是核心的代码接口(源于陈皮皮)，获取像素数据：
typescript
/**
* 获取像素数据
* @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()添加一下点击事件。
typescript
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=~^:_-'.。 - 然后把字符连接起来，形成注释图，代码如下。
typescript
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.测试代码
同理 ，我们给佛祖图片添加一下点击事件：
typescript
var fozu = cc.find("Canvas/fozu");
fozu.on(cc.Node.EventType.TOUCH_END, () => {
this.ImageToString(fozu);
}, this);4.效果演示
运行游戏，点击一下佛祖，可以看到控制台生成了密密麻麻的字符。
我们来近距离看看。
5.形成注释
最后我们只需要把字符拷贝到代码里面，然后形成注释即可。
Cocos的Logo:
佛祖：
生活不易钱难赚、时常整活我说算。今日转发文章，来年佛祖保佑。
结语
本文源工程 可通过私信发送佛祖获取。
近日，笔者受麒麟子 (深耕游戏引擎与游戏开发15年 ，每一滴干货都源自商业项目 实践)的邀请，以嘉宾 的形式加入知识星球，星球主要用于：
- 导师教学
- 学习问题交流
- 新人入门与进阶
- 招聘与就业机会分享
- 面试题集锦
- 面试经验分享
总的来说，星球的目标 只有一个：提供优质内容，搞学习 。感兴趣的小伙伴可以扫码了解和捧场。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
AD:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。
实不相瞒，想要个赞 和在看 ！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐专栏：