引言

什么??

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

“大厂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找到我们的CocosLogo,然后通过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年游戏主程一起学习设计模式

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


亿元程序员
10 声望26 粉丝

关注"亿元程序员",给大家分享游戏开发经验。