CocosCreator物理引擎Demo源码分析(1)-infinite-world

女爷i 2022-05-28 12:50 331阅读 0赞

infinite-world示例展示了小球顺着山坡凹凸做左右滚动的效果。

## 技术点 ##

1、山坡由数量不等动态生成的的竖条状方块组成。  
2、每个方块动态添加RigidBody组件和PolygonCollider组件，使小球和山坡产生物理碰撞效果。  
3、摄像机根据山坡的凹凸高度做动态缩放。  
4、通过键盘或触摸来控制小球的左右滚动。

## 源码分析 ##

### camera-control.js ###

该源文件功能是根据小球在屏幕上的位置高度来控制摄像机的缩放。

cc.Class({
        extends: cc.Component,
    
        properties: {
            target: {
                default: null,
                type: cc.Node
            }
        },
    
        // LIFE-CYCLE CALLBACKS:
    
        onLoad () {
            this.camera = this.getComponent(cc.Camera);
        },
    
        onEnable: function() { 
            // 将物理系统的调试绘制信息附加到指定摄像机上。
            // 使用摄像机时，如果使用到了物理系统或碰撞系统等内置渲染节点的系统，
            // 那么需要将它们的渲染节点也添加摄像机上。
            cc.director.getPhysicsManager().attachDebugDrawToCamera(this.camera);
        },
    
        onDisable: function() { 
            // 将物理系统的调试绘制信息从指定摄像机上移除
            cc.director.getPhysicsManager().attachDebugDrawFromCamera(this.camera);
        },
    
        lateUpdate: function(dt) { 
            // 此例中，this.target指小球，即将小球中心点转换为世界空间坐标系
            let targetPos = this.target.convertToWorldSpaceAR(cc.Vec2.ZERO);
            // 再转换为游戏Scene的(局部)空间坐标系，并调整摄像机到相应位置
            this.node.position = this.node.parent.convertToNodeSpaceAR(targetPos);
            // ratio的值区间将为 0 < ratio < 1
            let ratio = targetPos.y / cc.winSize.height;
            // 如小球位于屏幕中部，则摄像机缩放比例不变(即保持1)，如屏幕上半部则缩小，如屏幕下半部则放大。
            // 极端情况下，如小球位于屏幕顶部，则缩小25%，如果小球位于屏幕底部，则放大25%。
            this.camera.zoomRatio = 1 + (0.5 - ratio) * 0.5;
        },
        // update (dt) {},
    });

### ball-control.js ###

该源文件功能是根据输入事件控制小球的运动方向和速度。

### infinite-world.js ###

该源文件功能是随着小球方向动态生成N个高度不等的方块，从而组成凹凸不平的山坡，每个方块都动态添加了物理组件，每个方块宽度的粒度越小，则山坡越平滑。方块的颜色默认为青色，由物理引擎的调试绘制标志位决定。

cc.Class({
        extends: cc.Component,
    
        properties: {
            pixelStep: 10, // 每个矩形的宽度（N个矩形组成一个山坡）
            xOffset: 0, // 当前最新创建矩形的x坐标
            yOffset: 240, // 山坡的最低高度
    
            target: {
                default: null,
                type: cc.Node
            }
        },
    
        // LIFE-CYCLE CALLBACKS:
    
        onLoad: function () { 
    
            this.hills = [];
            this.pools = [];
    
            while (this.xOffset < 1200) {
                this.generateHill(10);
            }
        },
    
        // 生成一个竖条状矩形
        generateHillPiece(xOffset, points) {
            let hills = this.hills;
            let first = hills[0];
            // 若小球离第一个块的距离超过1000，则不再创建新的node，直接复用原有数组的第一个元素
            if (first && ((this.target.x - first.node.x) > 1000)) {
                first.node.x = xOffset;
                first.collider.points = points;
                first.collider.apply();
                hills.push(hills.shift());
                return;
            }
    
            let node = new cc.Node();
            node.x = xOffset;
    
            let body = node.addComponent(cc.RigidBody);
            body.type = cc.RigidBodyType.Static;
    
            let collider = node.addComponent(cc.PhysicsPolygonCollider);
            collider.points = points;
            collider.friction = 1;
    
            node.parent = this.node;
            hills.push({node:node, collider:collider});
        },
    
        // 生成山坡
        // 每座山坡由N个竖条状矩形组成，
        // 每座山坡的绘制都分成2步：第1步绘制上坡，第2步绘制下坡
        generateHill () {
            let pixelStep = this.pixelStep;
            let xOffset = this.xOffset;
            let yOffset = this.yOffset;
    
            // 山坡宽度，值区间 120-640
            let hillWidth = 120 + Math.ceil(Math.random()*26)*20;
            // 计算山坡由多少个矩形组成
            let numberOfSlices = hillWidth / pixelStep;
    
            let j;
            let points = [];
    
            // first step
            let randomHeight;
            if (xOffset === 0) {
                randomHeight = 0;
            } else {
                // make sure yOffset < 600
                randomHeight = Math.min(Math.random() * hillWidth / 7.5, 600 - yOffset);
            }
    
            yOffset += randomHeight;
    
            for (j = 0; j < numberOfSlices/2; j++) {
                points.length = 0;
                points.push(cc.v2(0, 0));
                // 计算弧度
                let rad = Math.cos(2*Math.PI/numberOfSlices*j);
                points.push(cc.v2(0, yOffset-randomHeight*rad));
                rad = Math.cos(2*Math.PI/numberOfSlices*(j+1));
                points.push(cc.v2(pixelStep, yOffset-randomHeight*rad));
                points.push(cc.v2(pixelStep, 0));
    
                this.generateHillPiece(xOffset + j*pixelStep, points);
            }
    
            yOffset += randomHeight;
    
            // second step
            if (xOffset === 0) {
                randomHeight = 0;
            } else {
                // make sure yOffset>240
                randomHeight = Math.min(Math.random() * hillWidth / 5, yOffset - 240);
            }
    
            yOffset -= randomHeight;
    
            for (j = numberOfSlices/2; j < numberOfSlices; j++) {
                points.length = 0;
                points.push(cc.v2(0, 0));
                // 计算弧度
                let rad = Math.cos(2*Math.PI/numberOfSlices*j);
                points.push(cc.v2(0, yOffset-randomHeight*rad));
                rad = Math.cos(2*Math.PI/numberOfSlices*(j+1));
                points.push(cc.v2(pixelStep, yOffset-randomHeight*rad));
                points.push(cc.v2(pixelStep, 0));
    
                this.generateHillPiece(xOffset + j*pixelStep, points);
            }
    
            yOffset -= randomHeight;
    
            this.xOffset += hillWidth;
            this.yOffset = yOffset;
    
        },
    
        update: function (dt) { 
            if (!this.target) 
                return;
            // 如果小球离x轴边界不足1200，则创建新的hill
            while ((this.target.x + 1200) > this.xOffset) {
               this.generateHill();
            }
        },
    });