introduction
What? ?
Recently, Yuque collapsed, Alibaba Cloud collapsed, Alibaba Cloud collapsed, Didi collapsed...
"P0-level accidents happen frequently in major manufacturers. Is this really reducing costs and increasing smiles?"
I have been working in the gaming industry for many years . Although I have not experienced P0 failures (downtime for several hours) from major manufacturers , I have also experienced many crazy server downtimes, serial downtimes, etc.
The author believes that they may lack this in the code or documentation ( not superstitious ):
This article will show you how to use Cocos to generate Buddha comments similar to the above . Buddha bless you and will never go down .
The source project of this article can be obtained at the end of the article, friends can go there by themselves.
Buddha's Principle of Generation
To generate Buddha annotations, we have the following two options :
-
Manual annotation : We can have the same effect as the picture above, using flexible hands and rich artistic cells to assemble a Buddha.
-
Code generation : We can use code to convert pictures of Buddha into characters to achieve the following effects.
The core method is to read the pixel data of the image through the interface, and then replace different pixel colors with different characters to form a visual effect .
The following is the core code interface (derived from Chen Pipi ) to obtain pixel data:
/**
* 获取像素数据
* @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;
}
Now that we know the method, let’s take a look at how to implement it in Cocos.
Generating Buddha Practice
1. Interface testing
Let’s first simply test whether the interface is feasible.
Create a Cocos project.
Test directly in the script that comes with the project Helloworld.ts.
By cc.findfinding our Cocos logo , and then adding a click event .cocos.on()
var cocos = cc.find("Canvas/cocos");
cocos.on(cc.Node.EventType.TOUCH_END, () => {
this.ImageToString(cocos);
}, this);
Then go through the following core steps to convert the Cocos icon into a string.
getPixelsDataObtain the pixel data of the image through the above method.- Traverse the color of the pixel from left to right and top to bottom , each pixel is 4 bytes.
- Perform grayscale processing on the read pixel color r, g, and b values, the formula
Math.floor(r * 0.299 + g * 0.587 + b * 0.114); - By replacing different grayscales with corresponding characters, the characters are arranged from dark to light:
@*#$%XB0H?OC7>+v=~^:_-'.. - Then connect the characters to form an annotation map. The code is as follows.
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);
}
The effect is demonstrated as follows:
It can be seen that the effects are all made up of densely packed characters:
2. Resource preparation
To generate Buddha's annotation code , we first need to find a picture of Buddha, which comes from the Internet .
Then add Buddha to the scene :
3. Test the code
In the same way , we add a click event to the Buddha picture :
var fozu = cc.find("Canvas/fozu");
fozu.on(cc.Node.EventType.TOUCH_END, () => {
this.ImageToString(fozu);
}, this);
4. Effect demonstration
Run the game, click on the Buddha, and you can see that the console generates dense characters.
Let's take a closer look.
5. Form comments
Finally, we only need to copy the characters into the code and form comments.
Cocos’s logo:
Buddha:
Life is hard and money is hard to make, so I often have the final say in making arrangements. Repost this article today, and God will bless you in the coming year.
Conclusion
The source project of this article can be obtained by sending a private message to Buddha .
Recently, the author was invited by Qilinzi (who has been deeply engaged in game engine and game development for 15 years , and every drop of practical information comes from commercial project practice) to join the Knowledge Planet as a guest . The planet is mainly used for:
- Tutor teaching
- Communication on learning issues
- Getting Started and Advanced for Newcomers
- Recruitment and employment opportunity sharing
- Collection of interview questions
- Interview experience sharing
In general, Planet has only one goal : to provide high-quality content and engage in learning . Interested friends can scan the code to learn more and support.
I am a "Billion Dollar Programmer", a programmer with 8 years of experience in the game industry. In game development, I hope to be able to help you, and I hope that through you I can help everyone.
AD: You can click and search for the author's online mini-games "Snake Handheld Classic", "Gravity Maze Ball" and "Coloring Journey" by yourself.
To be honest, I want to like and watch ! Please share this article with other friends who you think need it. Thanks!
Recommended columns:
Do you know how Honor of Kings implements the skill range indicator?
8 years of experience in building Cocos independent game development framework step by step