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,
properties: {
switchAudio: { default: null, type: cc.AudioClip },
titleAudio: { default: null, type: cc.AudioClip },
bigA: { default: null, type: cc.AudioClip },
bigB: { default: null, type: cc.AudioClip },
bigC: { default: null, type: cc.AudioClip },
bigD: { default: null, type: cc.AudioClip },
bigE: { default: null, type: cc.AudioClip },
bigF: { default: null, type: cc.AudioClip },
bigG: { default: null, type: cc.AudioClip },
bigH: { default: null, type: cc.AudioClip },
bigI: { default: null, type: cc.AudioClip },
bigJ: { default: null, type: cc.AudioClip },
bigK: { default: null, type: cc.AudioClip },
bigL: { default: null, type: cc.AudioClip },
bigM: { default: null, type: cc.AudioClip },
bigN: { default: null, type: cc.AudioClip },
bigO: { default: null, type: cc.AudioClip },
bigP: { default: null, type: cc.AudioClip },
bigQ: { default: null, type: cc.AudioClip },
bigR: { default: null, type: cc.AudioClip },
bigS: { default: null, type: cc.AudioClip },
bigT: { default: null, type: cc.AudioClip },
bigU: { default: null, type: cc.AudioClip },
bigV: { default: null, type: cc.AudioClip },
bigW: { default: null, type: cc.AudioClip },
bigX: { default: null, type: cc.AudioClip },
bigY: { default: null, type: cc.AudioClip },
bigZ: { default: null, type: cc.AudioClip },
smallA: { default: null, type: cc.AudioClip },
smallB: { default: null, type: cc.AudioClip },
smallC: { default: null, type: cc.AudioClip },
smallD: { default: null, type: cc.AudioClip },
smallE: { default: null, type: cc.AudioClip },
smallF: { default: null, type: cc.AudioClip },
smallG: { default: null, type: cc.AudioClip },
smallH: { default: null, type: cc.AudioClip },
smallI: { default: null, type: cc.AudioClip },
smallJ: { default: null, type: cc.AudioClip },
smallK: { default: null, type: cc.AudioClip },
smallL: { default: null, type: cc.AudioClip },
smallM: { default: null, type: cc.AudioClip },
smallN: { default: null, type: cc.AudioClip },
smallO: { default: null, type: cc.AudioClip },
smallP: { default: null, type: cc.AudioClip },
smallQ: { default: null, type: cc.AudioClip },
smallR: { default: null, type: cc.AudioClip },
smallS: { default: null, type: cc.AudioClip },
smallT: { default: null, type: cc.AudioClip },
smallU: { default: null, type: cc.AudioClip },
smallV: { default: null, type: cc.AudioClip },
smallW: { default: null, type: cc.AudioClip },
smallX: { default: null, type: cc.AudioClip },
smallY: { default: null, type: cc.AudioClip },
smallZ: { default: null, type: cc.AudioClip },
},
// 生命周期 onLoad
onLoad() {
this.initSceneData();
this.initSize();
},
_designSize: null,
_frameSize: null,
_mapScaleMin: null,
_mapScaleMax: null,
_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
const frameSize = cc.view.getFrameSize();
this._frameSize = frameSize;
this._designSize = cc.view.getDesignResolutionSize();
let sx = cc.winSize.width / frameSize.width;
let sy = cc.winSize.height / frameSize.height;
this._cocosScale = Math.min(sx, sy);
sx = frameSize.width / this._designSize.width;
sy = frameSize.height / this._designSize.height;
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
this.canvas = cc.find('Canvas');
// cc.log('cc.Canvas: ', cc.Canvas);
},
_imageResList: null,
_audioResList: null,
_animaResList: null,
initSceneData() {
this._imageResList = [];
this._audioResList = [];
this._animaResList = [];
},
// 生命周期 start
start() {
let getData = this.getData.bind(this);
if (window && window.courseware) {
getData = window.courseware.getData;
}
getData((data) => {
console.log('data:', data);
this.data = data || this.getDefaultData();
this.data = JSON.parse(JSON.stringify(this.data))
this.preloadItem()
});
},
getData(cb) {
cb(this.getDefaultData());
},
getDefaultData() {
console.log('defaultData = ' + defaultData);
return defaultData;
},
preloadItem() {
this.addPreloadImage();
this.addPreloadAudio();
this.addPreloadAnima();
this.preload();
},
addPreloadImage() {
// this._imageResList.push({ url: this.data.pic_url });
},
addPreloadAudio() {
// this._audioResList.push({ url: this.data.audio_url });
},
addPreloadAnima() {
},
preload() {
const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList);
cc.assetManager.loadAny(preloadArr, null, null, (err, data) => {
this.loadEnd();
if (window && window["air"]) {
window["air"].hideAirClassLoading();
}
cc.debug.setDisplayStats(false);
});
},
loadEnd() {
this.initData();
this.initAudio();
this.initView();
this.initListener();
console.log('version: ET_07');
// this.showLetterAnimation();
this.startEditMode();
},
letterPosList: null,
initData() {
// this._writingIdx = 0;
// this.letterPosList = {};
// for (const key in letterData) {
// if (Object.hasOwnProperty.call(letterData, key)) {
// this.letterPosList[key] = letterData[key].map(pen => {
// return pen.map(pos => cc.v2(pos.x, pos.y));
// });
// }
// }
},
initAudio() {
},
debugMode: false,
letter: null,
initView() {
this.initBg();
// this.debugMode = this.data.debugMode;
// this.debugMode = true;
// this.setLetter(this.data.letter);
},
bgManager: null,
initBg() {
this.bgManager = new BgManager(this.canvas.width, this.canvas.height, this._mapScaleMin, this._mapScaleMax);
const bg = this.bgManager.getNext();
this.canvas.addChild(bg);
},
setLetter(letter) {
this.letter = letter;
this.updateLetterBtnLabel();
this.addDrawLetter(this.letter);
cc.find('Canvas').on('size-changed', () => {
this.onSizeChanged();
});
this.onSizeChanged();
},
onSizeChanged() {
this.node.getComponent(cc.Widget).updateAlignment();
const currentSize = { width: this.node.width, height: this.node.height };
console.log('currentSize = ' + JSON.stringify(currentSize));
const frameSize = cc.view.getFrameSize();
console.log('frameSize = ' + JSON.stringify(frameSize));
const designSize = cc.view.getDesignResolutionSize();
console.log('designSize = ' + JSON.stringify(designSize));
const letterBg = cc.find('Canvas/bg/Img_letter_bg');
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');
label1.getComponent(cc.Label).string = this.letter.toLowerCase();
label2.getComponent(cc.Label).string = this.letter.toLowerCase();
label3.getComponent(cc.Label).string = this.letter.toUpperCase();
label4.getComponent(cc.Label).string = this.letter.toUpperCase();
},
interpolateLine(lineList, maxLength) {
let newposList = [];
for (const line of lineList) {
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 });
} else {
newposList.push(line);
}
}
if (newposList.length > lineList.length) {
newposList = this.interpolateLine(newposList, maxLength);
}
return newposList;
},
interpolatePos(posList, maxLength) {
let newposList = [];
if (posList.length <= 1) {
return posList;
}
for (let i = 0; i < posList.length - 1; i++) {
const pos = posList[i];
const nextPos = posList[i + 1];
const distance = this.getDistance(pos, nextPos);
newposList.push(pos);
if (distance > maxLength) {
const middlePoint = this.getMiddlePoint(pos, nextPos);
newposList.push(middlePoint);
}
}
newposList.push(posList[posList.length - 1]);
if (newposList.length > posList.length) {
newposList = this.interpolatePos(newposList, maxLength);
}
return newposList;
},
getMiddlePoint(pos1, pos2) {
return cc.v2((pos1.x + pos2.x) / 2, (pos1.y + pos2.y) / 2);
},
getDistance(pos1, pos2) {
return pos1.sub(pos2).mag();
},
drawALineLast(drawNode, fromPos, toPos, color, drawIdx) {
if (drawIdx == this._writingIdx) {
this.drawALine(drawNode, fromPos, toPos, color);
}
},
drawALine(drawNode, fromPos, toPos, color) {
const graph = drawNode.getComponent(cc.Graphics);
if (color) {
graph.strokeColor = color;
}
if (letterWidthData[this.letter]) {
graph.lineWidth = letterWidthData[this.letter];
} else {
graph.lineWidth = 60;
}
graph.moveTo(fromPos.x, fromPos.y);
graph.lineTo(toPos.x, toPos.y);
graph.stroke();
},
drawBigCircle(drawNode, centerPos, color) {
const graph = drawNode.getComponent(cc.Graphics);
graph.lineWidth = 5;
graph.strokeColor = color;
graph.arc(centerPos.x, centerPos.y, 6, 0, Math.PI * 2, true);
graph.stroke();
graph.fillColor = cc.color(255, 255, 255);
graph.arc(centerPos.x, centerPos.y, 4, 0, Math.PI * 2, true);
graph.fill();
},
drawSmallDot(drawNode, centerPos, color) {
const graph = drawNode.getComponent(cc.Graphics);
graph.fillColor = color;
graph.arc(centerPos.x, centerPos.y, 3, 0, Math.PI * 2, true);
graph.fill();
},
addDrawLetter(letter) {
const letterBaseNode = cc.find('Canvas/bg/Img_letter_bg');
letterBaseNode.removeAllChildren();
const letterBg = cc.instantiate(cc.find(`Img_letter_bg`));
letterBg.x = 0;
letterBg.y = 0;
letterBg.parent = letterBaseNode;
letterBg.opacity = 255;
letterBg.name = `Img_letter_bg_${letter}`;
letterBg.addComponent(cc.Button);
letterBg.on('click', () => {
this.showLetterAnimation();
});
let letterName = '';
if (letter == letter.toLowerCase()) {
letterName = `small_${letter}`;
} else {
letterName = `big_${letter.toLowerCase()}`;
}
const letterNode = cc.find(`letters/Img_letter_${letterName}`);
const sf = letterNode.getComponent(cc.Sprite).spriteFrame;
const mask = cc.find('LetterMask', letterBg);
const maskComponent = mask.getComponent(cc.Mask);
maskComponent.spriteFrame = sf;
const bg = cc.find('LetterMask/bg', letterBg);
bg.active = true;
bg.opacity = 255;
return letterBg;
},
getDrawNodeList() {
return [];
},
initListener() {
console.log('initListener');
const title = cc.find('Canvas/bg/title');
title.addComponent(cc.Button);
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 bgBtn = cc.find('Canvas/bg/Img_letter_bg');
// console.log('bgBtn = ' + bgBtn);
// bgBtn.on('click', () => {
// console.log('汪汪汪');
// 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;
jelly(BtnBigLetter);
cc.audioEngine.play(this.switchAudio, false, 0.8);
this.setLetter(this.letter.toUpperCase());
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;
jelly(BtnSmallLetter);
cc.audioEngine.play(this.switchAudio, false, 0.8);
this.setLetter(this.letter.toLowerCase());
this._writingIdx++;
this.startEditMode();
});
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) {
lastPen.pop();
} else {
if (posList.length > 0) {
posList.pop();
}
}
this.updateEditMode();
});
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', () => {
this.showLetterAnimation();
});
const btnSave = cc.find('Canvas/EditModeNode/BtnSave');
btnSave.on('click', () => {
const posList = this.letterPosList[this.letter];
console.log(JSON.stringify(posList));
});
},
_writingIdx: 0,
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`);
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.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);
if (writingIdx == this._writingIdx) {
const audioClip = this[`small${this.letter.toUpperCase()}`];
cc.audioEngine.play(audioClip, false, 0.8);
// if (this.letter == this.letter.toUpperCase()) {
// const audioClip = this[`big${this.letter.toUpperCase()}`];
// cc.audioEngine.play(audioClip, false, 0.8);
// } else {
// const audioClip = this[`small${this.letter.toUpperCase()}`];
// cc.audioEngine.play(audioClip, false, 0.8);
// }
}
},
editMode: false,
startEditMode() {
if (!this.debugMode) {
return;
}
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`);
drawNode.addComponent(cc.Button);
drawNode.on('touchstart', (event) => {
const touchLocation = event.getLocation();
const pos = drawNode.convertToNodeSpaceAR(touchLocation);
const posList = this.letterPosList[this.letter];
if (posList.length == 0) {
posList.push([]);
}
posList[posList.length - 1].push(pos);
this.updateEditMode();
});
drawNode.on('touchmove', (event) => {
const touchLocation = event.getLocation();
const pos = drawNode.convertToNodeSpaceAR(touchLocation);
const posList = this.letterPosList[this.letter];
const lastPen = posList[posList.length - 1];
lastPen[lastPen.length - 1] = pos;
this.updateEditMode();
});
this.updateEditMode();
},
getLineList(posList) {
const lineList = [];
for (const pen of posList) {
const newPen = this.interpolatePos(pen, 10);
const newLine = [];
newPen.forEach((pos, idx) => {
if (idx < newPen.length - 1) {
newLine.push({
startPos: pos,
endPos: newPen[idx + 1]
});
}
});
if (pen.length == 1) {
newLine.push({
startPos: pen[0],
endPos: cc.v2(pen[0].x, pen[0].y + 0.001)
});
}
lineList.push(newLine);
}
return lineList;
},
updateEditMode() {
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));
}
}
posList.forEach((pen, i) => {
const newPen = this.interpolatePos(pen, 10);
for (const pos of newPen) {
let color = cc.color(50, 50, 50);
if (i == posList.length - 1) {
color = cc.color(255, 0, 0);
}
const idx = pen.findIndex(penPos => penPos.x == pos.x && penPos.y == pos.y);
if (idx == -1) {
this.drawSmallDot(drawNode, pos, color);
} else {
this.drawBigCircle(drawNode, pos, color);
}
}
});
}
extends: cc.Component,
properties: {
switchAudio: { default: null, type: cc.AudioClip },
titleAudio: { default: null, type: cc.AudioClip },
bigA: { default: null, type: cc.AudioClip },
bigB: { default: null, type: cc.AudioClip },
bigC: { default: null, type: cc.AudioClip },
bigD: { default: null, type: cc.AudioClip },
bigE: { default: null, type: cc.AudioClip },
bigF: { default: null, type: cc.AudioClip },
bigG: { default: null, type: cc.AudioClip },
bigH: { default: null, type: cc.AudioClip },
bigI: { default: null, type: cc.AudioClip },
bigJ: { default: null, type: cc.AudioClip },
bigK: { default: null, type: cc.AudioClip },
bigL: { default: null, type: cc.AudioClip },
bigM: { default: null, type: cc.AudioClip },
bigN: { default: null, type: cc.AudioClip },
bigO: { default: null, type: cc.AudioClip },
bigP: { default: null, type: cc.AudioClip },
bigQ: { default: null, type: cc.AudioClip },
bigR: { default: null, type: cc.AudioClip },
bigS: { default: null, type: cc.AudioClip },
bigT: { default: null, type: cc.AudioClip },
bigU: { default: null, type: cc.AudioClip },
bigV: { default: null, type: cc.AudioClip },
bigW: { default: null, type: cc.AudioClip },
bigX: { default: null, type: cc.AudioClip },
bigY: { default: null, type: cc.AudioClip },
bigZ: { default: null, type: cc.AudioClip },
smallA: { default: null, type: cc.AudioClip },
smallB: { default: null, type: cc.AudioClip },
smallC: { default: null, type: cc.AudioClip },
smallD: { default: null, type: cc.AudioClip },
smallE: { default: null, type: cc.AudioClip },
smallF: { default: null, type: cc.AudioClip },
smallG: { default: null, type: cc.AudioClip },
smallH: { default: null, type: cc.AudioClip },
smallI: { default: null, type: cc.AudioClip },
smallJ: { default: null, type: cc.AudioClip },
smallK: { default: null, type: cc.AudioClip },
smallL: { default: null, type: cc.AudioClip },
smallM: { default: null, type: cc.AudioClip },
smallN: { default: null, type: cc.AudioClip },
smallO: { default: null, type: cc.AudioClip },
smallP: { default: null, type: cc.AudioClip },
smallQ: { default: null, type: cc.AudioClip },
smallR: { default: null, type: cc.AudioClip },
smallS: { default: null, type: cc.AudioClip },
smallT: { default: null, type: cc.AudioClip },
smallU: { default: null, type: cc.AudioClip },
smallV: { default: null, type: cc.AudioClip },
smallW: { default: null, type: cc.AudioClip },
smallX: { default: null, type: cc.AudioClip },
smallY: { default: null, type: cc.AudioClip },
smallZ: { default: null, type: cc.AudioClip },
},
// 生命周期 onLoad
onLoad() {
this.initSceneData();
this.initSize();
},
_designSize: null,
_frameSize: null,
_mapScaleMin: null,
_mapScaleMax: null,
_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;
const frameSize = cc.view.getFrameSize();
this._frameSize = frameSize;
this._designSize = cc.view.getDesignResolutionSize();
let sx = cc.winSize.width / frameSize.width;
let sy = cc.winSize.height / frameSize.height;
this._cocosScale = Math.min(sx, sy);
sx = frameSize.width / this._designSize.width;
sy = frameSize.height / this._designSize.height;
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
this.canvas = cc.find("Canvas");
// cc.log('cc.Canvas: ', cc.Canvas);
},
_imageResList: null,
_audioResList: null,
_animaResList: null,
initSceneData() {
this._imageResList = [];
this._audioResList = [];
this._animaResList = [];
},
// 生命周期 start
start() {
let getData = this.getData.bind(this);
if (window && window.courseware) {
getData = window.courseware.getData;
}
getData((data) => {
console.log("data:", data);
this.data = data || this.getDefaultData();
this.data = JSON.parse(JSON.stringify(this.data));
this.preloadItem();
});
},
getData(cb) {
cb(this.getDefaultData());
},
getDefaultData() {
console.log("defaultData = " + defaultData);
return defaultData;
},
preloadItem() {
this.addPreloadImage();
this.addPreloadAudio();
this.addPreloadAnima();
this.preload();
},
addPreloadImage() {
// this._imageResList.push({ url: this.data.pic_url });
},
addPreloadAudio() {
// this._audioResList.push({ url: this.data.audio_url });
},
addPreloadAnima() {},
preload() {
const preloadArr = this._imageResList
.concat(this._audioResList)
.concat(this._animaResList);
cc.assetManager.loadAny(preloadArr, null, null, (err, data) => {
this.loadEnd();
if (window && window["air"]) {
window["air"].hideAirClassLoading();
}
cc.debug.setDisplayStats(false);
});
},
loadEnd() {
this.initData();
this.initAudio();
this.initView();
this.initListener();
console.log("version: ET_07");
// this.showLetterAnimation();
this.startEditMode();
},
letterPosList: null,
initData() {
// this._writingIdx = 0;
// this.letterPosList = {};
// for (const key in letterData) {
// if (Object.hasOwnProperty.call(letterData, key)) {
// this.letterPosList[key] = letterData[key].map(pen => {
// return pen.map(pos => cc.v2(pos.x, pos.y));
// });
// }
// }
},
initAudio() {},
debugMode: false,
letter: null,
initView() {
this.initBg();
// this.debugMode = this.data.debugMode;
// this.debugMode = true;
// this.setLetter(this.data.letter);
},
bgManager: null,
initBg() {
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;
this.updateLetterBtnLabel();
this.addDrawLetter(this.letter);
cc.find("Canvas").on("size-changed", () => {
this.onSizeChanged();
});
this.onSizeChanged();
},
onSizeChanged() {
this.node.getComponent(cc.Widget).updateAlignment();
const currentSize = { width: this.node.width, height: this.node.height };
console.log("currentSize = " + JSON.stringify(currentSize));
const frameSize = cc.view.getFrameSize();
console.log("frameSize = " + JSON.stringify(frameSize));
const designSize = cc.view.getDesignResolutionSize();
console.log("designSize = " + JSON.stringify(designSize));
const letterBg = cc.find("Canvas/bg/Img_letter_bg");
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");
label1.getComponent(cc.Label).string = this.letter.toLowerCase();
label2.getComponent(cc.Label).string = this.letter.toLowerCase();
label3.getComponent(cc.Label).string = this.letter.toUpperCase();
label4.getComponent(cc.Label).string = this.letter.toUpperCase();
},
interpolateLine(lineList, maxLength) {
let newposList = [];
for (const line of lineList) {
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,
});
} else {
newposList.push(line);
}
}
if (newposList.length > lineList.length) {
newposList = this.interpolateLine(newposList, maxLength);
}
return newposList;
},
interpolatePos(posList, maxLength) {
let newposList = [];
if (posList.length <= 1) {
return posList;
}
for (let i = 0; i < posList.length - 1; i++) {
const pos = posList[i];
const nextPos = posList[i + 1];
const distance = this.getDistance(pos, nextPos);
newposList.push(pos);
if (distance > maxLength) {
const middlePoint = this.getMiddlePoint(pos, nextPos);
newposList.push(middlePoint);
}
}
newposList.push(posList[posList.length - 1]);
if (newposList.length > posList.length) {
newposList = this.interpolatePos(newposList, maxLength);
}
return newposList;
},
getMiddlePoint(pos1, pos2) {
return cc.v2((pos1.x + pos2.x) / 2, (pos1.y + pos2.y) / 2);
},
getDistance(pos1, pos2) {
return pos1.sub(pos2).mag();
},
drawALineLast(drawNode, fromPos, toPos, color, drawIdx) {
if (drawIdx == this._writingIdx) {
this.drawALine(drawNode, fromPos, toPos, color);
}
},
drawALine(drawNode, fromPos, toPos, color) {
const graph = drawNode.getComponent(cc.Graphics);
if (color) {
graph.strokeColor = color;
}
if (letterWidthData[this.letter]) {
graph.lineWidth = letterWidthData[this.letter];
} else {
graph.lineWidth = 60;
}
graph.moveTo(fromPos.x, fromPos.y);
graph.lineTo(toPos.x, toPos.y);
graph.stroke();
},
drawBigCircle(drawNode, centerPos, color) {
const graph = drawNode.getComponent(cc.Graphics);
graph.lineWidth = 5;
graph.strokeColor = color;
graph.arc(centerPos.x, centerPos.y, 6, 0, Math.PI * 2, true);
graph.stroke();
graph.fillColor = cc.color(255, 255, 255);
graph.arc(centerPos.x, centerPos.y, 4, 0, Math.PI * 2, true);
graph.fill();
},
drawSmallDot(drawNode, centerPos, color) {
const graph = drawNode.getComponent(cc.Graphics);
graph.fillColor = color;
graph.arc(centerPos.x, centerPos.y, 3, 0, Math.PI * 2, true);
graph.fill();
},
addDrawLetter(letter) {
const letterBaseNode = cc.find("Canvas/bg/Img_letter_bg");
letterBaseNode.removeAllChildren();
const letterBg = cc.instantiate(cc.find(`Img_letter_bg`));
letterBg.x = 0;
letterBg.y = 0;
letterBg.parent = letterBaseNode;
letterBg.opacity = 255;
letterBg.name = `Img_letter_bg_${letter}`;
letterBg.addComponent(cc.Button);
letterBg.on("click", () => {
this.showLetterAnimation();
});
let letterName = "";
if (letter == letter.toLowerCase()) {
letterName = `small_${letter}`;
} else {
letterName = `big_${letter.toLowerCase()}`;
}
const letterNode = cc.find(`letters/Img_letter_${letterName}`);
const sf = letterNode.getComponent(cc.Sprite).spriteFrame;
const mask = cc.find("LetterMask", letterBg);
const maskComponent = mask.getComponent(cc.Mask);
maskComponent.spriteFrame = sf;
const bg = cc.find("LetterMask/bg", letterBg);
bg.active = true;
bg.opacity = 255;
return letterBg;
},
getDrawNodeList() {
return [];
},
initListener() {
console.log("initListener");
const title = cc.find("Canvas/bg/title");
title.addComponent(cc.Button);
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 bgBtn = cc.find('Canvas/bg/Img_letter_bg');
// console.log('bgBtn = ' + bgBtn);
// bgBtn.on('click', () => {
// console.log('汪汪汪');
// 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;
jelly(BtnBigLetter);
cc.audioEngine.play(this.switchAudio, false, 0.8);
this.setLetter(this.letter.toUpperCase());
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;
jelly(BtnSmallLetter);
cc.audioEngine.play(this.switchAudio, false, 0.8);
this.setLetter(this.letter.toLowerCase());
this._writingIdx++;
this.startEditMode();
});
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) {
lastPen.pop();
} else {
if (posList.length > 0) {
posList.pop();
}
}
this.updateEditMode();
});
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", () => {
this.showLetterAnimation();
});
const btnSave = cc.find("Canvas/EditModeNode/BtnSave");
btnSave.on("click", () => {
const posList = this.letterPosList[this.letter];
console.log(JSON.stringify(posList));
});
},
_writingIdx: 0,
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`
);
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.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);
if (writingIdx == this._writingIdx) {
const audioClip = this[`small${this.letter.toUpperCase()}`];
cc.audioEngine.play(audioClip, false, 0.8);
// if (this.letter == this.letter.toUpperCase()) {
// const audioClip = this[`big${this.letter.toUpperCase()}`];
// cc.audioEngine.play(audioClip, false, 0.8);
// } else {
// const audioClip = this[`small${this.letter.toUpperCase()}`];
// cc.audioEngine.play(audioClip, false, 0.8);
// }
}
},
editMode: false,
startEditMode() {
if (!this.debugMode) {
return;
}
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`
);
drawNode.addComponent(cc.Button);
drawNode.on("touchstart", (event) => {
const touchLocation = event.getLocation();
const pos = drawNode.convertToNodeSpaceAR(touchLocation);
const posList = this.letterPosList[this.letter];
if (posList.length == 0) {
posList.push([]);
}
posList[posList.length - 1].push(pos);
this.updateEditMode();
});
drawNode.on("touchmove", (event) => {
const touchLocation = event.getLocation();
const pos = drawNode.convertToNodeSpaceAR(touchLocation);
const posList = this.letterPosList[this.letter];
const lastPen = posList[posList.length - 1];
lastPen[lastPen.length - 1] = pos;
this.updateEditMode();
});
this.updateEditMode();
},
getLineList(posList) {
const lineList = [];
for (const pen of posList) {
const newPen = this.interpolatePos(pen, 10);
const newLine = [];
newPen.forEach((pos, idx) => {
if (idx < newPen.length - 1) {
newLine.push({
startPos: pos,
endPos: newPen[idx + 1],
});
}
});
if (pen.length == 1) {
newLine.push({
startPos: pen[0],
endPos: cc.v2(pen[0].x, pen[0].y + 0.001),
});
}
lineList.push(newLine);
}
return lineList;
},
updateEditMode() {
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)
);
}
}
posList.forEach((pen, i) => {
const newPen = this.interpolatePos(pen, 10);
for (const pos of newPen) {
let color = cc.color(50, 50, 50);
if (i == posList.length - 1) {
color = cc.color(255, 0, 0);
}
const idx = pen.findIndex(
(penPos) => penPos.x == pos.x && penPos.y == pos.y
);
if (idx == -1) {
this.drawSmallDot(drawNode, pos, color);
} else {
this.drawBigCircle(drawNode, pos, color);
}
}
});
},
});
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"
cc.Class({
properties: {
bgArr: {
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();
},
import { getSprNode } from "./util";
import BaseBgManager from "./BaseBgManager";
initAllBg() {
for( let i=0; i<5; i++) {
const bg = this.initOneBg(i+1);
this.bgArr.push(bg);
}
cc.Class({
extends: BaseBgManager,
properties: {
bgArr: {
default: [],
},
},
initOneBg(id) {
initAllBg() {
for (let i = 0; i < 5; i++) {
const bg = this.initOneBg(i + 1);
this.bgArr.push(bg);
}
},
const bg = getSprNode("bg/"+id+"/bg_"+id);
bg.scale = this._mapScaleMax;
initOneBg(id) {
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)
bgItemLayer.addChild(itemTop, 1);
itemTop.y = this._bgHeight / 2;
itemTop.anchorY = 1;
itemTop.scale = this._bgWidth / itemTop.width;
const bgItemLayer = new cc.Node();
bgItemLayer.scale = 1 / bg.scale;
bg.addChild(bgItemLayer);
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;
const itemTop = getSprNode("bg/" + id + "/bg_top" + id);
bgItemLayer.addChild(itemTop, 1);
this.toTop(itemTop);
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;
const itemBottom = getSprNode("bg/" + id + "/bg_bottom" + id);
bgItemLayer.addChild(itemBottom, 1);
this.toBottom(itemBottom);
if (id == 4) {
const item = getSprNode("bg/" + id + "/bg_dian" + id);
bgItemLayer.addChild(item);
item.x = (-this._context.bgWidth / 10) * 4;
item.y = -this._context.bgHeight / 6;
item.scale = this._context.mapScaleMin;
itemTop.scale = this._mapScaleMin;
if (id == 4) {
itemTop.scale = this._context.mapScaleMin;
const itemLeft = getSprNode("bg/"+id+"/bg_left")
bgItemLayer.addChild(itemLeft);
itemLeft.x = -this._bgWidth / 2;
itemLeft.anchorX = 0;
itemLeft.scale = this._bgHeight / itemLeft.height;
const itemLeft = getSprNode("bg/" + id + "/bg_left");
bgItemLayer.addChild(itemLeft);
this.toLeft(itemLeft);
const itemRight = getSprNode("bg/"+id+"/bg_right")
bgItemLayer.addChild(itemRight);
itemRight.x = this._bgWidth / 2;
itemRight.anchorX = 1;
itemRight.scale = this._bgHeight / itemRight.height;
}
const itemRight = getSprNode("bg/" + id + "/bg_right");
bgItemLayer.addChild(itemRight);
this.toRight(itemRight);
}
return bg;
},
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