lywsvip/CocosCreator-GG-Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: lywsvip:0.1.0
Branches Tags
lywsvip:master lywsvip:example/safearea_with_bottom
lywsvip:0.1.0
...
compare: lywsvip:example/safearea_with_bottom
Branches Tags
lywsvip:example/safearea_with_bottom lywsvip:master
lywsvip:0.1.0

2 Commits
0.1.0 ... example/sa

Author SHA1 Message Date
caizhitao
8cf673180f bugfix 2021-01-27 09:33:10 +08:00
caizhitao
b3a097a0f8 加入安全区域延伸到屏幕底部的例子 2021-01-27 09:30:06 +08:00
5 changed files with 698 additions and 7 deletions
Expand all files Collapse all files

652
assets/mainbundle/scenes/SafeAreaWithBottomSceneExample.fire Normal file
View File

@@ -0,0 +1,652 @@
[
{
"__type__": "cc.SceneAsset",
"_name": "",
"_objFlags": 0,
"_native": "",
"scene": {
"__id__": 1
}
},
{
"__type__": "cc.Scene",
"_objFlags": 0,
"_parent": null,
"_children": [
{
"__id__": 2
}
],
"_active": true,
"_components": [],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"height": 0
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_is3DNode": true,
"_groupIndex": 0,
"groupIndex": 0,
"autoReleaseAssets": false,
"_id": "109e5963-9c26-4853-9ffa-72d40ec1dacb"
},
{
"__type__": "cc.Node",
"_name": "Canvas",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [
{
"__id__": 3
},
{
"__id__": 5
},
{
"__id__": 8
}
],
"_active": true,
"_components": [
{
"__id__": 15
},
{
"__id__": 16
},
{
"__id__": 17
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 720,
"height": 1280
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
360,
640,
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": "a5esZu+45LA5mBpvttspPD"
},
{
"__type__": "cc.Node",
"_name": "Main Camera",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 4
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 720,
"height": 1280
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
726.5953137751441,
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": "e1WoFrQ79G7r4ZuQE3HlNb"
},
{
"__type__": "cc.Camera",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 3
},
"_enabled": true,
"_cullingMask": 4294967295,
"_clearFlags": 7,
"_backgroundColor": {
"__type__": "cc.Color",
"r": 0,
"g": 0,
"b": 0,
"a": 255
},
"_depth": -1,
"_zoomRatio": 1,
"_targetTexture": null,
"_fov": 60,
"_orthoSize": 10,
"_nearClip": 1,
"_farClip": 4096,
"_ortho": true,
"_rect": {
"__type__": "cc.Rect",
"x": 0,
"y": 0,
"width": 1,
"height": 1
},
"_renderStages": 1,
"_alignWithScreen": true,
"_id": "81GN3uXINKVLeW4+iKSlim"
},
{
"__type__": "cc.Node",
"_name": "ScreenArea",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 6
},
{
"__id__": 7
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 0,
"b": 0,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 720,
"height": 1280
},
"_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": "08UIpRSWREi7wExANfKcym"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "a23235d1-15db-4b95-8439-a2e005bfff91"
},
"_type": 1,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "54YF/dufJPgpxlEJ9q3+E+"
},
{
"__type__": "ef3af3lgNJGSbQdCsSRaHtS",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_id": "0a1SIWUXtNw5tHDCJDzjV0"
},
{
"__type__": "cc.Node",
"_name": "SafeArea",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [
{
"__id__": 9
}
],
"_active": true,
"_components": [
{
"__id__": 13
},
{
"__id__": 14
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 0,
"g": 255,
"b": 5,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 720,
"height": 1280
},
"_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": "dcKlde8x9LsL43KXRt/vDm"
},
{
"__type__": "cc.Node",
"_name": "WithBottomSafeArea",
"_objFlags": 0,
"_parent": {
"__id__": 8
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 10
},
{
"__id__": 11
},
{
"__id__": 12
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 0,
"g": 5,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 720,
"height": 1280
},
"_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": "7aCmBdUzVKhKnfCXtzGK2F"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 9
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 45,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "ab9vdVKQVBX7P4WB73+L5U"
},
{
"__type__": "59625om3shNXbWvSuYABXpb",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 9
},
"_enabled": true,
"withInsertTop": false,
"withInsertBottom": true,
"withInsertLeft": false,
"withInsertRight": false,
"_id": "36SlJalrhAvJWcsQIEyopC"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 9
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "a23235d1-15db-4b95-8439-a2e005bfff91"
},
"_type": 1,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "86QqfqbBBCdqBlClMBVnoT"
},
{
"__type__": "140ab6ZGddOWbVMDrjHGWXi",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_id": "ebTpHU74BNA5gxAvsAsuLE"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "a23235d1-15db-4b95-8439-a2e005bfff91"
},
"_type": 1,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "dfVCgVEAVK+L4g8SqF6qnQ"
},
{
"__type__": "cc.Canvas",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_designResolution": {
"__type__": "cc.Size",
"width": 720,
"height": 1280
},
"_fitWidth": true,
"_fitHeight": true,
"_id": "59Cd0ovbdF4byw5sbjJDx7"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 45,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "29zXboiXFBKoIV4PQ2liTe"
},
{
"__type__": "4b4faEwzBtFCJwE5tM/+s6M",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_id": "4b2XHlqSpKeJQv+LjtkkMs"
}
]

7
assets/mainbundle/scenes/SafeAreaWithBottomSceneExample.fire.meta Normal file
View File

@@ -0,0 +1,7 @@
{
"ver": "1.2.9",
"uuid": "109e5963-9c26-4853-9ffa-72d40ec1dacb",
"asyncLoadAssets": false,
"autoReleaseAssets": false,
"subMetas": {}
}

20
assets/mainbundle/scenes/SafeAreaWithBottomSceneExample.ts Normal file
View File

@@ -0,0 +1,20 @@
import SafeAreaAdapterComponent from "../../scripts/framework/lib/components/adapter/SafeAreaAdapterComponent";
const { ccclass, property } = cc._decorator;
@ccclass
export default class SafeAreaWithBottomSceneExample extends cc.Component {
onLoad() {
// 网页模拟安全区域（距离屏幕区域各50）
if (CC_DEBUG) {
SafeAreaAdapterComponent.safeAreaSimulatehandler = () => {
return {
safeAreaMarginTop: 50,
safeAreaMarginBottom: 50,
safeAreaMarginLeft: 50,
safeAreaMarginRight: 50,
};
};
}
}
}

9
assets/mainbundle/scenes/SafeAreaWithBottomSceneExample.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "1.0.8",
"uuid": "4b4fa130-cc1b-4508-9c04-e6d33fface8c",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

17
assets/scripts/framework/lib/components/adapter/SafeAreaAdapterComponent.ts
View File

@@ -54,6 +54,8 @@ export default class SafeAreaAdapterComponent extends cc.Component {
}
}
static safeAreaSimulatehandler: Function;
private static _safeArea: SafeArea;
static set safeArea(value: SafeArea) {
@@ -134,13 +136,14 @@ export default class SafeAreaAdapterComponent extends cc.Component {
// }
// }
// 调试模式下模拟安全区域
// if (CC_DEBUG) {
// safeAreaMarginTop = 200;
// safeAreaMarginBottom = 50;
// safeAreaMarginLeft = 0;
// safeAreaMarginRight = 0;
// }
// 处理传入来的模拟安全区域
if (this.safeAreaSimulatehandler) {
let simulateData = this.safeAreaSimulatehandler();
safeAreaMarginTop = simulateData.safeAreaMarginTop;
safeAreaMarginBottom = simulateData.safeAreaMarginBottom;
safeAreaMarginLeft = simulateData.safeAreaMarginLeft;
safeAreaMarginRight = simulateData.safeAreaMarginRight;
}
// 计算安全区域的宽高像素
let safeAreaWidth = screenWidth - safeAreaMarginLeft - safeAreaMarginRight;