Commit 66624a0f authored by wangxin's avatar wangxin

Update Scene.js

parent 77567794
...@@ -5,14 +5,10 @@ ...@@ -5,14 +5,10 @@
// Learn life-cycle callbacks: // Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html // - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
cc.Class({ cc.Class({
extends: cc.Component, extends: cc.Component,
properties: { properties: {},
},
// 生命周期 onLoad // 生命周期 onLoad
onLoad() { onLoad() {
...@@ -35,13 +31,12 @@ cc.Class({ ...@@ -35,13 +31,12 @@ cc.Class({
_mapScaleMax: null, // 场景中常用缩放(取小值) _mapScaleMax: null, // 场景中常用缩放(取小值)
_cocosScale: null, // cocos 自缩放 (较少用到) _cocosScale: null, // cocos 自缩放 (较少用到)
initSize() { initSize() {
// 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小 // 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小
let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height 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 design_size = cc.Canvas.instance.designResolution.width / 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;
...@@ -58,7 +53,6 @@ cc.Class({ ...@@ -58,7 +53,6 @@ cc.Class({
this._mapScaleMax = Math.max(sx, sy) * this._cocosScale; this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
}, },
// 生命周期 start // 生命周期 start
start() { start() {
let getData = this.getData.bind(this); let getData = this.getData.bind(this);
...@@ -67,11 +61,20 @@ cc.Class({ ...@@ -67,11 +61,20 @@ cc.Class({
} }
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()
})
const labelNode = new cc.Node();
labelNode.color = cc.Color.YELLOW;
const label = labelNode.addComponent(cc.Label);
label.string = this.data.text;
label.fontSize = 60;
label.lineHeight = 60;
label.font = cc.find("Canvas/res/font/BRLNSDB").getComponent("cc.Label").font;
this.node.addChild(labelNode);
});
}, },
getData(cb) { getData(cb) {
...@@ -79,8 +82,8 @@ cc.Class({ ...@@ -79,8 +82,8 @@ cc.Class({
}, },
getDefaultData() { getDefaultData() {
const dataJson =
const dataJson = '{"pic_url":"http://staging-teach.cdn.ireadabc.com/ed94332a503c31e0908bd4c6923a2665.png","pic_url_2":"http://staging-teach.cdn.ireadabc.com/5fb60317ade0195d35ad8034d5370a7f.png","text":"This is a test label.","audio_url":"http://staging-teach.cdn.ireadabc.com/f47f1d7b5c160fe1c59500d180346240.mp3"}' '{"pic_url":"http://staging-teach.cdn.ireadabc.com/ed94332a503c31e0908bd4c6923a2665.png","pic_url_2":"http://staging-teach.cdn.ireadabc.com/5fb60317ade0195d35ad8034d5370a7f.png","text":"This is a test label.","audio_url":"http://staging-teach.cdn.ireadabc.com/f47f1d7b5c160fe1c59500d180346240.mp3"}';
const data = JSON.parse(dataJson); const data = JSON.parse(dataJson);
return data; return data;
}, },
...@@ -92,27 +95,20 @@ cc.Class({ ...@@ -92,27 +95,20 @@ cc.Class({
this.preload(); this.preload();
}, },
addPreloadImage() { addPreloadImage() {
this._imageResList.push({ url: this.data.pic_url }); this._imageResList.push({ url: this.data.pic_url });
this._imageResList.push({ url: this.data.pic_url_2 }); this._imageResList.push({ url: this.data.pic_url_2 });
}, },
addPreloadAudio() { addPreloadAudio() {
this._audioResList.push({ url: this.data.audio_url }); this._audioResList.push({ url: this.data.audio_url });
}, },
addPreloadAnima() { addPreloadAnima() {},
},
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, (err, data) => {
this.loadEnd(); this.loadEnd();
if (window && window["air"]) { if (window && window["air"]) {
window["air"].hideAirClassLoading(); window["air"].hideAirClassLoading();
...@@ -122,7 +118,6 @@ cc.Class({ ...@@ -122,7 +118,6 @@ cc.Class({
}); });
}, },
loadEnd() { loadEnd() {
this.initData(); this.initData();
this.initAudio(); this.initAudio();
...@@ -138,19 +133,16 @@ cc.Class({ ...@@ -138,19 +133,16 @@ cc.Class({
audioBtn: null, audioBtn: null,
initAudio() { initAudio() {
const audioNode = cc.find('Canvas/res/audio'); const audioNode = cc.find("Canvas/res/audio");
const getAudioByResName = (resName) => { const getAudioByResName = (resName) => {
return audioNode.getChildByName(resName).getComponent(cc.AudioSource); return audioNode.getChildByName(resName).getComponent(cc.AudioSource);
} };
this.audioBtn = getAudioByResName('btn');
this.audioBtn = getAudioByResName("btn");
}, },
initView() { initView() {
this.initBg(); this.initBg();
this.initPic(); this.initPic();
this.initBtn(); this.initBtn();
...@@ -158,14 +150,14 @@ cc.Class({ ...@@ -158,14 +150,14 @@ cc.Class({
}, },
initBg() { initBg() {
const bgNode = cc.find('Canvas/bg'); const bgNode = cc.find("Canvas/bg");
bgNode.scale = this._mapScaleMax; bgNode.scale = this._mapScaleMax;
}, },
pic1: null, pic1: null,
pic2: null, pic2: null,
initPic() { initPic() {
const canvas = cc.find('Canvas'); const canvas = cc.find("Canvas");
const maxW = canvas.width * 0.7; const maxW = canvas.width * 0.7;
this.getSprNodeByUrl(this.data.pic_url, (sprNode) => { this.getSprNodeByUrl(this.data.pic_url, (sprNode) => {
...@@ -181,7 +173,7 @@ cc.Class({ ...@@ -181,7 +173,7 @@ cc.Class({
label.string = this.data.text; label.string = this.data.text;
label.fontSize = 60; label.fontSize = 60;
label.lineHeight = 60; label.lineHeight = 60;
label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent('cc.Label').font; label.font = cc.find("Canvas/res/font/BRLNSDB").getComponent("cc.Label").font;
picNode1.addChild(labelNode); picNode1.addChild(labelNode);
}); });
...@@ -195,57 +187,55 @@ cc.Class({ ...@@ -195,57 +187,55 @@ cc.Class({
const labelNode = new cc.Node(); const labelNode = new cc.Node();
const label = labelNode.addComponent(cc.RichText); const label = labelNode.addComponent(cc.RichText);
const size = 60 const size = 60;
label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent(cc.Label).font; label.font = cc.find("Canvas/res/font/BRLNSDB").getComponent(cc.Label).font;
label.string = `<outline color=#751e00 width=4><size=${size}><color=#ffffff>${this.data.text}</color></size></outline>` label.string = `<outline color=#751e00 width=4><size=${size}><color=#ffffff>${this.data.text}</color></size></outline>`;
label.lineHeight = size; label.lineHeight = size;
picNode2.addChild(labelNode); picNode2.addChild(labelNode);
}); });
}, },
initIcon() { initIcon() {
const iconNode = this.getSprNode('icon'); const iconNode = this.getSprNode("icon");
iconNode.zIndex = 5; iconNode.zIndex = 5;
iconNode.anchorX = 1; iconNode.anchorX = 1;
iconNode.anchorY = 1; iconNode.anchorY = 1;
iconNode.parent = cc.find('Canvas'); iconNode.parent = cc.find("Canvas");
iconNode.x = iconNode.parent.width / 2 - 10; iconNode.x = iconNode.parent.width / 2 - 10;
iconNode.y = iconNode.parent.height / 2 - 10; iconNode.y = iconNode.parent.height / 2 - 10;
iconNode.on(cc.Node.EventType.TOUCH_START, () => { iconNode.on(cc.Node.EventType.TOUCH_START, () => {
this.playAudioByUrl(this.data.audio_url); this.playAudioByUrl(this.data.audio_url);
}) });
}, },
curPage: null, curPage: null,
initBtn() { initBtn() {
this.curPage = 0; this.curPage = 0;
const bottomPart = cc.find('Canvas/bottomPart'); const bottomPart = cc.find("Canvas/bottomPart");
bottomPart.zIndex = 5; // 提高层级 bottomPart.zIndex = 5; // 提高层级
bottomPart.x = bottomPart.parent.width / 2; bottomPart.x = bottomPart.parent.width / 2;
bottomPart.y = -bottomPart.parent.height / 2; bottomPart.y = -bottomPart.parent.height / 2;
const leftBtnNode = bottomPart.getChildByName('btn_left'); const leftBtnNode = bottomPart.getChildByName("btn_left");
//节点中添加了button组件 则可以添加click事件监听 //节点中添加了button组件 则可以添加click事件监听
leftBtnNode.on('click', () => { leftBtnNode.on("click", () => {
if (!this._cantouch) { if (!this._cantouch) {
return; return;
} }
if (this.curPage == 0) { if (this.curPage == 0) {
return; return;
} }
this.curPage = 0 this.curPage = 0;
this.leftMove(); this.leftMove();
cc.audioEngine.play(this.audioBtn.clip, false, 0.8) cc.audioEngine.play(this.audioBtn.clip, false, 0.8);
}) });
const rightBtnNode = bottomPart.getChildByName('btn_right'); const rightBtnNode = bottomPart.getChildByName("btn_right");
//节点中添加了button组件 则可以添加click事件监听 //节点中添加了button组件 则可以添加click事件监听
rightBtnNode.on('click', () => { rightBtnNode.on("click", () => {
if (!this._cantouch) { if (!this._cantouch) {
return; return;
} }
...@@ -253,22 +243,20 @@ cc.Class({ ...@@ -253,22 +243,20 @@ cc.Class({
return; return;
} }
this.curPage = 1 this.curPage = 1;
this.rightMove(); this.rightMove();
cc.audioEngine.play(this.audioBtn.clip, false, 0.5) cc.audioEngine.play(this.audioBtn.clip, false, 0.5);
}) });
}, },
leftMove() { leftMove() {
this._cantouch = false; this._cantouch = false;
const len = this.pic1.parent.width; const len = this.pic1.parent.width;
cc.tween(this.pic1) cc.tween(this.pic1).to(1, { x: this.pic1.baseX }, { easing: "cubicInOut" }).start();
.to(1, { x: this.pic1.baseX }, { easing: 'cubicInOut' })
.start();
cc.tween(this.pic2) cc.tween(this.pic2)
.to(1, { x: this.pic2.baseX }, { easing: 'cubicInOut' }) .to(1, { x: this.pic2.baseX }, { easing: "cubicInOut" })
.call(() => { .call(() => {
this._cantouch = true; this._cantouch = true;
}) })
...@@ -279,11 +267,11 @@ cc.Class({ ...@@ -279,11 +267,11 @@ cc.Class({
this._cantouch = false; this._cantouch = false;
const len = this.pic1.parent.width; const len = this.pic1.parent.width;
cc.tween(this.pic1) cc.tween(this.pic1)
.to(1, { x: this.pic1.baseX - len }, { easing: 'cubicInOut' }) .to(1, { x: this.pic1.baseX - len }, { easing: "cubicInOut" })
.start(); .start();
cc.tween(this.pic2) cc.tween(this.pic2)
.to(1, { x: this.pic2.baseX - len }, { easing: 'cubicInOut' }) .to(1, { x: this.pic2.baseX - len }, { easing: "cubicInOut" })
.call(() => { .call(() => {
this._cantouch = true; this._cantouch = true;
}) })
...@@ -291,45 +279,21 @@ cc.Class({ ...@@ -291,45 +279,21 @@ cc.Class({
}, },
// update (dt) {}, // update (dt) {},
// ------------------------------------------------ // ------------------------------------------------
getSprNode(resName) { 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();
node.addComponent(cc.Sprite).spriteFrame = sf; node.addComponent(cc.Sprite).spriteFrame = sf;
return node; return node;
}, },
getSpriteFrimeByUrl(url, cb) { getSpriteFrimeByUrl(url, cb) {
cc.loader.load({ url }, (err, img) => { cc.loader.load({ url }, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img) const spriteFrame = new cc.SpriteFrame(img);
if (cb) { if (cb) {
cb(spriteFrame); cb(spriteFrame);
} }
}) });
}, },
getSprNodeByUrl(url, cb) { getSprNodeByUrl(url, cb) {
...@@ -340,7 +304,7 @@ cc.Class({ ...@@ -340,7 +304,7 @@ cc.Class({
if (cb) { if (cb) {
cb(node); cb(node);
} }
}) });
}, },
playAudioByUrl(audio_url, cb = null) { playAudioByUrl(audio_url, cb = null) {
...@@ -357,5 +321,4 @@ cc.Class({ ...@@ -357,5 +321,4 @@ cc.Class({
}, },
// ------------------------------------------ // ------------------------------------------
}); });
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