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命令
![](https://img2018.cnblogs.com/blog/1454977/201904/1454977-20190408141429510-1285898260.png)
// 需要先给节点绑定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
![](https://img2018.cnblogs.com/blog/1454977/201904/1454977-20190408151419694-891481772.png)
//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; } }, });