Commit 52fa5d97 authored by 李维's avatar 李维

test

parent 05145261
No preview for this file type
......@@ -70,24 +70,27 @@
"_children": [
{
"__id__": 3
},
{
"__id__": 15
}
],
"_active": true,
"_components": [
{
"__id__": 5
"__id__": 17
},
{
"__id__": 6
"__id__": 18
},
{
"__id__": 7
"__id__": 19
},
{
"__id__": 8
"__id__": 20
},
{
"__id__": 9
"__id__": 21
}
],
"_prefab": null,
......@@ -140,16 +143,415 @@
},
{
"__type__": "cc.Node",
"_name": "Main Camera",
"_name": "page",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [
{
"__id__": 4
}
],
"_active": true,
"_components": [
{
"__id__": 13
}
],
"_prefab": {
"__id__": 14
},
"_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": "90YxSC1PhL651URWCBw/FB"
},
{
"__type__": "cc.Node",
"_name": "mask",
"_objFlags": 0,
"_parent": {
"__id__": 3
},
"_children": [
{
"__id__": 5
}
],
"_active": true,
"_components": [
{
"__id__": 11
}
],
"_prefab": {
"__id__": 12
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1279,
"height": 913
},
"_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": "1cVu4AKRpEsp+VUZ3pOnm3"
},
{
"__type__": "cc.Node",
"_name": "bezier",
"_objFlags": 0,
"_parent": {
"__id__": 4
},
"_children": [
{
"__id__": 6
}
],
"_active": true,
"_components": [
{
"__id__": 9
}
],
"_prefab": {
"__id__": 10
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1220,
"height": 1143
},
"_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,
0.7
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "8dzqGkGmtGa6cJ+aIpEGdj"
},
{
"__type__": "cc.Node",
"_name": "page",
"_objFlags": 0,
"_parent": {
"__id__": 5
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 7
}
],
"_prefab": {
"__id__": 8
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1279,
"height": 913
},
"_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": "d4+BdrvsVIwpNWrVku05DZ"
},
{
"__type__": "18180MdcINGaoGTigQExK35",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 6
},
"_enabled": true,
"_materials": [
{
"__uuid__": "4f7c0520-945f-4c7c-9b51-9c012fca0299"
}
],
"textureList": [
{
"__uuid__": "85dc13dc-6e48-4d60-9404-99c080397485"
},
{
"__uuid__": "85dc13dc-6e48-4d60-9404-99c080397485"
}
],
"pointsCount": 10,
"_id": "a1f3euL/ZLq6HUtW3dS202"
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 3
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "7fTwAqo0NG6Lqv4FXc7gnu",
"sync": false
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 8,
"_left": 29.5,
"_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": "c9+2hdsKpPQJKDspUbGLCH"
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 3
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "07WXfgQGVKrJWb+EE/WbO7",
"sync": false
},
{
"__type__": "cc.Mask",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 4
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_spriteFrame": null,
"_type": 0,
"_segments": 64,
"_N$alphaThreshold": 0.1,
"_N$inverted": false,
"_id": "83YIL+g7VP6LI7PAdLi2Hb"
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 3
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "61FFlT3+ZNkoeK01icAIXP",
"sync": false
},
{
"__type__": "e1a25oI5NBIopTDDGSnXt3R",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 3
},
"_enabled": true,
"page": {
"__id__": 6
},
"bezierRender": {
"__id__": 7
},
"_id": "06fAOcdGhKFL6MTUN9hzwW"
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 3
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "Main Camera",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 16
}
],
"_prefab": null,
......@@ -205,7 +607,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 3
"__id__": 15
},
"_enabled": true,
"_cullingMask": 4294967295,
......@@ -299,27 +701,6 @@
"__id__": 2
},
"_enabled": true,
"testPanel": null,
"touchPanel": null,
"audTurnPage": {
"__uuid__": "91258ef3-e5b7-47cf-8480-be91ece6c0f9"
},
"pfbItemPage": {
"__uuid__": "85a50052-bdb8-4fa7-8b04-ee33e303f16f"
},
"pfbItemTurnPage": {
"__uuid__": "2449b534-ab4a-43ad-a680-ad4dcc1d3435"
},
"pfbItemTurnPage2": {
"__uuid__": "320caeb2-9a8a-41b4-a87f-62d541b235fd"
},
"tipFirst": null,
"tipLast": null,
"btnLeft": null,
"btnRight": null,
"capture": {
"__id__": 9
},
"_id": "76pKAVQpBDVby2iIHB3LLz"
},
{
......
......@@ -2,68 +2,45 @@ const saveKey = "DataKey_Cocos_FT14";
const BaseUI = require('BaseUI');
import { DefaultData } from '../script/DefaultData';
import { jelly, onHomeworkFinish } from "../script/utils";
import EventMgr from '../script/EventMgr'
function playDragonBoneAnimation(node, animationName, time = 1, onFinish = null, onFrameEvent = null) {
const armatureDisplay = node.getComponent(dragonBones.ArmatureDisplay);
armatureDisplay.timeScale = 1;
armatureDisplay.once(dragonBones.EventObject.COMPLETE, () => {
if (onFinish) {
onFinish();
}
});
armatureDisplay.on(dragonBones.EventObject.FRAME_EVENT, (event) => {
if (onFrameEvent) {
onFrameEvent(event);
}
});
armatureDisplay.playAnimation(animationName, time);
}
const POS = {
LeftPage: { x: -239, y: -5 },
RightPage: { x: 239, y: -5 },
}
cc.Class({
extends: BaseUI,
properties: {
testPanel: cc.Node,
touchPanel: cc.Node,
audTurnPage: cc.AudioClip,
pfbItemPage: cc.Prefab,
pfbItemTurnPage: cc.Prefab,
pfbItemTurnPage2: cc.Prefab,
tipFirst: cc.Node,
tipLast: cc.Node,
btnLeft: cc.Node,
btnRight: cc.Node,
// verletRender: VerletRender,
capture: require('capture_to_web'),
},
// 生命周期 onLoad
onLoad() {
},
initNodes() {
},
onEnable() {
},
onDisable() {
},
initSize() {
},
// 生命周期 start
start() {
const pic = cc.find('Canvas/page/mask/bezier/page');
const picURL = 'http://staging-teach.cdn.ireadabc.com/98c63573-1d3a-4997-bfb8-71bb111ce2ec.png';
this.loadNetImg(picURL).then((texture) => {
pic.getComponent('bezier-render').textureList[0] = texture
pic.getComponent('bezier-render').init();
})
this.loadNetImg(picURL).then((texture) => {
pic.getComponent('bezier-render').textureList[0] = texture
pic.getComponent('bezier-render').init();
})
setTimeout(() => {
EventMgr.emit('page_to_left')
}, 1000);
},
loadNetImg: function (url) {
return new Promise((resolve, reject) => {
cc.loader.load({ url }, (err, texture) => {
if (err && !texture) return resolve(pg.logger.w('loading loadRes warn-> ' + texture));
resolve(texture);
});
})
},
});
......@@ -2,6 +2,7 @@ cc.Class({
extends: cc.Component,
onLoad() {
console.log("Ls");
this.nodeDict = {};
this.linkWidget(this.node);
},
......
......@@ -13,10 +13,11 @@ cc.Class({
},
onLoad() {
this._super();
this.sprImage = this.nodeDict.sprImage.getComponent(cc.Sprite);
this.labText = this.nodeDict.labText.getComponent(cc.RichText);
this.labTextTitle = this.nodeDict.labTextTitle.getComponent(cc.RichText);
console.log("L");
// this._super();
// this.sprImage = this.nodeDict.sprImage.getComponent(cc.Sprite);
// this.labText = this.nodeDict.labText.getComponent(cc.RichText);
// this.labTextTitle = this.nodeDict.labTextTitle.getComponent(cc.RichText);
},
init(data, isCover, pageIndex) {
......
......@@ -18,8 +18,9 @@ cc.Class({
},
onLoad: function () {
cc.view.on('canvas-resize', this.refreshFit, this)
this.refreshFit();
console.log("L收到VS的VS的");
// cc.view.on('canvas-resize', this.refreshFit, this)
// this.refreshFit();
},
onDestroy(){
cc.view.off('canvas-resize', this.refreshFit, this)
......
export default printInfo = () => {
console.log("Test-001");
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "264b9128-c542-4d60-b7d7-0c64e87ecd75",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
[
{
"__type__": "cc.Prefab",
"_name": "",
"_objFlags": 0,
"_native": "",
"data": {
"__id__": 1
},
"optimizationPolicy": 0,
"asyncLoadAssets": false,
"readonly": false
},
{
"__type__": "cc.Node",
"_name": "page",
"_objFlags": 0,
"_parent": null,
"_children": [
{
"__id__": 2
}
],
"_active": true,
"_components": [
{
"__id__": 11
}
],
"_prefab": {
"__id__": 12
},
"_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": ""
},
{
"__type__": "cc.Node",
"_name": "mask",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [
{
"__id__": 3
}
],
"_active": true,
"_components": [
{
"__id__": 9
}
],
"_prefab": {
"__id__": 10
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1279,
"height": 913
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
229.327,
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": ""
},
{
"__type__": "cc.Node",
"_name": "bezier",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [
{
"__id__": 4
}
],
"_active": true,
"_components": [
{
"__id__": 7
}
],
"_prefab": {
"__id__": 8
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1279,
"height": 913
},
"_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,
0.7
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Node",
"_name": "page",
"_objFlags": 0,
"_parent": {
"__id__": 3
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 5
}
],
"_prefab": {
"__id__": 6
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1279,
"height": 913
},
"_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": ""
},
{
"__type__": "18180MdcINGaoGTigQExK35",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 4
},
"_enabled": true,
"_materials": [
{
"__uuid__": "4f7c0520-945f-4c7c-9b51-9c012fca0299"
}
],
"textureList": [
{
"__uuid__": "85dc13dc-6e48-4d60-9404-99c080397485"
},
{
"__uuid__": "85dc13dc-6e48-4d60-9404-99c080397485"
}
],
"pointsCount": 10,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "7fTwAqo0NG6Lqv4FXc7gnu",
"sync": false
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 3
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 8,
"_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": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "07WXfgQGVKrJWb+EE/WbO7",
"sync": false
},
{
"__type__": "cc.Mask",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_spriteFrame": null,
"_type": 0,
"_segments": 64,
"_N$alphaThreshold": 0.1,
"_N$inverted": false,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "61FFlT3+ZNkoeK01icAIXP",
"sync": false
},
{
"__type__": "e1a25oI5NBIopTDDGSnXt3R",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"page": {
"__id__": 4
},
"bezierRender": {
"__id__": 5
},
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "",
"sync": false
}
]
\ No newline at end of file
{
"ver": "1.2.9",
"uuid": "c2e30fb7-ec74-410d-aed5-68da1287d00d",
"optimizationPolicy": "AUTO",
"asyncLoadAssets": false,
"readonly": false,
"subMetas": {}
}
\ No newline at end of file
{
"ver": "1.1.2",
"uuid": "cc7eb9d8-e78b-4b9d-bf2e-cb0d21e79bcf",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
import PageEffectAssemblerBase from "./page-effect-assembler-base";
const gfx = cc.gfx
let vfmtPosUvColorFront = new gfx.VertexFormat([
{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
{ name: gfx.ATTR_COLOR, type: gfx.ATTR_TYPE_UINT8, num: 4, normalize: true },
{ name: "a_isFront", type: gfx.ATTR_TYPE_FLOAT32, num: 1},
]);
export default class BezierAssembler extends PageEffectAssemblerBase {
protected angle:number = 0
public updateRenderData (comp: any) {
if (comp) {
let pointNum: number = comp.getPointCount()
if (pointNum < 2) {
return
}
let node = comp.node
let height = node.height
let width = node.width
// 左下角的坐标
let posX = - width * node.anchorX
let posY = - height * node.anchorY
// 根据角度获得控制点的位置
let ctrlPosData = this._getCtrlPosByAngle(width)
let startPos = ctrlPosData.startPos
let endPos = ctrlPosData.endPos
let ctrlPos1 = ctrlPosData.ctrlPos1
let ctrlPos2 = ctrlPosData.ctrlPos2
// 记录各个顶点的位置
let bezierPosList: cc.Vec2[] = []
bezierPosList[0] = startPos
// 当前所有顶点连线的总长
let realWidth = 0
// 上一个点的纹理坐标
let lastU = 0
// 下一个点的纹理坐标
let nextU = 0
let floatsPerVert = this.floatsPerVert;
let verts = this.renderData.vDatas[0];
// 写verts时的下标
let dstOffset = 0;
for (let i = 1; i < pointNum; i++) {
let isTail = i === pointNum - 1
let lastBezierPos = bezierPosList[i - 1]
let nextBezierPos = this._getBezierPos(i / (pointNum - 1) , startPos, endPos, ctrlPos1, ctrlPos2)
let fixedData = this._fixWidth(lastBezierPos, nextBezierPos, width, realWidth, isTail)
let gapWidth = fixedData.gapWidth
nextBezierPos = fixedData.nextBezierPos
realWidth += gapWidth
bezierPosList[i] = nextBezierPos
// 根据当前小矩形的宽度占总长度的比例来计算纹理坐标的间隔
let gapU = gapWidth / width
nextU = lastU + gapU
/*
分别计算小矩形四个顶点的坐标和纹理坐标
各顶点的坐标计算方法为在左下角坐标的基础上加上顶点在贝塞尔曲线上的坐标,如果是书页顶部的顶点则还要加上书页的高度
*/
// 将4个顶点数据写入verts
dstOffset = floatsPerVert * (i-1) * 4;
verts[dstOffset] = posX + lastBezierPos.x;
verts[dstOffset + 1] = posY + lastBezierPos.y;
verts[dstOffset + 2] = lastU;
verts[dstOffset + 3] = 1;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + nextBezierPos.x;
verts[dstOffset + 1] = posY + nextBezierPos.y;
verts[dstOffset + 2] = nextU;
verts[dstOffset + 3] = 1;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + lastBezierPos.x;
verts[dstOffset + 1] = posY + height + lastBezierPos.y;
verts[dstOffset + 2] = lastU;
verts[dstOffset + 3] = 0;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + nextBezierPos.x;
verts[dstOffset + 1] = posY + height + nextBezierPos.y;
verts[dstOffset + 2] = nextU;
verts[dstOffset + 3] = 0;
lastU = nextU
}
this.updateColor(comp, null);
this.updateIsFront(comp, 5);
}
}
init(comp: cc.RenderComponent) {
super.init(comp);
//@ts-ignore
let segmentCount = comp.getPointCount() - 1;
this.verticesCount = 4 * segmentCount;
this.indicesCount = 6 * segmentCount;
this.floatsPerVert = 6;
this.initData();
}
getVfmt() {
return vfmtPosUvColorFront;
}
private _getCtrlPosByAngle(width: number): {startPos: cc.Vec2, endPos: cc.Vec2, ctrlPos1: cc.Vec2, ctrlPos2: cc.Vec2} {
let startPos = new cc.Vec2(0, 0)
let endPos = null
let ctrlPos1 = null
let ctrlPos2 = null
let rad = this.angle * Math.PI / 180
let per = rad * 2 / Math.PI
if(this.angle <= 90) {
// 终点的x坐标变换 width => 0,速度先慢后快,使用InCubic缓动函数
let endPosX = width * (1 - Math.pow(per, 3))
// InCubic
// 终点的y坐标变换 0 => width / 4, 速度先快后慢,使用OutQuart缓动函数
let endPosY = width / 4 * (1 - Math.pow(1 - per, 4))
endPos = new cc.Vec2(endPosX, endPosY)
// 中间两个控制点坐标匀速变换
// x坐标 width => width * 3 / 4
let ctrlPosX = width * (1 - 1 / 4 * per)
// 控制点1y坐标 0 => width / 16
let ctrlPos1Y = width * 1 / 16 * per
// 控制点2y坐标 0 => width * 3 / 16
let ctrlPos2Y = width * 3 / 16 * per
ctrlPos1 = new cc.Vec2(ctrlPosX, ctrlPos1Y)
ctrlPos2 = new cc.Vec2(ctrlPosX, ctrlPos2Y)
} else {
per = per - 1
// 终点的x坐标变换 0 => width,速度先快后慢,使用OutCubic缓动函数
let endPosX = - width * (1 - Math.pow(1 - per, 3))
// 终点的y坐标变换 width / 4 => 0, 速度先慢后快,使用InQuart缓动函数
let endPosY = width / 4 * (1 - Math.pow(per, 4))
endPos = new cc.Vec2(endPosX, endPosY)
// 控制点1x坐标 width * 3 / 4 => 0
let ctrlPos1X = width * 3 / 4 * (1 - per)
// 控制点2x坐标 width * 3 / 4 => 0
let ctrlPos2X = width * 3 / 4 * Math.pow(1 - per, 3)
// 控制点1y坐标 width / 16 => 0
let ctrlPos1Y = width * 1 / 16 * (1 - per)
// 控制点2y坐标 width * 3 / 16 => 0
let ctrlPos2Y = width * 3 / 16 * (1 - Math.pow(per, 4))
ctrlPos1 = new cc.Vec2(ctrlPos1X, ctrlPos1Y)
ctrlPos2 = new cc.Vec2(ctrlPos2X, ctrlPos2Y)
}
return {
startPos: startPos,
endPos: endPos,
ctrlPos1: ctrlPos1,
ctrlPos2: ctrlPos2
}
}
// 修正宽度
private _fixWidth(lastBezierPos: cc.Vec2, nextBezierPos: cc.Vec2, width: number, realWidth: number, isTail: boolean) {
let deltaVector = nextBezierPos.sub(lastBezierPos)
// 两个顶点的间距
let gapWidth = deltaVector.mag()
// 当前的总长
let curWidth = realWidth + gapWidth
if(isTail) {
// 如果是最后一个顶点则将总长度修正至书页的真实宽度
gapWidth = width - realWidth
let direction = deltaVector.normalize()
nextBezierPos = lastBezierPos.add(direction.mul(gapWidth))
} else if(curWidth >= width) {
// 如果当前总长超过了书页的真实宽度,就衰减超过部分的1.1倍
let delta = curWidth - width
gapWidth = gapWidth - delta * 1.1
gapWidth = Math.max(0, gapWidth)
let direction = deltaVector.normalize()
nextBezierPos = lastBezierPos.add(direction.mul(gapWidth))
}
return {
gapWidth: gapWidth,
nextBezierPos: nextBezierPos,
}
}
// 贝塞尔曲线公式
private _getBezierPos(t: number, startPos: cc.Vec2, endPos: cc.Vec2, ctrlPos1: cc.Vec2, ctrlPos2: cc.Vec2): cc.Vec2 {
startPos = startPos.mul(Math.pow(1 - t, 3))
ctrlPos1 = ctrlPos1.mul(3 * t * Math.pow(1 - t, 2))
ctrlPos2 = ctrlPos2.mul(3 * (1 - t) * Math.pow(t, 2))
endPos = endPos.mul(Math.pow(t, 3))
return startPos.add(ctrlPos1.add(ctrlPos2.add(endPos)))
}
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "b2a10cda-736f-4d38-86d0-c5373aeb1d29",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
import BezierAssembler from "./bezier-assembler";
const { ccclass, property } = cc._decorator;
@ccclass
export default class BezierRender extends cc.RenderComponent {
@property({ type: [cc.Texture2D], displayName: "纹理" })
public textureList: cc.Texture2D[] = []
@property({ displayName: "每条边上的顶点数量" })
public pointsCount: number = 10
protected _initedMaterial: boolean = false
onEnable() {
super.onEnable();
// this.init();
}
public init() {
if (!this._initedMaterial) {
this.updateMaterial()
}
this.setVertsDirty()
}
public _resetAssembler() {
let assembler = this._assembler = new BezierAssembler()
assembler.init(this)
}
protected _updateMaterial() {
let material = this.getMaterial(0)
if (material) {
material.define('CC_USE_MODEL', 1);
if (this.textureList.length === 2) {
material.setProperty('texture0', this.textureList[0]);
material.setProperty('texture1', this.textureList[1]);
}
}
}
protected updateMaterial() {
if (this.textureList.length === 2) {
this._updateMaterial()
this._initedMaterial = true
return
}
}
public getPointCount() {
return this.pointsCount
}
public updateAngle(angle: number) {
if (!this._assembler) {
return
}
this._assembler.angle = angle;
this._assembler.updateRenderData(this);
}
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "1818031d-7083-466a-8193-8a0404c4adf9",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
export default class PageEffectAssemblerBase extends cc.Assembler {
// 普通四边形的属性,根据实际的顶点格式、数量调整
protected verticesCount = 4;
protected indicesCount = 6;
protected floatsPerVert = 5;
protected colorOffset = 4;
protected renderData: cc.RenderData = null;
get verticesFloats() {
return this.verticesCount * this.floatsPerVert;
}
getBuffer() {
//@ts-ignore
return cc.renderer._handle.getBuffer("mesh", this.getVfmt());
}
getVfmt() {
// to be overwrite
return null;
}
updateColor(comp, color) {
let uintVerts = this.renderData.uintVDatas[0];
if (!uintVerts) return;
color = color != null ? color : comp.node.color._val;
let floatsPerVert = this.floatsPerVert;
let colorOffset = this.colorOffset;
for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
uintVerts[i] = color;
}
}
updateIsFront(comp, dataOffset) {
let verts = this.renderData.vDatas[0];
let index = 0;
let floatsPerVert = this.floatsPerVert;
for (let i = 0, n = this.verticesCount; i < n; ++i) {
index = i * floatsPerVert;
let isFirstVert = i % 2 === 0;
let firstVertX = isFirstVert ? verts[index] : verts[index - floatsPerVert];
let secondVertX = isFirstVert ? verts[index + floatsPerVert] : verts[index];
let isFront = firstVertX < secondVertX ? 1.0 : 0.0;
verts[index + dataOffset] = isFront;
}
}
initData() {
//@ts-ignore
this.renderData = new cc.RenderData();
this.renderData.init(this);
let data = this.renderData;
// createFlexData支持创建指定格式的renderData
data.createFlexData(0, this.verticesCount, this.indicesCount, this.getVfmt());
// 顶点数固定的情况下索引不变化
let indices = data.iDatas[0];
let count = indices.length / 6;
for (let i = 0, idx = 0; i < count; i++) {
let vertextID = i * 4;
indices[idx++] = vertextID;
indices[idx++] = vertextID+1;
indices[idx++] = vertextID+2;
indices[idx++] = vertextID+1;
indices[idx++] = vertextID+3;
indices[idx++] = vertextID+2;
}
}
fillBuffers(comp, renderer) {
let renderData = this.renderData;
let vData = renderData.vDatas[0];
let iData = renderData.iDatas[0];
let buffer = this.getBuffer();
let offsetInfo = buffer.request(this.verticesCount, this.indicesCount);
let vertexOffset = offsetInfo.byteOffset >> 2,
vbuf = buffer._vData;
if (vData.length + vertexOffset > vbuf.length) {
vbuf.set(vData.subarray(0, vbuf.length - vertexOffset), vertexOffset);
} else {
vbuf.set(vData, vertexOffset);
}
let ibuf = buffer._iData,
indiceOffset = offsetInfo.indiceOffset,
vertexId = offsetInfo.vertexOffset;
for (let i = 0, l = iData.length; i < l; i++) {
ibuf[indiceOffset++] = vertexId + iData[i];
}
}
}
{
"ver": "1.0.8",
"uuid": "4a289a32-870f-4c4f-9c65-a3821a41e371",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
// import pg from "../../scene/tool/pg";
import EventMgr from '../../script/EventMgr'
import BezierRender from "./bezier-render";
const { ccclass, property } = cc._decorator;
@ccclass
export default class Page extends cc.Component {
@property({ type: cc.Node, displayName: "图片节点" })
public page: cc.Node = null
@property({ type: BezierRender, displayName: "贝塞尔曲线" })
public bezierRender: BezierRender = null
// @property({ type: VerletRender, displayName: "Verlet积分算法" })
// public verletRender: VerletRender = null
onLoad() {
EventMgr.on("page_to_left", (page) => {
this.pageToLeft();
}, null)
EventMgr.on("page_to_right", (page) => {
this.pageToRight();
}, null)
}
pageToLeft() {
let angle = 0;
let inter = setInterval(() => {
angle += 15;
if (angle > 180) {
angle = 180;
clearInterval(inter);
}
this.bezierRender.updateAngle(angle)
}, 30)
}
pageToRight() {
let angle = 180;
let inter = setInterval(() => {
angle -= 15;
if (angle < 0) {
angle = 0;
clearInterval(inter);
}
this.bezierRender.updateAngle(angle)
}, 30)
}
}
{
"ver": "1.0.8",
"uuid": "e1a25a08-e4d0-48a2-94c3-0c64a75eddd1",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
import PageEffectAssemblerBase from "./page-effect-assembler-base";
const gfx = cc.gfx
let vfmtPosUvColorFront = new gfx.VertexFormat([
{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
{ name: gfx.ATTR_COLOR, type: gfx.ATTR_TYPE_UINT8, num: 4, normalize: true },
{ name: "a_isFront", type: gfx.ATTR_TYPE_FLOAT32, num: 1},
]);
export default class VerletAssembler extends PageEffectAssemblerBase {
init(comp: cc.RenderComponent) {
super.init(comp);
//@ts-ignore
let segmentCount = comp.pointsCount - 1;
this.verticesCount = 4 * segmentCount;
this.indicesCount = 6 * segmentCount;
this.floatsPerVert = 6;
this.initData();
}
getVfmt() {
return vfmtPosUvColorFront;
}
public updateRenderData (comp: any) {
if (comp) {
let pointList: cc.Vec2[] = comp.getPointList()
let pointNum: number = pointList.length
if (pointNum < 2) {
return
}
let node = comp.node
let height = node.height
let width = node.width
let posX = - width * node.anchorX
let posY = - height * node.anchorY
let gapU = 1 / (pointNum - 1)
let lastU = 0
let nextU = 0
let floatsPerVert = this.floatsPerVert;
let verts = this.renderData.vDatas[0];
// 写verts时的下标
let dstOffset = 0;
for (let i = 1; i < pointNum; i++) {
let lastPoint = pointList[i - 1]
let nextPoint = pointList[i]
nextU = lastU + gapU
// 顶点和质点一一对应
// 顶点数据写入verts
dstOffset = floatsPerVert * (i-1) * 4;
verts[dstOffset] = posX + lastPoint.x;
verts[dstOffset + 1] = posY + lastPoint.y;
verts[dstOffset + 2] = lastU;
verts[dstOffset + 3] = 1;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + nextPoint.x;
verts[dstOffset + 1] = posY + nextPoint.y;
verts[dstOffset + 2] = nextU;
verts[dstOffset + 3] = 1;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + lastPoint.x;
verts[dstOffset + 1] = posY + height + lastPoint.y;
verts[dstOffset + 2] = lastU;
verts[dstOffset + 3] = 0;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + nextPoint.x;
verts[dstOffset + 1] = posY + height + nextPoint.y;
verts[dstOffset + 2] = nextU;
verts[dstOffset + 3] = 0;
lastU = nextU
}
this.updateColor(comp, null);
this.updateIsFront(comp, 5);
}
}
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "df034f31-6b5c-442b-8ef8-23b4a8099c0f",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
import VerletAssembler from "./verlet-assembler";
const {ccclass, property} = cc._decorator;
class PagePoint {
public oldPos:cc.Vec2
public newPos:cc.Vec2
constructor(x:number, y:number){
this.oldPos = this.newPos = cc.v2(x, y)
}
}
@ccclass
export default class VerletRender extends cc.RenderComponent {
@property({type: [cc.Texture2D], displayName:"纹理"})
public textureList: cc.Texture2D[] = []
@property({displayName:"每条边上的顶点数量"})
public pointsCount:number = 30
@property({displayName:"纠正次数"})
public constraintTimes: number = 100
@property({displayName:"速度衰减系数"})
public damping: number = 0.1
@property({displayName:"重力"})
public gravity: number = 0
protected _initedMaterial:boolean = false
private _pointList: PagePoint[] = []
private _angle: number = 0
onEnable () {
super.onEnable();
this.initPointList();
this.draw();
}
public _resetAssembler() {
let assembler = this._assembler = new VerletAssembler()
assembler.init(this)
}
protected _updateMaterial() {
let material = this.getMaterial(0)
if (material) {
material.define('CC_USE_MODEL', 1);
if (this.textureList.length === 2) {
material.setProperty('texture0', this.textureList[0]);
material.setProperty('texture1', this.textureList[1]);
}
}
}
protected updateMaterial () {
if (this.textureList.length === 2) {
this._updateMaterial()
this._initedMaterial = true
return
}
}
public updateAngle(angle: number) {
this._angle = angle
}
public getPointList() {
let pointList: cc.Vec2[] = []
for(let point of this._pointList) {
pointList.push(new cc.Vec2(point.newPos.x, point.newPos.y))
}
return pointList
}
// 初始化质点
public initPointList() {
for(let i = 0; i < this.pointsCount; ++i) {
let posX = i / (this.pointsCount - 1) * this.node.width
this._pointList.push(new PagePoint(posX, 0))
}
}
public update() {
this.simulate()
this.applyConstraint()
this.draw()
}
// 使用verlet积分更新位置
public simulate() {
let gravity = cc.v2(0, this.gravity)
for (let i = this.pointsCount - 1; i >= 1; i--) {
let point = this._pointList[i]
// 速度等于当前位置与上一个位置的差乘上衰减系数
let velocity: cc.Vec2 = point.newPos.sub(point.oldPos).mul(this.damping)
// 模拟一个水平放置的绳子,当y小于等于0时,将不再受重力影响
if(point.newPos.y <= 0) {
gravity.y = Math.max(0, gravity.y)
}
point.oldPos = point.newPos
point.newPos = point.newPos.add(velocity)
point.newPos = point.newPos.add(gravity)
}
}
private _updateEndPos(endPos: cc.Vec2) {
let tailPoint = this._pointList[this.pointsCount - 1]
tailPoint.newPos = new cc.Vec2(endPos.x, endPos.y)
}
private _getEndPos(): cc.Vec2 {
let endPos = new cc.Vec2(0, 0)
let width = this.node.width
let rad = this._angle * Math.PI / 180
// 与贝塞尔曲线使用相同的运动轨迹
let per = rad * 2 / Math.PI
if(this._angle <= 90) {
let endPosX = width * (1 - Math.pow(per, 3))
let endPosY = width * 1 / 4 * (1 - Math.pow(1 - per, 4))
endPos = new cc.Vec2(endPosX, endPosY)
} else {
per = per - 1
let endPosX = - width * (1 - Math.pow(1 - per, 3))
let endPosY = width * 1 / 4 * (1 - Math.pow(per, 4))
endPos = new cc.Vec2(endPosX, endPosY)
}
return endPos
}
// 约束纠正
public applyConstraint() {
// 两个质点之间的固定距离
let normalDistance = this.node.width / (this.pointsCount - 1)
let endPos = this._getEndPos()
for (let t = 0; t < this.constraintTimes; t++) {
this._updateEndPos(endPos)
//由最后一个质点开始依次纠正
for (let i = this.pointsCount - 1; i >= 1; i--) {
let firstPoint = this._pointList[i - 1]
let secondPoint = this._pointList[i]
let delatPos = secondPoint.newPos.sub(firstPoint.newPos)
let distance = delatPos.mag()
let fixDirection :cc.Vec2 = null
if (distance < normalDistance) {
fixDirection = delatPos.normalize().negate()
} else if (distance > normalDistance) {
fixDirection = delatPos.normalize()
} else {
continue
}
let fixLen = Math.abs(distance - normalDistance)
if (i == 1) {
// 由于第一个质点是固定的,所以只对第二个质点做纠正
let fixVector = fixDirection.mul(fixLen)
secondPoint.newPos.subSelf(fixVector)
} else {
// 将两个质点之间的距离纠正为固定长度
let fixHalfVector = fixDirection.mul(fixLen * 0.5)
firstPoint.newPos.addSelf(fixHalfVector)
secondPoint.newPos.subSelf(fixHalfVector)
}
}
}
}
public draw() {
if (!this._initedMaterial) {
this.updateMaterial()
}
this.setVertsDirty()
}
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "6b3a1362-3858-444e-afeb-4c939a60bc36",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
{
"ver": "1.1.2",
"uuid": "337efb8f-8ac8-4590-8e55-4c933e4b4956",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
This diff is collapsed.
{
"ver": "2.3.5",
"uuid": "4938ac93-cafd-4efb-aeb2-fa4e690475c2",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1279,
"height": 913,
"platformSettings": {},
"subMetas": {
"img": {
"ver": "1.0.4",
"uuid": "44d8b3fd-726e-4a85-be91-ae4915ae9277",
"rawTextureUuid": "4938ac93-cafd-4efb-aeb2-fa4e690475c2",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1279,
"height": 913,
"rawWidth": 1279,
"rawHeight": 913,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "85dc13dc-6e48-4d60-9404-99c080397485",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1279,
"height": 913,
"platformSettings": {},
"subMetas": {
"img_bg": {
"ver": "1.0.4",
"uuid": "a12dacbf-e726-4ff0-9351-18b47eaf797a",
"rawTextureUuid": "85dc13dc-6e48-4d60-9404-99c080397485",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1279,
"height": 913,
"rawWidth": 1279,
"rawHeight": 913,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "1.1.2",
"uuid": "fb582aad-b451-47f3-835e-fdbc8bfd9076",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture0: { value: white }
texture1: { value: white }
alphaThreshold: { value: 0.5 }
}%
CCProgram vs %{
precision highp float;
#include <cc-global>
#include <cc-local>
in vec3 a_position;
in vec4 a_color;
out vec4 v_color;
#if USE_TEXTURE
in vec2 a_uv0;
out vec2 v_uv0;
in float a_isFront;
out float v_isFront;
#endif
void main () {
vec4 pos = vec4(a_position, 1);
#if CC_USE_MODEL
pos = cc_matViewProj * cc_matWorld * pos;
#else
pos = cc_matViewProj * pos;
#endif
#if USE_TEXTURE
v_uv0 = a_uv0;
#endif
v_color = a_color;
v_isFront = a_isFront;
gl_Position = pos;
}
}%
CCProgram fs %{
precision highp float;
#include <alpha-test>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
in float v_isFront;
uniform sampler2D texture0;
uniform sampler2D texture1;
#endif
void main () {
vec4 o = vec4(1, 1, 1, 1);
#if USE_TEXTURE
if(v_isFront == 1.0) {
o *= texture(texture0, v_uv0);
} else {
o *= texture(texture1, v_uv0);
}
#if CC_USE_ALPHA_ATLAS_TEXTURE
o.a *= texture2D(texture, v_uv0).r;
#endif
#endif
o *= v_color;
ALPHA_TEST(o);
gl_FragColor = o;
}
}%
{
"ver": "1.0.25",
"uuid": "5a3cde1c-6418-4d83-8ea7-fb54a0955c41",
"compiledShaders": [
{
"glsl1": {
"vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\nattribute float a_isFront;\nvarying float v_isFront;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n v_isFront = a_isFront;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform float alphaThreshold;\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nvarying float v_isFront;\nuniform sampler2D texture0;\nuniform sampler2D texture1;\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n if(v_isFront == 1.0) {\n o *= texture2D(texture0, v_uv0);\n } else {\n o *= texture2D(texture1, v_uv0);\n }\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0).r;\n #endif\n #endif\n o *= v_color;\n ALPHA_TEST(o);\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 vec4 a_color;\nout vec4 v_color;\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\nin float a_isFront;\nout float v_isFront;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n v_isFront = a_isFront;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform ALPHA_TEST {\n float alphaThreshold;\n };\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nin float v_isFront;\nuniform sampler2D texture0;\nuniform sampler2D texture1;\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n if(v_isFront == 1.0) {\n o *= texture(texture0, v_uv0);\n } else {\n o *= texture(texture1, v_uv0);\n }\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0).r;\n #endif\n #endif\n o *= v_color;\n ALPHA_TEST(o);\n gl_FragColor = o;\n}"
}
}
],
"subMetas": {}
}
\ No newline at end of file
{
"__type__": "cc.Material",
"_name": "page-material",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "71f0ba7f-9abb-4754-9100-100e47c782bc"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"defines": {
"USE_TEXTURE": true
}
}
}
}
\ No newline at end of file
{
"ver": "1.0.3",
"uuid": "8165857a-a626-46ee-aa82-8b95284062a1",
"dataAsSubAsset": null,
"subMetas": {}
}
\ No newline at end of file
[
{
"__type__": "cc.Prefab",
"_name": "",
"_objFlags": 0,
"_native": "",
"data": {
"__id__": 1
},
"optimizationPolicy": 0,
"asyncLoadAssets": false,
"readonly": false
},
{
"__type__": "cc.Node",
"_name": "page",
"_objFlags": 0,
"_parent": null,
"_children": [
{
"__id__": 2
}
],
"_active": true,
"_components": [
{
"__id__": 11
}
],
"_prefab": {
"__id__": 12
},
"_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": ""
},
{
"__type__": "cc.Node",
"_name": "mask",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [
{
"__id__": 3
}
],
"_active": true,
"_components": [
{
"__id__": 9
}
],
"_prefab": {
"__id__": 10
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1279,
"height": 913
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
229.327,
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": ""
},
{
"__type__": "cc.Node",
"_name": "bezier",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [
{
"__id__": 4
}
],
"_active": true,
"_components": [
{
"__id__": 7
}
],
"_prefab": {
"__id__": 8
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1279,
"height": 913
},
"_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,
0.7
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Node",
"_name": "page",
"_objFlags": 0,
"_parent": {
"__id__": 3
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 5
}
],
"_prefab": {
"__id__": 6
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1279,
"height": 913
},
"_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": ""
},
{
"__type__": "18180MdcINGaoGTigQExK35",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 4
},
"_enabled": true,
"_materials": [
{
"__uuid__": "4f7c0520-945f-4c7c-9b51-9c012fca0299"
}
],
"textureList": [
{
"__uuid__": "85dc13dc-6e48-4d60-9404-99c080397485"
},
{
"__uuid__": "85dc13dc-6e48-4d60-9404-99c080397485"
}
],
"pointsCount": 10,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "7fTwAqo0NG6Lqv4FXc7gnu",
"sync": false
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 3
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 8,
"_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": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "07WXfgQGVKrJWb+EE/WbO7",
"sync": false
},
{
"__type__": "cc.Mask",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_spriteFrame": null,
"_type": 0,
"_segments": 64,
"_N$alphaThreshold": 0.1,
"_N$inverted": false,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "61FFlT3+ZNkoeK01icAIXP",
"sync": false
},
{
"__type__": "e1a25oI5NBIopTDDGSnXt3R",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"page": {
"__id__": 4
},
"bezierRender": {
"__id__": 5
},
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "c2e30fb7-ec74-410d-aed5-68da1287d00d"
},
"fileId": "",
"sync": false
}
]
\ No newline at end of file
{
"ver": "1.2.9",
"uuid": "cb229abb-509f-4afa-9b86-ca2d957b6929",
"optimizationPolicy": "AUTO",
"asyncLoadAssets": false,
"readonly": false,
"subMetas": {}
}
\ No newline at end of file
{
"ver": "1.1.2",
"uuid": "c4dfd6d1-7774-42c4-9bac-fdedc38f36d6",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
import PageEffectAssemblerBase from "./page-effect-assembler-base";
const gfx = cc.gfx
let vfmtPosUvColorFront = new gfx.VertexFormat([
{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
{ name: gfx.ATTR_COLOR, type: gfx.ATTR_TYPE_UINT8, num: 4, normalize: true },
{ name: "a_isFront", type: gfx.ATTR_TYPE_FLOAT32, num: 1},
]);
export default class BezierAssembler extends PageEffectAssemblerBase {
protected angle:number = 0
public updateRenderData (comp: any) {
if (comp) {
let pointNum: number = comp.getPointCount()
if (pointNum < 2) {
return
}
let node = comp.node
let height = node.height
let width = node.width
// 左下角的坐标
let posX = - width * node.anchorX
let posY = - height * node.anchorY
// 根据角度获得控制点的位置
let ctrlPosData = this._getCtrlPosByAngle(width)
let startPos = ctrlPosData.startPos
let endPos = ctrlPosData.endPos
let ctrlPos1 = ctrlPosData.ctrlPos1
let ctrlPos2 = ctrlPosData.ctrlPos2
// 记录各个顶点的位置
let bezierPosList: cc.Vec2[] = []
bezierPosList[0] = startPos
// 当前所有顶点连线的总长
let realWidth = 0
// 上一个点的纹理坐标
let lastU = 0
// 下一个点的纹理坐标
let nextU = 0
let floatsPerVert = this.floatsPerVert;
let verts = this.renderData.vDatas[0];
// 写verts时的下标
let dstOffset = 0;
for (let i = 1; i < pointNum; i++) {
let isTail = i === pointNum - 1
let lastBezierPos = bezierPosList[i - 1]
let nextBezierPos = this._getBezierPos(i / (pointNum - 1) , startPos, endPos, ctrlPos1, ctrlPos2)
let fixedData = this._fixWidth(lastBezierPos, nextBezierPos, width, realWidth, isTail)
let gapWidth = fixedData.gapWidth
nextBezierPos = fixedData.nextBezierPos
realWidth += gapWidth
bezierPosList[i] = nextBezierPos
// 根据当前小矩形的宽度占总长度的比例来计算纹理坐标的间隔
let gapU = gapWidth / width
nextU = lastU + gapU
/*
分别计算小矩形四个顶点的坐标和纹理坐标
各顶点的坐标计算方法为在左下角坐标的基础上加上顶点在贝塞尔曲线上的坐标,如果是书页顶部的顶点则还要加上书页的高度
*/
// 将4个顶点数据写入verts
dstOffset = floatsPerVert * (i-1) * 4;
verts[dstOffset] = posX + lastBezierPos.x;
verts[dstOffset + 1] = posY + lastBezierPos.y;
verts[dstOffset + 2] = lastU;
verts[dstOffset + 3] = 1;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + nextBezierPos.x;
verts[dstOffset + 1] = posY + nextBezierPos.y;
verts[dstOffset + 2] = nextU;
verts[dstOffset + 3] = 1;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + lastBezierPos.x;
verts[dstOffset + 1] = posY + height + lastBezierPos.y;
verts[dstOffset + 2] = lastU;
verts[dstOffset + 3] = 0;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + nextBezierPos.x;
verts[dstOffset + 1] = posY + height + nextBezierPos.y;
verts[dstOffset + 2] = nextU;
verts[dstOffset + 3] = 0;
lastU = nextU
}
this.updateColor(comp, null);
this.updateIsFront(comp, 5);
}
}
init(comp: cc.RenderComponent) {
super.init(comp);
//@ts-ignore
let segmentCount = comp.getPointCount() - 1;
this.verticesCount = 4 * segmentCount;
this.indicesCount = 6 * segmentCount;
this.floatsPerVert = 6;
this.initData();
}
getVfmt() {
return vfmtPosUvColorFront;
}
private _getCtrlPosByAngle(width: number): {startPos: cc.Vec2, endPos: cc.Vec2, ctrlPos1: cc.Vec2, ctrlPos2: cc.Vec2} {
let startPos = new cc.Vec2(0, 0)
let endPos = null
let ctrlPos1 = null
let ctrlPos2 = null
let rad = this.angle * Math.PI / 180
let per = rad * 2 / Math.PI
if(this.angle <= 90) {
// 终点的x坐标变换 width => 0,速度先慢后快,使用InCubic缓动函数
let endPosX = width * (1 - Math.pow(per, 3))
// InCubic
// 终点的y坐标变换 0 => width / 4, 速度先快后慢,使用OutQuart缓动函数
let endPosY = width / 4 * (1 - Math.pow(1 - per, 4))
endPos = new cc.Vec2(endPosX, endPosY)
// 中间两个控制点坐标匀速变换
// x坐标 width => width * 3 / 4
let ctrlPosX = width * (1 - 1 / 4 * per)
// 控制点1y坐标 0 => width / 16
let ctrlPos1Y = width * 1 / 16 * per
// 控制点2y坐标 0 => width * 3 / 16
let ctrlPos2Y = width * 3 / 16 * per
ctrlPos1 = new cc.Vec2(ctrlPosX, ctrlPos1Y)
ctrlPos2 = new cc.Vec2(ctrlPosX, ctrlPos2Y)
} else {
per = per - 1
// 终点的x坐标变换 0 => width,速度先快后慢,使用OutCubic缓动函数
let endPosX = - width * (1 - Math.pow(1 - per, 3))
// 终点的y坐标变换 width / 4 => 0, 速度先慢后快,使用InQuart缓动函数
let endPosY = width / 4 * (1 - Math.pow(per, 4))
endPos = new cc.Vec2(endPosX, endPosY)
// 控制点1x坐标 width * 3 / 4 => 0
let ctrlPos1X = width * 3 / 4 * (1 - per)
// 控制点2x坐标 width * 3 / 4 => 0
let ctrlPos2X = width * 3 / 4 * Math.pow(1 - per, 3)
// 控制点1y坐标 width / 16 => 0
let ctrlPos1Y = width * 1 / 16 * (1 - per)
// 控制点2y坐标 width * 3 / 16 => 0
let ctrlPos2Y = width * 3 / 16 * (1 - Math.pow(per, 4))
ctrlPos1 = new cc.Vec2(ctrlPos1X, ctrlPos1Y)
ctrlPos2 = new cc.Vec2(ctrlPos2X, ctrlPos2Y)
}
return {
startPos: startPos,
endPos: endPos,
ctrlPos1: ctrlPos1,
ctrlPos2: ctrlPos2
}
}
// 修正宽度
private _fixWidth(lastBezierPos: cc.Vec2, nextBezierPos: cc.Vec2, width: number, realWidth: number, isTail: boolean) {
let deltaVector = nextBezierPos.sub(lastBezierPos)
// 两个顶点的间距
let gapWidth = deltaVector.mag()
// 当前的总长
let curWidth = realWidth + gapWidth
if(isTail) {
// 如果是最后一个顶点则将总长度修正至书页的真实宽度
gapWidth = width - realWidth
let direction = deltaVector.normalize()
nextBezierPos = lastBezierPos.add(direction.mul(gapWidth))
} else if(curWidth >= width) {
// 如果当前总长超过了书页的真实宽度,就衰减超过部分的1.1倍
let delta = curWidth - width
gapWidth = gapWidth - delta * 1.1
gapWidth = Math.max(0, gapWidth)
let direction = deltaVector.normalize()
nextBezierPos = lastBezierPos.add(direction.mul(gapWidth))
}
return {
gapWidth: gapWidth,
nextBezierPos: nextBezierPos,
}
}
// 贝塞尔曲线公式
private _getBezierPos(t: number, startPos: cc.Vec2, endPos: cc.Vec2, ctrlPos1: cc.Vec2, ctrlPos2: cc.Vec2): cc.Vec2 {
startPos = startPos.mul(Math.pow(1 - t, 3))
ctrlPos1 = ctrlPos1.mul(3 * t * Math.pow(1 - t, 2))
ctrlPos2 = ctrlPos2.mul(3 * (1 - t) * Math.pow(t, 2))
endPos = endPos.mul(Math.pow(t, 3))
return startPos.add(ctrlPos1.add(ctrlPos2.add(endPos)))
}
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "860a2aa3-3714-48cc-9ce9-a756a77cdf84",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
import BezierAssembler from "./bezier-assembler";
const { ccclass, property } = cc._decorator;
@ccclass
export default class BezierRender extends cc.RenderComponent {
@property({ type: [cc.Texture2D], displayName: "纹理" })
public textureList: cc.Texture2D[] = []
@property({ displayName: "每条边上的顶点数量" })
public pointsCount: number = 10
protected _initedMaterial: boolean = false
onEnable() {
super.onEnable();
// this.init();
}
public init() {
if (!this._initedMaterial) {
this.updateMaterial()
}
this.setVertsDirty()
}
public _resetAssembler() {
let assembler = this._assembler = new BezierAssembler()
assembler.init(this)
}
protected _updateMaterial() {
let material = this.getMaterial(0)
if (material) {
material.define('CC_USE_MODEL', 1);
if (this.textureList.length === 2) {
material.setProperty('texture0', this.textureList[0]);
material.setProperty('texture1', this.textureList[1]);
}
}
}
protected updateMaterial() {
if (this.textureList.length === 2) {
this._updateMaterial()
this._initedMaterial = true
return
}
}
public getPointCount() {
return this.pointsCount
}
public updateAngle(angle: number) {
if (!this._assembler) {
return
}
this._assembler.angle = angle;
this._assembler.updateRenderData(this);
}
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "8909b0e0-8fa1-481b-a037-f12a34f1c0e5",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
export default class PageEffectAssemblerBase extends cc.Assembler {
// 普通四边形的属性,根据实际的顶点格式、数量调整
protected verticesCount = 4;
protected indicesCount = 6;
protected floatsPerVert = 5;
protected colorOffset = 4;
protected renderData: cc.RenderData = null;
get verticesFloats() {
return this.verticesCount * this.floatsPerVert;
}
getBuffer() {
//@ts-ignore
return cc.renderer._handle.getBuffer("mesh", this.getVfmt());
}
getVfmt() {
// to be overwrite
return null;
}
updateColor(comp, color) {
let uintVerts = this.renderData.uintVDatas[0];
if (!uintVerts) return;
color = color != null ? color : comp.node.color._val;
let floatsPerVert = this.floatsPerVert;
let colorOffset = this.colorOffset;
for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
uintVerts[i] = color;
}
}
updateIsFront(comp, dataOffset) {
let verts = this.renderData.vDatas[0];
let index = 0;
let floatsPerVert = this.floatsPerVert;
for (let i = 0, n = this.verticesCount; i < n; ++i) {
index = i * floatsPerVert;
let isFirstVert = i % 2 === 0;
let firstVertX = isFirstVert ? verts[index] : verts[index - floatsPerVert];
let secondVertX = isFirstVert ? verts[index + floatsPerVert] : verts[index];
let isFront = firstVertX < secondVertX ? 1.0 : 0.0;
verts[index + dataOffset] = isFront;
}
}
initData() {
//@ts-ignore
this.renderData = new cc.RenderData();
this.renderData.init(this);
let data = this.renderData;
// createFlexData支持创建指定格式的renderData
data.createFlexData(0, this.verticesCount, this.indicesCount, this.getVfmt());
// 顶点数固定的情况下索引不变化
let indices = data.iDatas[0];
let count = indices.length / 6;
for (let i = 0, idx = 0; i < count; i++) {
let vertextID = i * 4;
indices[idx++] = vertextID;
indices[idx++] = vertextID+1;
indices[idx++] = vertextID+2;
indices[idx++] = vertextID+1;
indices[idx++] = vertextID+3;
indices[idx++] = vertextID+2;
}
}
fillBuffers(comp, renderer) {
let renderData = this.renderData;
let vData = renderData.vDatas[0];
let iData = renderData.iDatas[0];
let buffer = this.getBuffer();
let offsetInfo = buffer.request(this.verticesCount, this.indicesCount);
let vertexOffset = offsetInfo.byteOffset >> 2,
vbuf = buffer._vData;
if (vData.length + vertexOffset > vbuf.length) {
vbuf.set(vData.subarray(0, vbuf.length - vertexOffset), vertexOffset);
} else {
vbuf.set(vData, vertexOffset);
}
let ibuf = buffer._iData,
indiceOffset = offsetInfo.indiceOffset,
vertexId = offsetInfo.vertexOffset;
for (let i = 0, l = iData.length; i < l; i++) {
ibuf[indiceOffset++] = vertexId + iData[i];
}
}
}
{
"ver": "1.0.8",
"uuid": "0b76bbe1-724e-4677-a449-7495246b0691",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
// import pg from "../../scene/tool/pg";
import EventMgr from '../../script/EventMgr'
import BezierRender from "./bezier-render";
const { ccclass, property } = cc._decorator;
@ccclass
export default class Page extends cc.Component {
@property({ type: cc.Node, displayName: "图片节点" })
public page: cc.Node = null
@property({ type: BezierRender, displayName: "贝塞尔曲线" })
public bezierRender: BezierRender = null
// @property({ type: VerletRender, displayName: "Verlet积分算法" })
// public verletRender: VerletRender = null
onLoad() {
EventMgr.on("page_to_left", (page) => {
this.pageToLeft();
}, null)
EventMgr.on("page_to_right", (page) => {
this.pageToRight();
}, null)
}
pageToLeft() {
let angle = 0;
let inter = setInterval(() => {
angle += 15;
if (angle > 180) {
angle = 180;
clearInterval(inter);
}
this.bezierRender.updateAngle(angle)
}, 30)
}
pageToRight() {
let angle = 180;
let inter = setInterval(() => {
angle -= 15;
if (angle < 0) {
angle = 0;
clearInterval(inter);
}
this.bezierRender.updateAngle(angle)
}, 30)
}
}
{
"ver": "1.0.8",
"uuid": "fd04beb1-7837-47a5-ab77-8e2485f652b4",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
import PageEffectAssemblerBase from "./page-effect-assembler-base";
const gfx = cc.gfx
let vfmtPosUvColorFront = new gfx.VertexFormat([
{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
{ name: gfx.ATTR_COLOR, type: gfx.ATTR_TYPE_UINT8, num: 4, normalize: true },
{ name: "a_isFront", type: gfx.ATTR_TYPE_FLOAT32, num: 1},
]);
export default class VerletAssembler extends PageEffectAssemblerBase {
init(comp: cc.RenderComponent) {
super.init(comp);
//@ts-ignore
let segmentCount = comp.pointsCount - 1;
this.verticesCount = 4 * segmentCount;
this.indicesCount = 6 * segmentCount;
this.floatsPerVert = 6;
this.initData();
}
getVfmt() {
return vfmtPosUvColorFront;
}
public updateRenderData (comp: any) {
if (comp) {
let pointList: cc.Vec2[] = comp.getPointList()
let pointNum: number = pointList.length
if (pointNum < 2) {
return
}
let node = comp.node
let height = node.height
let width = node.width
let posX = - width * node.anchorX
let posY = - height * node.anchorY
let gapU = 1 / (pointNum - 1)
let lastU = 0
let nextU = 0
let floatsPerVert = this.floatsPerVert;
let verts = this.renderData.vDatas[0];
// 写verts时的下标
let dstOffset = 0;
for (let i = 1; i < pointNum; i++) {
let lastPoint = pointList[i - 1]
let nextPoint = pointList[i]
nextU = lastU + gapU
// 顶点和质点一一对应
// 顶点数据写入verts
dstOffset = floatsPerVert * (i-1) * 4;
verts[dstOffset] = posX + lastPoint.x;
verts[dstOffset + 1] = posY + lastPoint.y;
verts[dstOffset + 2] = lastU;
verts[dstOffset + 3] = 1;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + nextPoint.x;
verts[dstOffset + 1] = posY + nextPoint.y;
verts[dstOffset + 2] = nextU;
verts[dstOffset + 3] = 1;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + lastPoint.x;
verts[dstOffset + 1] = posY + height + lastPoint.y;
verts[dstOffset + 2] = lastU;
verts[dstOffset + 3] = 0;
dstOffset += floatsPerVert;
verts[dstOffset] = posX + nextPoint.x;
verts[dstOffset + 1] = posY + height + nextPoint.y;
verts[dstOffset + 2] = nextU;
verts[dstOffset + 3] = 0;
lastU = nextU
}
this.updateColor(comp, null);
this.updateIsFront(comp, 5);
}
}
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "85723446-daae-416f-81e3-ff8d56cc3831",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
import VerletAssembler from "./verlet-assembler";
const {ccclass, property} = cc._decorator;
class PagePoint {
public oldPos:cc.Vec2
public newPos:cc.Vec2
constructor(x:number, y:number){
this.oldPos = this.newPos = cc.v2(x, y)
}
}
@ccclass
export default class VerletRender extends cc.RenderComponent {
@property({type: [cc.Texture2D], displayName:"纹理"})
public textureList: cc.Texture2D[] = []
@property({displayName:"每条边上的顶点数量"})
public pointsCount:number = 30
@property({displayName:"纠正次数"})
public constraintTimes: number = 100
@property({displayName:"速度衰减系数"})
public damping: number = 0.1
@property({displayName:"重力"})
public gravity: number = 0
protected _initedMaterial:boolean = false
private _pointList: PagePoint[] = []
private _angle: number = 0
onEnable () {
super.onEnable();
this.initPointList();
this.draw();
}
public _resetAssembler() {
let assembler = this._assembler = new VerletAssembler()
assembler.init(this)
}
protected _updateMaterial() {
let material = this.getMaterial(0)
if (material) {
material.define('CC_USE_MODEL', 1);
if (this.textureList.length === 2) {
material.setProperty('texture0', this.textureList[0]);
material.setProperty('texture1', this.textureList[1]);
}
}
}
protected updateMaterial () {
if (this.textureList.length === 2) {
this._updateMaterial()
this._initedMaterial = true
return
}
}
public updateAngle(angle: number) {
this._angle = angle
}
public getPointList() {
let pointList: cc.Vec2[] = []
for(let point of this._pointList) {
pointList.push(new cc.Vec2(point.newPos.x, point.newPos.y))
}
return pointList
}
// 初始化质点
public initPointList() {
for(let i = 0; i < this.pointsCount; ++i) {
let posX = i / (this.pointsCount - 1) * this.node.width
this._pointList.push(new PagePoint(posX, 0))
}
}
public update() {
this.simulate()
this.applyConstraint()
this.draw()
}
// 使用verlet积分更新位置
public simulate() {
let gravity = cc.v2(0, this.gravity)
for (let i = this.pointsCount - 1; i >= 1; i--) {
let point = this._pointList[i]
// 速度等于当前位置与上一个位置的差乘上衰减系数
let velocity: cc.Vec2 = point.newPos.sub(point.oldPos).mul(this.damping)
// 模拟一个水平放置的绳子,当y小于等于0时,将不再受重力影响
if(point.newPos.y <= 0) {
gravity.y = Math.max(0, gravity.y)
}
point.oldPos = point.newPos
point.newPos = point.newPos.add(velocity)
point.newPos = point.newPos.add(gravity)
}
}
private _updateEndPos(endPos: cc.Vec2) {
let tailPoint = this._pointList[this.pointsCount - 1]
tailPoint.newPos = new cc.Vec2(endPos.x, endPos.y)
}
private _getEndPos(): cc.Vec2 {
let endPos = new cc.Vec2(0, 0)
let width = this.node.width
let rad = this._angle * Math.PI / 180
// 与贝塞尔曲线使用相同的运动轨迹
let per = rad * 2 / Math.PI
if(this._angle <= 90) {
let endPosX = width * (1 - Math.pow(per, 3))
let endPosY = width * 1 / 4 * (1 - Math.pow(1 - per, 4))
endPos = new cc.Vec2(endPosX, endPosY)
} else {
per = per - 1
let endPosX = - width * (1 - Math.pow(1 - per, 3))
let endPosY = width * 1 / 4 * (1 - Math.pow(per, 4))
endPos = new cc.Vec2(endPosX, endPosY)
}
return endPos
}
// 约束纠正
public applyConstraint() {
// 两个质点之间的固定距离
let normalDistance = this.node.width / (this.pointsCount - 1)
let endPos = this._getEndPos()
for (let t = 0; t < this.constraintTimes; t++) {
this._updateEndPos(endPos)
//由最后一个质点开始依次纠正
for (let i = this.pointsCount - 1; i >= 1; i--) {
let firstPoint = this._pointList[i - 1]
let secondPoint = this._pointList[i]
let delatPos = secondPoint.newPos.sub(firstPoint.newPos)
let distance = delatPos.mag()
let fixDirection :cc.Vec2 = null
if (distance < normalDistance) {
fixDirection = delatPos.normalize().negate()
} else if (distance > normalDistance) {
fixDirection = delatPos.normalize()
} else {
continue
}
let fixLen = Math.abs(distance - normalDistance)
if (i == 1) {
// 由于第一个质点是固定的,所以只对第二个质点做纠正
let fixVector = fixDirection.mul(fixLen)
secondPoint.newPos.subSelf(fixVector)
} else {
// 将两个质点之间的距离纠正为固定长度
let fixHalfVector = fixDirection.mul(fixLen * 0.5)
firstPoint.newPos.addSelf(fixHalfVector)
secondPoint.newPos.subSelf(fixHalfVector)
}
}
}
}
public draw() {
if (!this._initedMaterial) {
this.updateMaterial()
}
this.setVertsDirty()
}
}
\ No newline at end of file
{
"ver": "1.0.8",
"uuid": "8ae01e9d-c809-4ed3-a488-ea60efa93f6c",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
{
"ver": "1.1.2",
"uuid": "64998c59-9750-411c-8518-8556ec5fdaf9",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
This diff is collapsed.
{
"ver": "2.3.5",
"uuid": "69f95332-a14f-4252-a2ac-4fe7aa7e1c37",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1279,
"height": 913,
"platformSettings": {},
"subMetas": {
"img": {
"ver": "1.0.4",
"uuid": "37a3056d-e0f8-4efd-8e00-bd9b977ab61a",
"rawTextureUuid": "69f95332-a14f-4252-a2ac-4fe7aa7e1c37",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1279,
"height": 913,
"rawWidth": 1279,
"rawHeight": 913,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "e4aae720-d9c0-4e48-b59a-c62ec33fa2a5",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1279,
"height": 913,
"platformSettings": {},
"subMetas": {
"img_bg": {
"ver": "1.0.4",
"uuid": "71d5f4c5-468d-4346-a4a9-ee993b27acb2",
"rawTextureUuid": "e4aae720-d9c0-4e48-b59a-c62ec33fa2a5",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1279,
"height": 913,
"rawWidth": 1279,
"rawHeight": 913,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment