Scene.js 7.79 KB
Newer Older
Li Mingzhe's avatar
Li Mingzhe committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
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
范雪寒's avatar
范雪寒 committed
53
	start() {
Li Mingzhe's avatar
Li Mingzhe committed
54 55 56 57
		let getData = this.getData.bind(this);
		if (window && window.courseware) {
			getData = window.courseware.getData;
		}
范雪寒's avatar
范雪寒 committed
58

Li Mingzhe's avatar
Li Mingzhe committed
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
		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;
	},
范雪寒's avatar
范雪寒 committed
77

Li Mingzhe's avatar
Li Mingzhe committed
78 79 80 81 82 83 84 85 86 87
	preloadItem() {
		this.addPreloadImage();
		this.addPreloadAudio();
		this.addPreloadAnima();
		this.preload();
	},


	addPreloadImage() {

范雪寒's avatar
范雪寒 committed
88 89
		this._imageResList.push({ url: this.data.pic_url });
		this._imageResList.push({ url: this.data.pic_url_2 });
Li Mingzhe's avatar
Li Mingzhe committed
90 91 92 93
	},

	addPreloadAudio() {

范雪寒's avatar
范雪寒 committed
94
		this._audioResList.push({ url: this.data.audio_url });
Li Mingzhe's avatar
Li Mingzhe committed
95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
	},

	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();
			}
范雪寒's avatar
范雪寒 committed
110

Li Mingzhe's avatar
Li Mingzhe committed
111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
			cc.debug.setDisplayStats(false);
		});
	},


	loadEnd() {
		this.initData();
		this.initAudio();
		this.initView();
		// this.initListener();
	},

	_cantouch: null,
	initData() {
		// 所有全局变量 默认都是null 
		this._cantouch = true;
	},
范雪寒's avatar
范雪寒 committed
128

Li Mingzhe's avatar
Li Mingzhe committed
129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165
	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);
范雪寒's avatar
范雪寒 committed
166
			this.pic1 = picNode1;
Li Mingzhe's avatar
Li Mingzhe committed
167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216

			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; // 提高层级
范雪寒's avatar
范雪寒 committed
217

Li Mingzhe's avatar
Li Mingzhe committed
218 219 220
		bottomPart.x = bottomPart.parent.width / 2;
		bottomPart.y = -bottomPart.parent.height / 2;

范雪寒's avatar
范雪寒 committed
221
		const leftBtnNode = bottomPart.getChildByName('btn_left');
Li Mingzhe's avatar
Li Mingzhe committed
222 223 224 225 226 227 228 229 230 231 232 233 234 235
		//节点中添加了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)
		})

范雪寒's avatar
范雪寒 committed
236
		const rightBtnNode = bottomPart.getChildByName('btn_right');
Li Mingzhe's avatar
Li Mingzhe committed
237 238 239 240 241 242 243 244
		//节点中添加了button组件 则可以添加click事件监听
		rightBtnNode.on('click', () => {
			if (!this._cantouch) {
				return;
			}
			if (this.curPage == 1) {
				return;
			}
范雪寒's avatar
范雪寒 committed
245

Li Mingzhe's avatar
Li Mingzhe committed
246 247 248 249 250 251 252 253 254 255 256
			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)
范雪寒's avatar
范雪寒 committed
257
			.to(1, { x: this.pic1.baseX }, { easing: 'cubicInOut' })
Li Mingzhe's avatar
Li Mingzhe committed
258 259 260
			.start();

		cc.tween(this.pic2)
范雪寒's avatar
范雪寒 committed
261
			.to(1, { x: this.pic2.baseX }, { easing: 'cubicInOut' })
Li Mingzhe's avatar
Li Mingzhe committed
262 263 264 265 266 267 268 269 270 271
			.call(() => {
				this._cantouch = true;
			})
			.start();
	},

	rightMove() {
		this._cantouch = false;
		const len = this.pic1.parent.width;
		cc.tween(this.pic1)
范雪寒's avatar
范雪寒 committed
272
			.to(1, { x: this.pic1.baseX - len }, { easing: 'cubicInOut' })
Li Mingzhe's avatar
Li Mingzhe committed
273 274 275
			.start();

		cc.tween(this.pic2)
范雪寒's avatar
范雪寒 committed
276
			.to(1, { x: this.pic2.baseX - len }, { easing: 'cubicInOut' })
Li Mingzhe's avatar
Li Mingzhe committed
277 278 279 280 281
			.call(() => {
				this._cantouch = true;
			})
			.start();
	},
范雪寒's avatar
范雪寒 committed
282 283
	// update (dt) {},

Li Mingzhe's avatar
Li Mingzhe committed
284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316























	// ------------------------------------------------
	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) {
范雪寒's avatar
范雪寒 committed
317
		cc.loader.load({ url }, (err, img) => {
Li Mingzhe's avatar
Li Mingzhe committed
318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335
			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);
			}
		})
	},

范雪寒's avatar
范雪寒 committed
336
	playAudioByUrl(audio_url, cb = null) {
Li Mingzhe's avatar
Li Mingzhe committed
337 338 339 340 341 342 343 344 345 346 347 348 349 350 351
		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();
					});
				}
			});
		}
	},

	// ------------------------------------------

});