lywsvip/CocosCreatorTutorial
1
0
Fork 0
mirror of https://github.com/Leo501/CocosCreatorTutorial.git synced 2026-06-09 16:22:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

添加一个介绍，并如何使用的demo

Browse Source
This commit is contained in:
leo
2020-12-17 01:26:00 +08:00
parent 6632342edc
commit e7bf8726db
35 changed files with 33950 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
MeshDemo/assets/Scene.meta Normal file
View File

@@ -0,0 +1,12 @@
{
"ver": "1.1.2",
"uuid": "29f52784-2fca-467b-92e7-8fd9ef8c57b7",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}

822
MeshDemo/assets/Scene/helloworld.fire Normal file
View File

@@ -0,0 +1,822 @@
[
{
"__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": "2d2f792f-a40c-49bb-a189-ed176a246e49"
},
{
"__type__": "cc.Node",
"_name": "Canvas",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [
{
"__id__": 3
},
{
"__id__": 5
},
{
"__id__": 8
},
{
"__id__": 10
},
{
"__id__": 12
},
{
"__id__": 15
}
],
"_active": true,
"_components": [
{
"__id__": 18
},
{
"__id__": 19
},
{
"__id__": 20
},
{
"__id__": 21
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 252,
"g": 252,
"b": 252,
"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": [
480,
320,
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": "a286bbGknJLZpRpxROV6M94"
},
{
"__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": 0,
"height": 0
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
554.2562584220408,
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": "c2pWI1+8dFe6L4u3+15PTp"
},
{
"__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": "0f9Y9E1ypF/b+c9oIr7DYF"
},
{
"__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": 27,
"g": 38,
"b": 46,
"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": "e2e0crkOLxGrpMxpbC4iQg1"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"alignMode": 0,
"_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": 200,
"_originalHeight": 150,
"_id": "533VWC56tH8Yh2sH1Ily43"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "410fb916-8721-4663-bab8-34397391ace7"
},
"_type": 1,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "cbBBuvEVJB9pYw2l4Al/oi"
},
{
"__type__": "cc.Node",
"_name": "cocos",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 9
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 195,
"height": 270
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
50,
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": "c4f30YOS65G64U2TwufdJ+2"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "31bc895a-c003-4566-a9f3-2e54ae1c17dc"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "2f3QtdfJVIuL6gRqLUsEda"
},
{
"__type__": "cc.Node",
"_name": "label",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_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": 342.33,
"height": 75.6
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
-180,
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": "31f1bH7V69Ajr1iXhluMpTB"
},
{
"__type__": "cc.Label",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 10
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_string": "Hello, World!",
"_N$string": "Hello, World!",
"_fontSize": 60,
"_lineHeight": 60,
"_enableWrapText": true,
"_N$file": null,
"_isSystemFontUsed": true,
"_spacingX": 0,
"_batchAsBitmap": false,
"_styleFlags": 0,
"_underlineHeight": 0,
"_N$horizontalAlign": 1,
"_N$verticalAlign": 1,
"_N$fontFamily": "Arial",
"_N$overflow": 0,
"_N$cacheMode": 0,
"_id": "e6mwgoXAFJM6NjGTeeEV+1"
},
{
"__type__": "cc.Node",
"_name": "New Node",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 13
},
{
"__id__": 14
}
],
"_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.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": "a4S44DyaBIeLUV+ngzUy6t"
},
{
"__type__": "cc.MeshRenderer",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 12
},
"_enabled": true,
"_materials": [
{
"__uuid__": "bbdca2e8-da73-4ed3-bf81-eadc72d7ae2f"
}
],
"_mesh": null,
"_receiveShadows": false,
"_shadowCastingMode": 0,
"_enableAutoBatch": false,
"textures": [],
"_id": "3duCcJk8hAdL94t3zd4Yyf"
},
{
"__type__": "e924dAHRipEZ6QoZ2X3muPE",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 12
},
"_enabled": true,
"_id": "93ZgQYPJ9JiJ68ucltm+Bp"
},
{
"__type__": "cc.Node",
"_name": "New Node",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__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": 0,
"height": 0
},
"_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": "b7CaS6FPdANYjHET0JUK2Y"
},
{
"__type__": "cc.MeshRenderer",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 15
},
"_enabled": true,
"_materials": [
{
"__uuid__": "2a296057-247c-4a1c-bbeb-0548b6c98650"
}
],
"_mesh": null,
"_receiveShadows": false,
"_shadowCastingMode": 0,
"_enableAutoBatch": false,
"textures": [],
"_id": "c76Yj8rsxB2KY+fy9vRn+h"
},
{
"__type__": "e924dAHRipEZ6QoZ2X3muPE",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 15
},
"_enabled": true,
"_id": "35mgk3EEBIxblG3eOfeqo+"
},
{
"__type__": "cc.Canvas",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_designResolution": {
"__type__": "cc.Size",
"width": 960,
"height": 640
},
"_fitWidth": false,
"_fitHeight": true,
"_id": "5e/0eJGS5LIJBqJ1e1Doei"
},
{
"__type__": "e1b90/rohdEk4SdmmEZANaD",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"label": {
"__id__": 11
},
"text": "hello",
"_id": "d888QJgE1KNLbAsAFd2xhU"
},
{
"__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": "bewOsMmrBPZrYt3neBOYYy"
},
{
"__type__": "e924dAHRipEZ6QoZ2X3muPE",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_id": "f8yo4YHrRJvLh+vf4TVMm3"
}
]

7
MeshDemo/assets/Scene/helloworld.fire.meta Normal file
View File

@@ -0,0 +1,7 @@
{
"ver": "1.2.9",
"uuid": "2d2f792f-a40c-49bb-a189-ed176a246e49",
"asyncLoadAssets": false,
"autoReleaseAssets": false,
"subMetas": {}
}

12
MeshDemo/assets/Script.meta Normal file
View File

@@ -0,0 +1,12 @@
{
"ver": "1.1.2",
"uuid": "4734c20c-0db8-4eb2-92ea-e692f4d70934",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}

16
MeshDemo/assets/Script/Helloworld.ts Normal file
View File

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

9
MeshDemo/assets/Script/Helloworld.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "1.0.8",
"uuid": "e1b90feb-a217-4493-849d-9a611900d683",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

12
MeshDemo/assets/TestMesh.meta Normal file
View File

@@ -0,0 +1,12 @@
{
"ver": "1.1.2",
"uuid": "e0ea8b3b-e847-4828-8008-d767a2a884a8",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}

BIN
MeshDemo/assets/TestMesh/HelloWorld.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

36
MeshDemo/assets/TestMesh/HelloWorld.png.meta Normal file
View File

@@ -0,0 +1,36 @@
{
"ver": "2.3.5",
"uuid": "6aa0aa6a-ebee-4155-a088-a687a6aadec4",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 195,
"height": 270,
"platformSettings": {},
"subMetas": {
"HelloWorld": {
"ver": "1.0.4",
"uuid": "31bc895a-c003-4566-a9f3-2e54ae1c17dc",
"rawTextureUuid": "6aa0aa6a-ebee-4155-a088-a687a6aadec4",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 195,
"height": 270,
"rawWidth": 195,
"rawHeight": 270,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

63
MeshDemo/assets/TestMesh/MeshTest.ts Normal file
View File

@@ -0,0 +1,63 @@
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const { ccclass, property } = cc._decorator;
// const renderEngine = cc.renderer.renderEngine;
const gfx = cc.gfx;
@ccclass
export default class MeshTest extends cc.Component {
mr_model: cc.MeshRenderer = null;
onLoad() {
console.log('abc=', gfx);
this.mr_model = this.node.getComponent(cc.MeshRenderer);
}
start() {
let vfmtPosColor = new gfx.VertexFormat([
{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 3 },
{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
{ name: gfx.ATTR_COLOR, type: gfx.ATTR_TYPE_UINT8, num: 4, normalize: true },
])
let mesh = new cc.Mesh();
this.mr_model.mesh = mesh;
mesh.init(vfmtPosColor, 4, true);
// 修改 position 顶点数据
mesh.setVertices(gfx.ATTR_POSITION, [
cc.v3(100, 200, 100), cc.v3(100, 100, 100), cc.v3(200, 200, 100), cc.v3(200, 100, 100)
// cc.v3(-100, 100, -100), cc.v3(-100, -100, -100), cc.v3(100, 100, -100), cc.v3(100, -100, -100)
]);
// 修改 color 顶点数据
let color1 = cc.Color.RED;
let color2 = cc.Color.BLUE;
mesh.setVertices(gfx.ATTR_COLOR, [
color1, color1, color1, color1,
// color2, color2, color2, color2,
]);
// 修改 uv 顶点数据
mesh.setVertices(gfx.ATTR_UV0, [
cc.v2(0, 0), cc.v2(0, 1), cc.v2(1, 0), cc.v2(1, 1),
]);
// 修改索引数据
mesh.setIndices([
0, 1, 2, 1, 3, 2 // front
]);
}
// update (dt) {}
}

9
MeshDemo/assets/TestMesh/MeshTest.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "1.0.8",
"uuid": "e924d007-462a-4467-a428-6765f79ae3c4",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

22
MeshDemo/assets/TestMesh/TestAB.mtl Normal file
View File

@@ -0,0 +1,22 @@
{
"__type__": "cc.Material",
"_name": "New Material",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "2874f8dd-416c-4440-81b7-555975426e93"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"defines": {
"USE_TEXTURE": true
},
"props": {
"texture": {
"__uuid__": "6aa0aa6a-ebee-4155-a088-a687a6aadec4"
}
}
}
}
}

6
MeshDemo/assets/TestMesh/TestAB.mtl.meta Normal file
View File

@@ -0,0 +1,6 @@
{
"ver": "1.0.3",
"uuid": "bbdca2e8-da73-4ed3-bf81-eadc72d7ae2f",
"dataAsSubAsset": null,
"subMetas": {}
}

12
MeshDemo/assets/Texture.meta Normal file
View File

@@ -0,0 +1,12 @@
{
"ver": "1.1.2",
"uuid": "7b81d4e8-ec84-4716-968d-500ac1d78a54",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}

BIN
MeshDemo/assets/Texture/singleColor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 B

36
MeshDemo/assets/Texture/singleColor.png.meta Normal file
View File

@@ -0,0 +1,36 @@
{
"ver": "2.3.5",
"uuid": "a8027877-d8d6-4645-97a0-52d4a0123dba",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 2,
"height": 2,
"platformSettings": {},
"subMetas": {
"singleColor": {
"ver": "1.0.4",
"uuid": "410fb916-8721-4663-bab8-34397391ace7",
"rawTextureUuid": "a8027877-d8d6-4645-97a0-52d4a0123dba",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 2,
"height": 2,
"rawWidth": 2,
"rawHeight": 2,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

12
MeshDemo/assets/TrailEffect.meta Normal file
View File

@@ -0,0 +1,12 @@
{
"ver": "1.1.2",
"uuid": "3ab61d17-c8af-4a85-9eaa-87df7657af58",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}

78
MeshDemo/assets/TrailEffect/TrailEffect.effect Normal file
View File

@@ -0,0 +1,78 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
depthStencilState:
depthTest: true
depthWrite: false
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one_minus_src_alpha
blendDstAlpha: one_minus_src_alpha
rasterizerState:
cullMode: none
properties:
texture: { value: white }
startColor: { value: [1, 1, 1, 1], editor : { type: color } }
endColor: { value: [1, 1, 1, 1], editor : { type: color } }
}%
CCProgram vs %{
precision highp float;
#include <cc-global>
#include <cc-local>
in vec3 a_position;
in vec2 a_uv0;
out vec2 v_uv0;
#if USE_TEXTURE
#endif
void main () {
vec4 pos = vec4(a_position, 1);
pos = cc_matViewProj * cc_matWorld * pos;
v_uv0 = a_uv0;
gl_Position = pos;
}
}%
CCProgram fs %{
precision highp float;
in vec2 v_uv0;
#if USE_TEXTURE
uniform sampler2D texture;
#endif
uniform color {
vec4 startColor;
vec4 endColor;
};
void main () {
vec4 o = vec4(1, 1, 1, 1);
#if USE_TEXTURE
o *= texture(texture, v_uv0);
#endif
vec4 fade = endColor - startColor;
fade *= v_uv0.x;
fade += startColor;
o *= fade;
gl_FragColor = o;
}
}%

17
MeshDemo/assets/TrailEffect/TrailEffect.effect.meta Normal file
View File

@@ -0,0 +1,17 @@
{
"ver": "1.0.25",
"uuid": "a1d78203-a464-4efb-8226-67c91adfbb50",
"compiledShaders": [
{
"glsl1": {
"vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#if USE_TEXTURE\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n pos = cc_matViewProj * cc_matWorld * pos;\n v_uv0 = a_uv0;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\nvarying vec2 v_uv0;\n#if USE_TEXTURE\nuniform sampler2D texture;\n#endif\nuniform vec4 startColor;\nuniform vec4 endColor;\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n o *= texture2D(texture, v_uv0);\n #endif\n vec4 fade = endColor - startColor;\n fade *= v_uv0.x;\n fade += startColor;\n o *= fade;\n gl_FragColor = o;\n}"
},
"glsl3": {
"vert": "\nprecision highp float;\nuniform CCGlobal {\n mat4 cc_matView;\n mat4 cc_matViewInv;\n mat4 cc_matProj;\n mat4 cc_matProjInv;\n mat4 cc_matViewProj;\n mat4 cc_matViewProjInv;\n vec4 cc_cameraPos;\n vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\nin vec3 a_position;\nin vec2 a_uv0;\nout vec2 v_uv0;\n#if USE_TEXTURE\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n pos = cc_matViewProj * cc_matWorld * pos;\n v_uv0 = a_uv0;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\nin vec2 v_uv0;\n#if USE_TEXTURE\nuniform sampler2D texture;\n#endif\nuniform color {\n vec4 startColor;\n vec4 endColor;\n};\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n o *= texture(texture, v_uv0);\n #endif\n vec4 fade = endColor - startColor;\n fade *= v_uv0.x;\n fade += startColor;\n o *= fade;\n gl_FragColor = o;\n}"
}
}
],
"subMetas": {}
}

36
MeshDemo/assets/TrailEffect/TrailEffect.mtl Normal file
View File

@@ -0,0 +1,36 @@
{
"__type__": "cc.Material",
"_name": "TrailEffect",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "a1d78203-a464-4efb-8226-67c91adfbb50"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"props": {
"endColor": {
"__type__": "cc.Color",
"r": 204,
"g": 0,
"b": 255,
"a": 57
},
"startColor": {
"__type__": "cc.Color",
"r": 201,
"g": 45,
"b": 45,
"a": 172
},
"texture": {
"__uuid__": "a8027877-d8d6-4645-97a0-52d4a0123dba"
}
},
"defines": {
"USE_TEXTURE": true
}
}
}
}

6
MeshDemo/assets/TrailEffect/TrailEffect.mtl.meta Normal file
View File

@@ -0,0 +1,6 @@
{
"ver": "1.0.3",
"uuid": "c8ad05c7-6568-4d98-bab4-0b24c9db8e6d",
"dataAsSubAsset": null,
"subMetas": {}
}

433
MeshDemo/assets/TrailEffect/TrailEffect.ts Normal file
View File

@@ -0,0 +1,433 @@
const { ccclass, property } = cc._decorator;
//材质球可设置的属性：
const diffuseTexture = "diffuseTexture";
const startColor = "startColor";
const endColor = "endColor";
/**
* 拖尾特效。
*
* 使用方法：
* 先 init 初始化(可以添加方法 onload ，直接调用 init，这里的 init reset 是为了适配我的框架写的)，再 setShape 设置横截面形状;
*
* 其他属性如柔软度、起始颜色、纹理等，可在属性面板中设置，也可以通过代码设置；
*
* 请尽量在设置横截面之前将曲面细分等级设置好，并避免在运行过程中修改细分等级，因为设置细分等级后，需要重新设置网格的顶点数据。
*
* 怎样让它动起来呢:
*
* （一）
* 由update方法自动更新时，将挂载本脚本的节点与要跟随的目标节点放在同一父节点下，拖尾节点坐标（0,0,0），角度（0,0,0）；
* 设置跟随的目标节点，跟随目标节点的位置偏移；
*
* 注：默认的 update 方法已注释掉！要使用它请自行取消注释（在最底部）。
*
* （二）
* 自行使用代码更新时，将挂载本脚本的节点放置在3D场景根节点下，坐标（0,0,0），角度（0,0,0），
* 通过方法 moveTo 设置拖尾头部的世界坐标即可。
*
* 注：
* 需要设置拖尾横截面形状才能看到曲面；
*
*/
@ccclass
export default class TrailEffect extends cc.Component {
@property(cc.MeshRenderer)
protected meshRenderer: cc.MeshRenderer = null;
protected mesh: cc.Mesh = null;
protected mat: cc.Material = null;
protected initMat() {
this.mat = this.meshRenderer.getMaterial(0);
let c = [this.startColor.r / 255, this.startColor.g / 255, this.startColor.b / 255, this.startColor.a / 255];
this.mat.setProperty(startColor, c);
c = [this.endColor.r / 255, this.endColor.g / 255, this.endColor.b / 255, this.endColor.a / 255];
this.mat.setProperty(endColor, c);
if (!!this.diffuseTexture) {
this.mat.setProperty(diffuseTexture, this.diffuseTexture);
}
}
@property({
type: cc.Texture2D
})
protected diffuseTexture: cc.Texture2D = null;
/**设置拖尾纹理 */
public setTexture(t: cc.Texture2D) {
this.diffuseTexture = t;
this.mat.setProperty(diffuseTexture, this.diffuseTexture);
}
@property(cc.Color)
protected startColor: cc.Color = cc.Color.WHITE;
/**设置拖尾头部的颜色及透明度 */
public setStartColor(color: cc.Color) {
if (this.startColor.equals(color)) return;
this.startColor.set(color);
if (!!this.mat) {
let c = [this.startColor.r / 255, this.startColor.g / 255, this.startColor.b / 255, this.startColor.a / 255];
this.mat.setProperty(startColor, c);
}
}
@property(cc.Color)
protected endColor: cc.Color = cc.color(255, 255, 255, 0);
/**设置拖尾尾部的颜色及透明度 */
public setEndColor(color: cc.Color) {
if (this.endColor.equals(color)) return;
this.endColor.set(color);
if (!!this.mat) {
let c = [this.endColor.r / 255, this.endColor.g / 255, this.endColor.b / 255, this.endColor.a / 255];
this.mat.setProperty(endColor, c);
}
}
/**Z轴方向的曲面细分等级 */
@property(cc.Integer)
protected level: number = 5;
/**设置Z轴方向的曲面细分等级 */
public setLevel(level: number) {
if (this.level === level || level <= 0) return;
this.level = level;
if (this.polygon.length > 0) {
cc.warn("提示：修改细分等级后，将重新设置拖尾的顶点数据，请尽量在设置横截面之前设置好细分等级，并避免频繁修改。");
this.createVerts();
this.createMesh();
}
}
@property(cc.Integer)
/**拖尾的柔软度，值越大尾巴越柔软 */
protected soft: number = 5;
/**设置拖尾的柔软度，值越大尾巴越柔软，拉伸的越长，默认值为5 */
public setSoft(soft: number) {
if (this.soft === soft || soft <= 0) return;
this.soft = soft;
}
/**是否跟随目标节点的角度 */
@property(cc.Boolean)
protected followAngle: boolean = false;
/**拖尾头部的坐标 */
protected startPosition: cc.Vec3 = cc.v3();
protected initPosition() {
this.startPosition = cc.v3();
}
/**网格顶点数据 */
protected verts: cc.Vec3[] = [];
/**拖尾横截面的顶点坐标x、y，按逆时针排列 */
@property({
type: [cc.Vec2],
tooltip: "拖尾的横截面多边形的顶点坐标，该横截面为从 cc.v3(0, 0, 1) 位置看向XY平面时的形状，顶点坐标按逆时针排列，建议通过setShape在代码中设置。"
})
protected polygon: cc.Vec2[] = [];
/**横截面是否为闭合的多边形 */
@property({
tooltip: "横截面是否为闭合的多边形"
})
protected polygonClosed: boolean = false;
protected initPolygon() {
this.polygon = [];
}
protected resetPolygon() {
this.polygon = [];
this.polygonClosed = false;
}
/**
* 设置拖尾的横截面多边形的顶点坐标，该横截面为从 cc.v3(0, 0, 1) 位置看向XY平面时的形状，顶点坐标按逆时针排列
* @param polygon 顶点坐标数组
* @param close 是否闭合的多边形
*/
public setShape(polygon: cc.Vec2[], close: boolean = false) {
this.polygon = [].concat(polygon);
this.polygonClosed = !!close;
this.createVerts();
this.createMesh();
}
/**根据截面形状和拖尾位置创建网格顶点 */
protected createVerts() {
//顶点的Z轴偏移为0
this.verts = [];
let nPolygon = this.polygon.length;
if (nPolygon > 2 && this.polygonClosed) {
for (let i = 0; i <= this.level; ++i) {
for (let j = 0; j < nPolygon; ++j) {
this.verts.push(cc.v3(this.polygon[j].x, this.polygon[j].y, 0).addSelf(this.startPosition));
}
this.verts.push(cc.v3(this.polygon[0].x, this.polygon[0].y, 0).addSelf(this.startPosition));
}
} else {
for (let i = 0; i <= this.level; ++i) {
for (let j = 0; j < nPolygon; ++j) {
this.verts.push(cc.v3(this.polygon[j].x, this.polygon[j].y, 0).addSelf(this.startPosition));
}
}
}
}
/**创建网格数据 */
protected createMesh() {
// let gfx = cc.renderer.renderEngine.gfx;
let gfx = cc.gfx;
// 定义顶点数据格式，只需要指明所需的属性，避免造成存储空间的浪费
var vfmtPosColor = new gfx.VertexFormat([
// 用户需要创建一个三维的盒子，所以需要三个值来保存位置信息
{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 3 },
{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
{ name: gfx.ATTR_COLOR, type: gfx.ATTR_TYPE_UINT8, num: 4, normalize: true },
]);
this.mesh = new cc.Mesh();
this.meshRenderer.mesh = this.mesh;
let mesh = this.mesh;
// 初始化网格信息
mesh.init(vfmtPosColor, this.verts.length, true);
// 修改 position 顶点数据
mesh.setVertices(gfx.ATTR_POSITION, this.verts);
// 修改 color 顶点数据
let colors = [];
for (let i = 0, c = this.verts.length; i < c; ++i) {
colors.push(cc.Color.WHITE);
}
mesh.setVertices(gfx.ATTR_COLOR, colors);
// 修改 uv 顶点数据
let uv: cc.Vec2[] = [];
let nPolygon = this.polygon.length;
if (nPolygon > 2 && this.polygonClosed) {
for (let i = 0; i <= this.level; ++i) {
let uv_x = 1 - i / this.level;
for (let j = 0; j <= nPolygon; ++j) {
uv.push(cc.v2(uv_x, j / nPolygon));
}
}
} else {
for (let i = 0; i <= this.level; ++i) {
let uv_x = 1 - i / this.level;
for (let j = 0; j < nPolygon; ++j) {
uv.push(cc.v2(uv_x, j / nPolygon));
}
}
}
mesh.setVertices(gfx.ATTR_UV0, uv);
// 修改索引数据
let frag: number[] = [];
if (nPolygon > 2 && this.polygonClosed) {
let p2 = nPolygon + 1;
let p3 = nPolygon + 2;
for (let i = 0; i < this.level; ++i) {
for (let j = 0; j < nPolygon; ++j) {
let index = i * nPolygon + i + j;
frag.push(index, index + 1, index + p3);
frag.push(index, index + p3, index + p2);
}
}
} else {
let p2 = nPolygon;
let p3 = nPolygon + 1;
let maxJ = nPolygon - 2;
for (let i = 0; i < this.level; ++i) {
for (let j = 0; j <= maxJ; ++j) {
let index = i * nPolygon + j;
frag.push(index, index + 1, index + p3);
frag.push(index, index + p3, index + p2);
}
}
}
mesh.setIndices(frag);
}
protected resetMesh() {
let nPolygon = this.polygon.length;
if (nPolygon > 2 && this.polygonClosed) {
for (let i = 0; i <= this.level; ++i) {
for (let j = 0; j < nPolygon; ++j) {
this.verts[i * nPolygon + i + j].set(cc.v3(this.polygon[j].x, this.polygon[j].y, 0).addSelf(this.startPosition));
}
this.verts[i * nPolygon + i + nPolygon].set(cc.v3(this.polygon[0].x, this.polygon[0].y, 0).addSelf(this.startPosition));
}
} else {
for (let i = 0; i <= this.level; ++i) {
for (let j = 0; j < nPolygon; ++j) {
this.verts[i * nPolygon + j].set(cc.v3(this.polygon[j].x, this.polygon[j].y, 0).addSelf(this.startPosition));
}
}
}
let gfx = cc.gfx;
this.mesh.setVertices(gfx.ATTR_POSITION, this.verts);
}
/**更新网格形状 */
protected updateMesh() {
let rate = this.soft == 0 ? 0.2 : (1 / this.soft);
let nPolygon = this.polygon.length;
if (nPolygon > 2 && this.polygonClosed) {
let offset = nPolygon + 1;
for (let i = 1; i <= this.level; ++i) {
let index = i * offset;
for (let j = 0; j <= nPolygon; ++j) {
let previousVert = this.verts[index - offset + j];
let nextVert = this.verts[index + j];
this.interpolationPos(nextVert, previousVert, rate);
}
}
} else {
let offset = nPolygon;
for (let i = 1; i <= this.level; ++i) {
let index = i * offset;
for (let j = 0; j < nPolygon; ++j) {
let previousVert = this.verts[index - offset + j];
let nextVert = this.verts[index + j];
this.interpolationPos(nextVert, previousVert, rate);
}
}
}
let gfx = cc.gfx;
this.mesh.setVertices(gfx.ATTR_POSITION, this.verts);
}
protected getInterpplation(a: number, b: number, r: number) {
return (b - a) * r;
}
protected interpolationPos(p1: cc.Vec3, p2: cc.Vec3, rate: number) {
p1.x += this.getInterpplation(p1.x, p2.x, rate);
p1.y += this.getInterpplation(p1.y, p2.y, rate);
p1.z += this.getInterpplation(p1.z, p2.z, rate);
}
public init() {
this.initPosition();
this.initPolygon();
this.initMat();
}
public reset() {
this.resetMesh();
this._playing = false;
}
public clear() {
}
protected _playing: boolean = false;
/**是否正在运行 */
public get playing() { return this._playing; }
/**
* 开始运行
* @param startPosition 拖尾头部坐标，将从该位置开始出现拖尾
* @param angle 拖尾初始角度（该功能暂未完成）
*/
public play(startPosition: cc.Vec3, angle?: cc.Vec3) {
if (this.polygon.length == 0) {
cc.warn("拖尾特效未设置横截面形状！");
return;
}
if (!this.target) {
cc.warn("拖尾未设置跟随的目标节点！");
return;
}
this._playing = true;
this.startPosition.set(startPosition);
this.resetMesh();
}
/**停止运行，拖尾将逐渐缩短消失 */
public stop() {
this._playing = false;
}
/**
* 设置拖尾头部的位置，可通过定时调用该方法驱动拖尾运行
* @param pos 头尾头部坐标
* @param angle 拖尾头部的方向，默认为垂直朝向XY平面
*/
public moveTo(pos: cc.Vec3, angle?: cc.Vec3) {
this.startPosition = pos;
let maxIndex = this.polygon.length - 1;
if (undefined === angle) {
for (let i = maxIndex; i >= 0; --i) {
this.verts[i].x = this.startPosition.x + this.polygon[i].x;
this.verts[i].y = this.startPosition.y + this.polygon[i].y;
this.verts[i].z = this.startPosition.z;
}
if (maxIndex >= 2 && this.polygonClosed) {
maxIndex++;
this.verts[maxIndex].x = this.startPosition.x + this.polygon[0].x;
this.verts[maxIndex].y = this.startPosition.y + this.polygon[0].y;
this.verts[maxIndex].z = this.startPosition.z;
}
} else {
for (let i = maxIndex; i >= 0; --i) {
let offset = cc.v3(this.polygon[i].x, this.polygon[i].y, 0);
offset = this.rotatePos(offset, angle);
this.verts[i].x = this.startPosition.x + offset.x;
this.verts[i].y = this.startPosition.y + offset.y;
this.verts[i].z = this.startPosition.z + offset.z;
}
if (maxIndex >= 2 && this.polygonClosed) {
maxIndex++;
let offset = cc.v3(this.polygon[0].x, this.polygon[0].y, 0);
offset = this.rotatePos(offset, angle);
this.verts[maxIndex].x = this.startPosition.x + offset.x;
this.verts[maxIndex].y = this.startPosition.y + offset.y;
this.verts[maxIndex].z = this.startPosition.z + offset.z;
}
}
this.updateMesh();
}
protected rotatePos(p: cc.Vec3, angle: cc.Vec3): cc.Vec3 {
//旋转顺序：Y-X-Z
let p1 = cc.v2(p.x, p.z);
this.rotateV2(p1, angle.y);
let p2 = cc.v2(p.y, p1.y);
this.rotateV2(p2, angle.x);
let p3 = cc.v2(p1.x, p2.x);
this.rotateV2(p3, angle.z);
p.x = p3.x;
p.y = p3.y;
p.z = p2.y;
return p;
}
protected rotateV2(p: cc.Vec2, angle: number) {
let radian = angle * 0.017453;
let sin = Math.sin(radian);
let cos = Math.cos(radian);
let x = p.x;
let y = p.y;
p.x = x * cos - y * sin;
p.y = x * sin + y * cos;
}
/**跟随的目标节点 */
protected target: cc.Node;
protected offset: cc.Vec3;
/**
* 设置拖尾跟随的目标节点
* @param target 目标节点，需要与本节点在同一父节点下，或者其所有父节点的坐标、角度为（0,0,0），缩放为（1,1,1）
* @param offset 拖尾的中心点相对目标节点的坐标的偏移量
*/
public setTarget(target: cc.Node, offset: cc.Vec3) {
this.target = target;
this.offset = offset.clone();
}
//自定义方法，针对实际需求优化：
public customUpdate(dt: number) {
if (!this._playing) {
this.moveTo(this.startPosition);
} else {
this.moveTo(cc.v3(0, this.target.y + 0.5, this.target.z));
}
}
//通用方法：
// public update(dt: number) {
// if (!this.playing || !this.target) return;
// let pos = cc.v3();
// this.target.getPosition(pos);
// pos.addSelf(this.offset);
// if (!this.followAngle) {
// this.moveTo(pos);
// } else {
// this.moveTo(pos, this.target.eulerAngles);
// }
// }
}

9
MeshDemo/assets/TrailEffect/TrailEffect.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "1.0.8",
"uuid": "bfef6526-3884-4025-8adb-56fe6b83ebb5",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}