Commit 9d55a4bb authored by liujiaxin's avatar liujiaxin

lrc scroll

parent f880511b
......@@ -206,6 +206,7 @@ cc.Class({
// this.node.height = area.rect.width;
// this.node.parent.zIndex = 99999
const karaokeConf = gameData.lrcData
this._lrcData = karaokeConf && karaokeConf.lyrics ? karaokeConf.lyrics : [];
......@@ -391,10 +392,9 @@ cc.Class({
console.log('this.sentenceTimePhase', this.sentenceTimePhase)
// this.resetLRC();
// this.renderLRC(this._lrcData[0].time)
this.resetLRC();
this.renderHighlight();
// this.renderHighlight();
window.test = this;
//#region smart flow lrc
......@@ -567,6 +567,7 @@ cc.Class({
},
justifyContentPosition(){
console.log('justifyContentPosition')
let {height: h} = this.calcHighlightRichText.node.getContentSize();
if (this.magicHeight === null) {
this.magicHeight = h - this.richText.lineHeight;
......@@ -580,13 +581,28 @@ cc.Class({
// this.calcSentenceRichText.string = '';
// h = Math.min(h, h - sh + this.node.h)
// }
if (this.richText.node.height > this.node.height) {
let posY = (this.node.height - this.richText.node.height ) / 2;
const nodeHeight = this.richText._labelHeight;
// 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){
posY = posY + (h - this.node.height);
}
const b4 = this.richText.node.y;
// setTimeout(() => {
this.richText.node.y = posY;// + this.magicHeight;
// }, 0)
// console.log('this.richText.node.y',b4 , this.richText.node.y, posY)
}
},
findSentenceIndexByWords(s, sentenceIndexObj) {
......@@ -776,7 +792,7 @@ cc.Class({
const textForCalc = `${played}${this._playedContent.length ? " ": ''}${playing}${this._playingContent.length ? " ": ''}`
// const textForCalc = `${played}${playing}`
this.calcHighlightRichText.string = totalArr.join(SPACE);
this.calcHighlightRichText.string = textForCalc;
this.richText.string = totalArr.join(SPACE);//`${textForCalc}${remained}`;
this.justifyContentPosition();
......@@ -795,7 +811,7 @@ cc.Class({
},
getPlayedColor() {
return this.lrcBgColor.toHEX();
if (this.__currentInteractivateMode == this.PLAY_MODE.MODE1) {
return this.lrcPlayingColor.toHEX();
} else if (this.__currentInteractivateMode == this.PLAY_MODE.MODE2) {
......
......@@ -817,7 +817,7 @@
},
{
"__type__": "cc.Node",
"_name": "New RichText",
"_name": "lrcContent",
"_objFlags": 0,
"_parent": {
"__id__": 14
......
......@@ -121,7 +121,35 @@ cc.Class({
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;
},
......@@ -260,11 +288,27 @@ cc.Class({
musicBtn: null,
singBtn: null,
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');
let px = this.itemArr[1].x + 240 * this._mapScaleMin;
let py = this.itemArr[1].y + 170 * this._mapScaleMin;
let px = pxo + 240 * this._mapScaleMin;
let py = pyo + 170 * this._mapScaleMin;
const singBtn = this.addSingBtn(parent, px, py);
px = singBtn.x - 100 * this._mapScaleMin;
......@@ -361,6 +405,7 @@ cc.Class({
|| !item.lrcData
|| !item.lrcData.audio_url
},
initItem() {
this.itemArr = [];
......@@ -374,6 +419,9 @@ cc.Class({
let baseX = px = -songBgSize.width * this._mapScaleMin / 2 - disW / 2;
let baseY = py = 80 * this._mapScaleMin;
for (let i = 0; i < arr.length; i++) {
console.log(`arr[${i}]`, arr[i]);
if (this.isSkipItem(arr[i])) {
......@@ -389,10 +437,13 @@ cc.Class({
py += disH;
}
if (arr[i].pic_url) {
this.addItemImg(item, arr[i]);
this.addItemScript(item, arr[i]);
this.addItemListener(item);
this.addItemBorder(item);
}
this.itemArr.push(item);
}
......@@ -412,12 +463,16 @@ cc.Class({
},
addItemImg(item, data) {
if (!data.pic_url) {
return
}
const imgLen = 170;
getSprNodeByUrl(data.pic_url, (spr) => {
spr.node.parent = item;
const tmpNode = new cc.Node();
spr.node.name = 'ItemImage'
const g = tmpNode.addComponent(cc.Graphics);
g.fillColor = cc.Color.RED;
g.fillRect(0, 0, imgLen, imgLen);
......@@ -431,12 +486,24 @@ cc.Class({
},
addItemScript(item, data) {
if (!data.pic_url) {
return
}
const lrcNode = cc.instantiate(this.lrcPrefab)
lrcNode.parent = item; //lrcPrefab
const lrcScript = lrcNode.getComponent('adapter')
lrcScript.setData(data, this._mapScaleMin);
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;
},
......
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