完成放大镜效果

This commit is contained in:
ifengzp 2020-04-02 01:20:11 +08:00
parent e07909e403
commit 6fc3f3c7a9
16 changed files with 1036 additions and 4 deletions

View File

@ -2,7 +2,8 @@ const {ccclass, property} = cc._decorator;
enum sceneList {
"Infinite_bg_scroll" = "背景无限滚动",
"Joystick" = "遥控杆",
"Coin_fly_to_wallet" = "金币落袋"
"Coin_fly_to_wallet" = "金币落袋",
"Magnifying_mirror" = "放大镜"
}
@ccclass

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "2d56d6a4-3d91-43ec-ba1a-02213b1b6c59",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

View File

@ -0,0 +1,803 @@
[
{
"__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": "b90353e2-9e7b-4731-8cd4-50a921ab9da7"
},
{
"__type__": "cc.Node",
"_name": "Canvas",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [
{
"__id__": 3
},
{
"__id__": 5
},
{
"__id__": 8
},
{
"__id__": 14
}
],
"_active": true,
"_components": [
{
"__id__": 16
},
{
"__id__": 17
},
{
"__id__": 18
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1334,
"height": 750
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
667,
375,
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": 1334,
"height": 750
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
443.4050067376326,
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": "background",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 6
},
{
"__id__": 7
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1334,
"height": 750
},
"_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": "5eC8nH3PBAYIb9zgQlQb1E"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "f05a6181-92a3-4084-b43f-fd1050d478df"
},
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "a1hcmLsAZKLYSGjrcone4o"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_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": 512,
"_originalHeight": 362,
"_id": "09rHdWSRdFepVvWfsfFy4A"
},
{
"__type__": "cc.Node",
"_name": "mirror",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [
{
"__id__": 9
}
],
"_active": true,
"_components": [
{
"__id__": 13
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 175,
"height": 175
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
15,
19,
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": 1,
"groupIndex": 1,
"_id": "e39Sg5JjdJ5alKrBR4YYO5"
},
{
"__type__": "cc.Node",
"_name": "mask",
"_objFlags": 0,
"_parent": {
"__id__": 8
},
"_children": [
{
"__id__": 10
}
],
"_active": true,
"_components": [
{
"__id__": 12
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 130,
"height": 130
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-14,
12,
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": 1,
"groupIndex": 1,
"_id": "eb8qPkD9hFB6dEwGG6djiz"
},
{
"__type__": "cc.Node",
"_name": "temp_sprite",
"_objFlags": 0,
"_parent": {
"__id__": 9
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 11
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 120,
"height": 120
},
"_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": 1,
"groupIndex": 1,
"_id": "3aQ6HdaOROSLcB7Q9WP0hF"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 10
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "24bab6bf-4517-4536-b5cb-ca87ca26f5b1"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "98GH6dCEpNL71YN1MRAAgU"
},
{
"__type__": "cc.Mask",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 9
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_spriteFrame": null,
"_type": 1,
"_segments": 64,
"_N$alphaThreshold": 0,
"_N$inverted": false,
"_id": "eenNHcJ9hKqZWXs6Bssl21"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "5156a788-c716-4490-99f4-177dc3c52e18"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "b0OJBngN9L555kcMCA6wJN"
},
{
"__type__": "cc.Node",
"_name": "mirror_camera",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 15
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1334,
"height": 750
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
443.4050067376326,
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": "683HyeOH5E84w+nAanPU91"
},
{
"__type__": "cc.Camera",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 14
},
"_enabled": true,
"_cullingMask": -3,
"_clearFlags": 6,
"_backgroundColor": {
"__type__": "cc.Color",
"r": 0,
"g": 0,
"b": 0,
"a": 255
},
"_depth": 1,
"_zoomRatio": 1.5,
"_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": "b3Im/zG3BGobe6vV81g5D2"
},
{
"__type__": "cc.Canvas",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_designResolution": {
"__type__": "cc.Size",
"width": 1334,
"height": 750
},
"_fitWidth": false,
"_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__": "ac762bfY29KOIBc8dW/z/gl",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"mirror": {
"__id__": 8
},
"mirrorCameraNode": {
"__id__": 14
},
"tempCameraSpriteNode": null,
"_id": "19Lhxf6jxHWZ4TYr8xS5s4"
}
]

View File

@ -0,0 +1,7 @@
{
"ver": "1.2.6",
"uuid": "b90353e2-9e7b-4731-8cd4-50a921ab9da7",
"asyncLoadAssets": false,
"autoReleaseAssets": false,
"subMetas": {}
}

View File

@ -0,0 +1,50 @@
const {ccclass, property} = cc._decorator;
@ccclass
export default class MagnifyingMirror extends cc.Component {
@property(cc.Node)
mirror: cc.Node = null;
@property(cc.Node)
mirrorCameraNode: cc.Node = null;
@property(cc.Node)
tempCameraSpriteNode: cc.Node = null;
viewSize: cc.Size = null;
onLoad () {
this.viewSize = cc.view.getVisibleSize();
this.initCamera();
this.mirrorCameraNode.setPosition(this.mirror.getPosition());
this.node.on(cc.Node.EventType.TOUCH_START, this.touchStartEvent, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoveEvent, this);
}
touchStartPos: cc.Vec2 = null;
mirrorOriginPos: cc.Vec2 = null;
touchStartEvent(event) {
this.touchStartPos = event.getLocation();
this.mirrorOriginPos = this.mirror.getPosition();
}
touchMoveEvent(event) {
let touchPos: cc.Vec2 = event.getLocation();
let pos = this.mirrorOriginPos.add(touchPos.subtract(this.touchStartPos))
this.mirror.setPosition(pos);
this.mirrorCameraNode.setPosition(pos);
}
initCamera() {
let visibleRect = cc.view.getVisibleSize();
let texture = new cc.RenderTexture();
texture.initWithSize(visibleRect.width, visibleRect.height);
let spriteFrame = new cc.SpriteFrame();
spriteFrame.setTexture(texture);
this.mirrorCameraNode.getComponent(cc.Camera).targetTexture = texture;
this.tempCameraSpriteNode.getComponent(cc.Sprite).spriteFrame = spriteFrame;
this.tempCameraSpriteNode.scaleY = -1;
}
}

View File

@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "ac7626df-636f-4a38-805c-f1d5bfcff825",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "f38afaea-efe8-43d9-b6fa-1f684403c6c7",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "0deebf0e-5b4c-4188-8a52-f7915a32ed9e",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 968,
"height": 582,
"platformSettings": {},
"subMetas": {
"bg": {
"ver": "1.0.4",
"uuid": "f05a6181-92a3-4084-b43f-fd1050d478df",
"rawTextureUuid": "0deebf0e-5b4c-4188-8a52-f7915a32ed9e",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 968,
"height": 582,
"rawWidth": 968,
"rawHeight": 582,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "77fe4ff5-1424-407c-b9cc-06a1e5aac47f",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 120,
"height": 120,
"platformSettings": {},
"subMetas": {
"circle": {
"ver": "1.0.4",
"uuid": "24bab6bf-4517-4536-b5cb-ca87ca26f5b1",
"rawTextureUuid": "77fe4ff5-1424-407c-b9cc-06a1e5aac47f",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 120,
"height": 120,
"rawWidth": 120,
"rawHeight": 120,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "6960fd09-efad-4b76-ae53-5efae4c743a9",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 200,
"height": 200,
"platformSettings": {},
"subMetas": {
"mirror": {
"ver": "1.0.4",
"uuid": "5156a788-c716-4490-99f4-177dc3c52e18",
"rawTextureUuid": "6960fd09-efad-4b76-ae53-5efae4c743a9",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0.5,
"offsetY": 0.5,
"trimX": 13,
"trimY": 12,
"width": 175,
"height": 175,
"rawWidth": 200,
"rawHeight": 200,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

BIN
assets/Texture/th.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "1c14c2d0-c971-4bca-a2be-8458a3083f70",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 474,
"height": 316,
"platformSettings": {},
"subMetas": {
"th": {
"ver": "1.0.4",
"uuid": "c569c4d9-3ae8-496d-ac64-40c32782c594",
"rawTextureUuid": "1c14c2d0-c971-4bca-a2be-8458a3083f70",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 474,
"height": 316,
"rawWidth": 474,
"rawHeight": 316,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

View File

@ -2,6 +2,10 @@
"collision-matrix": [
[
true
],
[
false,
false
]
],
"excluded-modules": [
@ -10,7 +14,8 @@
"3D Particle"
],
"group-list": [
"default"
"default",
"mirror_camera"
],
"design-resolution-width": 1334,
"design-resolution-height": 750,
@ -34,6 +39,5 @@
"live": {
"enable": false
}
},
"start-scene": "current"
}
}