cocos creator + TypeScript dynamically generate two-dimensional code

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/lxt610/article/details/89965135

---

1 Introduction

  We in the game development process, often to do some promotion with the operators and other related functions, which is a means to promote the two-dimensional code, and today we work together to explore!

2, a method

2.1, set up the scene

The scene is very simple, we created an empty node, creating a Test.Ts, and hung on to change the empty node. as the picture shows:

2.2, code portion

  Code is relatively simple, we will not elaborate here:

const {ccclass, property} = cc._decorator;

@ccclass
export default class Test extends cc.Component {

    onLoad () {
     
        let div = document.createElement("div");
        let qrcode = new QRCode(div, "https://blog.csdn.net/lxt610/article/details/89954924");
        let img = div.children[1];
        img.onload = () => {
            var texture = new cc.Texture2D();
            texture.initWithElement(img);
            texture.handleLoadedTexture();
            var spriteFrame = new cc.SpriteFrame(texture);
            var node = new cc.Node();
            var sprite = node.addComponent(cc.Sprite);
            sprite.spriteFrame = spriteFrame;
            this.node.addChild(node);
        }
    }
}

2.3, showing the effect of

  Here we start the project, take a look at the demonstration effect!

2.4, Demo Download

  In order to facilitate the use of this given directly download link, click here to download the complete project.

3, Method II

3.1, set up the scene

  Here only you need to create a solid sprite (white background as a two-dimensional code), then to add an empty node! The same size and the parent object. As shown:

  background defaults to black here, really do not want to see, in front of a light green background added. By the graph we can see that part of the code qrCode.js Here, qrCode.js here for the two-dimensional code libraries and the above methods of a H5 is different, we needed to use! Best not to put a project, and may not be used at the same time! Authenticate themselves!

3.2, code section

  Qing begin, make sure you have the qrCode.js imported items! And where the QRCode to plug as shown, while more than three check. And the above method except that: As used herein, the Creator drawing assembly cc.Graphics , the drawn two-dimensional code. Detailed code is as follows:

const {ccclass, property} = cc._decorator;

@ccclass
export default class Test2 extends cc.Component {


    onLoad()
    {
        this.init('http://baidu.com')
    }

    // let url=toUtf8('Cocos Creator 教程:生成二维码');
    
    // let qrcode = new QRCode(-1, QRErrorCorrectLevel.H);
    // qrcode.addData(url);
    // qrcode.make();


    init(url:string)
    {
        //let urlTmp:string = toUtf8('Cocos Creator 教程:生成二维码')
		//注意 最好把qrImage与qrcode的节点长宽设置为2的倍数。不然可能会出现无法识别二维码
		let ctx:cc.Graphics = this.node.addComponent(cc.Graphics);
		if (typeof (url) !== 'string') {
			console.log('url is not string',url);
			return;
        }
        
		this.createQR(ctx,url);
	}

    createQR(ctx:cc.Graphics,url:string) 
    {
		let qrcode:QRCode = new QRCode(-1, QRErrorCorrectLevel.H);
		qrcode.addData(url);
		qrcode.make();

        ctx.fillColor = cc.Color.BLACK;
        
		//块宽高
		let tileW = this.node.width / qrcode.getModuleCount();
		let tileH = this.node.height / qrcode.getModuleCount();

		// draw in the Graphics
		for (let row = 0; row < qrcode.getModuleCount(); row++) {
			for (let col = 0; col < qrcode.getModuleCount(); col++) {
				if (qrcode.isDark(row, col)) {
					// ctx.fillColor = cc.Color.BLACK;
					let w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
					let h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
					ctx.rect(Math.round(col * tileW)-this.node.width/2 , Math.round(row * tileH)-this.node.height/2, w, h);
					ctx.fill();
				}
			}
		}
	}
}

  The script just need to mount and space objects created above it!

3.3, showing the effect of

  Here we start the project, take a look at the demonstration effect!

3.4, Demo Download

  In order to facilitate the use of this given directly download link, click here to download the complete project. !

4, note

• However, if the Url with Chinese content, before it is imperative to generate two-dimensional code string into UTF-8, and then generates a two-dimensional code, namely:

let url = toUtf8 ( 'Cocos Creator Tutorial: generating a two-dimensional code');

• Also to be noted sweep the micro-Bo: within about 200 words, micro-channel sweep swept away: about 160 words or less, Alipay sweep swept away: about 130 characters or less, it is generally not too long link
• H5 two-dimensional code generation library qrcode, we need to import plug-in project, the following demo has put this library can be introduced directly into the project is set to plug-in, two-dimensional code generation library two demonstration projects are different qrcode
• Two ways to generate a two-dimensional code is almost the same DrawCall

5. Conclusion

---

The End
  Well, today's share on here, if inadequacies also hope you correct me in time, feel free to discuss the exchange! ! !

---

Like friends, please Bangding, thumbs up, comment! You certainly inexhaustible power of my writing!