Commit 0b690fc9 authored by 李维's avatar 李维

add right image

parent 288e0210
...@@ -77,6 +77,25 @@ ...@@ -77,6 +77,25 @@
</div> </div>
</div> </div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">右侧显示类型</div>
<div style="flex:5">
<nz-select [(ngModel)]="item.rightType" (ngModelChange)="saveItem()" style="width: 70%;">
<nz-option nzValue="image" nzLabel="图片"></nz-option>
<nz-option nzValue="dragonBones" nzLabel="骨骼动画"></nz-option>
</nz-select>
</div>
</div>
<div *ngIf="item.rightType=='image'" style="display: flex; margin-bottom: 10px;">
<div style="flex:1"></div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, item, 'image_url')"></app-upload-image-with-preview>
</div>
</div>
<div style="display: flex; margin-bottom: 10px;"> <div style="display: flex; margin-bottom: 10px;">
<h3 style="text-align: center; width: 100%;">骨骼动画</h3> <h3 style="text-align: center; width: 100%;">骨骼动画</h3>
</div> </div>
...@@ -99,7 +118,7 @@ ...@@ -99,7 +118,7 @@
<app-audio-recorder [audioUrl]="item.text_audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item, 'text_audio_url')" ></app-audio-recorder> <app-audio-recorder [audioUrl]="item.text_audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item, 'text_audio_url')" ></app-audio-recorder>
</div> </div>
</div> </div>
<div style="display: flex; margin-bottom: 10px;"> <div *ngIf="item.rightType=='dragonBones'" style="display: flex; margin-bottom: 10px;">
<div style="flex:1"> <div style="flex:1">
右侧 右侧
</div> </div>
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
"__id__": 2 "__id__": 2
}, },
{ {
"__id__": 53 "__id__": 55
} }
], ],
"_active": false, "_active": false,
...@@ -87,22 +87,22 @@ ...@@ -87,22 +87,22 @@
"__id__": 27 "__id__": 27
}, },
{ {
"__id__": 31 "__id__": 33
}, },
{ {
"__id__": 43 "__id__": 45
} }
], ],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 50 "__id__": 52
}, },
{ {
"__id__": 51 "__id__": 53
}, },
{ {
"__id__": 52 "__id__": 54
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -192,7 +192,7 @@ ...@@ -192,7 +192,7 @@
"array": [ "array": [
0, 0,
0, 0,
424.5051021696379, 416.55821922031504,
0, 0,
0, 0,
0, 0,
...@@ -1361,6 +1361,9 @@ ...@@ -1361,6 +1361,9 @@
}, },
{ {
"__id__": 30 "__id__": 30
},
{
"__id__": 31
} }
], ],
"_active": true, "_active": true,
...@@ -1565,6 +1568,98 @@ ...@@ -1565,6 +1568,98 @@
"groupIndex": 0, "groupIndex": 0,
"_id": "c65g142Q1Ot5hUwPHKrILy" "_id": "c65g142Q1Ot5hUwPHKrILy"
}, },
{
"__type__": "cc.Node",
"_name": "imageContainer",
"_objFlags": 0,
"_parent": {
"__id__": 27
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 32
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 430,
"height": 550
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "b1ZXtbHKpCr6ihuZ+7oeUC"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 31
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": null,
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "e2ZFRUdmBIJb8BBei1XYXs"
},
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "res", "_name": "res",
...@@ -1574,13 +1669,13 @@ ...@@ -1574,13 +1669,13 @@
}, },
"_children": [ "_children": [
{ {
"__id__": 32 "__id__": 34
}, },
{ {
"__id__": 35 "__id__": 37
}, },
{ {
"__id__": 38 "__id__": 40
} }
], ],
"_active": false, "_active": false,
...@@ -1638,11 +1733,11 @@ ...@@ -1638,11 +1733,11 @@
"_name": "font", "_name": "font",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 31 "__id__": 33
}, },
"_children": [ "_children": [
{ {
"__id__": 33 "__id__": 35
} }
], ],
"_active": true, "_active": true,
...@@ -1700,13 +1795,13 @@ ...@@ -1700,13 +1795,13 @@
"_name": "Comic Sans MS", "_name": "Comic Sans MS",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 32 "__id__": 34
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 34 "__id__": 36
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -1762,7 +1857,7 @@ ...@@ -1762,7 +1857,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 33 "__id__": 35
}, },
"_enabled": true, "_enabled": true,
"_materials": [], "_materials": [],
...@@ -1794,11 +1889,11 @@ ...@@ -1794,11 +1889,11 @@
"_name": "img", "_name": "img",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 31 "__id__": 33
}, },
"_children": [ "_children": [
{ {
"__id__": 36 "__id__": 38
} }
], ],
"_active": true, "_active": true,
...@@ -1856,13 +1951,13 @@ ...@@ -1856,13 +1951,13 @@
"_name": "black", "_name": "black",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 35 "__id__": 37
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 37 "__id__": 39
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -1918,7 +2013,7 @@ ...@@ -1918,7 +2013,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 36 "__id__": 38
}, },
"_enabled": true, "_enabled": true,
"_materials": [], "_materials": [],
...@@ -1946,14 +2041,14 @@ ...@@ -1946,14 +2041,14 @@
"_name": "audio", "_name": "audio",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 31 "__id__": 33
}, },
"_children": [ "_children": [
{ {
"__id__": 39 "__id__": 41
}, },
{ {
"__id__": 41 "__id__": 43
} }
], ],
"_active": true, "_active": true,
...@@ -2011,13 +2106,13 @@ ...@@ -2011,13 +2106,13 @@
"_name": "sm_btn", "_name": "sm_btn",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 38 "__id__": 40
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 40 "__id__": 42
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -2073,7 +2168,7 @@ ...@@ -2073,7 +2168,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 39 "__id__": 41
}, },
"_enabled": true, "_enabled": true,
"_clip": { "_clip": {
...@@ -2091,13 +2186,13 @@ ...@@ -2091,13 +2186,13 @@
"_name": "sm_join", "_name": "sm_join",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 38 "__id__": 40
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 42 "__id__": 44
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -2153,7 +2248,7 @@ ...@@ -2153,7 +2248,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 41 "__id__": 43
}, },
"_enabled": true, "_enabled": true,
"_clip": { "_clip": {
...@@ -2174,14 +2269,14 @@ ...@@ -2174,14 +2269,14 @@
"__id__": 2 "__id__": 2
}, },
"_children": [ "_children": [
{
"__id__": 44
},
{ {
"__id__": 46 "__id__": 46
}, },
{ {
"__id__": 48 "__id__": 48
},
{
"__id__": 50
} }
], ],
"_active": true, "_active": true,
...@@ -2239,13 +2334,13 @@ ...@@ -2239,13 +2334,13 @@
"_name": "btn_right", "_name": "btn_right",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 43 "__id__": 45
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 45 "__id__": 47
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -2301,7 +2396,7 @@ ...@@ -2301,7 +2396,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 44 "__id__": 46
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
...@@ -2333,13 +2428,13 @@ ...@@ -2333,13 +2428,13 @@
"_name": "btn_left", "_name": "btn_left",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 43 "__id__": 45
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 47 "__id__": 49
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -2395,7 +2490,7 @@ ...@@ -2395,7 +2490,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 46 "__id__": 48
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
...@@ -2427,13 +2522,13 @@ ...@@ -2427,13 +2522,13 @@
"_name": "btn_restart", "_name": "btn_restart",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 43 "__id__": 45
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 49 "__id__": 51
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -2489,7 +2584,7 @@ ...@@ -2489,7 +2584,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 48 "__id__": 50
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
......
...@@ -43,6 +43,7 @@ export default class GameLogic { ...@@ -43,6 +43,7 @@ export default class GameLogic {
this.addEventListener(); this.addEventListener();
this.initBottomButtons(); this.initBottomButtons();
this.initDragonContainers(); this.initDragonContainers();
this.initRightImageContainer();
if(!this.loadQuestion(true)) { if(!this.loadQuestion(true)) {
const btnRestart = this.g_cartoon.getCartoonElement("btn_restart"); const btnRestart = this.g_cartoon.getCartoonElement("btn_restart");
if(this.m_currentQuestion <= -1) { if(this.m_currentQuestion <= -1) {
...@@ -63,6 +64,8 @@ export default class GameLogic { ...@@ -63,6 +64,8 @@ export default class GameLogic {
this.g_cartoon.initCartoonElement("bgMain", this.g_cartoon.getNodeByPath(`Canvas/bgMain`)) this.g_cartoon.initCartoonElement("bgMain", this.g_cartoon.getNodeByPath(`Canvas/bgMain`))
this.g_cartoon.initCartoonElement("textDragonContainer", this.g_cartoon.getNodeByPath(`Canvas/text_container/DB`)) this.g_cartoon.initCartoonElement("textDragonContainer", this.g_cartoon.getNodeByPath(`Canvas/text_container/DB`))
this.g_cartoon.initCartoonElement("rightDragonContainer", this.g_cartoon.getNodeByPath(`Canvas/right_container/dragonBones`)) this.g_cartoon.initCartoonElement("rightDragonContainer", this.g_cartoon.getNodeByPath(`Canvas/right_container/dragonBones`))
this.g_cartoon.initCartoonElement("rightImageContainer", this.g_cartoon.getNodeByPath(`Canvas/right_container/imageContainer`))
this.g_cartoon.initCartoonElement(`video_container`, this.g_cartoon.getNodeByPath(`Canvas/video_container`)); this.g_cartoon.initCartoonElement(`video_container`, this.g_cartoon.getNodeByPath(`Canvas/video_container`));
this.g_cartoon.initCartoonElement(`video_container_video`, this.g_cartoon.getNodeByPath(`Canvas/video_container/video`)); this.g_cartoon.initCartoonElement(`video_container_video`, this.g_cartoon.getNodeByPath(`Canvas/video_container/video`));
...@@ -250,9 +253,13 @@ export default class GameLogic { ...@@ -250,9 +253,13 @@ export default class GameLogic {
let rightDragon = this.g_cartoon.getCartoonElement("rightDragonContainer") let rightDragon = this.g_cartoon.getCartoonElement("rightDragonContainer")
let videoContainer = this.g_cartoon.getCartoonElement("video_container_video") let videoContainer = this.g_cartoon.getCartoonElement("video_container_video")
let textContainer = this.g_cartoon.getCartoonElement("textDragonContainer") let textContainer = this.g_cartoon.getCartoonElement("textDragonContainer")
var rightType = this.g_formData.dataArray[this.m_currentQuestion].rightType
textContainer.dragonBones.stopDragonBones() textContainer.dragonBones.stopDragonBones()
if(rightType != "image") {
rightDragon.dragonBones.stopDragonBones() rightDragon.dragonBones.stopDragonBones()
}
this.g_cartoon.stopVideo(videoContainer.node.getComponent(cc.VideoPlayer)) this.g_cartoon.stopVideo(videoContainer.node.getComponent(cc.VideoPlayer))
this.g_cartoon.stopAllAudio() this.g_cartoon.stopAllAudio()
} }
...@@ -260,7 +267,9 @@ export default class GameLogic { ...@@ -260,7 +267,9 @@ export default class GameLogic {
playCurrentQuestion() { playCurrentQuestion() {
const play = ()=>{ const play = ()=>{
let rightDragon = this.g_cartoon.getCartoonElement("rightDragonContainer") let rightDragon = this.g_cartoon.getCartoonElement("rightDragonContainer")
let rightImageContainer = this.g_cartoon.getCartoonElement("rightImageContainer")
var container = this.g_cartoon.getCartoonElement("video_container_video") var container = this.g_cartoon.getCartoonElement("video_container_video")
var rightType = this.g_formData.dataArray[this.m_currentQuestion].rightType
this.g_cartoon.getCartoonElement("textDragonContainer").play() this.g_cartoon.getCartoonElement("textDragonContainer").play()
if(this.g_formData.dataArray[this.m_currentQuestion].text_audio_url) { if(this.g_formData.dataArray[this.m_currentQuestion].text_audio_url) {
...@@ -268,7 +277,11 @@ export default class GameLogic { ...@@ -268,7 +277,11 @@ export default class GameLogic {
} }
this.g_cartoon.playVideo(container.node.getComponent(cc.VideoPlayer), ()=>{ this.g_cartoon.playVideo(container.node.getComponent(cc.VideoPlayer), ()=>{
if(rightType == "image") {
rightImageContainer.play()
} else {
rightDragon.play() rightDragon.play()
}
if(this.g_formData.dataArray[this.m_currentQuestion].right_audio_url) { if(this.g_formData.dataArray[this.m_currentQuestion].right_audio_url) {
this.g_cartoon.playAudio(this.g_formData.dataArray[this.m_currentQuestion].right_audio_url) this.g_cartoon.playAudio(this.g_formData.dataArray[this.m_currentQuestion].right_audio_url)
} }
...@@ -391,6 +404,38 @@ export default class GameLogic { ...@@ -391,6 +404,38 @@ export default class GameLogic {
} }
} }
initRightImageContainer() {
let imageContainer = this.g_cartoon.getCartoonElement("rightImageContainer");
imageContainer.node.active = false;
imageContainer.setImage = (image_url, callback) => {
this.getSpriteFrimeByUrl(image_url).then(sf=>{
let rect = sf.getRect()
let sx = 400 / rect.width;
let sy = 400 / rect.height;
let s = Math.min(sx, sy);
imageContainer.node.setScale(s, s)
imageContainer.node.getComponent(cc.Sprite).spriteFrame = sf;
imageContainer.node.active = true;
if(callback) {
callback(sf)
}
})
}
imageContainer.play = (callback) => {
let sx = imageContainer.node.scaleX
let sy = imageContainer.node.scaleY
this.g_cartoon.tweenChange(imageContainer.node, {scaleX: sx * 1.08, scaleY: sy * 1.08}, 0.3, ()=>{
this.g_cartoon.tweenChange(imageContainer.node, {scaleX: sx, scaleY: sy}, 0.4, ()=>{
})
})
}
}
loadQuestion(isNext) { loadQuestion(isNext) {
if(isNext) { if(isNext) {
this.m_currentQuestion++; this.m_currentQuestion++;
...@@ -416,12 +461,23 @@ export default class GameLogic { ...@@ -416,12 +461,23 @@ export default class GameLogic {
}) })
}) })
let p2 = new Promise((resolve, reject) => { let p2 = null
if(this.g_formData.dataArray[this.m_currentQuestion].rightType == "image") {
p2 = new Promise((resolve, reject) => {
this.g_cartoon.getCartoonElement("rightImageContainer").setImage(this.g_formData.dataArray[this.m_currentQuestion].image_url, ()=>{
resolve()
})
})
} else {
p2 = new Promise((resolve, reject) => {
this.g_cartoon.getCartoonElement("rightDragonContainer").setDragonBones(rightDragon, ()=>{ this.g_cartoon.getCartoonElement("rightDragonContainer").setDragonBones(rightDragon, ()=>{
resolve() resolve()
}) })
}) })
}
this.g_formData.dataArray[this.m_currentQuestion]
let video = this.g_cartoon.getCartoonElement("video_container_video") let video = this.g_cartoon.getCartoonElement("video_container_video")
let p3 = new Promise((resolve, reject) => { let p3 = new Promise((resolve, reject) => {
if(this.g_formData.dataArray[this.m_currentQuestion].video_url) { if(this.g_formData.dataArray[this.m_currentQuestion].video_url) {
......
This diff is collapsed.
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