Test_Project_Cocos/CocosCreator-Shader-Effect-Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

支持多分辨率适配

Browse Source
This commit is contained in:
caizhitao 2019-12-24 09:58:54 +08:00
parent 4d84ee0748
commit c43d246b8f
6 changed files with 349 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

311
assets/scenes/GlowInnerEffectScene.fire
View File

@ -73,21 +73,15 @@
}, },
{ {
"__id__": 5 "__id__": 5
},
{
"__id__": 8
},
{
"__id__": 21
} }
], ],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 36 "__id__": 40
}, },
{ {
"__id__": 37 "__id__": 41
} }
], ],
"_prefab": null, "_prefab": null,
@ -177,7 +171,7 @@
"array": [ "array": [
0, 0,
0, 0,
491.9024293495612, 393.1755333181352,
0, 0,
0, 0,
0, 0,
@ -238,19 +232,91 @@
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "Bg", "_name": "Content",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 2 "__id__": 2
}, },
"_children": [
{
"__id__": 6
},
{
"__id__": 9
},
{
"__id__": 22
}
],
"_active": true,
"_components": [
{
"__id__": 39
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 960,
"height": 640
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "faqYlnbttBCaJJgkn4Ntv/"
},
{
"__type__": "cc.Node",
"_name": "Bg",
"_objFlags": 0,
"_parent": {
"__id__": 5
},
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 6 "__id__": 7
}, },
{ {
"__id__": 7 "__id__": 8
} }
], ],
"_prefab": null, "_prefab": null,
@ -306,7 +372,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 5 "__id__": 6
}, },
"_enabled": true, "_enabled": true,
"alignMode": 0, "alignMode": 0,
@ -333,7 +399,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 5 "__id__": 6
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
@ -365,32 +431,32 @@
"_name": "SliderLayouts", "_name": "SliderLayouts",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 2 "__id__": 5
}, },
"_children": [ "_children": [
{ {
"__id__": 9 "__id__": 10
}, },
{ {
"__id__": 11 "__id__": 12
}, },
{ {
"__id__": 13 "__id__": 14
}, },
{ {
"__id__": 15 "__id__": 16
}, },
{ {
"__id__": 17 "__id__": 18
} }
], ],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 19 "__id__": 20
}, },
{ {
"__id__": 20 "__id__": 21
} }
], ],
"_prefab": null, "_prefab": null,
@ -445,11 +511,11 @@
"__type__": "cc.Node", "__type__": "cc.Node",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 8 "__id__": 9
}, },
"_id": "75CtG/r79FIrGBRQBxUnMM", "_id": "75CtG/r79FIrGBRQBxUnMM",
"_prefab": { "_prefab": {
"__id__": 10 "__id__": 11
}, },
"_name": "ColorRedSliderPrefab", "_name": "ColorRedSliderPrefab",
"_active": true, "_active": true,
@ -479,7 +545,7 @@
{ {
"__type__": "cc.PrefabInfo", "__type__": "cc.PrefabInfo",
"root": { "root": {
"__id__": 9 "__id__": 10
}, },
"asset": { "asset": {
"__uuid__": "03c2e82d-4c92-4e47-ac7c-516b042f06c1" "__uuid__": "03c2e82d-4c92-4e47-ac7c-516b042f06c1"
@ -491,11 +557,11 @@
"__type__": "cc.Node", "__type__": "cc.Node",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 8 "__id__": 9
}, },
"_id": "326+Vf4/VCI4n/eb7ABmQ2", "_id": "326+Vf4/VCI4n/eb7ABmQ2",
"_prefab": { "_prefab": {
"__id__": 12 "__id__": 13
}, },
"_name": "ColorGreenSliderPrefab", "_name": "ColorGreenSliderPrefab",
"_active": true, "_active": true,
@ -525,7 +591,7 @@
{ {
"__type__": "cc.PrefabInfo", "__type__": "cc.PrefabInfo",
"root": { "root": {
"__id__": 11 "__id__": 12
}, },
"asset": { "asset": {
"__uuid__": "297fef0d-6c88-495c-8e70-06be08d65677" "__uuid__": "297fef0d-6c88-495c-8e70-06be08d65677"
@ -537,11 +603,11 @@
"__type__": "cc.Node", "__type__": "cc.Node",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 8 "__id__": 9
}, },
"_id": "77H3WJNzBFloSV/XcgYZ2h", "_id": "77H3WJNzBFloSV/XcgYZ2h",
"_prefab": { "_prefab": {
"__id__": 14 "__id__": 15
}, },
"_name": "ColorBlueSliderPrefab", "_name": "ColorBlueSliderPrefab",
"_active": true, "_active": true,
@ -571,7 +637,7 @@
{ {
"__type__": "cc.PrefabInfo", "__type__": "cc.PrefabInfo",
"root": { "root": {
"__id__": 13 "__id__": 14
}, },
"asset": { "asset": {
"__uuid__": "3da0b15d-e982-45fd-b470-d090d9d8541d" "__uuid__": "3da0b15d-e982-45fd-b470-d090d9d8541d"
@ -583,11 +649,11 @@
"__type__": "cc.Node", "__type__": "cc.Node",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 8 "__id__": 9
}, },
"_id": "78ay9VkEVGU67Iinzm3rCq", "_id": "78ay9VkEVGU67Iinzm3rCq",
"_prefab": { "_prefab": {
"__id__": 16 "__id__": 17
}, },
"_name": "ColorAlphaSliderPrefab", "_name": "ColorAlphaSliderPrefab",
"_active": true, "_active": true,
@ -617,7 +683,7 @@
{ {
"__type__": "cc.PrefabInfo", "__type__": "cc.PrefabInfo",
"root": { "root": {
"__id__": 15 "__id__": 16
}, },
"asset": { "asset": {
"__uuid__": "4dd20c92-b7be-4633-8804-fe08491472db" "__uuid__": "4dd20c92-b7be-4633-8804-fe08491472db"
@ -629,11 +695,11 @@
"__type__": "cc.Node", "__type__": "cc.Node",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 8 "__id__": 9
}, },
"_id": "669o93+gJMWJFGUDKSDUJ7", "_id": "669o93+gJMWJFGUDKSDUJ7",
"_prefab": { "_prefab": {
"__id__": 18 "__id__": 19
}, },
"_name": "GlowWidthSliderPrefab", "_name": "GlowWidthSliderPrefab",
"_active": true, "_active": true,
@ -663,7 +729,7 @@
{ {
"__type__": "cc.PrefabInfo", "__type__": "cc.PrefabInfo",
"root": { "root": {
"__id__": 17 "__id__": 18
}, },
"asset": { "asset": {
"__uuid__": "cf53013b-0038-4157-b8be-318d7fc0e2fd" "__uuid__": "cf53013b-0038-4157-b8be-318d7fc0e2fd"
@ -676,7 +742,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 8 "__id__": 9
}, },
"_enabled": true, "_enabled": true,
"alignMode": 1, "alignMode": 1,
@ -703,7 +769,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 8 "__id__": 9
}, },
"_enabled": true, "_enabled": true,
"_layoutSize": { "_layoutSize": {
@ -736,29 +802,32 @@
"_name": "Examples", "_name": "Examples",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 2 "__id__": 5
}, },
"_children": [ "_children": [
{ {
"__id__": 22 "__id__": 23
}, },
{ {
"__id__": 25 "__id__": 26
}, },
{ {
"__id__": 28 "__id__": 29
}, },
{ {
"__id__": 31 "__id__": 32
},
{
"__id__": 35
} }
], ],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 34 "__id__": 37
}, },
{ {
"__id__": 35 "__id__": 38
} }
], ],
"_prefab": null, "_prefab": null,
@ -773,7 +842,7 @@
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 384, "width": 384,
"height": 584 "height": 682.4
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@ -814,16 +883,16 @@
"_name": "ball_0", "_name": "ball_0",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 21 "__id__": 22
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 23 "__id__": 24
}, },
{ {
"__id__": 24 "__id__": 25
} }
], ],
"_prefab": null, "_prefab": null,
@ -879,7 +948,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 22 "__id__": 23
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
@ -911,7 +980,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 22 "__id__": 23
}, },
"_enabled": true, "_enabled": true,
"alignMode": 1, "alignMode": 1,
@ -938,16 +1007,16 @@
"_name": "cocos_logo", "_name": "cocos_logo",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 21 "__id__": 22
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 26 "__id__": 27
}, },
{ {
"__id__": 27 "__id__": 28
} }
], ],
"_prefab": null, "_prefab": null,
@ -1003,7 +1072,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 25 "__id__": 26
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
@ -1035,7 +1104,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 25 "__id__": 26
}, },
"_enabled": true, "_enabled": true,
"alignMode": 1, "alignMode": 1,
@ -1062,16 +1131,16 @@
"_name": "ball_1", "_name": "ball_1",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 21 "__id__": 22
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 29 "__id__": 30
}, },
{ {
"__id__": 30 "__id__": 31
} }
], ],
"_prefab": null, "_prefab": null,
@ -1127,7 +1196,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 28 "__id__": 29
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
@ -1159,7 +1228,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 28 "__id__": 29
}, },
"_enabled": true, "_enabled": true,
"alignMode": 1, "alignMode": 1,
@ -1186,16 +1255,16 @@
"_name": "video_btn", "_name": "video_btn",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 21 "__id__": 22
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 32 "__id__": 33
}, },
{ {
"__id__": 33 "__id__": 34
} }
], ],
"_prefab": null, "_prefab": null,
@ -1251,7 +1320,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 31 "__id__": 32
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
@ -1283,7 +1352,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 31 "__id__": 32
}, },
"_enabled": true, "_enabled": true,
"alignMode": 1, "alignMode": 1,
@ -1305,12 +1374,104 @@
"_originalHeight": 0, "_originalHeight": 0,
"_id": "27r/pOzQhOrJIV7E87RRJH" "_id": "27r/pOzQhOrJIV7E87RRJH"
}, },
{
"__type__": "cc.Node",
"_name": "New Label",
"_objFlags": 0,
"_parent": {
"__id__": 22
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 36
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 97.87,
"height": 50.4
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
-657.2,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "5dfIaYLgJPQKk50HqrgyHI"
},
{
"__type__": "cc.Label",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 35
},
"_enabled": true,
"_materials": [
{
"__uuid__": "2c760728-404d-4553-a1d0-7ab18263845c"
}
],
"_useOriginalSize": false,
"_string": "Label",
"_N$string": "Label",
"_fontSize": 40,
"_lineHeight": 40,
"_enableWrapText": true,
"_N$file": null,
"_isSystemFontUsed": true,
"_spacingX": 0,
"_batchAsBitmap": false,
"_N$horizontalAlign": 1,
"_N$verticalAlign": 1,
"_N$fontFamily": "Arial",
"_N$overflow": 0,
"_N$cacheMode": 0,
"_id": "d1whc7H8RHdrROcYj+2Qh1"
},
{ {
"__type__": "cc.Widget", "__type__": "cc.Widget",
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 21 "__id__": 22
}, },
"_enabled": true, "_enabled": true,
"alignMode": 1, "alignMode": 1,
@ -1337,13 +1498,13 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 21 "__id__": 22
}, },
"_enabled": true, "_enabled": true,
"_layoutSize": { "_layoutSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 384, "width": 384,
"height": 584 "height": 682.4
}, },
"_resize": 1, "_resize": 1,
"_N$layoutType": 2, "_N$layoutType": 2,
@ -1365,6 +1526,16 @@
"_N$affectedByScale": false, "_N$affectedByScale": false,
"_id": "ff9z0nF9BGm5zFMuGhj1jt" "_id": "ff9z0nF9BGm5zFMuGhj1jt"
}, },
{
"__type__": "a7491V7JIdEJbj1Nb3ChLNF",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_id": "1e3JBAHdBB05hQBmOh155Q"
},
{ {
"__type__": "cc.Canvas", "__type__": "cc.Canvas",
"_name": "", "_name": "",

12
assets/scripts/GlowInnerEffectScene.ts
View File

@ -10,12 +10,12 @@ export default class GlowInnerEffectScene extends cc.Component {
private _examplesParentNode: cc.Node = null; private _examplesParentNode: cc.Node = null;
onLoad() { onLoad() {
this._redSlider = cc.find("Canvas/SliderLayouts/ColorRedSliderPrefab/Slider").getComponent(cc.Slider); this._redSlider = cc.find("Canvas/Content/SliderLayouts/ColorRedSliderPrefab/Slider").getComponent(cc.Slider);
this._greenSlider = cc.find("Canvas/SliderLayouts/ColorGreenSliderPrefab/Slider").getComponent(cc.Slider); this._greenSlider = cc.find("Canvas/Content/SliderLayouts/ColorGreenSliderPrefab/Slider").getComponent(cc.Slider);
this._blueSlider = cc.find("Canvas/SliderLayouts/ColorBlueSliderPrefab/Slider").getComponent(cc.Slider); this._blueSlider = cc.find("Canvas/Content/SliderLayouts/ColorBlueSliderPrefab/Slider").getComponent(cc.Slider);
this._alphaSlider = cc.find("Canvas/SliderLayouts/ColorAlphaSliderPrefab/Slider").getComponent(cc.Slider); this._alphaSlider = cc.find("Canvas/Content/SliderLayouts/ColorAlphaSliderPrefab/Slider").getComponent(cc.Slider);
this._widthSlider = cc.find("Canvas/SliderLayouts/GlowWidthSliderPrefab/Slider").getComponent(cc.Slider); this._widthSlider = cc.find("Canvas/Content/SliderLayouts/GlowWidthSliderPrefab/Slider").getComponent(cc.Slider);
this._examplesParentNode = cc.find("Canvas/Examples"); this._examplesParentNode = cc.find("Canvas/Content/Examples");
} }
onEnable() { onEnable() {

7
assets/scripts/ccutils.meta Normal file
View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "f997b961-2f60-436e-8980-c469c1effc84",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

7
assets/scripts/ccutils/multiresolution.meta Normal file
View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "93bfb663-05e2-402a-9ed4-0e9f785baeda",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

79
assets/scripts/ccutils/multiresolution/ContentAdapter.ts Normal file
View File

@ -0,0 +1,79 @@
const { ccclass, property } = cc._decorator;
/**
* @classdesc 游戏主内容节点自适应所有分辨率的脚本
* @author caizhitao
* @version 0.1.0
* @since 2018-11-30
* @description
*
* 用法：
* 1. 将本组件挂载在节点上即可
*
* 适配原理：
* 1. 将游戏主内容节点的宽高调整为画布的大小，以进行Size适配
*
* 注意：
* 1. 挂载这个脚本的节点不能加入Widget组件，不然这个适配是没有效果的
* 2. 目前只支持 SHOW_ALL 模式下的背景缩放适配，不支持其他模式的背景缩放
*
* @example
```
// e.g.
// 代码中设置 SHOW_ALL 模式的参考代码
cc.view.setDesignResolutionSize(720, 1280, cc.ResolutionPolicy.SHOW_ALL);
// 或者 Canvas 组件中，同时勾选 Fit Width 和 Fit Height
```
*/
@ccclass
export default class ContentAdapter extends cc.Component {
onLoad() {
// if (CC_DEBUG) {
// cc.log("调整前");
// cc.log(`屏幕分辨率: ${cc.view.getCanvasSize().width} x ${cc.view.getCanvasSize().height}`);
// cc.log(`视图窗口可见区域分辨率: ${cc.view.getVisibleSize().width} x ${cc.view.getVisibleSize().height}`);
// cc.log(`视图中边框尺寸: ${cc.view.getFrameSize().width} x ${cc.view.getFrameSize().height}`);
// cc.log(`设备或浏览器像素比例: ${cc.view.getDevicePixelRatio()}`);
// cc.log(`节点宽高: ${this.node.width} x ${this.node.height}`);
// }
// 1. 先找到 SHOW_ALL 模式适配之后，本节点的实际宽高以及初始缩放值
let srcScaleForShowAll = Math.min(cc.view.getCanvasSize().width / this.node.width, cc.view.getCanvasSize().height / this.node.height);
let realWidth = this.node.width * srcScaleForShowAll;
let realHeight = this.node.height * srcScaleForShowAll;
// 2. 基于第一步的数据，再做节点宽高适配
this.node.width = this.node.width * (cc.view.getCanvasSize().width / realWidth);
this.node.height = this.node.height * (cc.view.getCanvasSize().height / realHeight);
// // 3. 因为本节点的宽高发生了改变，所以要手动更新剩下子节点的宽高
// this._updateAllChildNodeWidget(this.node);
// if (CC_DEBUG) {
// cc.log(`节点在SHOW_ALL模式下展示的宽高: ${realWidth} x ${realHeight}`);
// cc.log(`节点在SHOW_ALL模式下展示的缩放: ${srcScaleForShowAll}`);
// cc.log(
// `节点在SHOW_ALL模式下做全屏处理后的实际宽高（${cc.view.getCanvasSize().width}x${
// cc.view.getCanvasSize().height
// }）等价于于原节点的宽高(${this.node.width}x${this.node.height})`
// );
// }
}
// private _updateAllChildNodeWidget(parentNode: cc.Node) {
// if (parentNode == null) {
// return;
// }
// let widget = parentNode.getComponent(cc.Widget);
// if (widget != null) {
// widget.updateAlignment();
// }
// if (parentNode.childrenCount == 0) {
// return;
// }
// parentNode.children.forEach((childNode: cc.Node) => {
// this._updateAllChildNodeWidget(childNode);
// });
// }
}

9
assets/scripts/ccutils/multiresolution/ContentAdapter.ts.meta Normal file
View File

@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "a749157b-2487-4425-b8f5-35bdc284b345",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}