Commit 412543e3 authored by liujiangnan's avatar liujiangnan

feat: 界面

parent d5c494f9
This diff is collapsed.
import { asyncDelay, onHomeworkFinish } from "../script/util"; import { asyncDelay, playAudioByUrl, asyncGetSpriteFrimeByUrl, buttonOnClick } from "../script/util";
import { MyCocosSceneComponent } from "../script/MyCocosSceneComponent"; import { MyCocosSceneComponent } from "../script/MyCocosSceneComponent";
const { ccclass, property } = cc._decorator; const { ccclass, property } = cc._decorator;
...@@ -7,14 +7,12 @@ const { ccclass, property } = cc._decorator; ...@@ -7,14 +7,12 @@ const { ccclass, property } = cc._decorator;
export default class SceneComponent extends MyCocosSceneComponent { export default class SceneComponent extends MyCocosSceneComponent {
addPreloadImage() { addPreloadImage() {
// TODO 根据自己的配置预加载图片资源 this._imageResList.push({ url: this.data.bookImg });
// this._imageResList.push({ url: this.data.pic_url });
// this._imageResList.push({ url: this.data.pic_url_2 });
} }
addPreloadAudio() { addPreloadAudio() {
// TODO 根据自己的配置预加载音频资源 this._audioResList.push({ url: this.data.questionTextAudio });
// this._audioResList.push({ url: this.data.audio_url }); this._audioResList.push({ url: this.data.bookAudio });
} }
addPreloadAnima() { addPreloadAnima() {
...@@ -22,12 +20,59 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -22,12 +20,59 @@ export default class SceneComponent extends MyCocosSceneComponent {
} }
async onLoadEnd() { async onLoadEnd() {
// TODO 加载完成后的逻辑写在这里, 下面的代码仅供参考 await this.initView();
this.initListener(); this.initListener();
} }
async initView() {
const levelNode = cc.find(`Canvas/bg/L${this.data.choseLevel}`);
if(!levelNode) {
return;
}
levelNode.active = true;
cc.find(`box/title`, levelNode).getComponent(cc.Label).string = this.data.title;
try {
const bookImgFrame:any = await asyncGetSpriteFrimeByUrl(this.data.bookImg);
cc.find(`Canvas/bg/bookImg/img`).getComponent(cc.Sprite).spriteFrame = bookImgFrame;
} catch (error) {
console.error(error);
}
}
initListener() { initListener() {
const bgButton = cc.find(`Canvas/bg/bookImg`);
bgButton.on('click', () => {
playAudioByUrl(this.data.bookAudio);
});
const levelNode = cc.find(`Canvas/bg/L${this.data.choseLevel}`);
if(!levelNode) {
return;
}
const levelButton = cc.find(`box`, levelNode);
levelButton.on('click', ()=>{
if (levelButton['cantClick']) {
return;
}
levelButton['cantClick'] = true;
// TODO 播放骨骼动画
playAudioByUrl(this.data.questionTextAudio, ()=>{
// TODO 更新骨骼动画状态
levelButton['cantClick'] = false;
});
})
buttonOnClick(cc.find(`kdh`, levelNode), () => {
// TODO 跳转到看动画(第一个课件)
});
buttonOnClick(cc.find(`dgs`, levelNode), () => {
// TODO 跳转到读故事(第二个课件)
});
buttonOnClick(cc.find(`qpy`, levelNode), () => {
// TODO 跳转到趣配音(第三个课件)
});
} }
......
...@@ -87,7 +87,7 @@ export class MyCocosSceneComponent extends cc.Component { ...@@ -87,7 +87,7 @@ export class MyCocosSceneComponent extends cc.Component {
preload() { 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) => { cc.assetManager.loadAny(preloadArr, null, null, async (err, data) => {
if (window && window["air"]) { if (window && window["air"]) {
// window["air"].onCourseInScreen = (next) => { // window["air"].onCourseInScreen = (next) => {
...@@ -95,7 +95,7 @@ export class MyCocosSceneComponent extends cc.Component { ...@@ -95,7 +95,7 @@ export class MyCocosSceneComponent extends cc.Component {
// this.onLoadEnd(); // this.onLoadEnd();
// next(); // next();
// }; // };
this.onLoadEnd(); await this.onLoadEnd();
window["air"].hideAirClassLoading(); window["air"].hideAirClassLoading();
} else { } else {
this.onLoadEnd(); this.onLoadEnd();
......
export const defaultData = { export const defaultData = {
"pic_url": "http://staging-teach.cdn.ireadabc.com/ed94332a503c31e0908bd4c6923a2665.png", "title": "猩猩有个苹果。\n他想要什么?",
"pic_url_2": "http://staging-teach.cdn.ireadabc.com/5fb60317ade0195d35ad8034d5370a7f.png", "questionTextAudio": "http://staging-teach.cdn.ireadabc.com/69a71b1cfb979a5e0b32d72c21c55423_l.mp3",
"text": "This is a test label.", "audioFileName": "胜利音效1.mp3",
"audio_url": "http://staging-teach.cdn.ireadabc.com/f47f1d7b5c160fe1c59500d180346240.mp3" "choseLevel": "1",
"bookImg": "http://staging-teach.cdn.ireadabc.com/601b7713313df8ee51c3533ed2e8e63d.png",
"bookAudio": "http://staging-teach.cdn.ireadabc.com/1c923d9ad42a500edceba37a985b49d5_l.mp3",
"bookAudioFileName": "占位音频.mp3"
} }
\ No newline at end of file
...@@ -94,13 +94,13 @@ export function getScaleRateBy2Node(baseNode, targetNode, maxFlag = true) { ...@@ -94,13 +94,13 @@ export function getScaleRateBy2Node(baseNode, targetNode, maxFlag = true) {
} }
} }
export function getDistance (start, end){ export function getDistance(start, end) {
var pos = cc.v2(start.x - end.x, start.y - end.y); var pos = cc.v2(start.x - end.x, start.y - end.y);
var dis = Math.sqrt(pos.x*pos.x + pos.y*pos.y); var dis = Math.sqrt(pos.x * pos.x + pos.y * pos.y);
return dis; return dis;
} }
export function playAudioByUrl(audio_url, cb=null) { export function playAudioByUrl(audio_url, cb = null) {
if (audio_url) { if (audio_url) {
cc.assetManager.loadRemote(audio_url, (err, audioClip) => { cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
const audioId = cc.audioEngine.play(audioClip, false, 0.8); const audioId = cc.audioEngine.play(audioClip, false, 0.8);
...@@ -114,21 +114,21 @@ export function playAudioByUrl(audio_url, cb=null) { ...@@ -114,21 +114,21 @@ export function playAudioByUrl(audio_url, cb=null) {
} }
export function btnClickAnima(btn, time=0.15, rate=1.05) { export function btnClickAnima(btn, time = 0.15, rate = 1.05) {
btn.tmpScale = btn.scale; btn.tmpScale = btn.scale;
btn.on(cc.Node.EventType.TOUCH_START, () => { btn.on(cc.Node.EventType.TOUCH_START, () => {
cc.tween(btn) cc.tween(btn)
.to(time / 2, {scale: btn.scale * rate}) .to(time / 2, { scale: btn.scale * rate })
.start() .start()
}) })
btn.on(cc.Node.EventType.TOUCH_CANCEL, () => { btn.on(cc.Node.EventType.TOUCH_CANCEL, () => {
cc.tween(btn) cc.tween(btn)
.to(time / 2, {scale: btn.tmpScale}) .to(time / 2, { scale: btn.tmpScale })
.start() .start()
}) })
btn.on(cc.Node.EventType.TOUCH_END, () => { btn.on(cc.Node.EventType.TOUCH_END, () => {
cc.tween(btn) cc.tween(btn)
.to(time / 2, {scale: btn.tmpScale}) .to(time / 2, { scale: btn.tmpScale })
.start() .start()
}) })
} }
...@@ -143,6 +143,19 @@ export function getSpriteFrimeByUrl(url, cb) { ...@@ -143,6 +143,19 @@ export function getSpriteFrimeByUrl(url, cb) {
}) })
} }
export function asyncGetSpriteFrimeByUrl(url) {
return new Promise((resolve, reject) => {
cc.loader.load({ url }, (err, img) => {
if(err){
reject(err);
return;
}
const spriteFrame = new cc.SpriteFrame(img);
resolve(spriteFrame);
})
});
}
export function getSprNode(resName) { export function getSprNode(resName) {
const sf = cc.find('Canvas/res/img/' + resName).getComponent(cc.Sprite).spriteFrame; const sf = cc.find('Canvas/res/img/' + resName).getComponent(cc.Sprite).spriteFrame;
const node = new cc.Node(); const node = new cc.Node();
...@@ -179,7 +192,7 @@ export async function asyncDelay(time) { ...@@ -179,7 +192,7 @@ export async function asyncDelay(time) {
try { try {
cc.tween(cc.find('Canvas')) cc.tween(cc.find('Canvas'))
.delay(time) .delay(time)
.call(()=>{ .call(() => {
resolve(null); resolve(null);
}) })
.start(); .start();
...@@ -236,7 +249,7 @@ export async function asyncLoadDragonBoneAnime(node, { skeJsonData: { url: skeJs ...@@ -236,7 +249,7 @@ export async function asyncLoadDragonBoneAnime(node, { skeJsonData: { url: skeJs
}); });
Promise.all([loadTexture, loadTexJsonData, loadSkeJsonData]).then(([texture, atlasJson, dragonBonesJson]) => { Promise.all([loadTexture, loadTexJsonData, loadSkeJsonData]).then(([texture, atlasJson, dragonBonesJson]) => {
const atlas = new dragonBones.DragonBonesAtlasAsset(); const atlas: any = new dragonBones.DragonBonesAtlasAsset();
atlas.atlasJson = JSON.stringify(atlasJson); atlas.atlasJson = JSON.stringify(atlasJson);
atlas.texture = texture; atlas.texture = texture;
...@@ -246,7 +259,7 @@ export async function asyncLoadDragonBoneAnime(node, { skeJsonData: { url: skeJs ...@@ -246,7 +259,7 @@ export async function asyncLoadDragonBoneAnime(node, { skeJsonData: { url: skeJs
dragonDisplay.dragonAtlasAsset = atlas; dragonDisplay.dragonAtlasAsset = atlas;
dragonDisplay.dragonAsset = asset; dragonDisplay.dragonAsset = asset;
let armatureNames = dragonBonesJson.armature.map(data => data.name); let armatureNames = (<any>dragonBonesJson).armature.map(data => data.name);
if (armatureNames.length > 0) { if (armatureNames.length > 0) {
dragonDisplay.armatureName = armatureNames[0]; dragonDisplay.armatureName = armatureNames[0];
...@@ -411,56 +424,112 @@ export function showTrebleFirework(baseNode, rabbonList) { ...@@ -411,56 +424,112 @@ export function showTrebleFirework(baseNode, rabbonList) {
showFireworks(right); showFireworks(right);
} }
export function httpHeadCall(requsetUrl: string, callback) { export function onHomeworkFinish() {
let xhr = new XMLHttpRequest(); const middleLayer = cc.find('middleLayer');
console.log("Status: Send Post Request to " + requsetUrl); if (middleLayer) {
try { const middleLayerComponent = middleLayer.getComponent('middleLayer');
if (middleLayerComponent.role == 'student') {
middleLayerComponent.onHomeworkFinish(() => { });
}
} else {
console.log('onHomeworkFinish');
}
}
export function asyncCallNetworkApiGet(apiName, data): Promise<any> {
return new Promise((resolve, reject) => {
callNetworkApiGet(apiName, data, (res => {
resolve(res);
}));
});
}
export function asyncCallNetworkApiPost(uri, data): Promise<any> {
return new Promise((resolve, reject) => {
callNetworkApiPost(uri, data, (res) => {
resolve(res);
});
});
}
export function callNetworkApiPost(uri, data, callBack) {
const middleLayer = cc.find('middleLayer')?.getComponent('middleLayer');
if (middleLayer) {
middleLayer.callNetworkApiPost(uri, data, callBack);
return;
}
const baseUrl = 'http://staging-openapi.iteachabc.com';
const xhr = new XMLHttpRequest();
const url = `${baseUrl}${uri}`;
xhr.open("POST", url, true);
xhr.setRequestHeader('content-type', 'application/json');
xhr.onreadystatechange = () => { xhr.onreadystatechange = () => {
try {
console.log('xhr.readyState: ', xhr.readyState);
if (xhr.readyState == 4) { if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 400)) { callBack(JSON.parse(xhr.responseText));
callback(true);
} else {
callback(false);
} }
} }
xhr.send(JSON.stringify(data));
}
} catch (e) { export function callNetworkApiGet(uri, data, callBack) {
console.log(e) const middleLayer = cc.find('middleLayer')?.getComponent('middleLayer');
if (middleLayer) {
middleLayer.callNetworkApiGet(uri, data, callBack);
return;
}
const baseUrl = 'http://staging-openapi.iteachabc.com';
let queryStr = '?';
const params = [];
for (const key in data) {
if (Object.hasOwnProperty.call(data, key)) {
params.push(`${key}=${data[key]}`);
}
}
queryStr += params.join("&");
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
callBack(xhr.responseText);
} }
}; };
xhr.open("HEAD", requsetUrl, true); const url = `${baseUrl}${uri}${queryStr}`;
console.log('url = ' + url);
xhr.open('GET', url, true);
xhr.send(); xhr.send();
xhr.timeout = 15000;
xhr.onerror = (e) => {
callback(false);
};
xhr.ontimeout = (e) => {
callback(false);
};
} catch (e) {
console.log("Send Get Request error: ", e);
}
} }
export function onHomeworkFinish(data = "", callback = ()=>{}) { export function jumpToBundle(bundleName: string) {
const middleLayer = cc.find('middleLayer'); const middleLayer = cc.find('middleLayer');
if (middleLayer) { if (middleLayer) {
const middleLayerComponent = middleLayer.getComponent('middleLayer'); const middleLayerComponent = middleLayer.getComponent('middleLayer');
middleLayerComponent.onHomeworkFinish(callback, data); middleLayerComponent.loadOnlineBundle(bundleName);
} else { } else {
console.log('onHomeworkFinish', JSON.stringify(data)); console.log('jump to bundle: ' + bundleName);
} }
} }
export function callMiddleLayerFunction(apiName: string, data: any, callback: Function) { export function jumpToCourseWare(courseWareId: number) {
const middleLayer = cc.find('middleLayer'); const middleLayer = cc.find('middleLayer');
if (middleLayer) { if (middleLayer) {
const middleLayerComponent = middleLayer.getComponent('middleLayer'); const middleLayerComponent = middleLayer.getComponent('middleLayer');
middleLayerComponent.callMiddleLayerFunction(apiName, data, callback); middleLayerComponent.loadOnlineCourseWare(courseWareId);
} else { } else {
console.log('callMiddleLayerFunction: ' + apiName); console.log('jump to CourseWare: ' + courseWareId);
} }
} }
export function buttonOnClick(button: cc.Node, callback: Function, scale = 1.0) {
button.on('click', () => {
if (button['cantClick']) {
return;
}
button['cantClick'] = true;
cc.tween(button)
.to(0.1, { scale: scale * 1.1 })
.to(0.1, { scale: scale })
.call(() => {
button['cantClick'] = false;
callback && callback();
})
.start();
});
}
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