Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
S
sb_karaoke_cocos
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
sb_karaoke_cocos
Commits
8a178a65
Commit
8a178a65
authored
Jan 21, 2021
by
Li MingZhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 增加图片动画类型 背景乐
parent
3942b415
Changes
10
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
87 additions
and
38 deletions
+87
-38
.DS_Store
.DS_Store
+0
-0
audio-recorder.component.html
...c/app/common/audio-recorder/audio-recorder.component.html
+2
-1
audio-recorder.component.ts
...src/app/common/audio-recorder/audio-recorder.component.ts
+2
-1
form.component.html
form/src/app/form/form.component.html
+12
-2
form.component.ts
form/src/app/form/form.component.ts
+7
-0
btn1.png.meta
...sets/ljx_karaoke/components/karaoke/texture/btn1.png.meta
+2
-2
pause.png.meta
...ets/ljx_karaoke/components/karaoke/texture/pause.png.meta
+2
-2
bgBottom.js
play/assets/ljx_karaoke/prefab/bgBottom.js
+2
-2
scene.js
play/assets/ljx_karaoke/script/scene.js
+58
-28
.DS_Store
publish/.DS_Store
+0
-0
No files found.
.DS_Store
View file @
8a178a65
No preview for this file type
form/src/app/common/audio-recorder/audio-recorder.component.html
View file @
8a178a65
...
...
@@ -35,7 +35,8 @@
<ng-template
#
truthyTemplate
>
<div
class=
"btn-delete"
(
click
)="
onBtnDeleteAudio
()"
>
<fa-icon
icon=
"close"
></fa-icon>
<!-- <fa-icon icon="close"></fa-icon> -->
<i
nz-icon
nzType=
"close"
nzTheme=
"outline"
></i>
</div>
</ng-template>
...
...
form/src/app/common/audio-recorder/audio-recorder.component.ts
View file @
8a178a65
...
...
@@ -26,7 +26,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
uploadData
;
@
Input
()
needRemove
=
fals
e
;
needRemove
=
tru
e
;
@
Input
()
audioItem
:
any
=
null
;
...
...
@@ -157,6 +157,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
onBtnDeleteAudio
()
{
this
.
audioUrl
=
null
;
this
.
audioUploaded
.
emit
({});
this
.
audioRemoved
.
emit
();
}
...
...
form/src/app/form/form.component.html
View file @
8a178a65
...
...
@@ -8,6 +8,16 @@
</nz-select>
</div>
<div
style=
"display: flex; align-items: center; margin-top: 20px;"
>
<h4
style=
"margin-left: 15px;"
>
背景乐添加:
</h4>
<app-audio-recorder
style=
"margin-left: 20px"
[
audioUrl
]="
item
.
bg_audio_url
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
bg_audio_url
',
item
)"
>
</app-audio-recorder>
</div>
<nz-divider
nzText=
"配置歌词"
></nz-divider>
...
...
@@ -69,11 +79,11 @@
</div>
<div
style=
"padding: 10px"
>
<
!-- <
div style="padding: 10px">
<button style="width: 230px; height: 240px; padding: 5px;" nz-button nzType="dashed" (click)="addPic()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加底部item
</button>
</div>
</div>
-->
</div>
...
...
form/src/app/form/form.component.ts
View file @
8a178a65
...
...
@@ -32,6 +32,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
},
{
name
:
'
图片
'
,
audio
:
true
,
pic
:
true
},
{
...
...
@@ -45,6 +46,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
{
name
:
'
模式切换按钮
'
,
rect
:
true
,
},
{
name
:
'
动画
'
,
rect
:
true
,
anima
:
true
,
audio
:
true
,
}
]
...
...
play/assets/ljx_karaoke/components/karaoke/texture/btn1.png.meta
View file @
8a178a65
...
...
@@ -7,8 +7,8 @@
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width":
156
,
"height":
132
,
"width":
80
,
"height":
80
,
"platformSettings": {},
"subMetas": {
"btn1": {
...
...
play/assets/ljx_karaoke/components/karaoke/texture/pause.png.meta
View file @
8a178a65
...
...
@@ -7,8 +7,8 @@
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width":
213
,
"height":
1
80,
"width":
80
,
"height": 80,
"platformSettings": {},
"subMetas": {
"pause": {
...
...
play/assets/ljx_karaoke/prefab/bgBottom.js
View file @
8a178a65
...
...
@@ -301,8 +301,8 @@ cc.Class({
item
.
addComponent
(
cc
.
Button
);
item
.
on
(
'
click
'
,
()
=>
{
if
(
item
.
audioClip
)
{
cc
.
audioEngine
.
stopAll
();
cc
.
audioEngine
.
play
(
item
.
audioClip
,
false
,
0.5
);
cc
.
audioEngine
.
stopAll
Effects
();
cc
.
audioEngine
.
play
Effect
(
item
.
audioClip
,
false
,
0.8
);
}
});
},
...
...
play/assets/ljx_karaoke/script/scene.js
View file @
8a178a65
...
...
@@ -90,14 +90,14 @@ cc.Class({
getDefaultData
()
{
const
data
=
{
"
lrcData
"
:{
"
audio_url
"
:
"
http://staging-teach.cdn.ireadabc.com/1d1184717ebff259c72fedcb6b249431.mp3
"
,
"
fontSize
"
:
24
,
"
lineHeight
"
:
32
,
"
lyrics
"
:[{
"
time
"
:
11.09
,
"
data
"
:
"
一闪一闪亮晶晶
"
,
"
newLine
"
:
true
},{
"
time
"
:
14.9
,
"
data
"
:
"
满天都是小星星
"
,
"
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
}]},
"
bgItem
"
:{
"
url
"
:
"
http://staging-teach.cdn.ireadabc.com/47a5c15dbb2ef6270471ee1b091b6ef1.png
"
,
"
rect
"
:{
"
x
"
:
113
,
"
y
"
:
0
,
"
width
"
:
726
,
"
height
"
:
363
}},
"
hotZoneItemArr
"
:[{
"
id
"
:
"
1597901672159
"
,
"
index
"
:
0
,
"
itemType
"
:
"
rect
"
,
"
fontScale
"
:
0.74375
,
"
imgScale
"
:
1
,
"
mapScale
"
:
0.74375
,
"
gIdx
"
:
"
2
"
,
"
rect
"
:{
"
x
"
:
463.43
,
"
y
"
:
97.81
,
"
width
"
:
209.22
,
"
height
"
:
209.22
}},{
"
id
"
:
"
1597901680891
"
,
"
index
"
:
1
,
"
itemType
"
:
"
rect
"
,
"
fontScale
"
:
0.74375
,
"
imgScale
"
:
1
,
"
mapScale
"
:
0.74375
,
"
gIdx
"
:
"
3
"
,
"
rect
"
:{
"
x
"
:
366.66
,
"
y
"
:
218.64
,
"
width
"
:
93.11
,
"
height
"
:
93.11
}},{
"
id
"
:
"
1597901691971
"
,
"
index
"
:
2
,
"
itemType
"
:
"
rect
"
,
"
fontScale
"
:
0.74375
,
"
imgScale
"
:
1
,
"
mapScale
"
:
0.74375
,
"
gIdx
"
:
"
4
"
,
"
rect
"
:{
"
x
"
:
251.07
,
"
y
"
:
99.38
,
"
width
"
:
209.22
,
"
height
"
:
59.63
}},{
"
id
"
:
"
1597903929187
"
,
"
index
"
:
3
,
"
pic_url
"
:
"
http://staging-teach.cdn.ireadabc.com/b888f0457755edbbb49b6cd1670a03d8.jpg
"
,
"
audio_url
"
:
"
http://staging-teach.cdn.ireadabc.com/4a7d062bb8d30ff643d8bddc07e7fe0b.mp3
"
,
"
itemType
"
:
"
rect
"
,
"
fontScale
"
:
0.74375
,
"
imgScale
"
:
0.08724302799823634
,
"
mapScale
"
:
0.74375
,
"
gIdx
"
:
"
0
"
,
"
rect
"
:{
"
x
"
:
99.5
,
"
y
"
:
183
,
"
width
"
:
79
,
"
height
"
:
79
}}],
"
accompany_audio_url
"
:
"
http://staging-teach.cdn.ireadabc.com/4a59032f9b5f726cb2cde2178a7f51fc
.mp3
"
}
if
(
data
.
picArr
)
{
data
.
picArr
=
data
.
picArr
.
concat
(
data
.
picArr
);
data
.
picArr
=
data
.
picArr
.
concat
(
data
.
picArr
);
data
.
picArr
=
data
.
picArr
.
concat
(
data
.
picArr
);
data
.
picArr
=
data
.
picArr
.
concat
(
data
.
picArr
);
data
.
picArr
=
data
.
picArr
.
concat
(
data
.
picArr
);
}
const
data
=
{
"
bgColorId
"
:
0
,
"
bgColor
"
:
"
#f9bd03
"
,
"
lrcData
"
:{
"
audio_url
"
:
"
http://staging-teach.cdn.ireadabc.com/9259e1b99cc17f61210e7edc17f1d697.mp3
"
,
"
fontSize
"
:
24
,
"
lineHeight
"
:
32
,
"
lyrics
"
:[{
"
time
"
:
0.112745
,
"
data
"
:
""
,
"
newLine
"
:
false
},{
"
time
"
:
0.685942
,
"
data
"
:
""
,
"
newLine
"
:
false
},{
"
time
"
:
0.31448
,
"
data
"
:
""
,
"
newLine
"
:
false
},{
"
time
"
:
0.386885
,
"
data
"
:
""
,
"
newLine
"
:
false
}]},
"
bgItem
"
:{
"
url
"
:
"
http://staging-teach.cdn.ireadabc.com/539e2f58cb1817f852d9c09ec1ac7c8b.png
"
,
"
rect
"
:{
"
x
"
:
265.18
,
"
y
"
:
0
,
"
width
"
:
776.65
,
"
height
"
:
500
}},
"
hotZoneItemArr
"
:[{
"
id
"
:
"
1611200754821
"
,
"
index
"
:
0
,
"
pic_url
"
:
"
http://staging-teach.cdn.ireadabc.com/05a37c3f8249811eda089c44f5d2acc6.png
"
,
"
audio_url
"
:
"
http://staging-teach.cdn.ireadabc.com/66878465ec50d162bd60fcdaa641933b.mp3
"
,
"
itemType
"
:
"
pic
"
,
"
fontScale
"
:
1.02109375
,
"
imgScale
"
:
0.46864686468646866
,
"
mapScale
"
:
1.02109375
,
"
gIdx
"
:
"
1
"
,
"
rect
"
:{
"
x
"
:
24.14
,
"
y
"
:
341
,
"
width
"
:
234.32
,
"
height
"
:
142
}},{
"
id
"
:
"
1611200760188
"
,
"
index
"
:
1
,
"
pic_url
"
:
"
http://staging-teach.cdn.ireadabc.com/c8abf7383d65bcbdba8f390785cece60.png
"
,
"
text
"
:
"
aa111
"
,
"
audio_url
"
:
"
http://staging-teach.cdn.ireadabc.com/83513f8d6083ebe072e3f9e47a21558a.mp3
"
,
"
itemType
"
:
"
rect
"
,
"
fontScale
"
:
1.02109375
,
"
imgScale
"
:
0.7029268568840579
,
"
mapScale
"
:
1.02109375
,
"
skeJsonData
"
:{
"
url
"
:
"
http://staging-teach.cdn.ireadabc.com/51e9d8e4e2e963a7658d07eba6c282f8.json
"
,
"
name
"
:
"
Ubbie_ske.json
"
},
"
texJsonData
"
:{
"
url
"
:
"
http://staging-teach.cdn.ireadabc.com/4232e00c9b1d272e650e51dbb785e498.json
"
,
"
name
"
:
"
Ubbie_tex.json
"
},
"
texPngData
"
:{
"
url
"
:
"
http://staging-teach.cdn.ireadabc.com/2e56dbe3134380952a725eacceb86359.png
"
,
"
name
"
:
"
Ubbie_tex.png
"
},
"
gIdx
"
:
"
0
"
,
"
rect
"
:{
"
x
"
:
259.31
,
"
y
"
:
85
,
"
width
"
:
200
,
"
height
"
:
200
}},{
"
id
"
:
"
1611200801763
"
,
"
index
"
:
2
,
"
audio_url
"
:
"
http://staging-teach.cdn.ireadabc.com/1961d807c944e6551af02c7b57e117f3.mp3
"
,
"
itemType
"
:
"
rect
"
,
"
fontScale
"
:
1.02109375
,
"
imgScale
"
:
1
,
"
mapScale
"
:
1.02109375
,
"
skeJsonData
"
:{
"
url
"
:
"
http://staging-teach.cdn.ireadabc.com/51e9d8e4e2e963a7658d07eba6c282f8.json
"
,
"
name
"
:
"
Ubbie_ske.json
"
},
"
texJsonData
"
:{
"
url
"
:
"
http://staging-teach.cdn.ireadabc.com/4232e00c9b1d272e650e51dbb785e498.json
"
,
"
name
"
:
"
Ubbie_tex.json
"
},
"
texPngData
"
:{
"
url
"
:
"
http://staging-teach.cdn.ireadabc.com/2e56dbe3134380952a725eacceb86359.png
"
,
"
name
"
:
"
Ubbie_tex.png
"
},
"
gIdx
"
:
"
5
"
,
"
rect
"
:{
"
x
"
:
550.31
,
"
y
"
:
275
,
"
width
"
:
200
,
"
height
"
:
200
}}],
"
picArr
"
:[],
"
bg_audio_url
"
:
"
http://staging-teach.cdn.ireadabc.com/3fa65d5f667a2ef9059d3dfc5df74a4d
.mp3
"
}
//
if (data.picArr) {
//
data.picArr = data.picArr.concat(data.picArr);
//
data.picArr = data.picArr.concat(data.picArr);
//
data.picArr = data.picArr.concat(data.picArr);
//
data.picArr = data.picArr.concat(data.picArr);
//
data.picArr = data.picArr.concat(data.picArr);
//
}
return
data
;
},
...
...
@@ -116,10 +116,18 @@ cc.Class({
},
addPreloadImage
()
{
if
(
this
.
data
.
bgItem
)
{
this
.
_imageResList
.
push
({
url
:
this
.
data
.
bgItem
.
url
});
this
.
_imageResList
.
push
({
url
:
this
.
data
.
bgItem
.
url
});
}
if
(
!
this
.
data
.
hotZoneItemArr
)
{
return
;
}
this
.
data
.
hotZoneItemArr
.
forEach
((
item
)
=>
{
if
(
item
.
pic_url
)
{
this
.
_imageResList
.
push
({
url
:
item
.
pic_url
});
}
})
},
addPreloadAudio
()
{
...
...
@@ -136,19 +144,22 @@ cc.Class({
if
(
this
.
data
.
accompany_audio_url
)
{
this
.
_audioResList
.
push
({
url
:
this
.
data
.
accompany_audio_url
});
}
this
.
_audioResList
.
push
({
url
:
this
.
data
.
bg_audio_url
});
},
addPreloadAnima
()
{
if
(
!
this
.
data
.
hotZoneItemArr
)
{
return
;
}
this
.
data
.
hotZoneItemArr
.
forEach
((
item
)
=>
{
if
(
item
.
gIdx
==
'
0
'
&&
item
.
skeJsonData
&&
item
.
texJsonData
&&
item
.
texPng
Data
)
{
this
.
_animaResList
.
push
({
url
:
item
.
skeJsonData
.
url
});
this
.
_animaResList
.
push
({
url
:
item
.
texJsonData
.
url
});
this
.
_animaResList
.
push
({
url
:
item
.
texPngData
.
url
});
if
(
item
.
skeJson
Data
)
{
this
.
_animaResList
.
push
({
url
:
item
.
skeJsonData
.
url
||
''
});
this
.
_animaResList
.
push
({
url
:
item
.
texJsonData
.
url
||
''
});
this
.
_animaResList
.
push
({
url
:
item
.
texPngData
.
url
||
''
});
}
})
},
...
...
@@ -162,6 +173,14 @@ cc.Class({
this
.
initBg
();
this
.
initHotZone
();
this
.
initBottomPart
();
this
.
initMusic
();
},
initMusic
()
{
cc
.
assetManager
.
loadRemote
(
this
.
data
.
bg_audio_url
,
(
err
,
clip
)
=>
{
cc
.
audioEngine
.
setMusicVolume
(
0.3
);
const
audioID
=
cc
.
audioEngine
.
playMusic
(
clip
,
true
);
});
},
_cocosScale
:
null
,
...
...
@@ -298,7 +317,7 @@ cc.Class({
bgBottom
.
y
=
-
frameSize
.
height
/
2
*
this
.
_cocosScale
-
15
*
bgBottom
.
scaleY
;
// this.data.bgItem.isShowDebugLine = true;
this
.
data
.
hotZoneItemArr
.
forEach
((
item
)
=>
{
if
(
item
.
gIdx
==
'
0
'
)
{
if
(
item
.
gIdx
==
'
0
'
||
item
.
gIdx
==
'
5
'
)
{
this
.
setOneAnima
(
item
);
}
else
if
(
item
.
gIdx
==
'
1
'
)
{
this
.
setOnePic
(
item
);
...
...
@@ -459,9 +478,9 @@ cc.Class({
console
.
log
(
'
clicked
'
);
if
(
animaNode
.
audioClip
)
{
cc
.
audioEngine
.
stopAll
();
cc
.
audioEngine
.
stopAll
Effects
();
cc
.
director
.
emit
(
'
STOP_ALL_AUDIO
'
)
cc
.
audioEngine
.
play
(
animaNode
.
audioClip
,
false
,
0.8
);
cc
.
audioEngine
.
play
Effect
(
animaNode
.
audioClip
,
false
,
0.8
);
}
if
(
animationNames
.
length
>
0
)
{
...
...
@@ -499,18 +518,29 @@ cc.Class({
picNode
.
anchorX
=
picNode
.
anchorY
=
0
;
// if (this.data.bgItem.isShowDebugLine) {
// const ctx = picNode.addComponent(cc.Graphics);
// ctx.lineWidth = 4;
// ctx.strokeColor = cc.Color.BLACK;
// ctx.fillColor = cc.Color.WHITE.setA(100);
// ctx.rect(0, 0, picNode.width, picNode.height);
// ctx.stroke();
// ctx.fill()
// }
if
(
data
.
audio_url
)
{
this
.
addPicAudio
(
picNode
);
}
});
},
addPicAudio
(
picNode
)
{
const
data
=
picNode
.
data
;
cc
.
assetManager
.
loadRemote
(
data
.
audio_url
,
(
err
,
audioClip
)
=>
{
picNode
.
audioClip
=
audioClip
;
});
}
picNode
.
addComponent
(
cc
.
Button
);
picNode
.
on
(
'
click
'
,
()
=>
{
if
(
picNode
.
audioClip
)
{
cc
.
audioEngine
.
stopAllEffects
();
cc
.
audioEngine
.
playEffect
(
picNode
.
audioClip
,
false
,
0.8
);
}
});
},
// update (dt) {},
...
...
publish/.DS_Store
View file @
8a178a65
No preview for this file type
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment