Commit 66624a0f authored by wangxin's avatar wangxin

Update Scene.js

parent 77567794
...@@ -5,357 +5,320 @@ ...@@ -5,357 +5,320 @@
// 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 this.initSceneData();
onLoad() { this.initSize();
this.initSceneData(); },
this.initSize();
}, _imageResList: null,
_audioResList: null,
_imageResList: null, _animaResList: null,
_audioResList: null, initSceneData() {
_animaResList: null, this._imageResList = [];
initSceneData() { this._audioResList = [];
this._imageResList = []; this._animaResList = [];
this._audioResList = []; },
this._animaResList = [];
}, _designSize: null, // 设计分辨率
_frameSize: null, // 屏幕分辨率
_designSize: null, // 设计分辨率 _mapScaleMin: null, // 场景中常用缩放(取大值)
_frameSize: null, // 屏幕分辨率 _mapScaleMax: null, // 场景中常用缩放(取小值)
_mapScaleMin: null, // 场景中常用缩放(取大值) _cocosScale: null, // cocos 自缩放 (较少用到)
_mapScaleMax: null, // 场景中常用缩放(取小值) initSize() {
_cocosScale: null, // cocos 自缩放 (较少用到) // 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小
initSize() { let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height;
let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height;
// 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小 let f = screen_size >= design_size;
let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height cc.Canvas.instance.fitHeight = f;
let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height cc.Canvas.instance.fitWidth = !f;
let f = screen_size >= design_size
cc.Canvas.instance.fitHeight = f const frameSize = cc.view.getFrameSize();
cc.Canvas.instance.fitWidth = !f this._frameSize = frameSize;
const frameSize = cc.view.getFrameSize(); this._designSize = cc.view.getDesignResolutionSize();
this._frameSize = frameSize;
let sx = cc.winSize.width / frameSize.width;
this._designSize = cc.view.getDesignResolutionSize(); let sy = cc.winSize.height / frameSize.height;
this._cocosScale = Math.min(sx, sy);
let sx = cc.winSize.width / frameSize.width;
let sy = cc.winSize.height / frameSize.height; sx = frameSize.width / this._designSize.width;
this._cocosScale = Math.min(sx, sy); sy = frameSize.height / this._designSize.height;
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
sx = frameSize.width / this._designSize.width; this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
sy = frameSize.height / this._designSize.height; },
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
this._mapScaleMax = Math.max(sx, sy) * this._cocosScale; // 生命周期 start
}, start() {
let getData = this.getData.bind(this);
if (window && window.courseware) {
// 生命周期 start getData = window.courseware.getData;
start() { }
let getData = this.getData.bind(this);
if (window && window.courseware) { getData((data) => {
getData = window.courseware.getData; console.log("data:", data);
} this.data = data || this.getDefaultData();
this.data = JSON.parse(JSON.stringify(this.data));
getData((data) => { // this.preloadItem()
console.log('data:', data);
this.data = data || this.getDefaultData(); const labelNode = new cc.Node();
this.data = JSON.parse(JSON.stringify(this.data)) labelNode.color = cc.Color.YELLOW;
this.preloadItem() const label = labelNode.addComponent(cc.Label);
}) label.string = this.data.text;
}, label.fontSize = 60;
label.lineHeight = 60;
getData(cb) { label.font = cc.find("Canvas/res/font/BRLNSDB").getComponent("cc.Label").font;
cb(this.getDefaultData()); this.node.addChild(labelNode);
}, });
},
getDefaultData() {
getData(cb) {
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"}' cb(this.getDefaultData());
const data = JSON.parse(dataJson); },
return data;
}, getDefaultData() {
const dataJson =
preloadItem() { '{"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"}';
this.addPreloadImage(); const data = JSON.parse(dataJson);
this.addPreloadAudio(); return data;
this.addPreloadAnima(); },
this.preload();
}, preloadItem() {
this.addPreloadImage();
this.addPreloadAudio();
addPreloadImage() { this.addPreloadAnima();
this.preload();
this._imageResList.push({ url: this.data.pic_url }); },
this._imageResList.push({ url: this.data.pic_url_2 });
}, addPreloadImage() {
this._imageResList.push({ url: this.data.pic_url });
addPreloadAudio() { this._imageResList.push({ url: this.data.pic_url_2 });
},
this._audioResList.push({ url: this.data.audio_url });
}, addPreloadAudio() {
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();
if (window && window["air"]) {
this.loadEnd(); window["air"].hideAirClassLoading();
if (window && window["air"]) { }
window["air"].hideAirClassLoading();
} cc.debug.setDisplayStats(false);
});
cc.debug.setDisplayStats(false); },
});
}, loadEnd() {
this.initData();
this.initAudio();
loadEnd() { this.initView();
this.initData(); // this.initListener();
this.initAudio(); },
this.initView();
// this.initListener(); _cantouch: null,
}, initData() {
// 所有全局变量 默认都是null
_cantouch: null, this._cantouch = true;
initData() { },
// 所有全局变量 默认都是null
this._cantouch = true; audioBtn: null,
}, initAudio() {
const audioNode = cc.find("Canvas/res/audio");
audioBtn: null,
initAudio() { const getAudioByResName = (resName) => {
const audioNode = cc.find('Canvas/res/audio'); return audioNode.getChildByName(resName).getComponent(cc.AudioSource);
};
const getAudioByResName = (resName) => {
return audioNode.getChildByName(resName).getComponent(cc.AudioSource); this.audioBtn = getAudioByResName("btn");
} },
this.audioBtn = getAudioByResName('btn'); initView() {
this.initBg();
}, this.initPic();
this.initBtn();
this.initIcon();
initView() { },
this.initBg(); initBg() {
this.initPic(); const bgNode = cc.find("Canvas/bg");
this.initBtn(); bgNode.scale = this._mapScaleMax;
this.initIcon(); },
},
pic1: null,
initBg() { pic2: null,
const bgNode = cc.find('Canvas/bg'); initPic() {
bgNode.scale = this._mapScaleMax; const canvas = cc.find("Canvas");
}, const maxW = canvas.width * 0.7;
pic1: null, this.getSprNodeByUrl(this.data.pic_url, (sprNode) => {
pic2: null, const picNode1 = sprNode;
initPic() { picNode1.scale = maxW / picNode1.width;
const canvas = cc.find('Canvas'); picNode1.baseX = picNode1.x;
const maxW = canvas.width * 0.7; canvas.addChild(picNode1);
this.pic1 = picNode1;
this.getSprNodeByUrl(this.data.pic_url, (sprNode) => {
const picNode1 = sprNode; const labelNode = new cc.Node();
picNode1.scale = maxW / picNode1.width; labelNode.color = cc.Color.YELLOW;
picNode1.baseX = picNode1.x; const label = labelNode.addComponent(cc.Label);
canvas.addChild(picNode1); label.string = this.data.text;
this.pic1 = picNode1; label.fontSize = 60;
label.lineHeight = 60;
const labelNode = new cc.Node(); label.font = cc.find("Canvas/res/font/BRLNSDB").getComponent("cc.Label").font;
labelNode.color = cc.Color.YELLOW; picNode1.addChild(labelNode);
const label = labelNode.addComponent(cc.Label); });
label.string = this.data.text;
label.fontSize = 60; this.getSprNodeByUrl(this.data.pic_url_2, (sprNode) => {
label.lineHeight = 60; const picNode2 = sprNode;
label.font = cc.find('Canvas/res/font/BRLNSDB').getComponent('cc.Label').font; picNode2.scale = maxW / picNode2.width;
picNode1.addChild(labelNode); canvas.addChild(picNode2);
}); picNode2.x = canvas.width;
picNode2.baseX = picNode2.x;
this.getSprNodeByUrl(this.data.pic_url_2, (sprNode) => { this.pic2 = picNode2;
const picNode2 = sprNode;
picNode2.scale = maxW / picNode2.width; const labelNode = new cc.Node();
canvas.addChild(picNode2); const label = labelNode.addComponent(cc.RichText);
picNode2.x = canvas.width; const size = 60;
picNode2.baseX = picNode2.x; label.font = cc.find("Canvas/res/font/BRLNSDB").getComponent(cc.Label).font;
this.pic2 = picNode2; label.string = `<outline color=#751e00 width=4><size=${size}><color=#ffffff>${this.data.text}</color></size></outline>`;
label.lineHeight = size;
const labelNode = new cc.Node(); picNode2.addChild(labelNode);
const label = labelNode.addComponent(cc.RichText); });
const size = 60 },
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>` initIcon() {
label.lineHeight = size; const iconNode = this.getSprNode("icon");
picNode2.addChild(labelNode); iconNode.zIndex = 5;
}); iconNode.anchorX = 1;
iconNode.anchorY = 1;
}, iconNode.parent = cc.find("Canvas");
iconNode.x = iconNode.parent.width / 2 - 10;
initIcon() { iconNode.y = iconNode.parent.height / 2 - 10;
const iconNode = this.getSprNode('icon');
iconNode.zIndex = 5; iconNode.on(cc.Node.EventType.TOUCH_START, () => {
iconNode.anchorX = 1; this.playAudioByUrl(this.data.audio_url);
iconNode.anchorY = 1; });
iconNode.parent = cc.find('Canvas'); },
iconNode.x = iconNode.parent.width / 2 - 10;
iconNode.y = iconNode.parent.height / 2 - 10; curPage: null,
initBtn() {
iconNode.on(cc.Node.EventType.TOUCH_START, () => { this.curPage = 0;
this.playAudioByUrl(this.data.audio_url); const bottomPart = cc.find("Canvas/bottomPart");
}) bottomPart.zIndex = 5; // 提高层级
},
bottomPart.x = bottomPart.parent.width / 2;
curPage: null, bottomPart.y = -bottomPart.parent.height / 2;
initBtn() {
const leftBtnNode = bottomPart.getChildByName("btn_left");
this.curPage = 0; //节点中添加了button组件 则可以添加click事件监听
const bottomPart = cc.find('Canvas/bottomPart'); leftBtnNode.on("click", () => {
bottomPart.zIndex = 5; // 提高层级 if (!this._cantouch) {
return;
bottomPart.x = bottomPart.parent.width / 2; }
bottomPart.y = -bottomPart.parent.height / 2; if (this.curPage == 0) {
return;
const leftBtnNode = bottomPart.getChildByName('btn_left'); }
//节点中添加了button组件 则可以添加click事件监听 this.curPage = 0;
leftBtnNode.on('click', () => { this.leftMove();
if (!this._cantouch) {
return; cc.audioEngine.play(this.audioBtn.clip, false, 0.8);
} });
if (this.curPage == 0) {
return; const rightBtnNode = bottomPart.getChildByName("btn_right");
} //节点中添加了button组件 则可以添加click事件监听
this.curPage = 0 rightBtnNode.on("click", () => {
this.leftMove(); if (!this._cantouch) {
return;
cc.audioEngine.play(this.audioBtn.clip, false, 0.8) }
}) if (this.curPage == 1) {
return;
const rightBtnNode = bottomPart.getChildByName('btn_right'); }
//节点中添加了button组件 则可以添加click事件监听
rightBtnNode.on('click', () => { this.curPage = 1;
if (!this._cantouch) { this.rightMove();
return;
} cc.audioEngine.play(this.audioBtn.clip, false, 0.5);
if (this.curPage == 1) { });
return; },
}
leftMove() {
this.curPage = 1 this._cantouch = false;
this.rightMove(); const len = this.pic1.parent.width;
cc.tween(this.pic1).to(1, { x: this.pic1.baseX }, { easing: "cubicInOut" }).start();
cc.audioEngine.play(this.audioBtn.clip, false, 0.5)
}) cc.tween(this.pic2)
}, .to(1, { x: this.pic2.baseX }, { easing: "cubicInOut" })
.call(() => {
leftMove() { this._cantouch = true;
this._cantouch = false; })
const len = this.pic1.parent.width; .start();
cc.tween(this.pic1) },
.to(1, { x: this.pic1.baseX }, { easing: 'cubicInOut' })
.start(); rightMove() {
this._cantouch = false;
cc.tween(this.pic2) const len = this.pic1.parent.width;
.to(1, { x: this.pic2.baseX }, { easing: 'cubicInOut' }) cc.tween(this.pic1)
.call(() => { .to(1, { x: this.pic1.baseX - len }, { easing: "cubicInOut" })
this._cantouch = true; .start();
})
.start(); cc.tween(this.pic2)
}, .to(1, { x: this.pic2.baseX - len }, { easing: "cubicInOut" })
.call(() => {
rightMove() { this._cantouch = true;
this._cantouch = false; })
const len = this.pic1.parent.width; .start();
cc.tween(this.pic1) },
.to(1, { x: this.pic1.baseX - len }, { easing: 'cubicInOut' }) // update (dt) {},
.start();
// ------------------------------------------------
cc.tween(this.pic2) getSprNode(resName) {
.to(1, { x: this.pic2.baseX - len }, { easing: 'cubicInOut' }) const sf = cc.find("Canvas/res/img/" + resName).getComponent(cc.Sprite).spriteFrame;
.call(() => { const node = new cc.Node();
this._cantouch = true; node.addComponent(cc.Sprite).spriteFrame = sf;
}) return node;
.start(); },
},
// update (dt) {}, getSpriteFrimeByUrl(url, cb) {
cc.loader.load({ url }, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img);
if (cb) {
cb(spriteFrame);
}
});
},
getSprNodeByUrl(url, cb) {
const node = new cc.Node();
const spr = node.addComponent(cc.Sprite);
this.getSpriteFrimeByUrl(url, (sf) => {
spr.spriteFrame = sf;
if (cb) {
cb(node);
}
});
},
playAudioByUrl(audio_url, cb = null) {
if (audio_url) {
cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
const audioId = cc.audioEngine.play(audioClip, false, 0.8);
if (cb) {
// ------------------------------------------------ cc.audioEngine.setFinishCallback(audioId, () => {
getSprNode(resName) { cb();
const sf = cc.find('Canvas/res/img/' + resName).getComponent(cc.Sprite).spriteFrame; });
const node = new cc.Node(); }
node.addComponent(cc.Sprite).spriteFrame = sf; });
return node; }
}, },
// ------------------------------------------
getSpriteFrimeByUrl(url, cb) {
cc.loader.load({ url }, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img)
if (cb) {
cb(spriteFrame);
}
})
},
getSprNodeByUrl(url, cb) {
const node = new cc.Node();
const spr = node.addComponent(cc.Sprite);
this.getSpriteFrimeByUrl(url, (sf) => {
spr.spriteFrame = sf;
if (cb) {
cb(node);
}
})
},
playAudioByUrl(audio_url, cb = null) {
if (audio_url) {
cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
const audioId = cc.audioEngine.play(audioClip, false, 0.8);
if (cb) {
cc.audioEngine.setFinishCallback(audioId, () => {
cb();
});
}
});
}
},
// ------------------------------------------
}); });
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