Commit 9d55a4bb authored by liujiaxin's avatar liujiaxin

lrc scroll

parent f880511b
...@@ -206,6 +206,7 @@ cc.Class({ ...@@ -206,6 +206,7 @@ cc.Class({
// this.node.height = area.rect.width; // this.node.height = area.rect.width;
// this.node.parent.zIndex = 99999 // this.node.parent.zIndex = 99999
const karaokeConf = gameData.lrcData const karaokeConf = gameData.lrcData
this._lrcData = karaokeConf && karaokeConf.lyrics ? karaokeConf.lyrics : []; this._lrcData = karaokeConf && karaokeConf.lyrics ? karaokeConf.lyrics : [];
...@@ -391,10 +392,9 @@ cc.Class({ ...@@ -391,10 +392,9 @@ cc.Class({
console.log('this.sentenceTimePhase', this.sentenceTimePhase) console.log('this.sentenceTimePhase', this.sentenceTimePhase)
// this.resetLRC(); // this.resetLRC();
// this.renderLRC(this._lrcData[0].time) // this.renderHighlight();
this.resetLRC();
this.renderHighlight();
window.test = this; window.test = this;
//#region smart flow lrc //#region smart flow lrc
...@@ -567,6 +567,7 @@ cc.Class({ ...@@ -567,6 +567,7 @@ cc.Class({
}, },
justifyContentPosition(){ justifyContentPosition(){
console.log('justifyContentPosition')
let {height: h} = this.calcHighlightRichText.node.getContentSize(); let {height: h} = this.calcHighlightRichText.node.getContentSize();
if (this.magicHeight === null) { if (this.magicHeight === null) {
this.magicHeight = h - this.richText.lineHeight; this.magicHeight = h - this.richText.lineHeight;
...@@ -580,13 +581,28 @@ cc.Class({ ...@@ -580,13 +581,28 @@ cc.Class({
// this.calcSentenceRichText.string = ''; // this.calcSentenceRichText.string = '';
// h = Math.min(h, h - sh + this.node.h) // h = Math.min(h, h - sh + this.node.h)
// } // }
if (this.richText.node.height > this.node.height) { const nodeHeight = this.richText._labelHeight;
let posY = (this.node.height - this.richText.node.height ) / 2; // const nodeHeight = h;
// if (nodeHeight > this.node.height) {
// let posY = (this.node.height - nodeHeight ) / 2;
// // if (h > this.node.height){
// // posY = posY + (h - this.node.height);
// // }
// this.richText.node.y = posY;// + this.magicHeight;
// }
if (this.richText._labelHeight > this.node.height) {
let posY = (this.node.height - this.richText._labelHeight ) / 2;
if (h > this.node.height){ if (h > this.node.height){
posY = posY + (h - this.node.height); posY = posY + (h - this.node.height);
} }
const b4 = this.richText.node.y;
this.richText.node.y = posY;// + this.magicHeight; // setTimeout(() => {
this.richText.node.y = posY;// + this.magicHeight;
// }, 0)
// console.log('this.richText.node.y',b4 , this.richText.node.y, posY)
} }
}, },
findSentenceIndexByWords(s, sentenceIndexObj) { findSentenceIndexByWords(s, sentenceIndexObj) {
...@@ -776,7 +792,7 @@ cc.Class({ ...@@ -776,7 +792,7 @@ cc.Class({
const textForCalc = `${played}${this._playedContent.length ? " ": ''}${playing}${this._playingContent.length ? " ": ''}` const textForCalc = `${played}${this._playedContent.length ? " ": ''}${playing}${this._playingContent.length ? " ": ''}`
// const textForCalc = `${played}${playing}` // const textForCalc = `${played}${playing}`
this.calcHighlightRichText.string = totalArr.join(SPACE); this.calcHighlightRichText.string = textForCalc;
this.richText.string = totalArr.join(SPACE);//`${textForCalc}${remained}`; this.richText.string = totalArr.join(SPACE);//`${textForCalc}${remained}`;
this.justifyContentPosition(); this.justifyContentPosition();
...@@ -795,7 +811,7 @@ cc.Class({ ...@@ -795,7 +811,7 @@ cc.Class({
}, },
getPlayedColor() { getPlayedColor() {
return this.lrcBgColor.toHEX();
if (this.__currentInteractivateMode == this.PLAY_MODE.MODE1) { if (this.__currentInteractivateMode == this.PLAY_MODE.MODE1) {
return this.lrcPlayingColor.toHEX(); return this.lrcPlayingColor.toHEX();
} else if (this.__currentInteractivateMode == this.PLAY_MODE.MODE2) { } else if (this.__currentInteractivateMode == this.PLAY_MODE.MODE2) {
......
...@@ -817,7 +817,7 @@ ...@@ -817,7 +817,7 @@
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "New RichText", "_name": "lrcContent",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 14 "__id__": 14
......
...@@ -121,7 +121,35 @@ cc.Class({ ...@@ -121,7 +121,35 @@ cc.Class({
getDefaultData() { getDefaultData() {
const data = {"songArr":[{"lrcData":{"audio_url":"http://staging-teach.cdn.ireadabc.com/3fa65d5f667a2ef9059d3dfc5df74a4d.mp3","fontSize":24,"lineHeight":32,"lyrics":[{"time":4.81026,"data":"AAA","newLine":true},{"time":8.63464,"data":"aaaaa vbbbb ccc ddd","newLine":true},{"time":10.489051,"data":"eeee fffff gg hhh","newLine":false}]},"pic_url":"http://staging-teach.cdn.ireadabc.com/c8abf7383d65bcbdba8f390785cece60.png","accompany_audio_url":"http://staging-teach.cdn.ireadabc.com/22e9facddfbf087ecdf2b60dba6019ef.mp3"},{"lrcData":{"audio_url":"http://staging-teach.cdn.ireadabc.com/2a25aaff4b6c84b859b4d77f944de57a.mp3","fontSize":24,"lineHeight":32,"lyrics":[{"time":19.06,"data":"安静地离去","newLine":true},{"time":21.7,"data":"和孤单一起","newLine":true},{"time":26.55,"data":"拥挤的回忆时间抹去","newLine":true}]},"pic_url":"http://staging-teach.cdn.ireadabc.com/f6f4bbef497409fef3c8f1d375893829.png","accompany_audio_url":"http://staging-teach.cdn.ireadabc.com/86614bd904f63ab02fc69304e99618c6.mp3"},{},{}],"title":"Let's play","title_audio_url":"http://staging-teach.cdn.ireadabc.com/cd8daa8b4d8ff707b3a3680e80bc4761.mp3"} const data = {"songArr":[
/*{"lrcData":{
"audio_url":"http://staging-teach.cdn.ireadabc.com/3fa65d5f667a2ef9059d3dfc5df74a4d.mp3",
"fontSize":24,
"lineHeight":32,
"lyrics":[
{"time":4.81026,"data":"AAA","newLine":true},
{"time":8.63464,"data":"aaaaa vbbbb ccc ddd","newLine":true},
{"time":10.489051,"data":"eeee fffff gg hhh","newLine":false}
]},
"pic_url":"http://staging-teach.cdn.ireadabc.com/c8abf7383d65bcbdba8f390785cece60.png","accompany_audio_url":"http://staging-teach.cdn.ireadabc.com/22e9facddfbf087ecdf2b60dba6019ef.mp3"
},*/
{"lrcData":{
"audio_url":"http://staging-teach.cdn.ireadabc.com/2a25aaff4b6c84b859b4d77f944de57a.mp3",
"fontSize":24,
"lineHeight":32,
"lyrics":[
{"time":11.09,"data":"yi shan yi shan liang jing jing","newLine":true},
{"time":14.9,"data":"1111满天都是小星星","newLine":true},
{"time":19.31,"data":"挂在天上放光明","newLine":true},
{"time":23.62,"data":"好像许多小眼睛","newLine":true},
{"time":27.93,"data":"一闪一闪亮晶晶","newLine":true},
{"time":32.32,"data":"满天都是小星星","newLine":true},{"time":41.1,"data":"一闪一闪亮晶晶","newLine":true},{"time":45.45,"data":"满天都是小星星","newLine":true},{"time":49.74,"data":"挂在天上放光明","newLine":true},{"time":54.16,"data":"好像许多小眼睛","newLine":true},{"time":58.39,"data":"一闪一闪亮晶晶","newLine":true},{"time":62.9,"data":"满天都是小星星","newLine":true},{"time":76.36,"data":"一闪一闪亮晶晶","newLine":true},{"time":80.28,"data":"满天都是小星星","newLine":true},{"time":84.65,"data":"挂在天上放光明","newLine":true},{"time":88.92,"data":"好像许多小眼睛","newLine":true},{"time":93.41,"data":"一闪一闪亮晶晶","newLine":true},
{"time":97.72,"data":"满天都是小星星","newLine":true}
]},"pic_url":"http://staging-teach.cdn.ireadabc.com/f6f4bbef497409fef3c8f1d375893829.png","accompany_audio_url":"http://staging-teach.cdn.ireadabc.com/86614bd904f63ab02fc69304e99618c6.mp3"}
],
"title":"Let's play",
"title_audio_url":"http://staging-teach.cdn.ireadabc.com/cd8daa8b4d8ff707b3a3680e80bc4761.mp3"
}
return data; return data;
}, },
...@@ -260,11 +288,27 @@ cc.Class({ ...@@ -260,11 +288,27 @@ cc.Class({
musicBtn: null, musicBtn: null,
singBtn: null, singBtn: null,
initSongControler() { initSongControler() {
if (!this.itemArr[0]) {
return
}
const songBgSize = getSprNode('song_bg');
const disH = -songBgSize.height * this._mapScaleMin - 40 * this._mapScaleMin;
const disW = 40 * this._mapScaleMin;
songBgSize.scale = this._mapScaleMin;
let pxo, pyo
let baseX = pxo = -songBgSize.width * this._mapScaleMin / 2 - disW / 2;
let baseY = pyo = 80 * this._mapScaleMin;
pxo += (this.itemArr[0].width * this._mapScaleMin + disW)
// pxo = baseX;
// pyo += disH;
const parent = cc.find('Canvas'); const parent = cc.find('Canvas');
let px = this.itemArr[1].x + 240 * this._mapScaleMin; let px = pxo + 240 * this._mapScaleMin;
let py = this.itemArr[1].y + 170 * this._mapScaleMin; let py = pyo + 170 * this._mapScaleMin;
const singBtn = this.addSingBtn(parent, px, py); const singBtn = this.addSingBtn(parent, px, py);
px = singBtn.x - 100 * this._mapScaleMin; px = singBtn.x - 100 * this._mapScaleMin;
...@@ -361,6 +405,7 @@ cc.Class({ ...@@ -361,6 +405,7 @@ cc.Class({
|| !item.lrcData || !item.lrcData
|| !item.lrcData.audio_url || !item.lrcData.audio_url
}, },
initItem() { initItem() {
this.itemArr = []; this.itemArr = [];
...@@ -374,6 +419,9 @@ cc.Class({ ...@@ -374,6 +419,9 @@ cc.Class({
let baseX = px = -songBgSize.width * this._mapScaleMin / 2 - disW / 2; let baseX = px = -songBgSize.width * this._mapScaleMin / 2 - disW / 2;
let baseY = py = 80 * this._mapScaleMin; let baseY = py = 80 * this._mapScaleMin;
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
console.log(`arr[${i}]`, arr[i]); console.log(`arr[${i}]`, arr[i]);
if (this.isSkipItem(arr[i])) { if (this.isSkipItem(arr[i])) {
...@@ -388,11 +436,14 @@ cc.Class({ ...@@ -388,11 +436,14 @@ cc.Class({
px = baseX; px = baseX;
py += disH; py += disH;
} }
this.addItemImg(item, arr[i]); if (arr[i].pic_url) {
this.addItemScript(item, arr[i]); this.addItemImg(item, arr[i]);
this.addItemListener(item); this.addItemScript(item, arr[i]);
this.addItemBorder(item); this.addItemListener(item);
this.addItemBorder(item);
}
this.itemArr.push(item); this.itemArr.push(item);
} }
...@@ -412,12 +463,16 @@ cc.Class({ ...@@ -412,12 +463,16 @@ cc.Class({
}, },
addItemImg(item, data) { addItemImg(item, data) {
if (!data.pic_url) {
return
}
const imgLen = 170; const imgLen = 170;
getSprNodeByUrl(data.pic_url, (spr) => { getSprNodeByUrl(data.pic_url, (spr) => {
spr.node.parent = item; spr.node.parent = item;
const tmpNode = new cc.Node(); const tmpNode = new cc.Node();
spr.node.name = 'ItemImage'
const g = tmpNode.addComponent(cc.Graphics); const g = tmpNode.addComponent(cc.Graphics);
g.fillColor = cc.Color.RED; g.fillColor = cc.Color.RED;
g.fillRect(0, 0, imgLen, imgLen); g.fillRect(0, 0, imgLen, imgLen);
...@@ -431,12 +486,24 @@ cc.Class({ ...@@ -431,12 +486,24 @@ cc.Class({
}, },
addItemScript(item, data) { addItemScript(item, data) {
if (!data.pic_url) {
return
}
const lrcNode = cc.instantiate(this.lrcPrefab) const lrcNode = cc.instantiate(this.lrcPrefab)
lrcNode.parent = item; //lrcPrefab lrcNode.parent = item; //lrcPrefab
const lrcScript = lrcNode.getComponent('adapter') const lrcScript = lrcNode.getComponent('adapter')
lrcScript.setData(data, this._mapScaleMin); lrcScript.setData(data, this._mapScaleMin);
item.lrcScript = lrcScript; item.lrcScript = lrcScript;
// lrcScript.lrc.node.width =
// lrcScript.lrc.node.height
console.log(111,item);
lrcScript.lrc.node.name = 'aaaaa'
lrcScript.lrc.node.height = item.height - 50;
console.log('aaaa y', lrcScript.lrc.node.y);
lrcScript.stopSong();
lrcNode.y = -lrcScript.lrc.node.height / 2 * lrcScript.lrc.node.scale + 90 * this._mapScaleMin; lrcNode.y = -lrcScript.lrc.node.height / 2 * lrcScript.lrc.node.scale + 90 * this._mapScaleMin;
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment