From 81058fdfdaf1768e37874b1a62a9268f94a1c12e Mon Sep 17 00:00:00 2001 From: LMZ <limingzhe@iplayabc.com> Date: Tue, 14 Dec 2021 10:38:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=82=E9=85=8D=E7=AA=97=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/OP_18/scene/OP_18.js | 31 +- assets/OP_18/scene/OP_18_.js | 533 +---------------------------------- 2 files changed, 29 insertions(+), 535 deletions(-) diff --git a/assets/OP_18/scene/OP_18.js b/assets/OP_18/scene/OP_18.js index 2f8477b..4bfecbf 100644 --- a/assets/OP_18/scene/OP_18.js +++ b/assets/OP_18/scene/OP_18.js @@ -431,20 +431,28 @@ cc.Class({ const letterS = this.data.letter.toLowerCase(); const itemLetterBig = getSprNode('letter/' + letterS + '_1_1'); - itemLetterBig.x = -this.canvas.width / 2 + 70 * this._mapScaleMin; - itemLetterBig.y = 200 * this._mapScaleMin; + // itemLetterBig.x = -this.canvas.width / 2 + 70 * this._mapScaleMin; + // itemLetterBig.y = 200 * this._mapScaleMin; itemLetterBig.scale = this._mapScaleMin; itemLetterBig.anchorY = 0.28 this.canvas.addChild(itemLetterBig); const itemBgBig = getSprNode('item_bg'); itemBgBig.scale = this._mapScaleMin; - itemBgBig.x = itemLetterBig.x + 70 * this._mapScaleMin; - itemBgBig.y = itemLetterBig.y; + // itemBgBig.x = itemLetterBig.x + 70 * this._mapScaleMin; + // itemBgBig.y = itemLetterBig.y; itemBgBig.anchorX = 0; this.canvas.addChild(itemBgBig); this.itemBgBig = itemBgBig; + + const letterW = 50 * this._mapScaleMin; + itemBgBig.x = -itemBgBig.width / 2 * itemBgBig.scaleX + letterW; + itemBgBig.y = 200 * this._mapScaleMin; + itemLetterBig.x = itemBgBig.x - letterW; + itemLetterBig.y = itemBgBig.y; + + const letterAnim0 = this.getLetterAnimBig0(letterS); letterAnim0.x = 100; @@ -472,20 +480,27 @@ cc.Class({ const letterS = this.data.letter.toLowerCase(); const itemLetterSmall = getSprNode('letter/' + letterS + '_0_1'); - itemLetterSmall.x = -this.canvas.width / 2 + 70 * this._mapScaleMin; - itemLetterSmall.y = -30 * this._mapScaleMin; + // itemLetterSmall.x = -this.canvas.width / 2 + 70 * this._mapScaleMin; + // itemLetterSmall.y = -30 * this._mapScaleMin; itemLetterSmall.scale = this._mapScaleMin; this.canvas.addChild(itemLetterSmall); const itemBgSmall = getSprNode('item_bg'); itemBgSmall.scale = this._mapScaleMin; - itemBgSmall.x = itemLetterSmall.x + 70 * this._mapScaleMin; - itemBgSmall.y = itemLetterSmall.y; + // itemBgSmall.x = itemLetterSmall.x + 70 * this._mapScaleMin; + // itemBgSmall.y = itemLetterSmall.y; itemBgSmall.anchorX = 0; this.canvas.addChild(itemBgSmall); this.itemBgSmall = itemBgSmall; + const letterW = 50 * this._mapScaleMin; + itemBgSmall.x = -itemBgSmall.width / 2 * itemBgSmall.scaleX + letterW; + itemBgSmall.y = -30 * this._mapScaleMin; + itemLetterSmall.x = itemBgSmall.x - letterW; + itemLetterSmall.y = itemBgSmall.y; + + const letterAnim0 = this.getLetterAnimSmall0(letterS); letterAnim0.x = 100; letterAnim0.y = 0; diff --git a/assets/OP_18/scene/OP_18_.js b/assets/OP_18/scene/OP_18_.js index 24e00bd..756a7a4 100644 --- a/assets/OP_18/scene/OP_18_.js +++ b/assets/OP_18/scene/OP_18_.js @@ -371,19 +371,21 @@ cc.Class({ const letterS = this.data.letter.toLowerCase(); const itemLetterBig = getSprNode('letter/' + letterS + '_1_1'); - itemLetterBig.x = -this.canvas.width / 2 + 70 * this._mapScaleMin; - itemLetterBig.y = 200 * this._mapScaleMin; itemLetterBig.scale = this._mapScaleMin; itemLetterBig.anchorY = 0.28 this.canvas.addChild(itemLetterBig); const itemBgBig = getSprNode('item_bg'); itemBgBig.scale = this._mapScaleMin; - itemBgBig.x = itemLetterBig.x + 70 * this._mapScaleMin; - itemBgBig.y = itemLetterBig.y; itemBgBig.anchorX = 0; this.canvas.addChild(itemBgBig); + + const letterW = 300 * this._mapScaleMin; + // itemBgBig.x = this.canvas.width / 2 - itemBgBig.width / 2 * itemBgBig.scaleX + letterW // itemLetterBig.x + 70 * this._mapScaleMin; + itemBgBig.y = 200 * this._mapScaleMin; + // itemLetterBig.x = itemBgBig.x - letterW / 2; + itemLetterBig.y = itemBgBig.y; const letterAnim0 = this.getLetterAnimBig0(letterS); letterAnim0.x = 100; @@ -697,126 +699,6 @@ cc.Class({ - _curIndex: null, - initPic() { - - let exercises = this.data.exercises; - - this.getSprNodeByUrl(exercises.picUrl, (sprNode) => { - - let pic = cc.find("Canvas/content/bg_green/pic"); - - const picNode = sprNode; - picNode.scale = pic.width / picNode.width; - picNode.x = 0; - picNode.y = 0; - pic.addChild(picNode); - - }); - - let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text"); - textNode.initScale = textNode.scale; - let wordNodeArr = []; - - let wordArr = this.data.exercises.wordArr; - - for (let i = 0; i < wordArr.length; ++i) { - - if (!wordArr[i].val) { - continue; - } - - //首嗿¯ - let initial = wordArr[i].val.substr(0, 1); - let label = this.getWord(initial, 200, true); - label.isInitial = true; - wordNodeArr.push(label); - - //其余嗿¯ - let last = wordArr[i].val.substr(1); - let lastLabel = this.getWord(last, 200, false); - wordNodeArr.push(lastLabel); - } - - - textNode.wordNodeArr = wordNodeArr; - - this.resetTextPosition(); - - this._curIndex = 0; - }, - - - initBtn() { - - - }, - - getWord(wordVal, size, isInitial) { - - let color = new cc.color(); - color.fromHEX('#000000'); - const labelNode = new cc.Node(); - labelNode.color = color; - const label = labelNode.addComponent(cc.Label); - label.lineHeight = size; - label.fontSize = size; - label.font = cc.find('Canvas/res/font/MuliBold-YzEVy').getComponent(cc.Label).font; - label.string = wordVal; - - labelNode.x = 0; - labelNode.y = 0; - - let widget = labelNode.addComponent(cc.Widget); - widget.isAlignBottom = true; - widget.bottom = - size / 2; - widget.updateAlignment(); - - labelNode.addComponent(cc.Button); - - labelNode.on('click', () => { - if (!this._cantouch) { - return; - } - //设置ä¸å¯ç‚¹å‡» - this._cantouch = false; - - playAudio(this.audioBtn.clip, () => { - - //å¦‚æžœæ˜¯é¦–å—æ¯ï¼Œåˆ™æ·»åŠ ç‚¹å‡»äº‹ä»¶ - if (isInitial) { - this.playTextAutio(() =>{ - - this._curIndex++; - this.moveHand(this._curIndex, () => { - this._cantouch = true; - - this.showEnd(); - }) - - }) - - } - else { - //æ˜¾ç¤ºå®Œï¼Œåˆ™æ’æ”¾éŸ³é¢‘ - if (this._shown) { - this.playTextAutio(() => { - this._cantouch = true; - }); - } - else{ - this._cantouch = true; - } - } - - - }) - - }) - - return labelNode; - }, - playAni(name, times = 1) { @@ -848,387 +730,9 @@ cc.Class({ return state; }, - moveHand(index, callback = null) { - - let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text"); - - let wordNodeArr = textNode.wordNodeArr - - let wordNode = wordNodeArr[2 * index]; - - if (!wordNode) { - - if (callback) { - callback(); - } - return; - } - - let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand"); - handNode.x = wordNode.x; - - this.handAni(); - - if (callback) { - callback(); - } - }, - - /** - * æ’æ”¾æ–‡æœ¬éŸ³é¢‘ - * @param {*} callback - */ - playTextAutio(callback = null) { - - this.playAudioByUrl(this.data.exercises.audioUrl, () => { - - //åœæ¢ç›‘å¬åŠ¨ç”» - this._stopAni = true; - - if (callback) { - callback(); - } - },(audioId) => { - - //显示完æˆï¼Œä¸å†æ’放动画 - if (this._shown) { - return; - } - - //è®¾ç½®å¯æ’放动画 - this._stopAni = false; - - //éšè—手指 - let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand"); - handNode.opacity = 0; - - let lyrics = this.data.exercises.lrcData.lyrics; - - //临时音频打点数组 - let arr = JSON.parse(JSON.stringify(lyrics)); - console.log(arr); - - this.monitor(audioId, arr); - }) - }, - - /** - * 釿–°è®¾ç½®æ–‡å—ä½ç½® - */ - resetTextPosition() { - let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text"); - let wordNodeArr = textNode.wordNodeArr; - - //é—´éš” - let space = 40; - - let tW = 0; - - for (let i = 0; i < wordNodeArr.length; ++i) { - - let wordNode = wordNodeArr[i]; - wordNode.removeFromParent(); - wordNode.parent = textNode; - tW += wordNode.width; - - let widget = wordNode.getComponent(cc.Widget); - widget.bottom = - wordNode.getComponent(cc.Label).fontSize / 2; - widget.updateAlignment(); - - wordNode.initScale = wordNode.scale; - } - tW += (this.data.exercises.wordArr.length - 1) * space; - - let startX = - tW / 2; - - for (let i = 0; i < wordNodeArr.length; ++i) { - let width = wordNodeArr[i].width; - wordNodeArr[i].x = startX + width / 2; - startX += width; - - if (wordNodeArr[i].isInitial) { - continue; - } - startX += space; - } - - if(tW > textNode.width){ - const sx = textNode.width / tW; - - textNode.scale = Math.round(sx * 1000) / 1000; - - textNode.initScale = textNode.scale; - } - }, - - - /** - * æ˜¾ç¤ºç»“æŸ - */ - _shown: null, - showEnd() { - - console.log(' in showEnd'); - - if (this._curIndex < this.data.exercises.wordArr.length) { - return; - } - - if (this._shown) { - return; - } - - this._shown = true; - - let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand"); - handNode.opacity = 0; - this._stop = true; - - //æ’æ”¾åŠ¨ç”» - const state = this.playAni('finish', 0); - - //æ’æ”¾å¼•导音频2 - this.playAudioByUrl(this.data.guideAudioUrl2, () => { - - state.stop(); - - this.playAni('normal', 0); - - this.showPhotoBtn(); - }); - - - }, - - _stop: null, - _tween: null, - handAni(){ - - let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand"); - - handNode.opacity = 255; - handNode.y = handNode.initY; - const move = () => { - this._tween = cc.tween(handNode) - .to(0.5,{y: handNode.initY + 50}) - .to(0.5,{y: handNode.initY}) - .call(() =>{ - - if(!this._stop){ - move() - } - }) - .start(); - } - - this._stop = false; - - move(); - }, - - _stopAni:null, - monitor(audioId, arr){ - - if(this._stopAni){ - return; - } - - this._stopAni = false; - - let currentTime = cc.audioEngine.getCurrentTime(audioId); - - let len = arr.length; - - for(let i = len - 1; i >=0; -- i){ - - let time = arr[i].time; - - time = Math.round(time * 1000) / 1000; - - currentTime = Math.round(currentTime * 1000) / 1000; - - if(time < currentTime ){ - - //如果是最åŽä¸€ä¸ªåŒ¹é…ï¼Œåˆ™æ’æ”¾å†…容动画 - if(len == 1){ - this.contentAni(); - } - else{ - this.textAni(); - } - - //移除匹é…ä¸Šçš„å…ƒç´ - arr.splice(i, 1); - - break; - } - - } - - requestAnimationFrame(()=>{ - - this.monitor(audioId, arr); - }) - }, - - /** - * 文本动画 - */ - _playText:null, - textAni(){ - - if(this._playText){ - return; - } - - this._playText = true; - - this._cantouch = false; - - const twinkle =(node) => { - cc.tween(node) - .to(0.3,{scale: node.initScale * 1.5}) - .to(0.3,{scale: node.initScale}) - .call(() => { - this._playText = false; - }) - .start(); - }; - - let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text"); - - let wordNodeArr = textNode.wordNodeArr; - - for (let i = 0; i < wordNodeArr.length; ++i) { - let wordNode = wordNodeArr[i]; - - //å¦‚æžœæ˜¯é¦–å—æ¯ï¼Œåˆ™æ‰§è¡ŒåŠ¨ç”» - if(wordNode.isInitial){ - twinkle(wordNode); - } - } - - }, - - - /** - * 内容动画 - */ - contentAni(){ - - let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand"); - handNode.opacity = 0; - - const twinkle =(node) => { - cc.tween(node) - .to(0.5,{scale: node.initScale * 1.1}) - .to(0.5,{scale: node.initScale}) - .to(0.5,{scale: node.initScale * 1.1}) - .to(0.5,{scale: node.initScale}) - .call(()=>{ - this._cantouch = true; - }) - .start(); - }; - - let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text"); - - twinkle(textNode); - }, - - - - photoBtn: null, - initPhotoBtn() { - - const canvas = cc.find('Canvas'); - - const photoBtn = this.getSprNode('btn_photo'); - photoBtn.active = false; - canvas.addChild(photoBtn); - photoBtn.scale = this._mapScaleMin; - // photoBtn.x = 100; - photoBtn.y = -canvas.height / 2 + photoBtn.height / 2 * photoBtn.scaleY; - photoBtn.addComponent(cc.Button); - photoBtn.on('click', () => { - this.showPhotoTip(); - }) - - this.photoBtn = photoBtn; - }, - - showPhotoBtn() { - if (!this.photoBtn) { - this.initPhotoBtn(); - } - this.photoBtn.active = true; - }, - - hidePhotoBtn() { - if (!this.photoBtn) { - return; - } - this.photoBtn.active = false; - }, - - showPhotoTip() { - - this.maskNode.active = true; - playAudio(this.audioOsmoTip.clip); - this.playAni('begin', 0) - this.playTipAni('normal', 1, () => { - console.log('play ani end'); - - this.playAni('normal', 0) - - - this.photoBtnClick(); - - }) - - - }, - - - photoBtnClick() { - console.log(' in photoBtnClick') - - if (!window || !window.courseware) { - console.log('window.courseware not found') - return; - } - - - // window.courseware.openRecognitionCamera = this.getPhotoData.bind(this); - - const openRecognitionCamera = window.courseware.openRecognitionCamera; - if (!openRecognitionCamera) { - console.log('openRecognitionCamera not found') - return; - } - openRecognitionCamera((data) => { - console.log('openRecognitionCamera data: ', data) - - this.timer_2 = setTimeout(() => { - - if ( typeof data == 'string' ) { - data = JSON.parse(data); - } - - const {result} = data; - this.photoEnd(result); - - this.maskNode.active = false; - }, 100); - - - - }) - - }, photoEnd(data) { @@ -1630,31 +1134,6 @@ cc.Class({ return topTitleData && topLeftLetterData; - - - // const block = data?.block - // if (!block) { - // return false; - // } - - // const letter = this.data.letter || 'Aa'; - - // const topLabelData = this.getPhotoLabelData(['or', 'cross', 't', 'out'], block); - // if (!topLabelData) { - // console.log('!topLabelData') - // return false; - // } - // this.topLabelData = topLabelData; - - - // let topLeftLetter = this.getTopLeftLetter(letter, block, topLabelData); - // this.topLeftLetter = topLeftLetter; - - - // console.log('topLabelData: ', topLabelData); - // console.log('topLeftLetter: ', topLeftLetter); - - // return topLeftLetter; }, -- 2.21.0