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