cocos creator基礎-(三十二)cc.Graphics組件和cc.Camera組件

cc.Graphics組件

 

1: Alpha 混合的算法;

2: LineWidth 線的寬度;

3: Line Join 接頭的方式: BEVEL, MITER, ROUND

4: Line Cap 模式: BUIT, Round, SQUARE

5: Stoker Color: 線的顏色

6: Fill Color: 填充顏色

7: Miter Limit: 10;

 

Graphics命令

// 需要先給節點綁定cc.Graphics組件
var graphics = this.getComponent(cc.Graphics);
// 布徑, moveTo
graphics.moveTo(-50, 50);
graphics.lineTo(-50, -50);
graphics.lineTo(50, -50);
graphics.lineTo(50, 50);
graphics.close(); // 組成一個封閉的路徑
// end 

// 畫線，填充;
graphics.stroke();
graphics.fill();

// graphics.clear();

 

攝像機cc.Camera

1: 所有的物體都是由攝像機繪制出來的;

2:culling Mask: 這個攝像機拍攝的物體的類型;

3:depth:根據攝像機的depth來決定哪個攝像機先繪制，哪個后繪制;

    值越小越先繪制

4: clearFlags: 攝像機清屏設置;

坐標轉換

1: 當攝像機移動后，鼠標點擊的位置，是攝像機下的坐標;

2: 攝像機坐標轉世界坐標:

　　camera.getCameraToWorldPoint(point, out);

3: 世界坐標轉攝像機坐標:

　　camera.getWorldToCameraPoint(point, out);

 

足球移動demo

//follow_target.js 攝像機跟隨

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        target: {
            type: cc.Node,
            default: null,
        },
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start() {

    },

    update(dt) {
        if (this.target === null) {
            return;
        }

        var w_pos = this.target.convertToWorldSpaceAR(cc.v2(0, 0)); // cc.v2 ---> cc.p
        var pos = this.node.parent.convertToNodeSpaceAR(w_pos);

        this.node.x = pos.x;
        this.node.y = pos.y;
    },
});

// game_ctrl.js 捕捉touchevent

var nav_agent = require("nav_agent");

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
        camera: {
            type: cc.Camera,
            default: null,
        },

        player: {
            type: nav_agent,
            default: null,
        },

        map: {
            type: cc.Node,
            default: null,
        },
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start() {
        this.node.on(cc.Node.EventType.TOUCH_START, function(e) {
            var camrea_pos = e.getLocation(); // 除非camrea (0, 0) 否者你要轉換一下啊; 
            var w_pos = this.camera.getCameraToWorldPoint(camrea_pos);

            var pos = this.map.convertToNodeSpaceAR(w_pos);
            this.player.walk_to_map(pos);
        }.bind(this), this);
    },

    // update (dt) {},
});

// nav_agent.js角色位移代碼

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
        speed: 100,
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start() {
        this.is_waling = false;
    },

    walk_to_map(dst) {
        var src = this.node.getPosition();
        var dir = dst.sub(src); // cc.pSub dst.sub; cc.pSub(dst, src);
        var len = dir.mag(); // cc.pLength;
        if (len <= 0) {
            return;
        }


        this.walk_time = len / this.speed;
        this.now_time = 0;
        this.vx = this.speed * (dir.x / len);
        this.vy = this.speed * (dir.y / len);
        this.is_waling = true;
    },

    update(dt) {
        if (this.is_waling === false) {
            return;
        }

        this.now_time += dt;
        if (this.now_time > this.walk_time) {
            dt -= (this.now_time - this.walk_time);
        }

        var sx = this.vx * dt;
        var sy = this.vy * dt;
        this.node.x += sx;
        this.node.y += sy;

        if (this.now_time >= this.walk_time) {
            this.is_waling = false;
        }
    },
});