arcengine获取线中点_使用Cocos creator制作【治愈七夕】-音乐游戏图形api绘制跳舞的线...

最新推荐文章于 2023-04-27 13:17:31 发布

暧昧散尽

最新推荐文章于 2023-04-27 13:17:31 发布

阅读量240

点赞数

文章标签： arcengine获取线中点

本文链接：https://blog.csdn.net/weixin_28998761/article/details/113044957

版权

专栏概述及目录：

笑苍天Smile：专栏概述及目录zhuanlan.zhihu.com

游戏截图：

游戏地址：

微信扫一扫

游戏源码^[1]。

游戏技术：前端引擎-Cocos creator，语言-Ts。

写作目的：自我总结，游戏引流，经验分享。

游戏分成Cocos creator引擎的通用技术，微信的第三方接入，治愈七夕共3个部分。前面两部分可参考wind扫雷^[2]。

治愈七夕

商业模式
音乐加载
微信前后台切换声音处理
地形图tilemap动态加载
角色坐标转换成timemap的菱形坐标
图形api绘制跳舞的线

商业模式：卖关卡，通过视频广告开启关卡。结算、等待界面的横屏以及插屏广告。

音乐加载：因为微信代码包有大小限制^[3]，音乐资源又比较大，所以要放到远程服务器载入。Cocos creator的网络资源载入^[4]，不支持获取加载百分比，所以用的微信的资源载入方法^[5]，要比Cocos的载入快不少。

           var self = this;
            var downTask = wx.downloadFile({
                url: remoteUrl,
                success(res){
                    console.log("res = ", res);
                    if (res.statusCode == 200){
                        let audio = wx.createInnerAudioContext();
                        audio.src = res.tempFilePath;
                        self.loadLvScene(audio);
                    }
                }
            })
            downTask.onProgressUpdate((res)=>{
                this.labTime.string = res.progress.toString()+"%";
            })

微信前后台切换声音处理^[6]：

onAudioEvent(){
        if (CC_WECHATGAME){
            var self = this;
            wx.onAudioInterruptionBegin(()=>{
                console.log("self.audioTask.paused Begin = " + (self.audioTask && self.audioTask.paused));
                self._gameStatus = 4;
            });
            wx.onAudioInterruptionEnd(()=>{
                console.log("self.audioTask.paused End = " + (self.audioTask && self.audioTask.paused));
                self._gameStatus = 1;
                if (self.audioTask && self.audioTask.paused)
                    self.audioTask.play();
            });
            self.audioTask.onEnded(()=>{
                self.gameOver();
            });
            // if (cc.sys.os === cc.sys.OS_ANDROID){
                wx.onShow(()=>{
                    console.log("self.audioTask.paused onShow = " + (self.audioTask && self.audioTask.paused));
                    if (self.audioTask && self.audioTask.paused)
                        self.audioTask.play();
                });
            // }
        }
    }

地形图tilemap动态加载：

onCreateTileMap (url) {
        cc.loader.loadRes(url, cc.TiledMapAsset, (err, tmxAsset) => {
            if (err) {
                cc.error(err);
                return;
            }
            // this.mapRoot.destroyAllChildren();
            var node = new cc.Node();
            this.mapRoot.addChild(node);
            var tileMap = node.addComponent(cc.TiledMap);
            tileMap.tmxAsset = tmxAsset;
            this._tiledMap = tileMap;
            this._layerFloor = this._tiledMap.getLayer("floor");
            this._ndMap = node;
            node.active = false;
            this._ndMap.active = false;
            this.showBg();
            var mapSize = this._ndMap.getContentSize();
            var tileSize = this._tiledMap.getTileSize();
            this.mapRoot.y = mapSize.height/2;
            this.ndPlayer.y = -mapSize.height/2 + tileSize.height/2;
            this.ndLine.y = this.ndPlayer.y;
            if (this.iLv == 3 || this.iLv == 4){
                this.ndPlayer.getComponent(cc.Sprite).spriteFrame = this.sptGirl;
            }else if (this.iLv == 5 || this.iLv == 6){
                this.ndPlayer.getComponent(cc.Sprite).spriteFrame = this.sptBoth;
            }
            this.onAudioEvent();
        });
    }

角色坐标转换成timemap的菱形坐标（这里有个简单的矩形坐标到菱形坐标的转换公式，推导过程网上一搜就有，大体是在此基础上又进行了一些处理）：

_getTilePos(posInPixel) {
        var mapSize = this._ndMap.getContentSize();
        var tileSize = this._tiledMap.getTileSize();
        var multi = tileSize.width/tileSize.height;
        posInPixel.x += mapSize.width/2;
        posInPixel.y += mapSize.height/2;
        var x = Math.floor(posInPixel.x / tileSize.width)*tileSize.width;
        var y = Math.floor((mapSize.height - posInPixel.y) / tileSize.height)*tileSize.height;
        var px = 0, py = 0; //将坐标转换成所在菱形的中点
        var nx = posInPixel.x-x;
        var ny = mapSize.height-posInPixel.y-y;
        if (ny <= tileSize.height-1/multi*nx){
            if (ny <= 1/multi*nx){
                px = x+tileSize.width/2;
                py = y;
            }else{
                px = x;
                py = y+tileSize.height/2;
            }
        }else{
            if (ny <= 1/multi*nx){
                px = x+tileSize.width;
                py = y+tileSize.height/2;
            }else{
                px = x+tileSize.width/2;
                py = y+tileSize.height;
            }
        }
        var m = (px+multi*py-mapSize.width/2-multi*tileSize.height/2)/(multi*tileSize.height);
        var n = (multi*py-px+mapSize.width/2-multi*tileSize.height/2)/(multi*tileSize.height);
        // cc.log(posInPixel.x, posInPixel.y, x, y, px, py, m, n);
        return cc.v2(m, n);
    }

图形api绘制跳舞的线^[7]：游戏中并没有展现这个功能，所以这里放个gif动画，或者自行下载源码运行查看。

//思路：记录要连接的坐标点，然后用图形api逐个连接这些坐标点
//在需要记录坐标点的地方调用this.record，在update中调用this.drawLine(cc.v2(dx, dy))
drawLine(v2){
        this.line.clear();
        var tileSize = this._tiledMap.getTileSize();
        this.line.moveTo(this._vPos.x, this._vPos.y+tileSize.height/2);
        for (let l = this._tPoint.length, i = l-1; i >= 0; i--) {
            var p = this._tPoint[i];
            p.x -= v2.x;
            p.y -= v2.y;
            this.line.lineTo(p.x, p.y);
            if (p.y < 0) break;
        }
        this.line.stroke();
    }
record(){
        var tileSize = this._tiledMap.getTileSize();
        this._tPoint.push(cc.v2(this._vPos.x, this._vPos.y+tileSize.height/2));
    }

参考

^GitHub上的治愈七夕： https://github.com/SmileChen518/MusicGame
^知乎上的wind扫雷： https://zhuanlan.zhihu.com/p/78357541
^微信的官方代码包文档： https://developers.weixin.qq.com/minigame/dev/guide/framework/code-package.html#包大小限制
^COCOS的官方网络资源载入文档： https://docs.cocos.com/creator/manual/zh/scripting/load-assets.html
^微信的官方网络资源载入文档： https://developers.weixin.qq.com/minigame/dev/api/network/upload/wx.uploadFile.html
^微信的官方音频处理文档： https://developers.weixin.qq.com/minigame/dev/guide/base-ability/audio.html#处理音频中断事件
^COCOS的官方图形接口文档： https://docs.cocos.com/creator/manual/zh/components/graphics.html