上一篇文章寫了一個簡易版的螞蟻莊園登山賽，有小夥伴留言說想要看星星球的，那麼就寫起來吧！

效果預覽

配置環境 cocos creator 3d 1.0.0

小球點擊

3d里節點無法用 cc.Node.EventType.TOUCH_START 監聽。最終在論壇上找到一個 raycast 解決方法。參考代碼如下。

start() {
    systemEvent.on(SystemEventType.TOUCH_START, this.onClickBall, this);
}
private _ray = new geometry.ray();
private onClickBall(touch: Touch, event: EventTouch) {
    const pos = touch.getLocation();
    this.camera.screenPointToRay(pos.x, pos.y, this._ray);
    const result: { node: Node }[] = this.node_ball_click.scene.renderScene['raycast'](this._ray);
    if (result.some((i) => {
        if (i.node === this.node_ball_click) {
            return true;
        }
    })) {
        //點擊到小球處理邏輯
    }
}

其中 result 返回的是一個包含node節點的結果數組。獲取后需要判斷一下是否為小球節點。

據說這個方案消耗性能比較大，後續應該會有更好的解決方案。

動畫系統

採用了編輯器的動畫編輯器，對需要部分增加動畫效果。由於我的資源是網上找的，那隻雞有些身體部分切割的不好，所以小雞的動畫比較差一些。

需要注意的是動畫編輯器里的rotation屬性，與節點里的屬性面板的rotation對應不上，而應該採用eulerAngles的屬性。

據說後續版本會處理？

小球軌跡

採用tween控制小球坐標數值，先移動到最高點，然後再移動到最低點。

在運動軌跡中加入一些隨機值，就可以達到不同位置的效果啦。

tweenUtil(this._node_balll_pos)
    .stop()
    .to(time, new math.Vec3((this.node_ball.position.x + BALL_INIT_X) / 2, BALL_MAX_Y * (0.8 + 0.2 * Math.random()), targetZ / 2))
    .to(time, new math.Vec3(BALL_GAMEOVER_X, BALL_MIN_Y, targetZ))
    .start();

小結

完成這個小功能主要遇到的問題是3d節點點擊事件，和動畫系統的rotation的問題。不過這些都在論壇里找到了相應的解決方法。

以上就是我最新的學習成果！如有問題或新的想法歡迎留言！我有了好想法會第一時間分享給大家的！

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※專營大陸快遞台灣服務

※台灣快遞大陸的貨運公司有哪些呢?