近日语雀、阿里云、滴滴等大厂轮番宕机，可能缺少这个...

引言

什么？？

近日，语雀崩了、阿里云崩，阿里云崩完、滴滴崩......

“大厂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:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。

实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！

推荐专栏：

你知道王者荣耀是怎么实现技能范围指示器的吗？

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列