Commit 2a162676 authored by 范雪寒's avatar 范雪寒

feat: 播放页基本完成

parent 45fc7604
This diff is collapsed.
import { defaultData } from '../script/defaultData'; import { defaultData } from '../script/defaultData';
import { asyncDelay, jelly } from '../script/utils';
import { letterData } from '../script/letterPointData';
cc.Class({ cc.Class({
extends: cc.Component, extends: cc.Component,
...@@ -34,7 +36,7 @@ cc.Class({ ...@@ -34,7 +36,7 @@ cc.Class({
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) {
...@@ -81,37 +83,300 @@ cc.Class({ ...@@ -81,37 +83,300 @@ cc.Class({
this.initAudio(); this.initAudio();
this.initView(); this.initView();
this.initListener(); this.initListener();
this.showLetterAnimation();
this.startEditMode();
}, },
letterPosList: null,
initData() { initData() {
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() { initAudio() {
}, },
debugMode: false,
letter: null,
initView() { initView() {
const letter = 'W'; // this.debugMode = true;
this.setLetter('o');
},
setLetter(letter) {
this.letter = letter;
this.updateLetterBtnLabel();
this.addDrawLetter(this.letter);
},
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();
},
drawALine(drawNode, fromPos, toPos, color) {
const graph = drawNode.getComponent(cc.Graphics);
if (color) {
graph.strokeColor = color;
}
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_${letter}`)); const letterBg = cc.instantiate(cc.find(`Img_letter_bg_${letter}`));
letterBg.x = 0; letterBg.x = 0;
letterBg.y = 0; letterBg.y = 0;
letterBg.parent = cc.find('Canvas/bg/Img_letter_bg'); letterBg.parent = letterBaseNode;
cc.find('LetterMask/bg', letterBg).active = false;
// cc.find('LetterMask/bg', letterBg).active = false; return letterBg;
const drawNodeList = this.getDrawNodeList(letterBg);
for (const drawNode of drawNodeList) {
// drawNode.opcity = 0;
}
}, },
getDrawNodeList(letterBg) { getDrawNodeList() {
const drawNodeList = []; return [];
drawNodeList.push(...letterBg.children.filter((child) => child.name != LetterMask));
return drawNodeList;
}, },
initListener() { initListener() {
const BtnBigLetter = cc.find('Canvas/bg/BtnBigLetter');
const BtnSmallLetter = cc.find('Canvas/bg/BtnSmallLetter');
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);
this.setLetter(this.letter.toUpperCase());
this.showLetterAnimation();
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);
this.setLetter(this.letter.toLowerCase());
this.showLetterAnimation();
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));
});
},
async showLetterAnimation() {
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`);
const graph = drawNode.getComponent(cc.Graphics);
graph.clear();
const posList = this.letterPosList[this.letter];
const lienList = this.getLineList(posList);
for (const pen of lienList) {
for (const line of pen) {
this.drawALine(drawNode, line.startPos, line.endPos, cc.color(181, 39, 48));
await asyncDelay(0.02);
}
await asyncDelay(0.1);
}
},
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]
});
}
});
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 lienList = this.getLineList(posList);
for (const pen of lienList) {
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);
}
}
});
}
}); });
export const letterData = {
A: [],
A: [],
B: [],
C: [],
D: [],
E: [],
F: [],
G: [[{ "x": 76, "y": 113, "z": 0 }, { "x": 59, "y": 136, "z": 0 }, { "x": 33, "y": 154, "z": 0 }, { "x": -7, "y": 167, "z": 0 }, { "x": -52, "y": 155, "z": 0 }, { "x": -74, "y": 120, "z": 0 }, { "x": -83, "y": 85, "z": 0 }, { "x": -85, "y": 48, "z": 0 }, { "x": -86, "y": 18, "z": 0 }, { "x": -79, "y": -17, "z": 0 }, { "x": -70, "y": -47, "z": 0 }, { "x": -43, "y": -69, "z": 0 }, { "x": -15, "y": -80, "z": 0 }, { "x": 21, "y": -84, "z": 0 }, { "x": 48, "y": -67, "z": 0 }, { "x": 66, "y": -45, "z": 0 }, { "x": 79, "y": -23, "z": 0 }, { "x": 89, "y": 1, "z": 0 }, { "x": 97, "y": 33, "z": 0 }], [{ "x": 12, "y": 39, "z": 0 }, { "x": 95, "y": 40, "z": 0 }]],
H: [],
I: [],
J: [],
K: [],
L: [],
M: [],
N: [],
O: [[{ "x": -21, "y": 169, "z": 0 }, { "x": -63, "y": 137, "z": 0 }, { "x": -73, "y": 107, "z": 0 }, { "x": -87, "y": 73, "z": 0 }, { "x": -91, "y": 38, "z": 0 }, { "x": -92, "y": 2, "z": 0 }, { "x": -82, "y": -29, "z": 0 }, { "x": -66, "y": -52, "z": 0 }, { "x": -46, "y": -67, "z": 0 }, { "x": -26, "y": -80, "z": 0 }, { "x": 16, "y": -82, "z": 0 }, { "x": 54, "y": -61, "z": 0 }, { "x": 75, "y": -18, "z": 0 }, { "x": 87, "y": 30, "z": 0 }, { "x": 80, "y": 82, "z": 0 }, { "x": 64, "y": 125, "z": 0 }, { "x": 37, "y": 157, "z": 0 }, { "x": 7, "y": 176, "z": 0 }, { "x": -4, "y": 174, "z": 0 }]],
P: [],
Q: [],
R: [],
S: [],
T: [],
U: [],
V: [],
W: [[{ "x": -171, "y": 170, "z": 0 }, { "x": -84, "y": -104, "z": 0 }], [{ "x": -92, "y": -97, "z": 0 }, { "x": -6, "y": 178, "z": 0 }], [{ "x": -7, "y": 180, "z": 0 }, { "x": 77, "y": -109, "z": 0 }], [{ "x": 70, "y": -93, "z": 0 }, { "x": 162, "y": 178, "z": 0 }]],
X: [],
Y: [],
Z: [],
a: [],
b: [],
c: [],
d: [],
e: [],
f: [],
g: [[{ "x": 52, "y": -3, "z": 0 }, { "x": 41, "y": 19, "z": 0 }, { "x": 6, "y": 43, "z": 0 }, { "x": -40, "y": 42, "z": 0 }, { "x": -75, "y": 13, "z": 0 }, { "x": -81, "y": -31, "z": 0 }, { "x": -66, "y": -69, "z": 0 }, { "x": -23, "y": -85, "z": 0 }, { "x": 22, "y": -71, "z": 0 }, { "x": 46, "y": -35, "z": 0 }, { "x": 54, "y": 11, "z": 0 }, { "x": 54, "y": 50, "z": 0 }, { "x": 54, "y": -106, "z": 0 }, { "x": 42, "y": -147, "z": 0 }, { "x": 11, "y": -164, "z": 0 }, { "x": -28, "y": -166, "z": 0 }, { "x": -60, "y": -157, "z": 0 }]],
h: [],
i: [],
j: [],
k: [],
l: [],
m: [],
n: [],
o: [[{ "x": -17, "y": 49, "z": 0 }, { "x": -54, "y": 18, "z": 0 }, { "x": -65, "y": -9, "z": 0 }, { "x": -66, "y": -37, "z": 0 }, { "x": -45, "y": -70, "z": 0 }, { "x": -15, "y": -84, "z": 0 }, { "x": 17, "y": -84, "z": 0 }, { "x": 48, "y": -68, "z": 0 }, { "x": 65, "y": -37, "z": 0 }, { "x": 63, "y": -4, "z": 0 }, { "x": 47, "y": 24, "z": 0 }, { "x": -9, "y": 47, "z": 0 }]],
p: [],
q: [],
r: [],
s: [],
t: [],
u: [],
v: [],
w: [],
x: [],
y: [],
z: [],
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "25b797e9-bbd2-4061-8369-57cb2c511c1f",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "f612576c-502f-4157-9675-ac6ca7295613",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 369,
"height": 541,
"platformSettings": {},
"subMetas": {
"Img_letter_big_g": {
"ver": "1.0.4",
"uuid": "c6768f37-9c84-408c-80e9-367ec817f6e0",
"rawTextureUuid": "f612576c-502f-4157-9675-ac6ca7295613",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 41,
"trimX": 73,
"trimY": 80,
"width": 223,
"height": 299,
"rawWidth": 369,
"rawHeight": 541,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "ffda894e-750d-4d4a-86d2-fa8c23ef1cba",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 369,
"height": 541,
"platformSettings": {},
"subMetas": {
"Img_letter_big_o": {
"ver": "1.0.4",
"uuid": "64e6b917-ac6e-4c65-8005-7e3817252622",
"rawTextureUuid": "ffda894e-750d-4d4a-86d2-fa8c23ef1cba",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 41.5,
"trimX": 73,
"trimY": 80,
"width": 223,
"height": 298,
"rawWidth": 369,
"rawHeight": 541,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 364, "width": 369,
"height": 298, "height": 541,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"Img_letter_big_w": { "Img_letter_big_w": {
......
{
"ver": "2.3.5",
"uuid": "083b0a57-9beb-43b6-9ff8-a3a20174a736",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 369,
"height": 541,
"platformSettings": {},
"subMetas": {
"Img_letter_small_g": {
"ver": "1.0.4",
"uuid": "70ff63f6-25a6-44d0-a46b-e0f43b7824ac",
"rawTextureUuid": "083b0a57-9beb-43b6-9ff8-a3a20174a736",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": -15,
"offsetY": -60,
"trimX": 80,
"trimY": 205,
"width": 179,
"height": 251,
"rawWidth": 369,
"rawHeight": 541,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "fde32b44-3262-442a-b00b-ea6af9c48b05",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 369,
"height": 541,
"platformSettings": {},
"subMetas": {
"Img_letter_small_o": {
"ver": "1.0.4",
"uuid": "acd037f7-d4b2-410f-a1c0-70e0ae21b048",
"rawTextureUuid": "fde32b44-3262-442a-b00b-ea6af9c48b05",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0.5,
"offsetY": -20.5,
"trimX": 96,
"trimY": 204,
"width": 178,
"height": 174,
"rawWidth": 369,
"rawHeight": 541,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
"premultiplyAlpha": false, "premultiplyAlpha": false,
"genMipmaps": false, "genMipmaps": false,
"packable": true, "packable": true,
"width": 254, "width": 369,
"height": 171, "height": 541,
"platformSettings": {}, "platformSettings": {},
"subMetas": { "subMetas": {
"Img_letter_small_w": { "Img_letter_small_w": {
......
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