// import PrefabManager from '../Manager/core/PrefabManager'; import { EventType, ObserverManager } from '../Manager/core/EventManager'; import PrefabManager from '../Manager/core/PrefabManager'; import { UIID } from '../Manager/core/UIID'; import CCUtils from '../Utiles/CCUtils'; import Utiles from '../Utiles/Utiles'; const { ccclass, property } = cc._decorator; @ccclass export default class SongSelector extends cc.Component { @property(cc.Prefab) itemPrefab: cc.Prefab = null; @property(cc.Node) content: cc.Node = null; /** 歌曲个数 可自定义 */ private _itemCount: number = 25; /** 角度 */ private commonAngle: number = 0; // 存储所有滚动元素的数组 private items: cc.Node[] = []; /** 平均每首歌曲的弧度 */ private _rAngle: number = 45; /** 圆的半径 */ private r: number = 0; /** 圆的中心点在哪里 */ private _circle: cc.Vec2 = cc.v2(0, 0); /** 当前显示在中心区域的元素下标 */ private tempIndex: number = 0; /** 触摸层 */ private touchLayer: cc.Node = null; /** 记录开始滑动坐标 */ private _BeganPos: cc.Vec2 = cc.v2(0, 0); /** 最后滑动坐标 */ private _lastpos: cc.Vec2 = cc.v2(0, 0); /** 是否在滑动 */ private _cartouch: boolean = false; private _down: boolean = false; /** 避免滑动过程中,点击进入游戏 */ private _clickTouch: boolean = true; private _recentcardi: number = 0; /** 选中时,容错范围 */ private faultPx: number = 20; protected onLoad(): void { this.setLinsten(); this.initList(); } protected onEnable(): void { this.node.opacity = 255; this.schedule(this.updateMusicIconScale); } protected onDisable(): void { // 取消歌曲ICON缩放帧事件 this.unschedule(this.updateMusicIconScale); } /** * 监听触摸层 * * @private * @memberof SongSelector */ private setLinsten(): void { this.touchLayer = CCUtils.findChild(this.content, 'touchLayer'); this.touchLayer.on(cc.Node.EventType.TOUCH_START, this.onTouchBegan.bind(this), this); this.touchLayer.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMoved.bind(this), this); this.touchLayer.on(cc.Node.EventType.TOUCH_END, this.onTouchEnded.bind(this), this); this.touchLayer.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnded.bind(this), this); } private initList(): void { this.commonAngle = 360 / this._itemCount; this.r = this._rAngle * this._itemCount; this.faultPx = 31 - this._itemCount; // this.r = 900; /** 圆的半径偏左 50px*/ this._circle.x = (this.r - 50) * -1; for (let i: number = 0; i < this._itemCount; i++) { let item: cc.Node = cc.instantiate(this.itemPrefab); item.parent = this.content; CCUtils.getLabel(item, 'label').string = i.toString(); item.attr({ ao: i * this.commonAngle }); this.items.push(item); item.setPosition(this.anglePos(item['ao'])); } CCUtils.findChild(this.items[0], 'btn').runAction(cc.repeatForever(cc.rotateBy(12.0, 360))); } /** * 根据角度返回坐标 * @param {*} angle 度数 */ private anglePos(angle: number): cc.Vec2 { var r = this.r; var x0 = this._circle.x; var y0 = this._circle.y; var ao = angle; var x1 = x0 + r * Math.cos((ao * 3.14) / 180); var y1 = y0 + r * Math.sin((ao * 3.14) / 180); return cc.v2(x1, y1); } /** * 检测歌曲是否在中心区域,自动缩放 * * @param {*} dt * @memberof SongSelector */ updateMusicIconScale(dt): void { for (let i: number = 0; i < this._itemCount; i++) { const music: cc.Node = this.items[i]; const posy: number = music.y; /** 为什么是-25,我也忘记了 */ var offesty = Math.abs(posy - 25); /** 估计140也是需要调的 */ if (offesty < 140) { this.tempIndex = i; music.opacity = 255; music.setScale(1.2 - (offesty / 140) * 0.55); // TODO: 设置模式 // Module.difficulty = Module.selectGateDifficulty[Module._recentcardi]; } else { music.opacity = 150; music.setScale(0.5); } } } /** * 触摸开始 * * @param {*} event * @return {*} * @memberof SongSelector */ private onTouchBegan(event: any): void { // console.log("---start: " , this.gameFlag); const position: cc.Vec2 = event.getLocation(); this._cartouch = true; this._down = true; this._lastpos = cc.v2(position.x, position.y); this._BeganPos = cc.v2(position.x, position.y); } /** * * * @private * @param {*} event * @return {*} {void} * @memberof SongSelector */ private onTouchMoved(event: any): void { // console.log("---onTouchMoved---: " , this._down); if (!this._down) { event.stopPropagation(); return; } var position = event.getLocation(); if (position.x + position.y == this._lastpos.x + this._lastpos.y) { return; } this._clickTouch = false; var offesty = position.y - this._lastpos.y; // this.carPositionOff(0, offesty*1.3); this.musicPositionOff(offesty * 0.2); this._lastpos = position; } private updateUIColor(rgb: cc.Color): void { console.warn('===rgb==', rgb); this.updateColorAction(CCUtils.findChild(this.node.parent, 'bg') , rgb); this.updateColorAction(CCUtils.findChild(this.node.parent, 'headLayer') , rgb); } private updateColorAction(node: cc.Node , rgb: cc.Color): void { node.stopAllActions(); cc.tween(node) .to(0.5, { color: rgb }) .start(); } /** * 滑动结束 * * @private * @param {*} event * @return {*} {void} * @memberof SongSelector */ private onTouchEnded(event: any): void { var position = event.getLocation(); /** 是否点击组件内 */ if (!this.touchMusic(event)) { const rgb: cc.Color = cc.color(Utiles.random(100, 255), Utiles.random(100, 255), Utiles.random(100, 255)); this.updateUIColor(rgb); //点击直接切换到该歌曲 if (position.x + position.y == this._BeganPos.x + this._BeganPos.y) { var node = this.items[this.getId(this._recentcardi + 1)]; var node2 = this.items[this.getId(this._recentcardi - 1)]; var node3 = this.items[this.getId(this._recentcardi + 2)]; var node4 = this.items[this.getId(this._recentcardi - 2)]; console.log('node: ', node); if (this.rectContainsPoint(node.getBoundingBoxToWorld(), event.getLocation())) { this.musicPositionOff(-150 * 0.2); } else if (this.rectContainsPoint(node2.getBoundingBoxToWorld(), event.getLocation())) { this.musicPositionOff(150 * 0.2); } else if (this.rectContainsPoint(node3.getBoundingBoxToWorld(), event.getLocation())) { this.musicPositionOff(-300 * 0.2); } else if (this.rectContainsPoint(node4.getBoundingBoxToWorld(), event.getLocation())) { this.musicPositionOff(300 * 0.2); } else { return; } } // this._lastpos=position; if (!this._down) { event.stopPropagation(); return; } this._clickTouch = true; this._down = false; // this.carPostionSure(); this.musicMoveToChange(); } } /** * 是否点击歌曲在组件内 * * @private * @param {*} event * @return {*} {void} * @memberof SongSelector */ private touchMusic(event: any): boolean { if (this._clickTouch) { var node = this.items[this._recentcardi]; if (this.rectContainsPoint(node.getBoundingBoxToWorld(), event.getLocation())) { // 点击在组件内的操作 console.log('选中歌曲: ', this._recentcardi); this.intoGameMain(this._recentcardi); return true; } } return false; } /** * 进入游戏核心玩法 * * @private * @memberof SongSelector */ private intoGameMain(index: number): void { cc.tween(this.node).to(0.5, { opacity: 50 }).call((): void => { PrefabManager.close(this.node); ObserverManager.notify(EventType.OpenGame, { index: this._recentcardi }); }).start(); } /** * 获取歌曲id * * @private * @type {function(number)} * @memberof SongSelector */ private getId(number: number): number { if (number > this._itemCount - 1) number = 0; if (number < 0) number = this._itemCount - 1; return number; } /** * 滑动选择歌曲 * * @private * @param {*} val * @memberof SongSelector */ private musicPositionOff(val: any): void { for (let i: number = 0; i < this.items.length; i++) { this.items[i]['ao'] += val; if (this.items[i]['ao'] < 0) this.items[i]['ao'] += 360; if (this.items[i]['ao'] > 360) this.items[i]['ao'] -= 360; this.items[i].setPosition(this.anglePos(this.items[i]['ao'])); } } /** * 判定范围 * * @private * @param {*} c * @param {*} t * @return {*} {*} * @memberof SongSelector */ private rectContainsPoint(c, t): any { var n = !1; t.x >= c.x && t.x <= c.x + c.width && t.y >= c.y && t.y <= c.y + c.height && (n = !0); return n; } /** * 滑动选择 * * @private * @memberof SongSelector */ private musicMoveToChange(): void { var angle = []; for (var i = 0; i < this._itemCount + 1; i++) { angle.push(i * this.commonAngle); } var ao = Math.abs(this.items[0]['ao']); for (var i = 0; i < this.items.length; i++) { var ao = this.items[i]['ao']; for (var j = 0; j < angle.length - 1; j++) { if (Math.abs(ao) >= angle[j] && Math.abs(ao) <= angle[j + 1]) { var ao2 = 0; if (angle[j + 1] - Math.abs(ao) < this.faultPx) { ao2 = angle[j + 1]; } else { ao2 = angle[j]; } this.items[i]['ao'] > 0 ? (this.items[i]['ao'] = ao2) : (this.items[i]['ao'] = -ao2); break; } } } var lastIndex = this._recentcardi; for (var i = 0; i < this._itemCount; i++) { if (this.items[i]['ao'] == 0 || this.items[i]['ao'] == 360) { this._recentcardi = i; } } // console.log("--this._recentcardi--: " , Module._recentcardi); var flag = true; for (var i = 0; i < this._itemCount; i++) { var item = this.items[i]; var pos = this.anglePos(this.items[i]['ao']); item.stopAllActions(); var call = cc.callFunc( function (t, index) { // var sk = this.items[index].getChildByName("gd").getComponent(sp.Skeleton); // if (index == this._recentcardi) { // sk.animation = "01"; // } else { // sk.animation = "02"; // } // if (lastIndex != Module._recentcardi && flag) { // flag =false; // cc.audioEngine.stopAllEffects(); // Utils.playMusic("sound/soung/audition/"+Module._recentcardi+".mp3",true); // } this.unschedule(this.musicScaleUpdate); }, this, i ); var call2 = cc.callFunc( function (t, index) { // var sk = this.items[index].getChildByName("gd").getComponent(sp.Skeleton); // if (sk.animation == "01") sk.animation = "02"; }, this, i ); // TODO: 运行动画,暂时还不需要 item.runAction(cc.sequence(cc.moveTo(0.2, pos), call, cc.delayTime(99 / 30), call2)); if (i == this._recentcardi) { CCUtils.findChild(item, 'btn').runAction(cc.repeatForever(cc.rotateBy(12.0, 360))); } else { CCUtils.findChild(item, 'btn').rotation = 0; CCUtils.findChild(item, 'btn').stopAllActions(); } } } }