摘要：前言微信小游戲開(kāi)放了好友關(guān)系鏈，使得小游戲的社交能力得到了加強(qiáng)，有助于增加游戲的活躍度。先做一個(gè)統(tǒng)一的事件分發(fā)機(jī)制監(jiān)聽(tīng)微信的觸摸事件接口小結(jié)實(shí)際上是寫了一個(gè)微小的渲染引擎，便于擴(kuò)展，容易理解學(xué)習(xí)。

???????微信小游戲開(kāi)放了好友關(guān)系鏈，使得小游戲的社交能力得到了加強(qiáng)，有助于增加游戲的活躍度。出于安全限制，只能在開(kāi)放域使用關(guān)系鏈數(shù)據(jù)，但是開(kāi)放域是獨(dú)立的工程，使得包體變大不小，所以筆者寫了一個(gè)簡(jiǎn)單的渲染核心，既保留API一致，占用空間也很少。

???????先模擬一個(gè)簡(jiǎn)單的節(jié)點(diǎn)樹結(jié)構(gòu)，以便使用父子這樣的結(jié)構(gòu)代碼，符合一般的引擎風(fēng)格。

function Node{
    this.x = 0
    this.y = 0
    ...  
}

通用方法定義:

Node.prototype ={
    setPosition(x, y) {
        this.x = x
        this.y = y
        this.isDirty = true
    },
    _updateWorldMatrix(){
        this.worldMatrix = this.parent ? matMul(this.localMatrix, this.parent.worldMatrix) : this.localMatrix
    }
    ...
}

function render(){
//重置轉(zhuǎn)換矩陣
    context.setTransform(1, 0, 0, 1, 0, 0);
    //清空畫布
    context.clearRect(0, 0, canvas.width, canvas.height);

    var draw = function (node, bUpdate) {
        var redraw = node.isDirty || bUpdate
        if (redraw) {
            //更新變動(dòng)部分的矩陣
            node._updateWorldMatrix()
        }
        //Y軸 翻轉(zhuǎn),向下平移一個(gè)畫布高度
        context.setTransform(1, 0, 0, -1, 0, canvas.height);

        if (node.type) {
            var t = node.worldMatrix
            context.transform(t[0], t[1], t[3], t[4], t[6], t[7])
            context.scale(1, -1);
        }
        if (node.bClip) {
            context.save()
            //剪裁
            ...
        }
        if (node.type == "sprite") {
            //精靈
            ...
        }
        if (node.type == "label") {
            //文字
            ...
        }
        node.children.forEach(v => draw(v, redraw))
        if (node.bClip) {
            //剪裁區(qū)域繪制完，恢復(fù)畫布
            context.restore();
        }
        node.isDirty = false
    }
    draw(scene)
}

以上是實(shí)際繪制的部分，比較多，所以只寫了大概的結(jié)構(gòu)，詳細(xì)的請(qǐng)看源碼鏈接。
引擎2d渲染部分原理大概是這樣，看明白后，會(huì)對(duì)游戲引擎的核心部分有更加深入的理解。

由于需要制作排行榜，有些需要滾動(dòng)的，那么要監(jiān)聽(tīng)并分發(fā)觸摸事件，以響應(yīng)用戶行為。
先做一個(gè)統(tǒng)一的事件分發(fā)機(jī)制：

function handleEvent(name, event) {
    var pt = event.changedTouches[0]
    scene.forEach(child=>{
        if (child.getBoundingBox().contains(pt)){
            if (child.listener[name]) {
                child.listener[name](pt)
            }
        }
    }
}

監(jiān)聽(tīng)微信的觸摸事件接口:

wx.onTouchStart(e => handleEvent("onTouchBegan", e))
wx.onTouchMove(e => handleEvent("onTouchMove", e))
wx.onTouchEnd(e => handleEvent("onTouchEnded", e))
wx.onTouchCancel(e => handleEvent("onTouchCancel", e))

???????實(shí)際上是寫了一個(gè)微小的渲染引擎，便于擴(kuò)展，容易理解學(xué)習(xí)。篇幅有限，不能展示所有的細(xì)節(jié)部分，有興趣的可以查看源碼渲染核心demo。