Commit 6ca85b6b authored by limingzhe's avatar limingzhe

feat: 添加左右按钮 spine动画

parent 0dc17b82
No preview for this file type
......@@ -20,10 +20,10 @@
"@angular/platform-browser": "~9.0.2",
"@angular/platform-browser-dynamic": "~9.0.2",
"@angular/router": "~9.0.2",
"@fortawesome/angular-fontawesome": "^0.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-regular-svg-icons": "^5.12.1",
"@fortawesome/free-solid-svg-icons": "^5.12.1",
"@fortawesome/angular-fontawesome": "0.6.0",
"@fortawesome/fontawesome-svg-core": "1.2.27",
"@fortawesome/free-regular-svg-icons": "5.12.1",
"@fortawesome/free-solid-svg-icons": "5.12.1",
"@tweenjs/tween.js": "~18.5.0",
"ali-oss": "^6.5.1",
"cnpm": "^6.1.1",
......
......@@ -1959,6 +1959,8 @@ export class HotZoneItem extends MySprite {
text;
gIdx;
isAnimaStyle = false;
private _itemType;
private shapeRect: ShapeRect;
......@@ -2059,7 +2061,10 @@ export class HotZoneItem extends MySprite {
this.hideLabel();
}
setAnimaStyle(isAnimaStyle) {
this.isAnimaStyle = isAnimaStyle;
console.log('in setAnimaStyle ')
}
drawArrow() {
if (!this.arrow) { return; }
......@@ -2071,13 +2076,16 @@ export class HotZoneItem extends MySprite {
this.arrow.update();
this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.y = rect.y;
this.arrowTop.update();
this.arrowRight.x = rect.x + rect.width;
this.arrowRight.y = rect.y + rect.height / 2;
this.arrowRight.update();
if (!this.isAnimaStyle) {
this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.y = rect.y;
this.arrowTop.update();
this.arrowRight.x = rect.x + rect.width;
this.arrowRight.y = rect.y + rect.height / 2;
this.arrowRight.update();
}
}
drawFrame() {
......@@ -2200,10 +2208,155 @@ export class HotZoneLabel extends Label {
this.drawFrame();
}
getLabelRect() {
const rect = this.getBoundingBox();
const width = rect.width / this.scaleX;
const height = this.height * this.scaleY;
const x = this.x - width / 2;
const y = this.y - height / 2;
return {width, height, x, y};
}
}
export class HotZoneAction extends MySprite {
}
export class DragItem extends MySprite {
lineDashFlag = true;
item;
init() {
this.anchorX = 0.5;
this.anchorY = 0.5;
this.initCenterCircle();
}
setSize(w, h) {
this.anchorX = 0.5;
this.anchorY = 0.5;
this.width = w;
this.height = h;
// const rect = new ShapeRect(this.ctx);
// rect.x = -w / 2;
// rect.y = -h / 2;
// rect.setSize(w, h);
// rect.fillColor = '#000000';
// rect.alpha = 0.1;
// this.addChild(rect);
}
initCenterCircle() {
const circle = new ShapeCircle(this.ctx);
circle.setRadius(10);
circle.fillColor = '#ffa568'
this.addChild(circle);
this.width = circle.width;
this.height = circle.height;
}
getPosition() {
return {x: this.x, y: this.y};
}
drawLine() {
if (!this.item) {
return;
}
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x //+ w / 2;
const y = rect.y //+ h / 2;
this.ctx.setLineDash([4, 4]);
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = '#ffa568';
this.ctx.beginPath();
this.ctx.moveTo( x + w / 2 , y + h / 2 );
this.ctx.lineTo(this.item.x, this.item.y);
// this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x //+ w / 2;
const y = rect.y //+ h / 2;
this.ctx.setLineDash([4, 4]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#ffa568';
// this.ctx.fillStyle = '#ffffff';
this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2);
// this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
if (this.lineDashFlag) {
this.drawLine();
// this.drawFrame();
// this.drawArrow();
}
}
}
export class EditorItem extends MySprite {
......
......@@ -2,7 +2,7 @@
<h5 style="margin-left: 2.5%;"> preview: </h5>
<div class="preview-box" #wrap>
<div class="preview-box" [style.height]="isRotate ? '95vw' : '35vw'" #wrap>
<canvas id="canvas" #canvas></canvas>
</div>
......@@ -69,13 +69,36 @@
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].anima" align="center" style="margin-top: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<!-- <button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</button> -->
<app-upload-dragon-bone
[skeJsonData]="it.skeJsonData || {}"
[texJsonData]="it.texJsonData || {}"
[texPngData]="it.texPngData || {}"
[animType]="it.animType || 'dragonBone'"
(save)="saveAnim($event, it)">
</app-upload-dragon-bone>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].animaSmall" align="center" style="margin-top: 5px">
<!-- <button nz-button (click)="setAnimaSmallBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画(小)
</button> -->
<app-upload-dragon-bone
[skeJsonData]="it.skeJsonData || {}"
[texJsonData]="it.texJsonData || {}"
[texPngData]="it.texPngData || {}"
(save)="saveAnim($event, it)">
</app-upload-dragon-bone>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].audio" style="display: flex;align-items: center; margin-top: 5px">
<app-audio-recorder
......@@ -85,8 +108,51 @@
></app-audio-recorder>
</div>
<!-- <div *ngIf="customTypeGroupArr[it.gIdx]?.action" style="display: flex;align-items: center; margin-top: 5px">
<app-custom-action
style="margin: auto"
[item]="it ? it['actionData_' + it.gIdx] : {}"
[type]="customTypeGroupArr[it.gIdx].action.type"
[option]="customTypeGroupArr[it.gIdx].action.option"
(save)="onSaveCustomAction($event, it)">
></app-custom-action>
</div> -->
<div *ngIf="customTypeGroupArr[it.gIdx]?.isShowPos" style="display: flex; align-items: center; justify-content: center; margin-top: 5px;">
x: <input type="text" nz-input [(ngModel)]="it.posX" style="width: 50px; margin-right: 15px;" (blur)="saveItemPos(it)">
y: <input type="text" nz-input [(ngModel)]="it.posY" style="width: 50px" (blur)="saveItemPos(it)">
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.select" align="center" >
<nz-select [(ngModel)]="it.selectType" nzAllowClear nzPlaceHolder="Choose" style="width: 70%; margin-top: 5px;">
<nz-option *ngFor="let s of customTypeGroupArr[it.gIdx]?.select" [nzValue]="s.value" [nzLabel]="s.label">
</nz-option>
</nz-select>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.label" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<span style="width: 30%;">{{customTypeGroupArr[it.gIdx].label + ':'}}</span>
<input type="text" nz-input [(ngModel)]="it.labelText" (blur)="saveText(it)">
</div>
<!-- <div *ngIf="customTypeGroupArr[it.gIdx]?.mathLabel" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<span style="width: 30%;">{{customTypeGroupArr[it.gIdx].mathLabel + ':'}}</span>
<app-formula-input [(ngfModel)]="it.mathLabel" ></app-formula-input>
</div> -->
<div *ngIf="customTypeGroupArr[it.gIdx]?.isCopy" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<button nz-button (click)="copyItem(it)" >
<i nz-icon nzType="copy" nzTheme="outline"></i>
复制粘贴
</button>
</div>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<div *ngIf="it.itemType == 'pic'">
......@@ -177,6 +243,7 @@
<!--龙骨面板-->
<!--
<nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzAfterClose)="closeAfterPanel()" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn">
......@@ -222,6 +289,6 @@
提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}}
</div>
</nz-modal>
</nz-modal> -->
......@@ -8,7 +8,7 @@
border: 2px solid #ddd;
.preview-box {
margin: auto;
......@@ -90,12 +90,12 @@ h5 {
}
//
//@font-face
//{
// font-family: 'BRLNSR_1';
// src: url("/assets/font/BRLNSR_1.TTF") ;
//}
@font-face
{
font-family: 'ahronbd-1';
src: url("/assets/font/ahronbd-1.ttf") ;
}
......
......@@ -8,11 +8,20 @@
<!--配置龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件"
<nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterOpen)="openPanel()" (nzAfterClose)="closePanel()" nzTitle="配置资源文件"
(nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<nz-radio-group [ngModel]="animType" (ngModelChange)="animRadioChange($event)" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
<div style="display: flex; ">
<label nz-radio nzValue="dragonBone">龙骨</label>
<label nz-radio nzValue="spine">spine</label>
</div>
</nz-radio-group>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span>
<span *ngIf="animType == 'dragonBone'" style="margin-right: 10px">上传 ske_json 文件: </span>
<span *ngIf="animType == 'spine'" style="margin-right: 10px">上传 json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
......@@ -22,8 +31,9 @@
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData"
<span *ngIf="animType == 'dragonBone'" style="margin-right: 10px">上传 tex_json 文件: </span>
<span *ngIf="animType == 'spine'" style="margin-right: 10px">上传 atlas 文件: </span>
<nz-upload [nzShowUploadList]="false" [nzAccept]="animType == 'dragonBone' ? '.json' : '.atlas'" [nzAction]="uploadUrl" [nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
......@@ -32,7 +42,8 @@
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span>
<span *ngIf="animType == 'dragonBone'" style="margin-right: 10px">上传 tex_png 文件: </span>
<span *ngIf="animType == 'spine'" style="margin-right: 10px">上传 png 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="image/*" [nzAction]="uploadUrl" [nzData]="uploadData"
(nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
......
......@@ -11,7 +11,7 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
uploading = false;
progress = 0;
@Input()
btnName = '配置龙骨动画';
btnName = '配置骨骼动画';
@Input()
animaNames = [];
......@@ -21,32 +21,16 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
texJsonData = {};
@Input()
texPngData = {};
@Input()
animType;
@Output()
save = new EventEmitter();
@Output()
refreshEmitter = new EventEmitter();
// @Input()
// picUrl;
// @Input()
// canDelete = false;
// @Output()
// imageUploaded = new EventEmitter();
// @Output()
// imageUploadFailure = new EventEmitter();
// @Output()
// delete = new EventEmitter();
// @Input()
// picItem = null;
// @Input()
// iconSize = 2;
// @Input()
// TIP = 'Click here to upload image';
// @Input()
// disableUpload = false;
uploadUrl;
uploadData;
......@@ -57,6 +41,11 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
isTexJsonLoading = false;
isTexPngLoading = false;
oldSkeJsonData;
oldTexJsonData;
oldTexPngData;
oldAnimType;
constructor(private appRef: ApplicationRef, private nzMessageService: NzMessageService) {
this.uploadUrl = (<any> window).courseware.uploadUrl();
......@@ -77,12 +66,28 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
this.refresh();
}
openPanel() {
this.oldSkeJsonData = JSON.parse( JSON.stringify(this.skeJsonData) );
this.oldTexJsonData = JSON.parse( JSON.stringify(this.texJsonData));
this.oldTexPngData = JSON.parse( JSON.stringify(this.texPngData));
this.oldAnimType = this.animType;
}
animaPanelCancel() {
console.log("in animaPanelCancel");
this.skeJsonData = this.oldSkeJsonData
this.texJsonData = this.oldTexJsonData
this.texPngData = this.oldTexPngData
this.animType = this.oldAnimType
this.animaPanelVisible = false;
this.refresh();
}
animaPanelOk() {
console.log("in animaPanelOk");
this.sendItemDragonBoneData();
this.animaPanelVisible = false;
this.refresh();
......@@ -93,6 +98,7 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
data['skeJsonData'] = this.skeJsonData;
data['texJsonData'] = this.texJsonData;
data['texPngData'] = this.texPngData;
data['animType'] = this.animType;
this.save.emit(data);
}
......@@ -105,14 +111,8 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
break;
case 'success':
console.log('e.file.response.url',e.file.response.url);
this.skeJsonData = {
'url':e.file.response.url,
'name': e.file.name
};
console.log('json',this.skeJsonData);
// this.skeJsonData['name'] = e.file.name;
this.skeJsonData['url'] = e.file.response.url;
this.skeJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isSkeJsonLoading = false;
break;
......@@ -124,20 +124,14 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
texJsonHandleChange(e) {
console.log('e: ', e);
console.log('this',this);
switch (e.type) {
case 'start':
this.isTexJsonLoading = true;
break;
case 'success':
this.texJsonData = {
'url':e.file.response.url,
'name': e.file.name
};
// this.texJsonData['url'] = e.file.response.url;
// this.texJsonData['name'] = e.file.name;
this.texJsonData['url'] = e.file.response.url;
this.texJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isTexJsonLoading = false;
break;
......@@ -155,13 +149,8 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
break;
case 'success':
this.texPngData = {
'url':e.file.response.url,
'name': e.file.name
};
// this.texPngData['url'] = e.file.response.url;
// this.texPngData['name'] = e.file.name;
this.texPngData['url'] = e.file.response.url;
this.texPngData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isTexPngLoading = false;
break;
......@@ -172,6 +161,11 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
}
animRadioChange(e) {
console.log(" in animRadioChange: ", e);
this.animType = e;
}
/**
* 刷新 渲染页面
......@@ -184,7 +178,6 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
}, 1);
}
closePanel() {
console.log(' in closePanel ');
this.refresh();
......
......@@ -15,6 +15,7 @@
<span style="height: 30px; font-size: 18px;">选项骨骼动画:</span>
<app-upload-dragon-bone [btnName]="[['配置骨骼动画']]" [animaNames]="[[['normal']]]"
[skeJsonData]=page.pageDragonBone.skeJsonData [texJsonData]=page.pageDragonBone.texJsonData
[animType]="page.pageDragonBone.animType || 'dragonBone'"
[texPngData]=page.pageDragonBone.texPngData (save)="savePageDragonBone($event, page.pageDragonBone)"
(refreshEmitter)="refresh()">
</app-upload-dragon-bone>
......
......@@ -159,12 +159,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
group.skeJsonData = e.skeJsonData;
group.texJsonData = e.texJsonData;
group.texPngData = e.texPngData;
group.animType = e.animType;
this.save();
}
savePageDragonBone(e, group) {
group.skeJsonData = e.skeJsonData;
group.texJsonData = e.texJsonData;
group.texPngData = e.texPngData;
group.animType = e.animType;
this.save();
}
......
This diff is collapsed.
......@@ -31,19 +31,22 @@
},
{
"__id__": 14
},
{
"__id__": 17
}
],
"_active": true,
"_components": [
{
"__id__": 17
"__id__": 20
},
{
"__id__": 18
"__id__": 21
}
],
"_prefab": {
"__id__": 19
"__id__": 22
},
"_opacity": 255,
"_color": {
......@@ -312,13 +315,13 @@
},
{
"__type__": "cc.Node",
"_name": "$sprImage",
"_name": "$spine",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": false,
"_active": true,
"_components": [
{
"__id__": 9
......@@ -335,6 +338,121 @@
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"height": 0
},
"_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": ""
},
{
"__type__": "sp.Skeleton",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_materials": [
{
"__uuid__": "7afd064b-113f-480e-b793-8817d19f63c3"
}
],
"paused": false,
"defaultSkin": "",
"defaultAnimation": "",
"_preCacheMode": -1,
"_cacheMode": 0,
"loop": true,
"premultipliedAlpha": true,
"timeScale": 1,
"_accTime": 0,
"_playCount": 0,
"_frameCache": null,
"_curFrame": null,
"_skeletonCache": null,
"_animationName": "",
"_animationQueue": [],
"_headAniInfo": null,
"_playTimes": 0,
"_isAniComplete": true,
"_N$skeletonData": null,
"_N$_defaultCacheMode": 0,
"_N$debugSlots": false,
"_N$debugBones": false,
"_N$debugMesh": false,
"_N$useTint": false,
"_N$enableBatch": false,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "85a50052-bdb8-4fa7-8b04-ee33e303f16f"
},
"fileId": "d1HgpAgDdDKY9l6qCBdKKl",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "$sprImage",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": false,
"_components": [
{
"__id__": 12
}
],
"_prefab": {
"__id__": 13
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 477,
......@@ -379,7 +497,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
"__id__": 11
},
"_enabled": true,
"_materials": [
......@@ -426,11 +544,11 @@
"_active": false,
"_components": [
{
"__id__": 12
"__id__": 15
}
],
"_prefab": {
"__id__": 13
"__id__": 16
},
"_opacity": 255,
"_color": {
......@@ -484,7 +602,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 11
"__id__": 14
},
"_enabled": true,
"_fontFamily": "Arial",
......@@ -524,11 +642,11 @@
"_active": false,
"_components": [
{
"__id__": 15
"__id__": 18
}
],
"_prefab": {
"__id__": 16
"__id__": 19
},
"_opacity": 255,
"_color": {
......@@ -582,7 +700,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 14
"__id__": 17
},
"_enabled": true,
"_fontFamily": "Arial",
......@@ -622,6 +740,9 @@
"dragonBone": {
"__id__": 6
},
"skeleton": {
"__id__": 9
},
"_id": ""
},
{
......
......@@ -121,24 +121,30 @@
},
{
"__id__": 71
},
{
"__id__": 73
},
{
"__id__": 75
}
],
"_active": true,
"_components": [
{
"__id__": 73
"__id__": 77
},
{
"__id__": 74
"__id__": 78
},
{
"__id__": 75
"__id__": 79
},
{
"__id__": 76
"__id__": 80
},
{
"__id__": 77
"__id__": 81
}
],
"_prefab": null,
......@@ -3669,6 +3675,194 @@
"_atlas": null,
"_id": "9bhXN0utBB7rbbxZ+pfdnE"
},
{
"__type__": "cc.Node",
"_name": "left_arrow",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 74
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 124,
"height": 128
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-573.506,
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": "cf9ky3xqVDGqllJioK4q4P"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 73
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "4054aeea-5ce1-42d0-a5ab-906386cf9b1b"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "9eq6yiZi5PP4QvnNwFq2fM"
},
{
"__type__": "cc.Node",
"_name": "right_arrow",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 76
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 122,
"height": 130
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
573.506,
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": "19XRFgN2dGJb2bHJQA/y4u"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 75
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "2efdbe43-b4fd-4b2f-b281-290b0013cf19"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "06n40lTnFFMIVZfYeCXMJv"
},
{
"__type__": "cc.Canvas",
"_name": "",
......@@ -3757,7 +3951,7 @@
"__id__": 71
},
"capture": {
"__id__": 77
"__id__": 81
},
"_id": "76pKAVQpBDVby2iIHB3LLz"
},
......
const saveKey = "DataKey_Cocos_FT14";
const BaseUI = require('BaseUI');
import { DefaultData } from '../script/DefaultData';
import { onHomeworkFinish } from "../script/utils";
import { jelly, onHomeworkFinish } from "../script/utils";
const POS = {
LeftPage: { x: -239, y: -5 },
......@@ -85,7 +85,9 @@ cc.Class({
getDefaultData() {
let data = DefaultData;
return data;
// return data;
return {"haveCover":false,"coverType":"Image","coverImage":"","coverAudio":"","coverText":"","coverDragonBone":{"skeJsonData":{"url":""},"texJsonData":{"url":""},"texPngData":{"url":""}},"titleAudio":"","titleText":"","titleTextColor":"A","pageList":[{"pageType":"Image","pageAudio":"http://staging-teach.cdn.ireadabc.com/cc5b1a8730bc275ecac85185d5ce2c5b.mp3","pageText":"","pageImage":"","textColor":"A","pageDragonBone":{"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/679fed26daa464819d553de6331b3552.json","name":"alien-pro.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/65d8214c6b5c5d0496e17adb0408276a.atlas","name":"alien-pro.atlas"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/a319b372899239325b90bb4ec07b4970.png","name":"alien-pro.png"},"animType":"spine"}},{"pageType":"Image","pageAudio":"http://staging-teach.cdn.ireadabc.com/fd877ad376fdffdb0dfc62122065a78f.mp3","pageText":"","pageImage":"","textColor":"A","pageDragonBone":{"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/d1f859d3fba84bd03565e543c986fb28.json","name":"6_4_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/70f96e1cc7f013e27ed1952c503fb750.json","name":"6_4_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/b06f9b90018a6eb0175a01e355b9ced6.png","name":"6_4_tex.png"},"animType":"dragonBone"}},{"pageType":"Image","pageAudio":"http://staging-teach.cdn.ireadabc.com/dff6748c93f6bf3de8cb7105fa9ba5de.mp3","pageText":"","pageImage":"","textColor":"A","pageDragonBone":{"skeJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/a278a56fe77dfade7366829e9c65c815.json","name":"6_3_ske.json"},"texJsonData":{"url":"http://staging-teach.cdn.ireadabc.com/96680527a570cec4d7c9818c91ec434a.json","name":"6_3_tex.json"},"texPngData":{"url":"http://staging-teach.cdn.ireadabc.com/5c441810b0a5bc73248c50d8c32b4899.png","name":"6_3_tex.png"},"animType":"dragonBone"}}]}
},
preloadItem() {
......@@ -203,11 +205,33 @@ cc.Class({
startGame() {
// this.playAudioEntrer();
this.initPageUI();
this.initArrowBtn();
this.initPages().then(() => {
this.updateBtnStatus();
this.autoPlay();
});
},
initArrowBtn() {
const lastBtn = this.lastBtn = cc.find("Canvas/left_arrow");
const nextBtn = this.nextBtn = cc.find("Canvas/right_arrow");
lastBtn.on("touchstart", () => {
const isSuccess = this.onTouchPanelLeft();
isSuccess && jelly(lastBtn);
})
nextBtn.on("touchstart", () => {
const isSuccess = this.onTouchPanelRight();
isSuccess && jelly(nextBtn);
})
},
checkShowArrowBtn() {
setTimeout(() => {
this.lastBtn.active = !this.nodeDict.btnLast.children[1].active;
this.nextBtn.active = !this.nodeDict.btnNext.children[1].active;
}, 220);
},
autoPlay() {
//自动开始播放动画,及触发动画效果
this.inited = false;
......@@ -318,28 +342,30 @@ cc.Class({
onTouchPanelLeft() {
if (this.isTruning) {
return;
return false;
}
if (GameData.isPlaying) {
return;
return false;
}
this.onTurnLast();
this._timeoutIds.push(setTimeout(() => {
this.autoPlay();
}, 1000));
return true;
},
onTouchPanelRight() {
if (this.isTruning) {
return;
return false;
}
if (GameData.isPlaying) {
return;
return false;
}
this.onTurnNext();
this._timeoutIds.push(setTimeout(() => {
this.autoPlay();
}, 1000));
return true;
},
......@@ -399,6 +425,7 @@ cc.Class({
} else {
this.nodeDict.btnNext.children[1].active = false;
}
this.checkShowArrowBtn();
},
checkCover() {
......
const { loadSpine } = require('./utils');
const colorMap = {
"A": ["#1f356b", "#ffffff", "#bd2c37"],
"B": ["#fff8d0", "#000000", "#ffb93b"]
......@@ -7,6 +9,7 @@ cc.Class({
properties: {
dragonBone: dragonBones.ArmatureDisplay,
skeleton: sp.Skeleton
},
onLoad() {
......@@ -24,19 +27,42 @@ cc.Class({
this.isCover = isCover;
this.labText.string = '';
this.labTextTitle.string = '';
this.loadSpine().then(() => {
resolve('');
})
if (this.data.pageDragonBone.animType == 'spine') {
this.loadSpineAnim().then(() => {
resolve('');
})
} else {
this.loadDragonBoneAnim().then(() => {
resolve('');
})
}
});
},
playSpine() {
return new Promise((resolve, reject) => {
this.dragonBone.playAnimation(this.animationName, 1);
this.dragonBone.on(dragonBones.EventObject.COMPLETE, (evt) => {
GameData.isPlaying = false;
resolve('');
});
if (this.data.pageDragonBone.animType == 'spine') {
const skeleton = this.skeleton;
skeleton.setToSetupPose();
setTimeout(() => {
skeleton.setAnimation(0, this.animationName, false);
skeleton.setCompleteListener(() => {
GameData.isPlaying = false;
resolve('');
})
}, 1);
} else {
this.dragonBone.playAnimation(this.animationName, 1);
this.dragonBone.on(dragonBones.EventObject.COMPLETE, (evt) => {
GameData.isPlaying = false;
resolve('');
});
}
});
},
......@@ -64,7 +90,31 @@ cc.Class({
this.setBgScale();
})
},
loadSpine() {
loadSpineAnim() {
return new Promise((resolve, reject) => {
const tex = this.data.pageDragonBone.texPngData.url;
const atlas = this.data.pageDragonBone.texJsonData.url;
const ske = this.data.pageDragonBone.skeJsonData.url;
loadSpine(this.skeleton, this.data.pageDragonBone.texPngData.name, {tex, atlas, ske}).then(({width, height}) => {
this.skeleton.node.width = width;
this.skeleton.node.height = height;
resolve('');
this.animationName = this.skeleton.animationNames[0];
console.log('width: ', this.skeleton.node.width);
console.log('height~~~: ', this.skeleton.node.height);
console.log('this.skeleton.node: ', this.skeleton.node);
this.setSpineScale(this.skeleton.node, this.skeleton.node);
})
});
},
loadDragonBoneAnim() {
return new Promise((resolve, reject) => {
var imageUrl = this.data.pageDragonBone.texPngData.url;
var skeUrl = this.data.pageDragonBone.skeJsonData.url;
......@@ -92,7 +142,10 @@ cc.Class({
// this.dragonBone.premultipliedAlpha = true;
// atlas.texture.setPremultiplyAlpha(true);
this.setSpineScale(data.canvas);
console.log('data.canvas:', data.canvas);
this.setSpineScale(data.canvas, this.dragonBone.node);
return resolve('');
});
});
......@@ -113,7 +166,7 @@ cc.Class({
}
}
},
setSpineScale(size) {
setSpineScale(size, node) {
// return;
if (!size) {
return;
......@@ -124,9 +177,9 @@ cc.Class({
let designScale = bgWidth / bgHeight;
let scale = size.width / size.height;
if (scale > designScale) {
this.dragonBone.node.scale = bgWidth / size.width;
node.scale = bgWidth / size.width;
} else {
this.dragonBone.node.scale = bgHeight / size.height;
node.scale = bgHeight / size.height;
}
}
},
......
......@@ -197,6 +197,70 @@ async function rabbonFall(node) {
await asyncTweenBy(node, time, { x: offsetX, angle: offsetX * 60 / 200 });
rabbonFall(node);
}
export function loadSpine(skeleton, picName, {tex, atlas, ske}) {
return new Promise((resolve, reject) => {
// cc.loader.load({ url: tex, type: 'png' }, (error, texture) => {
cc.assetManager.loadRemote(tex, (error, texture) => {
if (error) {
reject();
return;
}
// cc.loader.load({ url: atlas, type: 'txt' }, (error, atlasJson) => {
cc.assetManager.loadAny({ url: atlas }, (error, atlasJson) => {
if (error) {
reject();
return;
}
// cc.loader.load({ url: ske, type: 'txt' }, (error, dragonBonesJson) => {
cc.assetManager.loadAny({ url: ske }, (error, dragonBonesJson) => {
if (error) {
reject();
return;
}
var asset = new sp.SkeletonData();
asset._uuid = ske;
asset.skeletonJson = JSON.stringify( dragonBonesJson );
asset.atlasText = atlasJson;
asset.textures = [texture];
asset.textureNames = [picName];
console.log('picName: ', picName);
skeleton.skeletonData = asset;
const jsonObj = dragonBonesJson //JSON.parse( assets[1]);
const animationNameObj = jsonObj.animations;
let animationNames = [];
for (let name in animationNameObj) {
console.log('name~~: ', name);
animationNames.push(name);
}
console.log("skeleton.animation: ", skeleton.animation);
skeleton.animationNames = animationNames;
skeleton.loop = false;
console.log("jsonObj : ", jsonObj)
console.log("jsonObj['skeleton'] : ", jsonObj['skeleton'])
resolve(jsonObj['skeleton']);
});
});
});
});
}
export function onHomeworkFinish() {
const middleLayer = cc.find('middleLayer');
if (middleLayer) {
......
{
"ver": "2.3.5",
"uuid": "eeaecb8d-8dd7-4e74-85b3-1cecfbdcafac",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 124,
"height": 128,
"platformSettings": {},
"subMetas": {
"left_arrow": {
"ver": "1.0.4",
"uuid": "4054aeea-5ce1-42d0-a5ab-906386cf9b1b",
"rawTextureUuid": "eeaecb8d-8dd7-4e74-85b3-1cecfbdcafac",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 124,
"height": 128,
"rawWidth": 124,
"rawHeight": 128,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "df459e67-251a-434b-b024-aa5389ad7425",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 122,
"height": 130,
"platformSettings": {},
"subMetas": {
"right_arrow": {
"ver": "1.0.4",
"uuid": "2efdbe43-b4fd-4b2f-b281-290b0013cf19",
"rawTextureUuid": "df459e67-251a-434b-b024-aa5389ad7425",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 122,
"height": 130,
"rawWidth": 122,
"rawHeight": 130,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
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