Commit fe237b09 authored by liujiangnan's avatar liujiangnan

feat: 界面铺设完成

parent 0dc5e5e3
This diff is collapsed.
import { buttonOnceClick } from "../Script/util"; import { buttonOnceClick, buttonOnClick, getSpriteFrimeByUrl, asyncGetSpriteFrimeByUrl, playAudioByUrl,
asyncLoadDragonBoneAnime, asyncDelay, setNetImg} from "../Script/util";
import { defaultData } from "../Script/defaultData";
cc.Class({ cc.Class({
extends: cc.Component, extends: cc.Component,
properties: { properties: {
startNode: {
default: null,
type: cc.Node
},
page_view: {
default: null,
type: cc.Node
},
tip_label: {
default: null,
type: cc.Node
},
tip_left: {
default: null,
type: cc.Node
},
tip_right: {
default: null,
type: cc.Node
},
videoPlayer: { videoPlayer: {
default: null, default: null,
type: cc.VideoPlayer type: cc.VideoPlayer
...@@ -84,7 +106,9 @@ cc.Class({ ...@@ -84,7 +106,9 @@ cc.Class({
}, },
// use this for initialization // use this for initialization
onLoad: function () { onLoad () {
cc.debug.setDisplayStats(false);
this.initSize(); this.initSize();
const bgNode = cc.find('Canvas/bg'); const bgNode = cc.find('Canvas/bg');
...@@ -93,10 +117,15 @@ cc.Class({ ...@@ -93,10 +117,15 @@ cc.Class({
this._isReadyToPlay = false; this._isReadyToPlay = false;
window['vv'] = this; window['vv'] = this;
this.videoPlayer.getImpl = function() {
return this._impl;
}
cc.macro.ENABLE_TRANSPARENT_CANVAS = true; cc.macro.ENABLE_TRANSPARENT_CANVAS = true;
this.videoPlayer.node.on('ready-to-play', () => { this.videoPlayer.node.on('ready-to-play', () => {
console.log('ready-to-play'); console.log('ready-to-play');
this.playButton.active = true;
}); });
this.videoPlayer.node.on('meta-loaded', () => { this.videoPlayer.node.on('meta-loaded', () => {
console.log('meta-loaded'); console.log('meta-loaded');
...@@ -140,17 +169,101 @@ cc.Class({ ...@@ -140,17 +169,101 @@ cc.Class({
console.log('Resize', params); console.log('Resize', params);
this.initdDrag() this.initdDrag()
}); });
// this.initListener();
this.initdDrag(); this.initdDrag();
// console.log(11111) },
this.videoPlayer.getImpl = function() {
return this._impl; async initBg() {
const bgNode = cc.find('Canvas/bg');
const sfpr = await asyncGetSpriteFrimeByUrl(this.data.image);
bgNode.getComponent(cc.Sprite).spriteFrame = sfpr;
bgNode.scale = this._mapScaleMax;
},
async initTips() {
if (this.data.tipSwitch == 0) {
cc.find("btn_start", this.node).active = false;
return;
} }
cc.debug.setDisplayStats(false); this.startNode.active = true;
const data = await setNetImg(cc.find("s_group/startbg", this.startNode), this.data.tipBg, { w: 0, h: 0 }, false);
this.page_view.width = data.w - 340;
this.page_view.height = data.h - 150;
this.page_view.x = -(data.w / 2) - 85;
this.data.tipPage.forEach((dt, idx) => {
let desc = cc.instantiate(this.tip_label);
desc.getComponent(cc.Label).string = dt.title;
desc.width = this.page_view.width;
desc.height = this.page_view.height - 40;
this.page_view.getComponent(cc.PageView).addPage(desc);
desc.active = true;
desc["data"] = dt;
})
this.updataTipArrow();
const btnStart = cc.find("btn_start", this.node);
await asyncLoadDragonBoneAnime(btnStart, {
skeJsonData: this.data.imgAni.ske,
texJsonData: this.data.imgAni.tex,
texPngData: this.data.imgAni.png
});
const animaNode = btnStart['animaNode'];
animaNode.y = -80;
const db = animaNode.getComponent(dragonBones.ArmatureDisplay);
let anis = db.getAnimationNames("armatureName");
db.playAnimation(anis[0], 0);
}, },
// initListener() {
// buttonOnClick(cc.find(`Canvas/btnbg/btn_again`), this.replay); updataTipArrow() {
// }, let index = this.page_view.getComponent(cc.PageView).getCurrentPageIndex();
let pages = this.page_view.getComponent(cc.PageView).getPages();
// this.tip_left.active = pages.length > 0 && index > 0;
this.tip_right.active = pages.length > 0 && index < pages.length - 1;
cc.find("s_group/startbg/btn_close", this.startNode).active = index === pages.length - 1;
let page = pages[index];
if (page) {
cc.audioEngine.stopAll();
playAudioByUrl(page["data"].audio);
}
},
initListener() {
const btnStart = cc.find("btn_start", this.node);
const start_ske = btnStart['animaNode'];
btnStart.on('click', () => {
if (btnStart['cantClick']) {
return;
}
btnStart['cantClick'] = true;
this.startNode.active = true;
cc.tween(start_ske).to(0.2, { scale: 1 }).start();
this.updataTipArrow();
});
buttonOnClick(cc.find("s_group/startbg/btn_close", this.startNode), () => {
cc.audioEngine.stopAll();
const btnStart = cc.find("btn_start", this.node);
let start_ske = btnStart['animaNode'];
cc.tween(start_ske).to(0.2, { scale: 0.3 }).call(() => {
btnStart['cantClick'] = false;
}).start();
this.page_view.getComponent(cc.PageView).setCurrentPageIndex(0);
this.startNode.active = false;
});
const tipRight = cc.find("s_group/startbg/tip_right", this.startNode);
buttonOnClick(tipRight, () => {
tipRight.active = false;
let index = this.page_view.getComponent(cc.PageView).getCurrentPageIndex();
this.page_view.getComponent(cc.PageView).scrollToPage(index + 1, 0.3);
this.updataTipArrow();
});
},
initdDrag() { initdDrag() {
const maxX = this.ProgressBar.node.width; const maxX = this.ProgressBar.node.width;
const minX = 0; const minX = 0;
...@@ -246,51 +359,43 @@ cc.Class({ ...@@ -246,51 +359,43 @@ cc.Class({
// // this.tw = null; // // this.tw = null;
// }) // })
}, },
start() { async initView() {
await this.initBg();
// let video0 = document.getElementsByClassName('cocosVideo')[0]; await this.initTips();
// console.log(video0); this.initListener();
// video0.style.zIndex = 5; },
// let gCanvas = document.getElementsByClassName('gameCanvas')[0];
// console.log(gCanvas);
// gCanvas.style.position = 'relative';
// gCanvas.style.zIndex = 10;
// cc.Camera.main.backgroundColor = cc.color(0, 0, 0, 0);
// this.videoPlayer.keepAspectRatio = false;
if (window && window.courseware) { start() {
}
let getData = this.getData.bind(this); let getData = this.getData.bind(this);
let getAnswer; let getAnswer;
if (window && window.courseware) { if (window && window.courseware) {
// console.log('has window'); // console.log('has window');
getData = window.courseware.getData; getData = window.courseware.getData;
getAnswer = window.courseware.getAnswer; getAnswer = window.courseware.getAnswer;
} }
getData((data) => { getData(async (data) => {
console.log('data:', JSON.stringify(data)); console.log('data:', JSON.stringify(data));
this.data = data || this.getDefaultData(); this.data = data || this.getDefaultData();
this.videoPlayer.remoteURL = this.data.video_url; this.videoPlayer.remoteURL = this.data.video_url;
// this.preload() // this.preload()
if (getAnswer) { if (getAnswer) {
getAnswer(null, (ans) => { getAnswer(null, async (ans) => {
if (ans) { if (ans) {
this.isOver = JSON.parse(ans).isOver; this.isOver = JSON.parse(ans).isOver;
} }
await this.initView();
if (window && window["air"]) { if (window && window["air"]) {
window["air"].hideAirClassLoading(); window["air"].hideAirClassLoading();
} }
}); });
} else { } else {
await this.initView();
if (window && window["air"]) { if (window && window["air"]) {
window["air"].hideAirClassLoading(); window["air"].hideAirClassLoading();
} }
} }
}); });
if(window.CustomEvent){ if(window.CustomEvent){
window.dispatchEvent(new CustomEvent('resize'), true) window.dispatchEvent(new CustomEvent('resize'), true)
} }
...@@ -359,14 +464,11 @@ cc.Class({ ...@@ -359,14 +464,11 @@ cc.Class({
func(this.getDefaultData()); func(this.getDefaultData());
}, },
getDefaultData() { getDefaultData() {
// return {video_url: "http://staging-teach.cdn.ireadabc.com/5826aa205a4d33bf65552778b2aaf6f8.mp4"} return defaultData;
// return {video_url: "http://staging-teach.cdn.ireadabc.com/d2b6b86798ef09034bf29417a0e747d2.mp4"}
return {video_url: "https://iplayabc-teach-yun-test.oss-cn-beijing.aliyuncs.com/movie2.mp4"}
}, },
play(){ play(){
this.videoPlayer.node.active = true; this.videoPlayer.node.active = true;
cc.find(`Canvas/video_cover`).active = false;
this.videoPlayer.play(); this.videoPlayer.play();
this.triggerInteractive() this.triggerInteractive()
}, },
......
// {"imgAni":{"ske":{"url":"https://teach.cdn.ireadabc.com/e13afca23d37ba33489c0aaa61a515f5.json","name":"川阅阅_ske.json"},"tex":{"url":"https://teach.cdn.ireadabc.com/7afcddbb7f0127613059e574638a9f3e.json","name":"川阅阅_tex.json"},"png":{"url":"https://teach.cdn.ireadabc.com/63699fcef6053eef4f58b89dad35af0b.png","name":"川阅阅_tex.png"}},"tipSwitch":"1","tipType":"page","tipBg":"https://teach.cdn.ireadabc.com/4516be9212c58098c8eebbd7021c8c2a.png","tipPage":[{"title":"这么小的院子里,居然同时有一间书房和一间书院,这家人可真喜欢读书啊。","audio":"https://staging-teach.cdn.ireadabc.com/c03129693e6cabf061661fba349fa031.mp3"}],"title":"","audio":"","audioName":"","image":"https://teach.cdn.ireadabc.com/efa8d5d75d18379dcac9ee885d6f2980.png","endImgAni":{"ske":{"url":"https://teach.cdn.ireadabc.com/8a5825bc51a32f13ddb55d3065d713a9.json","name":"动画用图川阅阅奖励_ske.json"},"tex":{"url":"https://teach.cdn.ireadabc.com/c4f5e10343ab1e79eb7407867fc4a85b.json","name":"动画用图川阅阅奖励_tex.json"},"png":{"url":"https://teach.cdn.ireadabc.com/bc984a44b7537f051707f662fba3943e.png","name":"动画用图川阅阅奖励_tex.png"}},"endImgTitle":"棒棒的!","points":"","tips":"匾额写的是这间屋子的名字或屋子最主要的功能","questionScore":"15"}
export const defaultData = {
"imgAni": {
"ske": {
"url": "https://teach.cdn.ireadabc.com/e13afca23d37ba33489c0aaa61a515f5.json",
"name": "川阅阅_ske.json"
},
"tex": {
"url": "https://teach.cdn.ireadabc.com/7afcddbb7f0127613059e574638a9f3e.json",
"name": "川阅阅_tex.json"
},
"png": {
"url": "https://teach.cdn.ireadabc.com/63699fcef6053eef4f58b89dad35af0b.png",
"name": "川阅阅_tex.png"
}
},
"tipSwitch": "1",
"tipType": "page",
"tipBg": "https://teach.cdn.ireadabc.com/4516be9212c58098c8eebbd7021c8c2a.png",
"tipPage": [
{
"title": "这么小的院子里,居然同时有一间书房和一间书院,这家人可真喜欢读书啊。",
"audio": "https://staging-teach.cdn.ireadabc.com/c03129693e6cabf061661fba349fa031.mp3"
},{
"title": "这么小的院子里,居然同时有一间书房和一间书院,这家人可真喜欢读书啊。",
"audio": "https://staging-teach.cdn.ireadabc.com/c03129693e6cabf061661fba349fa031.mp3"
},{
"title": "这么小的院子里,居然同时有一间书房和一间书院,这家人可真喜欢读书啊。",
"audio": "https://staging-teach.cdn.ireadabc.com/c03129693e6cabf061661fba349fa031.mp3"
}
],
"title": "",
"audio": "",
"audioName": "",
"image": "https://teach.cdn.ireadabc.com/efa8d5d75d18379dcac9ee885d6f2980.png",
"endImgAni": {
"ske": {
"url": "https://teach.cdn.ireadabc.com/8a5825bc51a32f13ddb55d3065d713a9.json",
"name": "动画用图川阅阅奖励_ske.json"
},
"tex": {
"url": "https://teach.cdn.ireadabc.com/c4f5e10343ab1e79eb7407867fc4a85b.json",
"name": "动画用图川阅阅奖励_tex.json"
},
"png": {
"url": "https://teach.cdn.ireadabc.com/bc984a44b7537f051707f662fba3943e.png",
"name": "动画用图川阅阅奖励_tex.png"
}
},
"endImgTitle": "棒棒的!",
"points": "",
"tips": "匾额写的是这间屋子的名字或屋子最主要的功能",
"questionScore": "15",
"jumpIdx": "2",
"video_url": "https://iplayabc-teach-yun-test.oss-cn-beijing.aliyuncs.com/movie2.mp4"
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "060d5dad-fd85-4f0e-924c-d09fa22f5092",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
This diff is collapsed.
{
"ver": "1.0.8",
"uuid": "4bc127f7-927d-4b48-8bd2-cb6b17f4fe3e",
"isPlugin": true,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
...@@ -133,6 +133,41 @@ export function btnClickAnima(btn, time = 0.15, rate = 1.05) { ...@@ -133,6 +133,41 @@ export function btnClickAnima(btn, time = 0.15, rate = 1.05) {
}) })
} }
export function setNetImg(item, res, { w, h }, custom = true) {
return new Promise((resolve, reject) => {
if (!item) return console.warn("图片更换失败,传入了错误的item");
let node = item.node ? item.node : item;
if (!res) {
if (node) node.active = false;
return console.warn("图片更换失败,传入了错误的res");
}
if (!node) return console.warn("图片更换失败,传入了错误的item");
if (node.net_url == res) return;
node.active = false;//
cc.loader.load({ url: res }, (err, texture) => {
if (err && !texture) return resolve(console.warn('loading loadRes warn-> ' + texture));
if (!cc.isValid(node)) return console.info("节点已销毁");
let nw = node.width = texture.width;
let nh = node.height = texture.height;
let component = node.getComponent(cc.Sprite);
let spriteFrame = new cc.SpriteFrame(texture);
component.spriteFrame = spriteFrame;
node.net_url = res;
if (!cc.isValid(node)) return console.info("节点已销毁");
if (!node) return console.warn("节点已销毁");
if (w && h && custom) {
let scaleX = w / nw;
let scaleY = h / nh;
let scale = scaleX <= scaleY ? scaleX : scaleY;
node.width = nw * scale;
node.height = nh * scale;
}
node.active = true;
resolve({ w: nw, h: nh });
});
})
}
export function getSpriteFrimeByUrl(url, cb) { export function getSpriteFrimeByUrl(url, cb) {
cc.loader.load({ url }, (err, img) => { cc.loader.load({ url }, (err, img) => {
...@@ -575,19 +610,25 @@ export function buttonOnceClick(button, callback, scale = 1.0) { ...@@ -575,19 +610,25 @@ export function buttonOnceClick(button, callback, scale = 1.0) {
} }
export function buttonOnClick(button, callback, scale = 1.0) { export function buttonOnClick(button, callback, scale = 1.0) {
button.addComponent(cc.Button);
button.on('click', () => { button.on('click', () => {
if (button['cantClick']) { if (button['cantClick']) {
return; return;
} }
button['cantClick'] = true; button['cantClick'] = true;
cc.tween(button) callback && callback();
.to(0.1, { scale: scale * 1.1 }) button['cantClick'] = false;
.to(0.1, { scale: scale })
.call(() => {
button['cantClick'] = false;
callback && callback();
})
.start();
}); });
} }
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);
})
});
}
\ 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