canvas、cocos基础知识

文章目录

canvas基础
使用cocos2d
基本功能

创建导演(Director)、场景(Scene)、层(layer)、精灵(sprite)
精灵的操作
场景的操作
ui组件

cc、node的常用方法

canvas基础

基本操作

context.save()//保存状态
context.restore()//回复状态
context.moveTo()//开始点
context.lineTo()//画直线
context.beginPath()//开始一条新路径
context.closePath()//闭合一条路径
context.lineWidth//线宽
context.strokeStyle//边颜色
context.fillStyle//填充颜色
context.lineCap//线端点样式 butt round square
context.lineJoin//连接点样式 miter bevel round
context.arc()//画圆
var a=context.createLinearGradient(x,y,x0,y0)//线性渐变
a.addColorStop(stop,color)//渐变颜色
var a= context.createRadialGradient(x0 , y0 , r0 , x1 , y1 , r1 );//径向渐变
var a=context.createPattern(imgage,repeat-style)//图案描边填充
context.shadowColor//阴影颜色
context.shadowOffSetX//左阴影
context.shadowOffSetY//右阴影
context.shadowBlur//模糊度
context.globalAlpha//透明度
context.translate()//坐标系平移
context.ratate()//坐标系旋转
context.scale()//坐标系缩放
context.font字体设置 weight size family
context.fillText填充字体
context.strokeText描边字体
context.textAlign文本水平对齐
context.textBaseline文本垂直对齐

图像操作

context.drawImage(image,dx,dy)
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
//(dx,dy指图片在画布中位置，dh,dx指的是图片的大小，sx,sy,sw,sh指的是截取源图片的具体位置)

canvas动画（bom下的requestAnimationFrame）

//开始动画 
var animHandle;
var anim = function(){
    //。。。循环操作
	animHandle = requestAnimationFrame(anim);
};
requestAnimationFrame(anim);
//取消动画
cancelAnimationFrame(animHandle);

使用cocos2d

cocos2d是常用的游戏开发引擎，他有很多分支，关系如下：

cocos2d----cocosBuilder
	   |---cocos2D-iphone----cocos2d-windows
	   					 |---cocos2d-android
	   					 |---cocos2d-javascrippt
	   					 |---cocos2d-X----cocos2d-HTML5
	   								  |---cocos2d-xna

此处主要介绍的cocos2d-javascript分支，他是开源跨平台游戏引擎，采用原生js开发，课发布到web平台、ios、android等平台。

环境需求：python环境、cocos环境

常用cocos命令

cocos new -l js --no-native project_name   ##创建项目
cocos run -p web   ##运行cocos项目

在新建项目中的诸多目录中，res是存放各种图片的，src是存放各种源代码的

在src中resource.js是设置引入各种外部资源的配置文件，app.js是逻辑代码。

基本功能

基本概念有导演(Director)、场景(Scene)、层(layer)、精灵(sprite)、ui组件。

其中ui组件包括标签、菜单、按钮、复选框、进度条、滑动条、文本框。

对于每一个对象中，常用到的概念还有坐标系、节点的概念。

除此之外还有动作、动画、定时器（this.schedule）。

设置手机适配度

cc.view.setDesignResolutionSize(750, 1334, cc.ResolutionPolicy.FIXED_WIDTH);

创建导演(Director)、场景(Scene)、层(layer)、精灵(sprite)

cc对象，为顶层对象，所有操作都是在cc对象的操作之上。

在cc.game.onStart=()=>{}中完成预设，cc.game.run()运行程序。

cc.game.onStart = function(){
    if(!cc.sys.isNative && document.getElementById("cocosLoading"))        document.body.removeChild(document.getElementById("cocosLoading"));
    cc.view.enableRetina(false);
    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
    cc.LoaderScene.preload(g_resources, function () {//g_resource是预设的存储图片资源的变量
        cc.director.runScene(new HelloWorldScene());
    }, this);
};
cc.game.run();

在预设中,利用导演加载场景

cc.LoaderScene.preload(g_resources, function () {
    cc.director.runScene(new HelloWorldScene());
}, this);

场景创建,利用场景加载层

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

创建层,在层中可以创建精灵

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        this._super();

        var size = cc.winSize;

        var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);
        helloLabel.x = size.width / 2;
        helloLabel.y = size.height / 2 + 200;
        this.addChild(helloLabel, 5);

        this.sprite = new cc.Sprite(res.HelloWorld_png);//添加精灵进入层
        this.sprite.attr({
            x: size.width / 2,
            y: size.height / 2
        });
        this.addChild(this.sprite, 0);

        return true;
    }
});

精灵创建

var land = new cc.Sprite(res.Land_Png);
land.setPosition(cc.p(size.width*0.5,size.height*0.2));
land.setScaleX(1.5);

精灵的操作

能够创造四个基本功能后，针对于游戏中的人物，对他们的操作实则就是对精灵的操作，接下来讲解对精灵的操作。

让几幅图话共同组成一个帧动画来呈现

var animation = new cc.Animation();//创建一个帧动画
animation.addSpriteFrameWithFile("res/dinosaur1.png");//添加帧动画的每一帧
animation.addSpriteFrameWithFile("res/dinosaur2.png");
animation.setDelayPerUnit(1 / 60);//每帧变化速度
animation.setRestoreOriginalFrame(true);
var animateAction = cc.animate(animation);
this.player1.runAction(cc.repeatForever(animateAction));

为精灵添加动作

精灵的动作很容易实现，但动作常常伴随着事件而触发

//动作的控制
this.player1.runAction()//开始
this.player1.stopAction()//结束
this.player1.pause()//暂停
//即时动作实现(看不到动作过程)
*位置调整
this.player1.runAction(cc.place(this.player1.x+50,this.player1.y));
*水平/垂直反转
this.player1.runAction(cc.flipX(true));
this.player1.runAction(cc.flipY(true));
*隐藏/显示
this.player1runAction(cc.hide());
*回调动作
this.player1.runAction(cc.callFunc(function(){
    this.player1.runAction(cc.show());
},this));
//延时动作实现(看得到动作过程)
*移动
this.player1.runAction(cc.moveTo(10.0,200,0));//绝对位置
this.player1.runAction(cc.moveBy(10.0,200,0));//相对位置
*跳跃
this.player1.runAction(cc.jumpTo(10.0,100,0,100,2));
this.player1runAction(cc.jumpBy(10.0,100,0,100,2));
*旋转
this.player1.runAction(cc.rotateTo(10.0,90,0));
this.player1.runAction(cc.rotateBy(10.0,90,0));
*闪烁
this.player1.runAction(cc.blink(20.0,10));
*颜色
this.player1.runAction(cc.tintBy(…));
this.player1.runAction(cc.tintTo(…));
//组合动作实现
*顺序执行
this.player1.runAction(cc.sequence(action1,cc.callFunc(function(){
   cc.log("action1 执行完毕");
},this)));
*同步执行
var action3 = cc.moveBy(2.0,200,0);
var action4 = cc.rotateBy(2.0,-90);
this.player1.runAction(cc.spawn(action3,action4));
*重复执行
var action5 = cc.rotateBy(1.0,-90);
this.player1.runAction(cc.repeatForever(action5));

为动作关联事件

var that=this;
var listener = cc.EventListener.create({
    event:cc.EventListener.TOUCH_ONE_BY_ONE,
    swallowTouches:true,
    onTouchBegan: function (touch, event){
         that.player1.runAction(cc.jumpBy(0.8,0,0,100,1));
         console.log("开始")
    },
    onTouchMoved: function (touch, event) {
         console.log("移动")
    },
    onTouchEnded: function (touch, event) {
         console.log("结束")
    }
})
cc.eventManager.addListener(listener,this);

场景的操作

当我们可以操作某一个精灵动作以后，已经可以完成游戏的核心部分、核心场景了。但是每个游戏都会有初始界面，例如刚打开游戏的菜单页面，我们将这些东西写到另外一个场景。那么我们就要控制操作场景的操作。

cc.director.runScene(new MainScene());

ui组件

ui组件通常包括标签（label）、菜单（menu）、按钮（button）、复选框（checkbox）、进度条（loadingbar）、滑动条（slider）、文本框（textfield）。此处列举标签和菜单。

//标签
var easyLabel = new cc.LabelTTF("简单模式");
easyLabel.setFontSize(size.width / 12);
easyLabel.setFontFillColor(cc.color.ORANGE);
easyLabel.enableStroke(cc.color.YELLOW, 5);
var easyItem = new cc.MenuItemLabel(easyLabel, function () {
    cc.director.runScene(new MainScene());
}, this);
//菜单
var menu = new cc.Menu(easyItem,easyItem2);
menu.x = 0;
menu.y = 0;//size.height / 5;
this.addChild(menu);

cc、node的常用方法

node.getBoundingBox()
node.getPosition()
cc.rectContainsPoint(n1,n2)//比较两个数字是否相同
node.schedule(this.myCallBack,0.02,cc.REPEAT_FOREVER,0)//定时器
node.unscheduleUpdate()//关闭定时器

来源：CSDN

作者：一只小猿翻墙来

链接：https://blog.csdn.net/just_a_bad_guy/article/details/103792260

标签

canvas

context