Commit ed971814 authored by Seaborn Lee's avatar Seaborn Lee

refactor: extract BaseBgManager

parent 458d3c90
......@@ -7,4 +7,5 @@
/publish/publish/android
/publish/publish/ios
/publish/publish/*.zip
/node_modules
\ No newline at end of file
/node_modulestags
tags
{
"ver": "1.2.7",
"ver": "1.2.9",
"uuid": "57ea7c61-9b8b-498a-b024-c98ee9124beb",
"asyncLoadAssets": false,
"autoReleaseAssets": true,
......
import { defaultData } from '../script/defaultData';
import { asyncDelay, jelly } from '../script/utils';
import { letterData, letterWidthData } from '../script/letterPointData';
import BgManager from "../script/BgManager"
import { defaultData } from "../script/defaultData";
import { asyncDelay, jelly } from "../script/utils";
import { letterData, letterWidthData } from "../script/letterPointData";
import BgManager from "../script/BgManager";
cc.Class({
extends: cc.Component,
......@@ -70,7 +70,6 @@ cc.Class({
this.initSize();
},
_designSize: null,
_frameSize: null,
_mapScaleMin: null,
......@@ -78,14 +77,15 @@ cc.Class({
_cocosScale: null,
canvas: null,
initSize() {
// 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小
let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height
let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height
let f = screen_size >= design_size
cc.Canvas.instance.fitHeight = f
cc.Canvas.instance.fitWidth = !f
let screen_size =
cc.view.getFrameSize().width / cc.view.getFrameSize().height;
let design_size =
cc.Canvas.instance.designResolution.width /
cc.Canvas.instance.designResolution.height;
let f = screen_size >= design_size;
cc.Canvas.instance.fitHeight = f;
cc.Canvas.instance.fitWidth = !f;
const frameSize = cc.view.getFrameSize();
this._frameSize = frameSize;
......@@ -101,8 +101,7 @@ cc.Class({
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
this.canvas = cc.find('Canvas');
this.canvas = cc.find("Canvas");
// cc.log('cc.Canvas: ', cc.Canvas);
},
......@@ -124,10 +123,10 @@ cc.Class({
}
getData((data) => {
console.log('data:', data);
console.log("data:", data);
this.data = data || this.getDefaultData();
this.data = JSON.parse(JSON.stringify(this.data))
this.preloadItem()
this.data = JSON.parse(JSON.stringify(this.data));
this.preloadItem();
});
},
......@@ -136,7 +135,7 @@ cc.Class({
},
getDefaultData() {
console.log('defaultData = ' + defaultData);
console.log("defaultData = " + defaultData);
return defaultData;
},
......@@ -155,12 +154,12 @@ cc.Class({
// this._audioResList.push({ url: this.data.audio_url });
},
addPreloadAnima() {
},
addPreloadAnima() {},
preload() {
const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList);
const preloadArr = this._imageResList
.concat(this._audioResList)
.concat(this._animaResList);
cc.assetManager.loadAny(preloadArr, null, null, (err, data) => {
this.loadEnd();
if (window && window["air"]) {
......@@ -176,7 +175,7 @@ cc.Class({
this.initView();
this.initListener();
console.log('version: ET_07');
console.log("version: ET_07");
// this.showLetterAnimation();
this.startEditMode();
......@@ -195,14 +194,11 @@ cc.Class({
// }
},
initAudio() {
},
initAudio() {},
debugMode: false,
letter: null,
initView() {
this.initBg();
// this.debugMode = this.data.debugMode;
// this.debugMode = true;
......@@ -211,14 +207,18 @@ cc.Class({
bgManager: null,
initBg() {
this.bgManager = new BgManager(this.canvas.width, this.canvas.height, this._mapScaleMin, this._mapScaleMax);
this.bgManager = new BgManager();
this.bgManager.setContext({
bgWidth: this.canvas.width,
bgHeight: this.canvas.height,
mapScaleMin: this._mapScaleMin,
mapScaleMax: this._mapScaleMax,
});
const bg = this.bgManager.getNext();
this.canvas.addChild(bg);
},
setLetter(letter) {
this.letter = letter;
......@@ -226,7 +226,7 @@ cc.Class({
this.addDrawLetter(this.letter);
cc.find('Canvas').on('size-changed', () => {
cc.find("Canvas").on("size-changed", () => {
this.onSizeChanged();
});
this.onSizeChanged();
......@@ -235,23 +235,26 @@ cc.Class({
onSizeChanged() {
this.node.getComponent(cc.Widget).updateAlignment();
const currentSize = { width: this.node.width, height: this.node.height };
console.log('currentSize = ' + JSON.stringify(currentSize));
console.log("currentSize = " + JSON.stringify(currentSize));
const frameSize = cc.view.getFrameSize();
console.log('frameSize = ' + JSON.stringify(frameSize));
console.log("frameSize = " + JSON.stringify(frameSize));
const designSize = cc.view.getDesignResolutionSize();
console.log('designSize = ' + JSON.stringify(designSize));
console.log("designSize = " + JSON.stringify(designSize));
const letterBg = cc.find('Canvas/bg/Img_letter_bg');
const letterBg = cc.find("Canvas/bg/Img_letter_bg");
const scale = (designSize.width / designSize.height) / (frameSize.width / frameSize.height);
const scale =
designSize.width /
designSize.height /
(frameSize.width / frameSize.height);
letterBg.scale = Math.min(scale, 1);
},
updateLetterBtnLabel() {
const label1 = cc.find('Canvas/bg/BtnSmallLetter/Img_selected/label');
const label2 = cc.find('Canvas/bg/BtnSmallLetter/Img_normal/label');
const label3 = cc.find('Canvas/bg/BtnBigLetter/Img_selected/label');
const label4 = cc.find('Canvas/bg/BtnBigLetter/Img_normal/label');
const label1 = cc.find("Canvas/bg/BtnSmallLetter/Img_selected/label");
const label2 = cc.find("Canvas/bg/BtnSmallLetter/Img_normal/label");
const label3 = cc.find("Canvas/bg/BtnBigLetter/Img_selected/label");
const label4 = cc.find("Canvas/bg/BtnBigLetter/Img_normal/label");
label1.getComponent(cc.Label).string = this.letter.toLowerCase();
label2.getComponent(cc.Label).string = this.letter.toLowerCase();
......@@ -265,8 +268,16 @@ cc.Class({
const distance = this.getDistance(line.startPos, line.endPos);
if (distance > maxLength) {
const middlePoint = this.getMiddlePoint(line.startPos, line.endPos);
newposList.push({ type: 'Line', startPos: line.startPos, endPos: middlePoint });
newposList.push({ type: 'Line', startPos: middlePoint, endPos: line.endPos });
newposList.push({
type: "Line",
startPos: line.startPos,
endPos: middlePoint,
});
newposList.push({
type: "Line",
startPos: middlePoint,
endPos: line.endPos,
});
} else {
newposList.push(line);
}
......@@ -348,7 +359,7 @@ cc.Class({
},
addDrawLetter(letter) {
const letterBaseNode = cc.find('Canvas/bg/Img_letter_bg');
const letterBaseNode = cc.find("Canvas/bg/Img_letter_bg");
letterBaseNode.removeAllChildren();
const letterBg = cc.instantiate(cc.find(`Img_letter_bg`));
letterBg.x = 0;
......@@ -358,11 +369,11 @@ cc.Class({
letterBg.name = `Img_letter_bg_${letter}`;
letterBg.addComponent(cc.Button);
letterBg.on('click', () => {
letterBg.on("click", () => {
this.showLetterAnimation();
});
let letterName = '';
let letterName = "";
if (letter == letter.toLowerCase()) {
letterName = `small_${letter}`;
} else {
......@@ -371,11 +382,11 @@ cc.Class({
const letterNode = cc.find(`letters/Img_letter_${letterName}`);
const sf = letterNode.getComponent(cc.Sprite).spriteFrame;
const mask = cc.find('LetterMask', letterBg);
const mask = cc.find("LetterMask", letterBg);
const maskComponent = mask.getComponent(cc.Mask);
maskComponent.spriteFrame = sf;
const bg = cc.find('LetterMask/bg', letterBg);
const bg = cc.find("LetterMask/bg", letterBg);
bg.active = true;
bg.opacity = 255;
......@@ -387,16 +398,16 @@ cc.Class({
},
initListener() {
console.log('initListener');
console.log("initListener");
const title = cc.find('Canvas/bg/title');
const title = cc.find("Canvas/bg/title");
title.addComponent(cc.Button);
title.on('click', () => {
title.on("click", () => {
cc.audioEngine.play(this.titleAudio, false, 0.8);
});
const BtnBigLetter = cc.find('Canvas/bg/BtnBigLetter');
const BtnSmallLetter = cc.find('Canvas/bg/BtnSmallLetter');
const BtnBigLetter = cc.find("Canvas/bg/BtnBigLetter");
const BtnSmallLetter = cc.find("Canvas/bg/BtnSmallLetter");
// const bgBtn = cc.find('Canvas/bg/Img_letter_bg');
// console.log('bgBtn = ' + bgBtn);
......@@ -405,11 +416,11 @@ cc.Class({
// this.showLetterAnimation();
// });
BtnBigLetter.on('click', () => {
BtnBigLetter.getChildByName('Img_normal').active = false;
BtnSmallLetter.getChildByName('Img_normal').active = true;
BtnBigLetter.getChildByName('Img_selected').active = true;
BtnSmallLetter.getChildByName('Img_selected').active = false;
BtnBigLetter.on("click", () => {
BtnBigLetter.getChildByName("Img_normal").active = false;
BtnSmallLetter.getChildByName("Img_normal").active = true;
BtnBigLetter.getChildByName("Img_selected").active = true;
BtnSmallLetter.getChildByName("Img_selected").active = false;
jelly(BtnBigLetter);
......@@ -420,11 +431,11 @@ cc.Class({
this._writingIdx++;
this.startEditMode();
});
BtnSmallLetter.on('click', () => {
BtnBigLetter.getChildByName('Img_normal').active = true;
BtnSmallLetter.getChildByName('Img_normal').active = false;
BtnBigLetter.getChildByName('Img_selected').active = false;
BtnSmallLetter.getChildByName('Img_selected').active = true;
BtnSmallLetter.on("click", () => {
BtnBigLetter.getChildByName("Img_normal").active = true;
BtnSmallLetter.getChildByName("Img_normal").active = false;
BtnBigLetter.getChildByName("Img_selected").active = false;
BtnSmallLetter.getChildByName("Img_selected").active = true;
jelly(BtnSmallLetter);
......@@ -436,8 +447,8 @@ cc.Class({
this.startEditMode();
});
const btnBack = cc.find('Canvas/EditModeNode/BtnBack');
btnBack.on('click', () => {
const btnBack = cc.find("Canvas/EditModeNode/BtnBack");
btnBack.on("click", () => {
const posList = this.letterPosList[this.letter];
const lastPen = posList[posList.length - 1];
if (lastPen && lastPen.length > 0) {
......@@ -449,19 +460,19 @@ cc.Class({
}
this.updateEditMode();
});
const btnNext = cc.find('Canvas/EditModeNode/BtnNext');
btnNext.on('click', () => {
const btnNext = cc.find("Canvas/EditModeNode/BtnNext");
btnNext.on("click", () => {
const posList = this.letterPosList[this.letter];
posList.push([]);
this.updateEditMode();
});
const btnShow = cc.find('Canvas/EditModeNode/BtnShow');
btnShow.on('click', () => {
const btnShow = cc.find("Canvas/EditModeNode/BtnShow");
btnShow.on("click", () => {
this.showLetterAnimation();
});
const btnSave = cc.find('Canvas/EditModeNode/BtnSave');
btnSave.on('click', () => {
const btnSave = cc.find("Canvas/EditModeNode/BtnSave");
btnSave.on("click", () => {
const posList = this.letterPosList[this.letter];
console.log(JSON.stringify(posList));
});
......@@ -471,9 +482,13 @@ cc.Class({
async showLetterAnimation() {
this._writingIdx++;
const writingIdx = this._writingIdx;
console.log('set writingIdx = ' + writingIdx);
cc.find(`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/bg`).active = false;
const drawNode = cc.find(`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/DrawNode`);
console.log("set writingIdx = " + writingIdx);
cc.find(
`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/bg`
).active = false;
const drawNode = cc.find(
`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/DrawNode`
);
const graph = drawNode.getComponent(cc.Graphics);
graph.clear();
......@@ -481,13 +496,19 @@ cc.Class({
const lineList = this.getLineList(posList);
for (const pen of lineList) {
for (const line of pen) {
this.drawALineLast(drawNode, line.startPos, line.endPos, cc.color(181, 39, 48), writingIdx);
this.drawALineLast(
drawNode,
line.startPos,
line.endPos,
cc.color(181, 39, 48),
writingIdx
);
await asyncDelay(0.02);
}
await asyncDelay(0.1);
}
console.log('writingIdx = ' + writingIdx);
console.log('this._writingIdx = ' + this._writingIdx);
console.log("writingIdx = " + writingIdx);
console.log("this._writingIdx = " + this._writingIdx);
if (writingIdx == this._writingIdx) {
const audioClip = this[`small${this.letter.toUpperCase()}`];
cc.audioEngine.play(audioClip, false, 0.8);
......@@ -506,12 +527,16 @@ cc.Class({
if (!this.debugMode) {
return;
}
cc.find('Canvas/EditModeNode').active = true;
cc.find("Canvas/EditModeNode").active = true;
this.editMode = true;
cc.find(`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/bg`).active = true;
const drawNode = cc.find(`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/DrawNode`);
cc.find(
`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/bg`
).active = true;
const drawNode = cc.find(
`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/DrawNode`
);
drawNode.addComponent(cc.Button);
drawNode.on('touchstart', (event) => {
drawNode.on("touchstart", (event) => {
const touchLocation = event.getLocation();
const pos = drawNode.convertToNodeSpaceAR(touchLocation);
const posList = this.letterPosList[this.letter];
......@@ -521,7 +546,7 @@ cc.Class({
posList[posList.length - 1].push(pos);
this.updateEditMode();
});
drawNode.on('touchmove', (event) => {
drawNode.on("touchmove", (event) => {
const touchLocation = event.getLocation();
const pos = drawNode.convertToNodeSpaceAR(touchLocation);
const posList = this.letterPosList[this.letter];
......@@ -541,14 +566,14 @@ cc.Class({
if (idx < newPen.length - 1) {
newLine.push({
startPos: pos,
endPos: newPen[idx + 1]
endPos: newPen[idx + 1],
});
}
});
if (pen.length == 1) {
newLine.push({
startPos: pen[0],
endPos: cc.v2(pen[0].x, pen[0].y + 0.001)
endPos: cc.v2(pen[0].x, pen[0].y + 0.001),
});
}
lineList.push(newLine);
......@@ -557,15 +582,22 @@ cc.Class({
},
updateEditMode() {
const drawNode = cc.find(`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/DrawNode`);
const graph = drawNode.getComponent(cc.Graphics)
const drawNode = cc.find(
`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/DrawNode`
);
const graph = drawNode.getComponent(cc.Graphics);
graph.clear();
const posList = this.letterPosList[this.letter];
const lineList = this.getLineList(posList);
for (const pen of lineList) {
for (const line of pen) {
this.drawALine(drawNode, line.startPos, line.endPos, cc.color(0, 0, 255));
this.drawALine(
drawNode,
line.startPos,
line.endPos,
cc.color(0, 0, 255)
);
}
}
posList.forEach((pen, i) => {
......@@ -575,7 +607,9 @@ cc.Class({
if (i == posList.length - 1) {
color = cc.color(255, 0, 0);
}
const idx = pen.findIndex(penPos => penPos.x == pos.x && penPos.y == pos.y);
const idx = pen.findIndex(
(penPos) => penPos.x == pos.x && penPos.y == pos.y
);
if (idx == -1) {
this.drawSmallDot(drawNode, pos, color);
} else {
......@@ -583,5 +617,5 @@ cc.Class({
}
}
});
}
},
});
cc.Class({
properties: {
_context: null,
},
setContext(ctx) {
this._context = ctx;
},
ctor() {},
toTop(item) {
item.y = this._context.bgHeight / 2;
item.anchorY = 1;
item.scale = this._context.bgWidth / item.width;
},
toBottom(item) {
item.y = -this._context.bgHeight / 2;
item.anchorY = 0;
item.scale = this._context.bgWidth / item.width;
},
toLeft(item) {
item.x = -this._context.bgWidth / 2;
item.anchorX = 0;
item.scale = this._context.bgHeight / item.height;
},
toRight(item) {
item.x = this._context.bgWidth / 2;
item.anchorX = 1;
item.scale = this._context.bgHeight / item.height;
},
});
{
"ver": "1.0.8",
"uuid": "0520cb4a-1cc8-4344-9355-72fa942c91b7",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
import {getSprNode} from "./util"
import { getSprNode } from "./util";
import BaseBgManager from "./BaseBgManager";
cc.Class({
extends: BaseBgManager,
properties: {
bgArr: {
default: []
default: [],
},
_bgWidth: 0,
_bgHeight: 0,
_mapScaleMin: 1,
_mapScaleMax: 1,
},
ctor(width, height, mapScaleMin, mapScaleMax) {
this._bgWidth = width;
this._bgHeight = height;
this._mapScaleMin = mapScaleMin;
this._mapScaleMax = mapScaleMax;
this.initAllBg();
},
initAllBg() {
for( let i=0; i<5; i++) {
const bg = this.initOneBg(i+1);
for (let i = 0; i < 5; i++) {
const bg = this.initOneBg(i + 1);
this.bgArr.push(bg);
}
},
initOneBg(id) {
const bg = getSprNode("bg/"+id+"/bg_"+id);
bg.scale = this._mapScaleMax;
const bg = getSprNode("bg/" + id + "/bg_" + id);
bg.scale = this._context.mapScaleMax;
const bgItemLayer = new cc.Node();
bgItemLayer.scale = 1 / bg.scale;
bg.addChild(bgItemLayer);
const itemTop = getSprNode("bg/"+id+"/bg_top"+id)
const itemTop = getSprNode("bg/" + id + "/bg_top" + id);
bgItemLayer.addChild(itemTop, 1);
itemTop.y = this._bgHeight / 2;
itemTop.anchorY = 1;
itemTop.scale = this._bgWidth / itemTop.width;
this.toTop(itemTop);
const itemBottom = getSprNode("bg/"+id+"/bg_bottom"+id)
const itemBottom = getSprNode("bg/" + id + "/bg_bottom" + id);
bgItemLayer.addChild(itemBottom, 1);
itemBottom.y = -this._bgHeight / 2;
itemBottom.anchorY = 0;
itemBottom.scale = this._bgWidth / itemBottom.width;
this.toBottom(itemBottom);
const item = getSprNode("bg/"+id+"/bg_dian"+id)
const item = getSprNode("bg/" + id + "/bg_dian" + id);
bgItemLayer.addChild(item);
item.x = -this._bgWidth / 10 * 4;
item.y = -this._bgHeight / 6;
item.scale = this._mapScaleMin;
item.x = (-this._context.bgWidth / 10) * 4;
item.y = -this._context.bgHeight / 6;
item.scale = this._context.mapScaleMin;
if (id == 4) {
itemTop.scale = this._context.mapScaleMin;
itemTop.scale = this._mapScaleMin;
const itemLeft = getSprNode("bg/"+id+"/bg_left")
const itemLeft = getSprNode("bg/" + id + "/bg_left");
bgItemLayer.addChild(itemLeft);
itemLeft.x = -this._bgWidth / 2;
itemLeft.anchorX = 0;
itemLeft.scale = this._bgHeight / itemLeft.height;
this.toLeft(itemLeft);
const itemRight = getSprNode("bg/"+id+"/bg_right")
const itemRight = getSprNode("bg/" + id + "/bg_right");
bgItemLayer.addChild(itemRight);
itemRight.x = this._bgWidth / 2;
itemRight.anchorX = 1;
itemRight.scale = this._bgHeight / itemRight.height;
this.toRight(itemRight);
}
return bg;
},
getNext () {
return this.bgArr[3];
getNext() {
if (this.bgArr.length === 0) {
this.initAllBg();
}
})
\ No newline at end of file
return this.bgArr[3];
},
});
......@@ -3,6 +3,6 @@
"packages": "packages",
"name": "play",
"id": "9af72fd2-44a6-4131-8ea3-3e1b3fa22231",
"version": "2.4.0",
"version": "2.4.4",
"isNew": false
}
\ No newline at end of file
{
"last-module-event-record-time": 1600677246969
"last-module-event-record-time": 1600677246969,
"migrate-history": [
"cloud-function"
]
}
{
"game": {
"name": "未知游戏",
"name": "UNKNOW GAME",
"appid": "UNKNOW"
}
}
\ 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