Commit 668fb054 authored by Li MingZhe's avatar Li MingZhe

feat: 新增图片动画类型 背景乐

parent 8e694ef6
...@@ -226,12 +226,17 @@ cc.Class({ ...@@ -226,12 +226,17 @@ cc.Class({
// rect.fillColor = cc.Color.BLACK.setA(100); // rect.fillColor = cc.Color.BLACK.setA(100);
// rect.fillRect(-this._itemLen / 2, -this._itemLen / 2, this._itemLen, this._itemLen); // rect.fillRect(-this._itemLen / 2, -this._itemLen / 2, this._itemLen, this._itemLen);
// rect.fill(); // rect.fill();
item.data = data;
this._addItemPic(item, data.pic_url); this._addItemPic(item, data.pic_url);
this._addItemLabel(item, data.text); this._addItemLabel(item, data.text);
this._addItemAudio(item, data.audio_url); this._addItemAudio(item, data.audio_url);
this._addItemListener(item);
if (data.isClicked) {
item.opacity = 100;
}
item.data = data;
return item; return item;
}, },
...@@ -293,18 +298,32 @@ cc.Class({ ...@@ -293,18 +298,32 @@ cc.Class({
cc.assetManager.loadRemote(url, (err, audioClip) => { cc.assetManager.loadRemote(url, (err, audioClip) => {
item.audioClip = audioClip; item.audioClip = audioClip;
this._addItemListener(item);
}); });
}, },
_addItemListener(item) { _addItemListener(item) {
item.addComponent(cc.Button); const touchStart = (e) => {
item.on('click', () => {
if (item.audioClip) { console.log(' touch start ');
cc.audioEngine.stopAll(); this.node.emit('item_touch_start', item);
cc.audioEngine.play(item.audioClip, false, 0.5);
if (item.hasEventListener(cc.Node.EventType.MOUSE_DOWN)) {
item.off(cc.Node.EventType.MOUSE_DOWN, mouseDown)
} }
}); }
const mouseDown = (e) => {
console.log(' mouse down ');
this.node.emit('item_touch_start', item);
if (item.hasEventListener(cc.Node.EventType.TOUCH_START)) {
item.off(cc.Node.EventType.TOUCH_START, touchStart)
}
}
item.on(cc.Node.EventType.TOUCH_START, touchStart);
item.on(cc.Node.EventType.MOUSE_DOWN, mouseDown);
}, },
_refreshPage() { _refreshPage() {
......
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"__type__": "cc.SpriteFrame",
"content": {
"name": "02封面",
"texture": "a34b7897-1edf-4bb8-84f2-c97c4cb122ea",
"atlas": "",
"rect": [
0,
0,
1280,
720
],
"offset": [
0,
0
],
"originalSize": [
1280,
720
],
"capInsets": [
0,
0,
0,
0
]
}
}
\ No newline at end of file
{
"__type__": "cc.Texture2D",
"content": "0,9729,9729,33071,33071,0,0,1"
}
\ No newline at end of file
This diff is collapsed.
...@@ -98,9 +98,6 @@ ...@@ -98,9 +98,6 @@
}, },
{ {
"__id__": 56 "__id__": 56
},
{
"__id__": 57
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -2303,73 +2300,5 @@ ...@@ -2303,73 +2300,5 @@
"baseWidth": 1280, "baseWidth": 1280,
"baseHeight": 720, "baseHeight": 720,
"_id": "28v7Et3UdB3JZRlTOtLFi9" "_id": "28v7Et3UdB3JZRlTOtLFi9"
},
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_normalMaterial": null,
"_grayMaterial": null,
"duration": 0.1,
"zoomScale": 1.2,
"clickEvents": [],
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$transition": 0,
"transition": 0,
"_N$normalColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"_N$hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$disabledColor": {
"__type__": "cc.Color",
"r": 124,
"g": 124,
"b": 124,
"a": 255
},
"_N$normalSprite": null,
"_N$pressedSprite": null,
"pressedSprite": null,
"_N$hoverSprite": null,
"hoverSprite": null,
"_N$disabledSprite": null,
"_N$target": null,
"_id": "2epwvLwn5JJZdxF95DIVhW"
} }
] ]
\ No newline at end of file
...@@ -24,6 +24,7 @@ cc.Class({ ...@@ -24,6 +24,7 @@ cc.Class({
_maxPage: null, _maxPage: null,
_lineMaxCount: null, _lineMaxCount: null,
_disW: null, _disW: null,
_maxW: null,
onLoad: function onLoad() { onLoad: function onLoad() {
this._canTouch = true; this._canTouch = true;
this._isTop = false; this._isTop = false;
...@@ -34,8 +35,8 @@ cc.Class({ ...@@ -34,8 +35,8 @@ cc.Class({
this._pageIndex = 0; this._pageIndex = 0;
this._maxPage = 0; this._maxPage = 0;
this._disW = 5; this._disW = 5;
var maxW = 1280 - 90; this._maxW = 1280 - 90;
this._lineMaxCount = Math.floor(maxW / (this._disW + this._itemLen)); this._lineMaxCount = Math.floor(this._maxW / (this._disW + this._itemLen));
}, },
start: function start() { start: function start() {
this._initListener(); this._initListener();
...@@ -109,7 +110,7 @@ cc.Class({ ...@@ -109,7 +110,7 @@ cc.Class({
return; return;
} }
if (_this2._pageIndex >= _this2._maxPage) { if (_this2._pageIndex >= _this2._maxPage - 1) {
return; return;
} }
...@@ -144,7 +145,7 @@ cc.Class({ ...@@ -144,7 +145,7 @@ cc.Class({
this._pageUpBtn.opacity = 255; this._pageUpBtn.opacity = 255;
} }
if (this._pageIndex == this._maxPage) { if (this._pageIndex == this._maxPage - 1) {
this._pageDownBtn.opacity = 100; this._pageDownBtn.opacity = 100;
} else { } else {
this._pageDownBtn.opacity = 255; this._pageDownBtn.opacity = 255;
...@@ -182,22 +183,48 @@ cc.Class({ ...@@ -182,22 +183,48 @@ cc.Class({
return; return;
} }
this._dataArr = dataArr; this._dataArr = dataArr; // this._maxPage = Math.ceil(dataArr.length / this._lineMaxCount) - 1;
this._maxPage = Math.ceil(dataArr.length / this._lineMaxCount) - 1;
this._initPageArr();
this._pageIndex = 0; this._pageIndex = 0;
this._refreshPage(); this._refreshPage();
}, },
_pageArr: null,
_initPageArr: function _initPageArr() {
var tmpArr = [];
this._pageArr = [tmpArr];
var curLen = this._disW;
for (var i = 0; i < this._dataArr.length; i++) {
var item = this._addOneItem(this._dataArr[i]);
curLen += item.width + this._disW;
if (curLen > this._maxW) {
tmpArr = [item];
this._pageArr.push(tmpArr);
} else {
tmpArr.push(item);
}
}
this._maxPage = this._pageArr.length;
console.log('this._maxPage: ', this._maxPage);
},
_itemLen: null, _itemLen: null,
_addOneItem: function _addOneItem(data) { _addOneItem: function _addOneItem(data) {
var item = new cc.Node(); var item = new cc.Node();
item.width = this._itemLen; item.width = this._itemLen;
item.height = this._itemLen; item.height = this._itemLen; // const rect = item.addComponent(cc.Graphics);
item.data = data; // const rect = item.addComponent(cc.Graphics);
// rect.fillColor = cc.Color.BLACK.setA(100); // rect.fillColor = cc.Color.BLACK.setA(100);
// rect.fillRect(-this._itemLen / 2, -this._itemLen / 2, this._itemLen, this._itemLen); // rect.fillRect(-this._itemLen / 2, -this._itemLen / 2, this._itemLen, this._itemLen);
// rect.fill(); // rect.fill();
item.data = data;
this._addItemPic(item, data.pic_url); this._addItemPic(item, data.pic_url);
this._addItemLabel(item, data.text); this._addItemLabel(item, data.text);
...@@ -253,6 +280,12 @@ cc.Class({ ...@@ -253,6 +280,12 @@ cc.Class({
} }
label.font = this._labelFont; label.font = this._labelFont;
label._forceUpdateRenderData(true);
if (labelNode.width > this._itemLen) {
item.width = labelNode.width;
}
}, },
_addItemAudio: function _addItemAudio(item, url) { _addItemAudio: function _addItemAudio(item, url) {
if (!url) { if (!url) {
...@@ -266,16 +299,6 @@ cc.Class({ ...@@ -266,16 +299,6 @@ cc.Class({
_addItemListener: function _addItemListener(item) { _addItemListener: function _addItemListener(item) {
var _this4 = this; var _this4 = this;
// item.addComponent(cc.Button);
// item.on('click', () => {
//
// this.node.emit('item_click', item);
//
// // if (item.audioClip) {
// // cc.audioEngine.stopAll();
// // cc.audioEngine.play(item.audioClip, false, 0.5);
// // }
// });
var touchStart = function touchStart(e) { var touchStart = function touchStart(e) {
console.log(' touch start '); console.log(' touch start ');
...@@ -306,20 +329,36 @@ cc.Class({ ...@@ -306,20 +329,36 @@ cc.Class({
var dataArr = this._dataArr; var dataArr = this._dataArr;
var disW = this._disW; var disW = this._disW;
var startIndex = this._pageIndex * this._lineMaxCount; var startIndex = this._pageIndex * this._lineMaxCount; // const showArr = dataArr.slice(startIndex, startIndex + this._lineMaxCount);
var showArr = dataArr.slice(startIndex, startIndex + this._lineMaxCount);
var baseX = -(disW + this._itemLen) * (showArr.length - 1) / 2; var showArr = this._pageArr[this._pageIndex];
var baseX = this._getCurPageBaseX(); // const baseX = -(disW + this._itemLen) * (showArr.length - 1) / 2;
var baseY = -25; var baseY = -25;
showArr.forEach(function (data, i) { showArr.forEach(function (el, i) {
var item = _this5._addOneItem(data); var item = _this5._addOneItem(el.data);
_this5._itemLayer.addChild(item); _this5._itemLayer.addChild(item);
item.x = baseX + (disW + _this5._itemLen) * i; item.x = baseX + (disW + item.width) / 2;
item.y = baseY; item.y = baseY;
baseX = item.x + (disW + item.width) / 2;
}); });
this._setPageBtnState(); this._setPageBtnState();
},
_getCurPageBaseX: function _getCurPageBaseX() {
var arr = this._pageArr[this._pageIndex];
console.log('arr: ', arr);
var curLen = this._disW;
for (var i = 0; i < arr.length; i++) {
curLen += arr[i].width + this._disW;
}
return -curLen / 2;
} // update (dt) {}, } // update (dt) {},
}); });
......
This diff is collapsed.
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
"main": true, "main": true,
"url": "app://editor/index.html", "url": "app://editor/index.html",
"windowType": "dockable", "windowType": "dockable",
"x": 0, "x": 96,
"y": 28, "y": 137,
"width": 1680, "width": 1275,
"height": 942, "height": 841,
"layout": { "layout": {
"children": [ "children": [
{ {
...@@ -18,9 +18,9 @@ ...@@ -18,9 +18,9 @@
"children": [ "children": [
"hierarchy" "hierarchy"
], ],
"height": 297, "height": 261.765625,
"type": "panel", "type": "panel",
"width": 306 "width": 231.59375
}, },
{ {
"active": 0, "active": 0,
...@@ -28,14 +28,14 @@ ...@@ -28,14 +28,14 @@
"assets", "assets",
"cloud-function" "cloud-function"
], ],
"height": 561, "height": 495.234375,
"type": "panel", "type": "panel",
"width": 306 "width": 231.59375
} }
], ],
"height": 861, "height": 760,
"type": "dock-v", "type": "dock-v",
"width": 306 "width": 231.59375
}, },
{ {
"children": [ "children": [
...@@ -46,23 +46,23 @@ ...@@ -46,23 +46,23 @@
"children": [ "children": [
"scene" "scene"
], ],
"height": 588.984375, "height": 491,
"type": "panel", "type": "panel",
"width": 701.984375 "width": 466.390625
}, },
{ {
"active": 0, "active": 0,
"children": [ "children": [
"node-library" "node-library"
], ],
"height": 588.984375, "height": 491,
"type": "panel", "type": "panel",
"width": 264 "width": 264
} }
], ],
"height": 588.984375, "height": 491,
"type": "dock-h", "type": "dock-h",
"width": 969 "width": 733.40625
}, },
{ {
"active": 0, "active": 0,
...@@ -71,14 +71,14 @@ ...@@ -71,14 +71,14 @@
"timeline", "timeline",
"game-window" "game-window"
], ],
"height": 269, "height": 266,
"type": "panel", "type": "panel",
"width": 969 "width": 733.40625
} }
], ],
"height": 861, "height": 760,
"type": "dock-v", "type": "dock-v",
"width": 969 "width": 733.40625
}, },
{ {
"active": 0, "active": 0,
...@@ -86,9 +86,9 @@ ...@@ -86,9 +86,9 @@
"inspector", "inspector",
"cocos-services" "cocos-services"
], ],
"height": 861, "height": 760,
"type": "panel", "type": "panel",
"width": 399 "width": 304
} }
], ],
"type": "dock-h" "type": "dock-h"
...@@ -105,8 +105,7 @@ ...@@ -105,8 +105,7 @@
"inspector", "inspector",
"cocos-services" "cocos-services"
] ]
}, }
"worker": {}
}, },
"panels": { "panels": {
"sprite-editor": { "sprite-editor": {
...@@ -120,10 +119,17 @@ ...@@ -120,10 +119,17 @@
"y": 110, "y": 110,
"width": 500, "width": 500,
"height": 722 "height": 722
},
"preferences": {
"x": -1012,
"y": -172,
"width": 584,
"height": 548
} }
}, },
"panelLabelWidth": { "panelLabelWidth": {
"inspector": null, "inspector": null,
"builder": null "builder": null,
"preferences": null
} }
} }
{"version":"1.0.8","stats":{"/Users/limingzhe/Documents/workspace/pro_hw/pro_cocos/cc_mz_003/play/temp/quick-scripts/src/__qc_index__.js":"2020-11-10T02:50:46.952Z","/Users/limingzhe/Documents/workspace/pro_hw/pro_cocos/cc_mz_003/play/temp/quick-scripts/src/assets/mz_003/prefab/bgBottom.js":"2020-11-10T02:50:46.937Z","/Users/limingzhe/Documents/workspace/pro_hw/pro_cocos/cc_mz_003/play/temp/quick-scripts/src/assets/mz_003/script/scene.js":"2020-11-10T02:50:46.936Z","/Users/limingzhe/Documents/workspace/pro_hw/pro_cocos/cc_mz_003/play/temp/quick-scripts/src/assets/mz_003/script/util.js":"2020-11-10T02:50:46.937Z"}} {"version":"1.0.8","stats":{"/Users/limingzhe/Documents/workspace/pro_hw/pro_cocos/cc_mz_003/play/temp/quick-scripts/src/__qc_index__.js":"2021-01-21T02:09:28.258Z","/Users/limingzhe/Documents/workspace/pro_hw/pro_cocos/cc_mz_003/play/temp/quick-scripts/src/assets/mz_003/prefab/bgBottom.js":"2021-01-21T02:09:28.240Z","/Users/limingzhe/Documents/workspace/pro_hw/pro_cocos/cc_mz_003/play/temp/quick-scripts/src/assets/mz_003/script/util.js":"2021-01-21T02:09:28.238Z","/Users/limingzhe/Documents/workspace/pro_hw/pro_cocos/cc_mz_003/play/temp/quick-scripts/src/assets/mz_003/script/scene.js":"2021-01-21T02:09:28.237Z"}}
This source diff could not be displayed because it is too large. You can view the blob instead.
(function () { (function () {
var scripts = [{"deps":{"./assets/mz_003/script/util":3,"./assets/mz_003/prefab/bgBottom":1,"./assets/mz_003/script/scene":2},"path":"preview-scripts/__qc_index__.js"},{"deps":{"../script/util":3},"path":"preview-scripts/assets/mz_003/prefab/bgBottom.js"},{"deps":{"./util":3},"path":"preview-scripts/assets/mz_003/script/scene.js"},{"deps":{},"path":"preview-scripts/assets/mz_003/script/util.js"}]; var scripts = [{"deps":{"./assets/mz_003/script/util":2,"./assets/mz_003/prefab/bgBottom":1,"./assets/mz_003/script/scene":3},"path":"preview-scripts/__qc_index__.js"},{"deps":{"../script/util":2},"path":"preview-scripts/assets/mz_003/prefab/bgBottom.js"},{"deps":{},"path":"preview-scripts/assets/mz_003/script/util.js"},{"deps":{"./util":2},"path":"preview-scripts/assets/mz_003/script/scene.js"}];
var entries = ["preview-scripts/__qc_index__.js"]; var entries = ["preview-scripts/__qc_index__.js"];
var bundleScript = 'preview-scripts/__qc_bundle__.js'; var bundleScript = 'preview-scripts/__qc_bundle__.js';
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -24,6 +24,7 @@ cc.Class({ ...@@ -24,6 +24,7 @@ cc.Class({
_maxPage: null, _maxPage: null,
_lineMaxCount: null, _lineMaxCount: null,
_disW: null, _disW: null,
_maxW: null,
onLoad: function onLoad() { onLoad: function onLoad() {
this._canTouch = true; this._canTouch = true;
this._isTop = false; this._isTop = false;
...@@ -34,8 +35,8 @@ cc.Class({ ...@@ -34,8 +35,8 @@ cc.Class({
this._pageIndex = 0; this._pageIndex = 0;
this._maxPage = 0; this._maxPage = 0;
this._disW = 5; this._disW = 5;
var maxW = 1280 - 90; this._maxW = 1280 - 90;
this._lineMaxCount = Math.floor(maxW / (this._disW + this._itemLen)); this._lineMaxCount = Math.floor(this._maxW / (this._disW + this._itemLen));
}, },
start: function start() { start: function start() {
this._initListener(); this._initListener();
...@@ -109,7 +110,7 @@ cc.Class({ ...@@ -109,7 +110,7 @@ cc.Class({
return; return;
} }
if (_this2._pageIndex >= _this2._maxPage) { if (_this2._pageIndex >= _this2._maxPage - 1) {
return; return;
} }
...@@ -144,7 +145,7 @@ cc.Class({ ...@@ -144,7 +145,7 @@ cc.Class({
this._pageUpBtn.opacity = 255; this._pageUpBtn.opacity = 255;
} }
if (this._pageIndex == this._maxPage) { if (this._pageIndex == this._maxPage - 1) {
this._pageDownBtn.opacity = 100; this._pageDownBtn.opacity = 100;
} else { } else {
this._pageDownBtn.opacity = 255; this._pageDownBtn.opacity = 255;
...@@ -182,22 +183,48 @@ cc.Class({ ...@@ -182,22 +183,48 @@ cc.Class({
return; return;
} }
this._dataArr = dataArr; this._dataArr = dataArr; // this._maxPage = Math.ceil(dataArr.length / this._lineMaxCount) - 1;
this._maxPage = Math.ceil(dataArr.length / this._lineMaxCount) - 1;
this._initPageArr();
this._pageIndex = 0; this._pageIndex = 0;
this._refreshPage(); this._refreshPage();
}, },
_pageArr: null,
_initPageArr: function _initPageArr() {
var tmpArr = [];
this._pageArr = [tmpArr];
var curLen = this._disW;
for (var i = 0; i < this._dataArr.length; i++) {
var item = this._addOneItem(this._dataArr[i]);
curLen += item.width + this._disW;
if (curLen > this._maxW) {
tmpArr = [item];
this._pageArr.push(tmpArr);
} else {
tmpArr.push(item);
}
}
this._maxPage = this._pageArr.length;
console.log('this._maxPage: ', this._maxPage);
},
_itemLen: null, _itemLen: null,
_addOneItem: function _addOneItem(data) { _addOneItem: function _addOneItem(data) {
var item = new cc.Node(); var item = new cc.Node();
item.width = this._itemLen; item.width = this._itemLen;
item.height = this._itemLen; item.height = this._itemLen; // const rect = item.addComponent(cc.Graphics);
item.data = data; // const rect = item.addComponent(cc.Graphics);
// rect.fillColor = cc.Color.BLACK.setA(100); // rect.fillColor = cc.Color.BLACK.setA(100);
// rect.fillRect(-this._itemLen / 2, -this._itemLen / 2, this._itemLen, this._itemLen); // rect.fillRect(-this._itemLen / 2, -this._itemLen / 2, this._itemLen, this._itemLen);
// rect.fill(); // rect.fill();
item.data = data;
this._addItemPic(item, data.pic_url); this._addItemPic(item, data.pic_url);
this._addItemLabel(item, data.text); this._addItemLabel(item, data.text);
...@@ -253,6 +280,12 @@ cc.Class({ ...@@ -253,6 +280,12 @@ cc.Class({
} }
label.font = this._labelFont; label.font = this._labelFont;
label._forceUpdateRenderData(true);
if (labelNode.width > this._itemLen) {
item.width = labelNode.width;
}
}, },
_addItemAudio: function _addItemAudio(item, url) { _addItemAudio: function _addItemAudio(item, url) {
if (!url) { if (!url) {
...@@ -266,16 +299,6 @@ cc.Class({ ...@@ -266,16 +299,6 @@ cc.Class({
_addItemListener: function _addItemListener(item) { _addItemListener: function _addItemListener(item) {
var _this4 = this; var _this4 = this;
// item.addComponent(cc.Button);
// item.on('click', () => {
//
// this.node.emit('item_click', item);
//
// // if (item.audioClip) {
// // cc.audioEngine.stopAll();
// // cc.audioEngine.play(item.audioClip, false, 0.5);
// // }
// });
var touchStart = function touchStart(e) { var touchStart = function touchStart(e) {
console.log(' touch start '); console.log(' touch start ');
...@@ -306,20 +329,36 @@ cc.Class({ ...@@ -306,20 +329,36 @@ cc.Class({
var dataArr = this._dataArr; var dataArr = this._dataArr;
var disW = this._disW; var disW = this._disW;
var startIndex = this._pageIndex * this._lineMaxCount; var startIndex = this._pageIndex * this._lineMaxCount; // const showArr = dataArr.slice(startIndex, startIndex + this._lineMaxCount);
var showArr = dataArr.slice(startIndex, startIndex + this._lineMaxCount);
var baseX = -(disW + this._itemLen) * (showArr.length - 1) / 2; var showArr = this._pageArr[this._pageIndex];
var baseX = this._getCurPageBaseX(); // const baseX = -(disW + this._itemLen) * (showArr.length - 1) / 2;
var baseY = -25; var baseY = -25;
showArr.forEach(function (data, i) { showArr.forEach(function (el, i) {
var item = _this5._addOneItem(data); var item = _this5._addOneItem(el.data);
_this5._itemLayer.addChild(item); _this5._itemLayer.addChild(item);
item.x = baseX + (disW + _this5._itemLen) * i; item.x = baseX + (disW + item.width) / 2;
item.y = baseY; item.y = baseY;
baseX = item.x + (disW + item.width) / 2;
}); });
this._setPageBtnState(); this._setPageBtnState();
},
_getCurPageBaseX: function _getCurPageBaseX() {
var arr = this._pageArr[this._pageIndex];
console.log('arr: ', arr);
var curLen = this._disW;
for (var i = 0; i < arr.length; i++) {
curLen += arr[i].width + this._disW;
}
return -curLen / 2;
} // update (dt) {}, } // update (dt) {},
}); });
......
This source diff could not be displayed because it is too large. You can view the blob instead.
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