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

引言

什么??

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

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

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

推荐专栏:

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

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

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

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

相关推荐
写不来代码的草莓熊1 小时前
vue前端面试题——记录一次面试当中遇到的题(5)
前端
weixin_ab1 小时前
【HTML分离术】
前端·html
文心快码BaiduComate1 小时前
新手该如何选择AI编程工具?文心快码Comate全方位体验
前端·后端·程序员
夫唯不争,故无尤也2 小时前
Tomcat 内嵌启动时找不到 Web 应用的路径
java·前端·tomcat
lichong9512 小时前
【Xcode】Macos p12 证书过期时间查看
前端·ide·macos·证书·xcode·大前端·大前端++
oh,huoyuyan2 小时前
如何在火语言中指定启动 Chrome 特定用户配置文件
前端·javascript·chrome
前端大聪明20022 小时前
single-spa原理解析
前端·javascript
一枚前端小能手2 小时前
📦 从npm到yarn到pnpm的演进之路 - 包管理器实现原理深度解析
前端·javascript·npm
影i2 小时前
CSS Transform 和父元素撑开问题
前端
@大迁世界2 小时前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript