Nanfeng

Notes on software development, code, and curious ideas

Generating a QR Code in Cocos Creator

  • Cocos Creator: 3.7.2
  • Language: TypeScript

Create a white Sprite, add a Graphics node, give both even dimensions, and preferably use a (0, 0) anchor for Graphics.

Scene setup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { _decorator, Component, Graphics, Color, UITransform } from 'cc';
import { QRCode } from './qr/QRCode';
const { ccclass, property } = _decorator;

@ccclass('QrCode')
export class QrCode extends Component {
@property(Graphics) graphics: Graphics = null;

start() { this.draw('https://lengmo714.top'); }

private draw(url: string) {
const qr = new QRCode(-1, 2);
qr.addData(url);
qr.make();
const count = qr.getModuleCount();
const transform = this.graphics.getComponent(UITransform);
const tileW = transform.width / count;
const tileH = transform.height / count;
this.graphics.fillColor = Color.BLACK;

for (let row = 0; row < count; row++) {
for (let col = 0; col < count; col++) {
if (!qr.isDark(row, col)) continue;
const w = Math.ceil((col + 1) * tileW) - Math.floor(col * tileW);
const h = Math.ceil((row + 1) * tileH) - Math.floor(row * tileH);
this.graphics.rect(Math.round(col * tileW), Math.round(row * tileH), w, h);
this.graphics.fill();
}
}
}
}

QR library

+