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

完善描边demo

Browse Source
This commit is contained in:
caizhitao 2019-12-18 23:21:41 +08:00
parent 534ad12fc8
commit 769d2a5c54
5 changed files with 793 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/effects/outline.effect
View File

@ -13,8 +13,8 @@ CCEffect %{
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
outlineColor: { value: [1., .0, .0, 1.], editor: { type: color } }
outlineSize: { value: .01 }
outlineColor: { value: [1.0, 0.0, 0.0, 1.0], editor: { type: color } }
outlineSize: { value: 0.01 }
}%

768
assets/scenes/OutlineEffectScene.fire
View File

@ -78,16 +78,16 @@
"__id__": 8
},
{
"__id__": 10
"__id__": 21
}
],
"_active": true,
"_components": [
{
"__id__": 12
"__id__": 28
},
{
"__id__": 13
"__id__": 29
}
],
"_prefab": null,
@ -362,16 +362,684 @@
},
{
"__type__": "cc.Node",
"_name": "Sprite",
"_name": "Layout",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [
{
"__id__": 9
},
{
"__id__": 11
}
],
"_active": true,
"_components": [
{
"__id__": 19
},
{
"__id__": 20
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 548,
"height": 150
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-62,
168.26,
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": "11ZCsp/hhAnoxRSLqdlROB"
},
{
"__type__": "cc.Node",
"_name": "Label",
"_objFlags": 0,
"_parent": {
"__id__": 8
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 10
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 200,
"height": 50.4
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-174,
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": "a8mK6UowJOqLvmjfPIiuTZ"
},
{
"__type__": "cc.Label",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 9
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_useOriginalSize": false,
"_string": "描边宽度：",
"_N$string": "描边宽度：",
"_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": "5aqqaNVJNJsqy4cwZGvqW5"
},
{
"__type__": "cc.Node",
"_name": "Slider",
"_objFlags": 0,
"_parent": {
"__id__": 8
},
"_children": [
{
"__id__": 12
},
{
"__id__": 14
}
],
"_active": true,
"_components": [
{
"__id__": 17
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 300,
"height": 20
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
124,
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": "e3WHmNWolODK/k/BUhp8n+"
},
{
"__type__": "cc.Node",
"_name": "Background",
"_objFlags": 0,
"_parent": {
"__id__": 11
},
"_children": [],
"_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": 300,
"height": 20
},
"_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": "4e4s7CtEpIPYADvmHwxDSt"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 12
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "31d8962d-babb-4ec7-be19-8e9f54a4ea99"
},
"_type": 1,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "fc/wnYCLxJKrZ8PoMA1CYw"
},
{
"__type__": "cc.Node",
"_name": "Handle",
"_objFlags": 0,
"_parent": {
"__id__": 11
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 15
},
{
"__id__": 16
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 32,
"height": 32
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-150,
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": "cboGZ4mmtC7Z7ZvWnGXRab"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 14
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
},
"_type": 1,
"_sizeMode": 2,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "eeIzXLXopG3Ypab6LDsHxh"
},
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 14
},
"_enabled": true,
"_normalMaterial": null,
"_grayMaterial": null,
"duration": 0.1,
"zoomScale": 1.1,
"clickEvents": [],
"_N$interactable": true,
"_N$enableAutoGrayEffect": true,
"_N$transition": 3,
"transition": 3,
"_N$normalColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$pressedColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"pressedColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"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": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$normalSprite": {
"__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
},
"_N$pressedSprite": {
"__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
},
"pressedSprite": {
"__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
},
"_N$hoverSprite": {
"__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
},
"hoverSprite": {
"__uuid__": "e7aba14b-f956-4480-b254-8d57832e273f"
},
"_N$disabledSprite": {
"__uuid__": "29158224-f8dd-4661-a796-1ffab537140e"
},
"_N$target": {
"__id__": 14
},
"_id": "f8CMhOw3JJrJn6+CKLopHY"
},
{
"__type__": "cc.Slider",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 11
},
"_enabled": true,
"direction": 0,
"slideEvents": [
{
"__id__": 18
}
],
"_N$handle": {
"__id__": 16
},
"_N$progress": 0,
"_id": "69kbIKMEFE4ISodttSO13M"
},
{
"__type__": "cc.ClickEvent",
"target": {
"__id__": 2
},
"component": "",
"_componentId": "e1b90/rohdEk4SdmmEZANaD",
"handler": "onSideCallBack",
"customEventData": ""
},
{
"__type__": "cc.Layout",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_layoutSize": {
"__type__": "cc.Size",
"width": 548,
"height": 150
},
"_resize": 1,
"_N$layoutType": 1,
"_N$padding": 0,
"_N$cellSize": {
"__type__": "cc.Size",
"width": 40,
"height": 40
},
"_N$startAxis": 0,
"_N$paddingLeft": 0,
"_N$paddingRight": 0,
"_N$paddingTop": 0,
"_N$paddingBottom": 0,
"_N$spacingX": 48,
"_N$spacingY": 0,
"_N$verticalDirection": 1,
"_N$horizontalDirection": 0,
"_N$affectedByScale": false,
"_id": "35c+GGK1pBGY2lVxUQ4a+Y"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 8,
"_left": 0.15,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": false,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "47RYUMeTFP0bPLCO+5W3tH"
},
{
"__type__": "cc.Node",
"_name": "Layout",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [
{
"__id__": 22
},
{
"__id__": 24
}
],
"_active": true,
"_components": [
{
"__id__": 26
},
{
"__id__": 27
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 585.3299999999999,
"height": 150
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-43.335000000000036,
-63.427,
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": "feymBChPxA1pr6+/rlPqey"
},
{
"__type__": "cc.Node",
"_name": "ExampleSprite",
"_objFlags": 0,
"_parent": {
"__id__": 21
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 23
}
],
"_prefab": null,
@ -397,8 +1065,8 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
111.898,
-195.16499999999996,
26.272,
0,
0,
0,
@ -427,7 +1095,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
"__id__": 22
},
"_enabled": true,
"_materials": [
@ -456,16 +1124,16 @@
},
{
"__type__": "cc.Node",
"_name": "Label",
"_name": "ExampleLabel",
"_objFlags": 0,
"_parent": {
"__id__": 2
"__id__": 21
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 11
"__id__": 25
}
],
"_prefab": null,
@ -480,7 +1148,7 @@
"_contentSize": {
"__type__": "cc.Size",
"width": 342.33,
"height": 75.6
"height": 100.8
},
"_anchorPoint": {
"__type__": "cc.Vec2",
@ -491,8 +1159,8 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
-117.787,
121.50000000000003,
37.609,
0,
0,
0,
@ -521,19 +1189,19 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 10
"__id__": 24
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
"__uuid__": "daf44951-2c80-4778-b99f-52cfc78ab053"
}
],
"_useOriginalSize": false,
"_string": "Hello, World!",
"_N$string": "Hello, World!",
"_fontSize": 60,
"_lineHeight": 60,
"_lineHeight": 80,
"_enableWrapText": true,
"_N$file": null,
"_isSystemFontUsed": true,
@ -546,6 +1214,66 @@
"_N$cacheMode": 0,
"_id": "9fH5zrVThO/I9ly3o3xhIT"
},
{
"__type__": "cc.Layout",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 21
},
"_enabled": true,
"_layoutSize": {
"__type__": "cc.Size",
"width": 585.3299999999999,
"height": 150
},
"_resize": 1,
"_N$layoutType": 1,
"_N$padding": 0,
"_N$cellSize": {
"__type__": "cc.Size",
"width": 40,
"height": 40
},
"_N$startAxis": 0,
"_N$paddingLeft": 0,
"_N$paddingRight": 0,
"_N$paddingTop": 0,
"_N$paddingBottom": 0,
"_N$spacingX": 48,
"_N$spacingY": 0,
"_N$verticalDirection": 1,
"_N$horizontalDirection": 0,
"_N$affectedByScale": false,
"_id": "ff9z0nF9BGm5zFMuGhj1jt"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 21
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 8,
"_left": 0.15,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": false,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "a4H/CsfipEB73tJmLtFf9/"
},
{
"__type__": "cc.Canvas",
"_name": "",
@ -571,10 +1299,12 @@
"__id__": 2
},
"_enabled": true,
"label": {
"__id__": 11
"exampleSprite": {
"__id__": 23
},
"exampleLabel": {
"__id__": 25
},
"text": "hello",
"_id": "aa8ulaDR9JcbRoT7r3pqZq"
}
]

16
assets/scripts/MainSceneCtrl.ts
View File

@ -1,16 +0,0 @@
const {ccclass, property} = cc._decorator;
@ccclass
export default class MainSceneCtrl extends cc.Component {
@property(cc.Label)
label: cc.Label = null;
@property
text: string = 'hello';
start () {
// init logic
this.label.string = this.text;
}
}

41
assets/scripts/OutlineEffectSecne.ts Normal file
View File

@ -0,0 +1,41 @@
const { ccclass, property } = cc._decorator;
@ccclass
export default class MainSceneCtrl extends cc.Component {
@property(cc.Sprite)
exampleSprite: cc.Sprite = null;
@property(cc.Label)
exampleLabel: cc.Label = null;
start() {
this._updateSpriteOutlineWidth(0);
this._updateLabelOutlineWidth(0);
}
onSideCallBack(slider: cc.Slider, customEventData: string) {
this._updateSpriteOutlineWidth(slider.progress / 100);
this._updateLabelOutlineWidth(slider.progress / 100);
}
/**
* 动态更新描边宽度
*
* 1. 获取材质
* 2. 给材质的自定义 unitform 变量赋值
* 3. 重新将材质赋值回去
*
* @property outlineSize 描边长度比例[0,1] 比如0.5，那么就是宽*0.5 高*0.5
*/
private _updateSpriteOutlineWidth(outlineSize: number) {
let spriteMaterial: cc.Material = this.exampleSprite.getMaterial(0);
spriteMaterial.setProperty("outlineSize", outlineSize);
this.exampleSprite.setMaterial(0, spriteMaterial);
}
private _updateLabelOutlineWidth(outlineSize: number) {
let labelMaterial: cc.Material = this.exampleLabel.getMaterial(0);
labelMaterial.setProperty("outlineSize", outlineSize);
this.exampleLabel.setMaterial(0, labelMaterial);
}
}

0
assets/scripts/MainSceneCtrl.ts.meta → assets/scripts/OutlineEffectSecne.ts.meta
View File