Commit ed971814 authored by Seaborn Lee's avatar Seaborn Lee

refactor: extract BaseBgManager

parent 458d3c90
...@@ -7,4 +7,5 @@ ...@@ -7,4 +7,5 @@
/publish/publish/android /publish/publish/android
/publish/publish/ios /publish/publish/ios
/publish/publish/*.zip /publish/publish/*.zip
/node_modules /node_modulestags
\ No newline at end of file tags
{ {
"ver": "1.2.7", "ver": "1.2.9",
"uuid": "57ea7c61-9b8b-498a-b024-c98ee9124beb", "uuid": "57ea7c61-9b8b-498a-b024-c98ee9124beb",
"asyncLoadAssets": false, "asyncLoadAssets": false,
"autoReleaseAssets": true, "autoReleaseAssets": true,
......
import { defaultData } from '../script/defaultData'; import { defaultData } from "../script/defaultData";
import { asyncDelay, jelly } from '../script/utils'; import { asyncDelay, jelly } from "../script/utils";
import { letterData, letterWidthData } from '../script/letterPointData'; import { letterData, letterWidthData } from "../script/letterPointData";
import BgManager from "../script/BgManager" import BgManager from "../script/BgManager";
cc.Class({ cc.Class({
extends: cc.Component, extends: cc.Component,
properties: { properties: {
switchAudio: { default: null, type: cc.AudioClip }, switchAudio: { default: null, type: cc.AudioClip },
titleAudio: { default: null, type: cc.AudioClip }, titleAudio: { default: null, type: cc.AudioClip },
bigA: { default: null, type: cc.AudioClip }, bigA: { default: null, type: cc.AudioClip },
bigB: { default: null, type: cc.AudioClip }, bigB: { default: null, type: cc.AudioClip },
bigC: { default: null, type: cc.AudioClip }, bigC: { default: null, type: cc.AudioClip },
bigD: { default: null, type: cc.AudioClip }, bigD: { default: null, type: cc.AudioClip },
bigE: { default: null, type: cc.AudioClip }, bigE: { default: null, type: cc.AudioClip },
bigF: { default: null, type: cc.AudioClip }, bigF: { default: null, type: cc.AudioClip },
bigG: { default: null, type: cc.AudioClip }, bigG: { default: null, type: cc.AudioClip },
bigH: { default: null, type: cc.AudioClip }, bigH: { default: null, type: cc.AudioClip },
bigI: { default: null, type: cc.AudioClip }, bigI: { default: null, type: cc.AudioClip },
bigJ: { default: null, type: cc.AudioClip }, bigJ: { default: null, type: cc.AudioClip },
bigK: { default: null, type: cc.AudioClip }, bigK: { default: null, type: cc.AudioClip },
bigL: { default: null, type: cc.AudioClip }, bigL: { default: null, type: cc.AudioClip },
bigM: { default: null, type: cc.AudioClip }, bigM: { default: null, type: cc.AudioClip },
bigN: { default: null, type: cc.AudioClip }, bigN: { default: null, type: cc.AudioClip },
bigO: { default: null, type: cc.AudioClip }, bigO: { default: null, type: cc.AudioClip },
bigP: { default: null, type: cc.AudioClip }, bigP: { default: null, type: cc.AudioClip },
bigQ: { default: null, type: cc.AudioClip }, bigQ: { default: null, type: cc.AudioClip },
bigR: { default: null, type: cc.AudioClip }, bigR: { default: null, type: cc.AudioClip },
bigS: { default: null, type: cc.AudioClip }, bigS: { default: null, type: cc.AudioClip },
bigT: { default: null, type: cc.AudioClip }, bigT: { default: null, type: cc.AudioClip },
bigU: { default: null, type: cc.AudioClip }, bigU: { default: null, type: cc.AudioClip },
bigV: { default: null, type: cc.AudioClip }, bigV: { default: null, type: cc.AudioClip },
bigW: { default: null, type: cc.AudioClip }, bigW: { default: null, type: cc.AudioClip },
bigX: { default: null, type: cc.AudioClip }, bigX: { default: null, type: cc.AudioClip },
bigY: { default: null, type: cc.AudioClip }, bigY: { default: null, type: cc.AudioClip },
bigZ: { default: null, type: cc.AudioClip }, bigZ: { default: null, type: cc.AudioClip },
smallA: { default: null, type: cc.AudioClip }, smallA: { default: null, type: cc.AudioClip },
smallB: { default: null, type: cc.AudioClip }, smallB: { default: null, type: cc.AudioClip },
smallC: { default: null, type: cc.AudioClip }, smallC: { default: null, type: cc.AudioClip },
smallD: { default: null, type: cc.AudioClip }, smallD: { default: null, type: cc.AudioClip },
smallE: { default: null, type: cc.AudioClip }, smallE: { default: null, type: cc.AudioClip },
smallF: { default: null, type: cc.AudioClip }, smallF: { default: null, type: cc.AudioClip },
smallG: { default: null, type: cc.AudioClip }, smallG: { default: null, type: cc.AudioClip },
smallH: { default: null, type: cc.AudioClip }, smallH: { default: null, type: cc.AudioClip },
smallI: { default: null, type: cc.AudioClip }, smallI: { default: null, type: cc.AudioClip },
smallJ: { default: null, type: cc.AudioClip }, smallJ: { default: null, type: cc.AudioClip },
smallK: { default: null, type: cc.AudioClip }, smallK: { default: null, type: cc.AudioClip },
smallL: { default: null, type: cc.AudioClip }, smallL: { default: null, type: cc.AudioClip },
smallM: { default: null, type: cc.AudioClip }, smallM: { default: null, type: cc.AudioClip },
smallN: { default: null, type: cc.AudioClip }, smallN: { default: null, type: cc.AudioClip },
smallO: { default: null, type: cc.AudioClip }, smallO: { default: null, type: cc.AudioClip },
smallP: { default: null, type: cc.AudioClip }, smallP: { default: null, type: cc.AudioClip },
smallQ: { default: null, type: cc.AudioClip }, smallQ: { default: null, type: cc.AudioClip },
smallR: { default: null, type: cc.AudioClip }, smallR: { default: null, type: cc.AudioClip },
smallS: { default: null, type: cc.AudioClip }, smallS: { default: null, type: cc.AudioClip },
smallT: { default: null, type: cc.AudioClip }, smallT: { default: null, type: cc.AudioClip },
smallU: { default: null, type: cc.AudioClip }, smallU: { default: null, type: cc.AudioClip },
smallV: { default: null, type: cc.AudioClip }, smallV: { default: null, type: cc.AudioClip },
smallW: { default: null, type: cc.AudioClip }, smallW: { default: null, type: cc.AudioClip },
smallX: { default: null, type: cc.AudioClip }, smallX: { default: null, type: cc.AudioClip },
smallY: { default: null, type: cc.AudioClip }, smallY: { default: null, type: cc.AudioClip },
smallZ: { default: null, type: cc.AudioClip }, smallZ: { default: null, type: cc.AudioClip },
}, },
// 生命周期 onLoad // 生命周期 onLoad
onLoad() { onLoad() {
this.initSceneData(); this.initSceneData();
this.initSize(); this.initSize();
}, },
_designSize: null,
_designSize: null, _frameSize: null,
_frameSize: null, _mapScaleMin: null,
_mapScaleMin: null, _mapScaleMax: null,
_mapScaleMax: null, _cocosScale: null,
_cocosScale: null, canvas: null,
canvas: null, initSize() {
initSize() { // 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小
let screen_size =
cc.view.getFrameSize().width / cc.view.getFrameSize().height;
// 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小 let design_size =
let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height cc.Canvas.instance.designResolution.width /
let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height cc.Canvas.instance.designResolution.height;
let f = screen_size >= design_size let f = screen_size >= design_size;
cc.Canvas.instance.fitHeight = f cc.Canvas.instance.fitHeight = f;
cc.Canvas.instance.fitWidth = !f cc.Canvas.instance.fitWidth = !f;
const frameSize = cc.view.getFrameSize(); const frameSize = cc.view.getFrameSize();
this._frameSize = frameSize; this._frameSize = frameSize;
this._designSize = cc.view.getDesignResolutionSize(); this._designSize = cc.view.getDesignResolutionSize();
let sx = cc.winSize.width / frameSize.width; let sx = cc.winSize.width / frameSize.width;
let sy = cc.winSize.height / frameSize.height; let sy = cc.winSize.height / frameSize.height;
this._cocosScale = Math.min(sx, sy); this._cocosScale = Math.min(sx, sy);
sx = frameSize.width / this._designSize.width; sx = frameSize.width / this._designSize.width;
sy = frameSize.height / this._designSize.height; sy = frameSize.height / this._designSize.height;
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale; this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
this._mapScaleMax = Math.max(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);
// cc.log('cc.Canvas: ', cc.Canvas); },
},
_imageResList: null,
_imageResList: null, _audioResList: null,
_audioResList: null, _animaResList: null,
_animaResList: null, initSceneData() {
initSceneData() { this._imageResList = [];
this._imageResList = []; this._audioResList = [];
this._audioResList = []; this._animaResList = [];
this._animaResList = []; },
},
// 生命周期 start
// 生命周期 start start() {
start() { let getData = this.getData.bind(this);
let getData = this.getData.bind(this); if (window && window.courseware) {
if (window && window.courseware) { getData = window.courseware.getData;
getData = window.courseware.getData; }
}
getData((data) => {
getData((data) => { console.log("data:", data);
console.log('data:', data); this.data = data || this.getDefaultData();
this.data = data || this.getDefaultData(); this.data = JSON.parse(JSON.stringify(this.data));
this.data = JSON.parse(JSON.stringify(this.data)) this.preloadItem();
this.preloadItem() });
}); },
},
getData(cb) {
getData(cb) { cb(this.getDefaultData());
cb(this.getDefaultData()); },
},
getDefaultData() {
getDefaultData() { console.log("defaultData = " + defaultData);
console.log('defaultData = ' + defaultData); return defaultData;
return defaultData; },
},
preloadItem() {
preloadItem() { this.addPreloadImage();
this.addPreloadImage(); this.addPreloadAudio();
this.addPreloadAudio(); this.addPreloadAnima();
this.addPreloadAnima(); this.preload();
this.preload(); },
},
addPreloadImage() {
addPreloadImage() { // this._imageResList.push({ url: this.data.pic_url });
// this._imageResList.push({ url: this.data.pic_url }); },
},
addPreloadAudio() {
addPreloadAudio() { // this._audioResList.push({ url: this.data.audio_url });
// this._audioResList.push({ url: this.data.audio_url }); },
},
addPreloadAnima() {},
addPreloadAnima() {
preload() {
}, const preloadArr = this._imageResList
.concat(this._audioResList)
preload() { .concat(this._animaResList);
const preloadArr = this._imageResList.concat(this._audioResList).concat(this._animaResList); cc.assetManager.loadAny(preloadArr, null, null, (err, data) => {
cc.assetManager.loadAny(preloadArr, null, null, (err, data) => { this.loadEnd();
this.loadEnd(); if (window && window["air"]) {
if (window && window["air"]) { window["air"].hideAirClassLoading();
window["air"].hideAirClassLoading(); }
} cc.debug.setDisplayStats(false);
cc.debug.setDisplayStats(false); });
}); },
},
loadEnd() {
loadEnd() { this.initData();
this.initData(); this.initAudio();
this.initAudio(); this.initView();
this.initView(); this.initListener();
this.initListener();
console.log("version: ET_07");
console.log('version: ET_07');
// this.showLetterAnimation();
// this.showLetterAnimation(); this.startEditMode();
this.startEditMode(); },
},
letterPosList: null,
letterPosList: null, initData() {
initData() { // this._writingIdx = 0;
// this._writingIdx = 0; // this.letterPosList = {};
// this.letterPosList = {}; // for (const key in letterData) {
// for (const key in letterData) { // if (Object.hasOwnProperty.call(letterData, key)) {
// if (Object.hasOwnProperty.call(letterData, key)) { // this.letterPosList[key] = letterData[key].map(pen => {
// this.letterPosList[key] = letterData[key].map(pen => { // return pen.map(pos => cc.v2(pos.x, pos.y));
// return pen.map(pos => cc.v2(pos.x, pos.y)); // });
// }); // }
// } // }
// } },
},
initAudio() {},
initAudio() {
debugMode: false,
}, letter: null,
initView() {
debugMode: false, this.initBg();
letter: null, // this.debugMode = this.data.debugMode;
initView() { // this.debugMode = true;
// this.setLetter(this.data.letter);
this.initBg(); },
// this.debugMode = this.data.debugMode;
// this.debugMode = true; bgManager: null,
// this.setLetter(this.data.letter); initBg() {
}, this.bgManager = new BgManager();
this.bgManager.setContext({
bgManager: null, bgWidth: this.canvas.width,
initBg() { bgHeight: this.canvas.height,
this.bgManager = new BgManager(this.canvas.width, this.canvas.height, this._mapScaleMin, this._mapScaleMax); mapScaleMin: this._mapScaleMin,
mapScaleMax: this._mapScaleMax,
const bg = this.bgManager.getNext(); });
this.canvas.addChild(bg);
}, const bg = this.bgManager.getNext();
this.canvas.addChild(bg);
},
setLetter(letter) { setLetter(letter) {
this.letter = letter; this.letter = letter;
this.updateLetterBtnLabel(); this.updateLetterBtnLabel();
this.addDrawLetter(this.letter); this.addDrawLetter(this.letter);
cc.find('Canvas').on('size-changed', () => { cc.find("Canvas").on("size-changed", () => {
this.onSizeChanged(); this.onSizeChanged();
}); });
this.onSizeChanged(); this.onSizeChanged();
}, },
onSizeChanged() { onSizeChanged() {
this.node.getComponent(cc.Widget).updateAlignment(); this.node.getComponent(cc.Widget).updateAlignment();
const currentSize = { width: this.node.width, height: this.node.height }; 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(); const frameSize = cc.view.getFrameSize();
console.log('frameSize = ' + JSON.stringify(frameSize)); console.log("frameSize = " + JSON.stringify(frameSize));
const designSize = cc.view.getDesignResolutionSize(); 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 =
letterBg.scale = Math.min(scale, 1); designSize.width /
}, designSize.height /
(frameSize.width / frameSize.height);
updateLetterBtnLabel() { letterBg.scale = Math.min(scale, 1);
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'); updateLetterBtnLabel() {
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");
label1.getComponent(cc.Label).string = this.letter.toLowerCase(); const label3 = cc.find("Canvas/bg/BtnBigLetter/Img_selected/label");
label2.getComponent(cc.Label).string = this.letter.toLowerCase(); const label4 = cc.find("Canvas/bg/BtnBigLetter/Img_normal/label");
label3.getComponent(cc.Label).string = this.letter.toUpperCase();
label4.getComponent(cc.Label).string = this.letter.toUpperCase(); label1.getComponent(cc.Label).string = this.letter.toLowerCase();
}, label2.getComponent(cc.Label).string = this.letter.toLowerCase();
label3.getComponent(cc.Label).string = this.letter.toUpperCase();
interpolateLine(lineList, maxLength) { label4.getComponent(cc.Label).string = this.letter.toUpperCase();
let newposList = []; },
for (const line of lineList) {
const distance = this.getDistance(line.startPos, line.endPos); interpolateLine(lineList, maxLength) {
if (distance > maxLength) { let newposList = [];
const middlePoint = this.getMiddlePoint(line.startPos, line.endPos); for (const line of lineList) {
newposList.push({ type: 'Line', startPos: line.startPos, endPos: middlePoint }); const distance = this.getDistance(line.startPos, line.endPos);
newposList.push({ type: 'Line', startPos: middlePoint, endPos: line.endPos }); if (distance > maxLength) {
} else { const middlePoint = this.getMiddlePoint(line.startPos, line.endPos);
newposList.push(line); newposList.push({
} type: "Line",
} startPos: line.startPos,
if (newposList.length > lineList.length) { endPos: middlePoint,
newposList = this.interpolateLine(newposList, maxLength); });
} newposList.push({
return newposList; type: "Line",
}, startPos: middlePoint,
endPos: line.endPos,
interpolatePos(posList, maxLength) { });
let newposList = []; } else {
if (posList.length <= 1) { newposList.push(line);
return posList; }
} }
for (let i = 0; i < posList.length - 1; i++) { if (newposList.length > lineList.length) {
const pos = posList[i]; newposList = this.interpolateLine(newposList, maxLength);
const nextPos = posList[i + 1]; }
const distance = this.getDistance(pos, nextPos); return newposList;
},
newposList.push(pos);
if (distance > maxLength) { interpolatePos(posList, maxLength) {
const middlePoint = this.getMiddlePoint(pos, nextPos); let newposList = [];
newposList.push(middlePoint); if (posList.length <= 1) {
} return posList;
} }
newposList.push(posList[posList.length - 1]); for (let i = 0; i < posList.length - 1; i++) {
if (newposList.length > posList.length) { const pos = posList[i];
newposList = this.interpolatePos(newposList, maxLength); const nextPos = posList[i + 1];
} const distance = this.getDistance(pos, nextPos);
return newposList;
}, newposList.push(pos);
if (distance > maxLength) {
getMiddlePoint(pos1, pos2) { const middlePoint = this.getMiddlePoint(pos, nextPos);
return cc.v2((pos1.x + pos2.x) / 2, (pos1.y + pos2.y) / 2); newposList.push(middlePoint);
}, }
}
getDistance(pos1, pos2) { newposList.push(posList[posList.length - 1]);
return pos1.sub(pos2).mag(); if (newposList.length > posList.length) {
}, newposList = this.interpolatePos(newposList, maxLength);
}
drawALineLast(drawNode, fromPos, toPos, color, drawIdx) { return newposList;
if (drawIdx == this._writingIdx) { },
this.drawALine(drawNode, fromPos, toPos, color);
} getMiddlePoint(pos1, pos2) {
}, return cc.v2((pos1.x + pos2.x) / 2, (pos1.y + pos2.y) / 2);
},
drawALine(drawNode, fromPos, toPos, color) {
const graph = drawNode.getComponent(cc.Graphics); getDistance(pos1, pos2) {
if (color) { return pos1.sub(pos2).mag();
graph.strokeColor = color; },
}
if (letterWidthData[this.letter]) { drawALineLast(drawNode, fromPos, toPos, color, drawIdx) {
graph.lineWidth = letterWidthData[this.letter]; if (drawIdx == this._writingIdx) {
} else { this.drawALine(drawNode, fromPos, toPos, color);
graph.lineWidth = 60; }
} },
graph.moveTo(fromPos.x, fromPos.y);
graph.lineTo(toPos.x, toPos.y); drawALine(drawNode, fromPos, toPos, color) {
graph.stroke(); const graph = drawNode.getComponent(cc.Graphics);
}, if (color) {
graph.strokeColor = color;
drawBigCircle(drawNode, centerPos, color) { }
const graph = drawNode.getComponent(cc.Graphics); if (letterWidthData[this.letter]) {
graph.lineWidth = 5; graph.lineWidth = letterWidthData[this.letter];
graph.strokeColor = color; } else {
graph.arc(centerPos.x, centerPos.y, 6, 0, Math.PI * 2, true); graph.lineWidth = 60;
graph.stroke(); }
graph.fillColor = cc.color(255, 255, 255); graph.moveTo(fromPos.x, fromPos.y);
graph.arc(centerPos.x, centerPos.y, 4, 0, Math.PI * 2, true); graph.lineTo(toPos.x, toPos.y);
graph.fill(); graph.stroke();
}, },
drawSmallDot(drawNode, centerPos, color) { drawBigCircle(drawNode, centerPos, color) {
const graph = drawNode.getComponent(cc.Graphics); const graph = drawNode.getComponent(cc.Graphics);
graph.fillColor = color; graph.lineWidth = 5;
graph.arc(centerPos.x, centerPos.y, 3, 0, Math.PI * 2, true); graph.strokeColor = color;
graph.fill(); graph.arc(centerPos.x, centerPos.y, 6, 0, Math.PI * 2, true);
}, graph.stroke();
graph.fillColor = cc.color(255, 255, 255);
addDrawLetter(letter) { graph.arc(centerPos.x, centerPos.y, 4, 0, Math.PI * 2, true);
const letterBaseNode = cc.find('Canvas/bg/Img_letter_bg'); graph.fill();
letterBaseNode.removeAllChildren(); },
const letterBg = cc.instantiate(cc.find(`Img_letter_bg`));
letterBg.x = 0; drawSmallDot(drawNode, centerPos, color) {
letterBg.y = 0; const graph = drawNode.getComponent(cc.Graphics);
letterBg.parent = letterBaseNode; graph.fillColor = color;
letterBg.opacity = 255; graph.arc(centerPos.x, centerPos.y, 3, 0, Math.PI * 2, true);
letterBg.name = `Img_letter_bg_${letter}`; graph.fill();
},
letterBg.addComponent(cc.Button);
letterBg.on('click', () => { addDrawLetter(letter) {
this.showLetterAnimation(); const letterBaseNode = cc.find("Canvas/bg/Img_letter_bg");
}); letterBaseNode.removeAllChildren();
const letterBg = cc.instantiate(cc.find(`Img_letter_bg`));
let letterName = ''; letterBg.x = 0;
if (letter == letter.toLowerCase()) { letterBg.y = 0;
letterName = `small_${letter}`; letterBg.parent = letterBaseNode;
} else { letterBg.opacity = 255;
letterName = `big_${letter.toLowerCase()}`; letterBg.name = `Img_letter_bg_${letter}`;
}
const letterNode = cc.find(`letters/Img_letter_${letterName}`); letterBg.addComponent(cc.Button);
const sf = letterNode.getComponent(cc.Sprite).spriteFrame; letterBg.on("click", () => {
this.showLetterAnimation();
const mask = cc.find('LetterMask', letterBg); });
const maskComponent = mask.getComponent(cc.Mask);
maskComponent.spriteFrame = sf; let letterName = "";
if (letter == letter.toLowerCase()) {
const bg = cc.find('LetterMask/bg', letterBg); letterName = `small_${letter}`;
bg.active = true; } else {
bg.opacity = 255; letterName = `big_${letter.toLowerCase()}`;
}
return letterBg; const letterNode = cc.find(`letters/Img_letter_${letterName}`);
}, const sf = letterNode.getComponent(cc.Sprite).spriteFrame;
getDrawNodeList() { const mask = cc.find("LetterMask", letterBg);
return []; const maskComponent = mask.getComponent(cc.Mask);
}, maskComponent.spriteFrame = sf;
initListener() { const bg = cc.find("LetterMask/bg", letterBg);
console.log('initListener'); bg.active = true;
bg.opacity = 255;
const title = cc.find('Canvas/bg/title');
title.addComponent(cc.Button); return letterBg;
title.on('click', () => { },
cc.audioEngine.play(this.titleAudio, false, 0.8);
}); getDrawNodeList() {
return [];
const BtnBigLetter = cc.find('Canvas/bg/BtnBigLetter'); },
const BtnSmallLetter = cc.find('Canvas/bg/BtnSmallLetter');
initListener() {
// const bgBtn = cc.find('Canvas/bg/Img_letter_bg'); console.log("initListener");
// console.log('bgBtn = ' + bgBtn);
// bgBtn.on('click', () => { const title = cc.find("Canvas/bg/title");
// console.log('汪汪汪'); title.addComponent(cc.Button);
// this.showLetterAnimation(); title.on("click", () => {
// }); cc.audioEngine.play(this.titleAudio, false, 0.8);
});
BtnBigLetter.on('click', () => {
BtnBigLetter.getChildByName('Img_normal').active = false; const BtnBigLetter = cc.find("Canvas/bg/BtnBigLetter");
BtnSmallLetter.getChildByName('Img_normal').active = true; const BtnSmallLetter = cc.find("Canvas/bg/BtnSmallLetter");
BtnBigLetter.getChildByName('Img_selected').active = true;
BtnSmallLetter.getChildByName('Img_selected').active = false; // const bgBtn = cc.find('Canvas/bg/Img_letter_bg');
// console.log('bgBtn = ' + bgBtn);
jelly(BtnBigLetter); // bgBtn.on('click', () => {
// console.log('汪汪汪');
cc.audioEngine.play(this.switchAudio, false, 0.8); // this.showLetterAnimation();
// });
this.setLetter(this.letter.toUpperCase());
BtnBigLetter.on("click", () => {
this._writingIdx++; BtnBigLetter.getChildByName("Img_normal").active = false;
this.startEditMode(); BtnSmallLetter.getChildByName("Img_normal").active = true;
}); BtnBigLetter.getChildByName("Img_selected").active = true;
BtnSmallLetter.on('click', () => { BtnSmallLetter.getChildByName("Img_selected").active = false;
BtnBigLetter.getChildByName('Img_normal').active = true;
BtnSmallLetter.getChildByName('Img_normal').active = false; jelly(BtnBigLetter);
BtnBigLetter.getChildByName('Img_selected').active = false;
BtnSmallLetter.getChildByName('Img_selected').active = true; cc.audioEngine.play(this.switchAudio, false, 0.8);
jelly(BtnSmallLetter); this.setLetter(this.letter.toUpperCase());
cc.audioEngine.play(this.switchAudio, false, 0.8); this._writingIdx++;
this.startEditMode();
this.setLetter(this.letter.toLowerCase()); });
BtnSmallLetter.on("click", () => {
this._writingIdx++; BtnBigLetter.getChildByName("Img_normal").active = true;
this.startEditMode(); BtnSmallLetter.getChildByName("Img_normal").active = false;
}); BtnBigLetter.getChildByName("Img_selected").active = false;
BtnSmallLetter.getChildByName("Img_selected").active = true;
const btnBack = cc.find('Canvas/EditModeNode/BtnBack');
btnBack.on('click', () => { jelly(BtnSmallLetter);
const posList = this.letterPosList[this.letter];
const lastPen = posList[posList.length - 1]; cc.audioEngine.play(this.switchAudio, false, 0.8);
if (lastPen && lastPen.length > 0) {
lastPen.pop(); this.setLetter(this.letter.toLowerCase());
} else {
if (posList.length > 0) { this._writingIdx++;
posList.pop(); this.startEditMode();
} });
}
this.updateEditMode(); const btnBack = cc.find("Canvas/EditModeNode/BtnBack");
}); btnBack.on("click", () => {
const btnNext = cc.find('Canvas/EditModeNode/BtnNext'); const posList = this.letterPosList[this.letter];
btnNext.on('click', () => { const lastPen = posList[posList.length - 1];
const posList = this.letterPosList[this.letter]; if (lastPen && lastPen.length > 0) {
posList.push([]); lastPen.pop();
this.updateEditMode(); } else {
}); if (posList.length > 0) {
posList.pop();
const btnShow = cc.find('Canvas/EditModeNode/BtnShow'); }
btnShow.on('click', () => { }
this.showLetterAnimation(); this.updateEditMode();
}); });
const btnSave = cc.find('Canvas/EditModeNode/BtnSave'); const btnNext = cc.find("Canvas/EditModeNode/BtnNext");
btnSave.on('click', () => { btnNext.on("click", () => {
const posList = this.letterPosList[this.letter]; const posList = this.letterPosList[this.letter];
console.log(JSON.stringify(posList)); posList.push([]);
}); this.updateEditMode();
}, });
_writingIdx: 0, const btnShow = cc.find("Canvas/EditModeNode/BtnShow");
async showLetterAnimation() { btnShow.on("click", () => {
this._writingIdx++; this.showLetterAnimation();
const writingIdx = this._writingIdx; });
console.log('set writingIdx = ' + writingIdx); const btnSave = cc.find("Canvas/EditModeNode/BtnSave");
cc.find(`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/bg`).active = false; btnSave.on("click", () => {
const drawNode = cc.find(`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/DrawNode`); const posList = this.letterPosList[this.letter];
const graph = drawNode.getComponent(cc.Graphics); console.log(JSON.stringify(posList));
graph.clear(); });
},
const posList = this.letterPosList[this.letter];
const lineList = this.getLineList(posList); _writingIdx: 0,
for (const pen of lineList) { async showLetterAnimation() {
for (const line of pen) { this._writingIdx++;
this.drawALineLast(drawNode, line.startPos, line.endPos, cc.color(181, 39, 48), writingIdx); const writingIdx = this._writingIdx;
await asyncDelay(0.02); console.log("set writingIdx = " + writingIdx);
} cc.find(
await asyncDelay(0.1); `Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/bg`
} ).active = false;
console.log('writingIdx = ' + writingIdx); const drawNode = cc.find(
console.log('this._writingIdx = ' + this._writingIdx); `Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/DrawNode`
if (writingIdx == this._writingIdx) { );
const audioClip = this[`small${this.letter.toUpperCase()}`]; const graph = drawNode.getComponent(cc.Graphics);
cc.audioEngine.play(audioClip, false, 0.8); graph.clear();
// if (this.letter == this.letter.toUpperCase()) {
// const audioClip = this[`big${this.letter.toUpperCase()}`]; const posList = this.letterPosList[this.letter];
// cc.audioEngine.play(audioClip, false, 0.8); const lineList = this.getLineList(posList);
// } else { for (const pen of lineList) {
// const audioClip = this[`small${this.letter.toUpperCase()}`]; for (const line of pen) {
// cc.audioEngine.play(audioClip, false, 0.8); this.drawALineLast(
// } drawNode,
} line.startPos,
}, line.endPos,
cc.color(181, 39, 48),
editMode: false, writingIdx
startEditMode() { );
if (!this.debugMode) { await asyncDelay(0.02);
return; }
} await asyncDelay(0.1);
cc.find('Canvas/EditModeNode').active = true; }
this.editMode = true; console.log("writingIdx = " + writingIdx);
cc.find(`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/bg`).active = true; console.log("this._writingIdx = " + this._writingIdx);
const drawNode = cc.find(`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/DrawNode`); if (writingIdx == this._writingIdx) {
drawNode.addComponent(cc.Button); const audioClip = this[`small${this.letter.toUpperCase()}`];
drawNode.on('touchstart', (event) => { cc.audioEngine.play(audioClip, false, 0.8);
const touchLocation = event.getLocation(); // if (this.letter == this.letter.toUpperCase()) {
const pos = drawNode.convertToNodeSpaceAR(touchLocation); // const audioClip = this[`big${this.letter.toUpperCase()}`];
const posList = this.letterPosList[this.letter]; // cc.audioEngine.play(audioClip, false, 0.8);
if (posList.length == 0) { // } else {
posList.push([]); // const audioClip = this[`small${this.letter.toUpperCase()}`];
} // cc.audioEngine.play(audioClip, false, 0.8);
posList[posList.length - 1].push(pos); // }
this.updateEditMode(); }
}); },
drawNode.on('touchmove', (event) => {
const touchLocation = event.getLocation(); editMode: false,
const pos = drawNode.convertToNodeSpaceAR(touchLocation); startEditMode() {
const posList = this.letterPosList[this.letter]; if (!this.debugMode) {
const lastPen = posList[posList.length - 1]; return;
lastPen[lastPen.length - 1] = pos; }
this.updateEditMode(); cc.find("Canvas/EditModeNode").active = true;
}); this.editMode = true;
this.updateEditMode(); cc.find(
}, `Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/bg`
).active = true;
getLineList(posList) { const drawNode = cc.find(
const lineList = []; `Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/DrawNode`
for (const pen of posList) { );
const newPen = this.interpolatePos(pen, 10); drawNode.addComponent(cc.Button);
const newLine = []; drawNode.on("touchstart", (event) => {
newPen.forEach((pos, idx) => { const touchLocation = event.getLocation();
if (idx < newPen.length - 1) { const pos = drawNode.convertToNodeSpaceAR(touchLocation);
newLine.push({ const posList = this.letterPosList[this.letter];
startPos: pos, if (posList.length == 0) {
endPos: newPen[idx + 1] posList.push([]);
}); }
} posList[posList.length - 1].push(pos);
}); this.updateEditMode();
if (pen.length == 1) { });
newLine.push({ drawNode.on("touchmove", (event) => {
startPos: pen[0], const touchLocation = event.getLocation();
endPos: cc.v2(pen[0].x, pen[0].y + 0.001) const pos = drawNode.convertToNodeSpaceAR(touchLocation);
}); const posList = this.letterPosList[this.letter];
} const lastPen = posList[posList.length - 1];
lineList.push(newLine); lastPen[lastPen.length - 1] = pos;
} this.updateEditMode();
return lineList; });
}, this.updateEditMode();
},
updateEditMode() {
const drawNode = cc.find(`Canvas/bg/Img_letter_bg/Img_letter_bg_${this.letter}/LetterMask/DrawNode`); getLineList(posList) {
const graph = drawNode.getComponent(cc.Graphics) const lineList = [];
graph.clear(); for (const pen of posList) {
const posList = this.letterPosList[this.letter]; const newPen = this.interpolatePos(pen, 10);
const newLine = [];
const lineList = this.getLineList(posList); newPen.forEach((pos, idx) => {
for (const pen of lineList) { if (idx < newPen.length - 1) {
for (const line of pen) { newLine.push({
this.drawALine(drawNode, line.startPos, line.endPos, cc.color(0, 0, 255)); startPos: pos,
} endPos: newPen[idx + 1],
} });
posList.forEach((pen, i) => { }
const newPen = this.interpolatePos(pen, 10); });
for (const pos of newPen) { if (pen.length == 1) {
let color = cc.color(50, 50, 50); newLine.push({
if (i == posList.length - 1) { startPos: pen[0],
color = cc.color(255, 0, 0); endPos: cc.v2(pen[0].x, pen[0].y + 0.001),
} });
const idx = pen.findIndex(penPos => penPos.x == pos.x && penPos.y == pos.y); }
if (idx == -1) { lineList.push(newLine);
this.drawSmallDot(drawNode, pos, color); }
} else { return lineList;
this.drawBigCircle(drawNode, pos, color); },
}
} 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" import { getSprNode } from "./util";
cc.Class({ import BaseBgManager from "./BaseBgManager";
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();
},
initAllBg() { cc.Class({
extends: BaseBgManager,
for( let i=0; i<5; i++) { properties: {
const bg = this.initOneBg(i+1); bgArr: {
this.bgArr.push(bg); 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); initOneBg(id) {
bg.scale = this._mapScaleMax; const bg = getSprNode("bg/" + id + "/bg_" + id);
bg.scale = this._context.mapScaleMax;
const bgItemLayer = new cc.Node(); const bgItemLayer = new cc.Node();
bgItemLayer.scale = 1 / bg.scale; bgItemLayer.scale = 1 / bg.scale;
bg.addChild(bgItemLayer); 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 itemTop = getSprNode("bg/" + id + "/bg_top" + id);
const itemBottom = getSprNode("bg/"+id+"/bg_bottom"+id) bgItemLayer.addChild(itemTop, 1);
bgItemLayer.addChild(itemBottom, 1); this.toTop(itemTop);
itemBottom.y = -this._bgHeight / 2;
itemBottom.anchorY = 0;
itemBottom.scale = this._bgWidth / itemBottom.width;
const item = getSprNode("bg/"+id+"/bg_dian"+id) const itemBottom = getSprNode("bg/" + id + "/bg_bottom" + id);
bgItemLayer.addChild(item); bgItemLayer.addChild(itemBottom, 1);
item.x = -this._bgWidth / 10 * 4; this.toBottom(itemBottom);
item.y = -this._bgHeight / 6;
item.scale = this._mapScaleMin;
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") const itemLeft = getSprNode("bg/" + id + "/bg_left");
bgItemLayer.addChild(itemLeft); bgItemLayer.addChild(itemLeft);
itemLeft.x = -this._bgWidth / 2; this.toLeft(itemLeft);
itemLeft.anchorX = 0;
itemLeft.scale = this._bgHeight / itemLeft.height;
const itemRight = getSprNode("bg/"+id+"/bg_right") const itemRight = getSprNode("bg/" + id + "/bg_right");
bgItemLayer.addChild(itemRight); bgItemLayer.addChild(itemRight);
itemRight.x = this._bgWidth / 2; this.toRight(itemRight);
itemRight.anchorX = 1; }
itemRight.scale = this._bgHeight / itemRight.height;
}
return bg; return bg;
}, },
getNext () { getNext() {
return this.bgArr[3]; if (this.bgArr.length === 0) {
this.initAllBg();
} }
}) return this.bgArr[3];
\ No newline at end of file },
});
...@@ -3,6 +3,6 @@ ...@@ -3,6 +3,6 @@
"packages": "packages", "packages": "packages",
"name": "play", "name": "play",
"id": "9af72fd2-44a6-4131-8ea3-3e1b3fa22231", "id": "9af72fd2-44a6-4131-8ea3-3e1b3fa22231",
"version": "2.4.0", "version": "2.4.4",
"isNew": false "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": { "game": {
"name": "未知游戏", "name": "UNKNOW GAME",
"appid": "UNKNOW" "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