Cocos2D入门

前端之家收集整理的这篇文章主要介绍了Cocos2D入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

游戏框架的核心类

1.SurfaceView 就如电影的屏幕
2.SurfaceHolder 电影的内容
3.Thread 工作人员

SurfaceHolder.callback接口

必须实现三个方法

surfaceCreated()

surfaceChanged()

surfaceDestoryed()

Thread若想改变Surface里面的内容,必须执行在 onSurfaceCreated()之后,onSurfaceDestoryed()之前才有效

SurfaceHolder绘画的三个步骤:

1.锁定画布

2.绘制(只有在锁定画布之后,解锁画布之前绘制才有效)

3.解锁画布并提交(不提交则绘制没效果,可调用SurfaceHolder的unlockCanvasAndPost方法

帧率

每秒中绘制界面的次数,如果大于29.7,则人眼认为是连续的,不卡顿,所以一般游戏只要保证帧率大于30即可

Cocos2D

1.需要导入jar包
2.图片资源放于assets目录,Cocos2D需要放置一张fps_images.png到assets目录
3.了解引擎的操作过程,导演(CCDirector)控制场景(CCScene)的运行,场景中可以放置图层(CCLayer),图层中可以放置精灵(CCSprite)。
4.Cocos2D的坐标系(左下角为坐标原点,Y向上递增,X向右递增,即和数学中的坐标系一致)与安卓的android坐标系(左上角为坐标原点,Y向下递增,X向右递增)不同。

CCDirector 导演

1.attachInView()方法开启线程
2.runWithScene() 运行场景
3.生命周期的方法 resume()、pause()、end()
4.setDisplayFPS(true) 显示帧率
5.setScreenSize() 设置屏幕大小,自动屏幕适配
6.setDeviceOrientation() 设置屏幕方向

CCScene 场景

CCScene ccScene = CCScene.node();//创建一个场景

目前该类没有什么具体功能,它只是作为一个项目中需要展示内容的根节点存在

CCLayer

处理触摸事件
convertTouchToNodeSpace(event); 将android坐标系中的点转换成Cocos2D坐标系中的点

CCSprite 精灵

CCSprite ccSprite = CCSprite.sprite(“xxx.png”);//创建一个精灵(图片存放于assets)
1.setAnchorPoint() 设置锚点
2.setPosition() 设置精灵的位置
3.setScale() 设置缩放
4.setFlipX()、setFlipY() X为水平反转,Y为垂直反转
5.setOpacity(150);//不透明度 0-255 值越大越不透明
6.setVisible(false);//设置是否可见

基本流程操作代码

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        CCGLSurfaceView ccglSurfaceView = new CCGLSurfaceView(this);
        setContentView(ccglSurfaceView);

        CCDirector ccDirector = CCDirector.sharedDirector();//创建一个导演,单例
        ccDirector.attachInView(ccglSurfaceView);//开启线程
        CCScene ccScene = CCScene.node();//创建一个场景
        ccScene.addChild(new FirstLayer());//将图层添加到场景中
        ccDirector.runWithScene(ccScene);//运行场景
}

FirstLayer的代码

public class FirstLayer extends CCLayer {
    public FirstLayer(){
        //图层中显示精灵
        CCSprite ccSprite = CCSprite.sprite("xxx.png");//创建一个精灵(图片存放于assets)
        ccSprite.setAnchorPoint(0,0);//图片的锚点默认是在其中心,现在设置其锚点在左下角
        this.addChild(ccSprite);//将精灵添加到图层中
    }

}

CCAction

CCFiniteTimeAction

和时间相关的动作

CCFollow

跟随动作

CCRepeatForever

永不停止的循环

CCSpeed

跟速度相关的动作

moveTo和moveBy动作的区别

1.To 移动到目的地,By 移动位置坐标的变化
2.To 没有相反动作,By 有相反动作

移动动作:

private void moveBy() {
    CCSprite ccSprite = getSprite();
    ccSprite.setPosition(0,100);
    //参数1:时间;参数2:目的点坐标
    CCMoveBy ccMoveBy = CCMoveBy.action(2,CCSprite.ccp(200,0));
    CCMoveBy reverse = ccMoveBy.reverse();
    CCSequence ccSequence = CCSequence.actions(ccMoveBy,reverse);
    ccSprite.runAction(ccSequence);
}

private void moveTo() {
    CCSprite ccSprite = getSprite();
    CCMoveTo ccMoveTo = CCMoveTo.action(2,0));
    ccSprite.runAction(ccMoveTo);
}

private CCSprite getSprite() {
    CCSprite ccSprite = CCSprite.sprite("z_1_attack_01.png");
    ccSprite.setAnchorPoint(0,0);
    this.addChild(ccSprite);
    return ccSprite;
}

rotateTo和rotateBy动作的区别

rotateTo 旋转的时候会偷懒,例如设定旋转240度,他会反方向旋转120达到效果
rotateBy 旋转的时候不会偷懒,设定多少旋转多少度它会默默地转

旋转动作

private void rotateTo() {
    CCRotateTo rotateTo = CCRotateTo.action(3,240);
    getHeartSprite().runAction(rotateTo);
}

private void rotateBy() {
    CCSprite heart = getHeartSprite();
    //参数1:时间;参数2:旋转的角度
    CCRotateBy rotateBy = CCRotateBy.action(3,240);
    heart.setPosition(200,100);
    heart.runAction(rotateBy);
}

跳跃动作

private void jumpBy() {
    CCSprite ccSprite = getSprite();
    //参数1:动作执行的时间;参数2:目的地的坐标;参数3:比目的地高出的高度;参数4:跳跃的次数
    CCJumpBy ccJumpBy = CCJumpBy.action(4,100),100,2);
    ccSprite.runAction(ccJumpBy);
}     

private CCSprite getSprite() {
    CCSprite ccSprite = CCSprite.sprite("z_1_attack_01.png");
    ccSprite.setAnchorPoint(0,0);
    this.addChild(ccSprite);
    return ccSprite;
}

缩放动作

private void scaleBy() {
    //参数1:时间;参数2:缩放的比例
    CCScaleBy scaleBy = CCScaleBy.action(1,0.65f);
    CCScaleBy reverse = scaleBy.reverse();
    CCSequence sequence = CCSequence.actions(scaleBy,reverse);//串行动作
    CCRepeatForever forever = CCRepeatForever.action(sequence);
    getHeartSprite().runAction(forever);
}

 private CCSprite getHeartSprite() {
    CCSprite ccSprite = CCSprite.sprite("heart.png");
    ccSprite.setAnchorPoint(0,0);
    ccSprite.setPosition(100,100);
    this.addChild(ccSprite);
    return ccSprite;
}

淡入淡出

private void fadeOut() {
    CCFadeOut fadeOut = CCFadeOut.action(5);//所用时间
    getSprite().runAction(fadeOut);
 }

 private void fadeIn() {
    CCFadeIn fadeIn = CCFadeIn.action(5);//所用时间
    getSprite().runAction(fadeIn);
 }

带加速度的动作

/**加速度增加的移动*/
 private void easeIn() {
    CCMoveTo ccMoveTo = CCMoveTo.action(3,0));
    CCEaseIn easeIn = CCEaseIn.action(ccMoveTo,2);
    getSprite().runAction(easeIn);
 }

/**加速度减少的移动*/
 private void eaSEOut() {
    CCMoveTo ccMoveTo = CCMoveTo.action(3,0));
    CCEaSEOut eaSEOut = CCEaSEOut.action(ccMoveTo,2);
    getSprite().runAction(eaSEOut);
 }

闪烁

private void blink() {
    //参数1:时间;参数2:闪烁的次数
    CCBlink blink = CCBlink.action(3,3);
    getSprite().runAction(blink);
}

颜色渐变

/**颜色渐变*/
private void tintBy() {
    //参数1:文本内容;参数2:字体的样式;参数3:字体大小
    CCLabel label = CCLabel.makeLabel("我爱你,是多么清楚,多么坚固的信仰!","hkbd.ttf",24);
    label.setPosition(250,200);
    label.setColor(ccc3(50,255));
    this.addChild(label);

    ccColor3B c = ccc3(100,255,-100);
    //参数1:时间;参数2:变化后的颜色
    CCTintBy tintBy = CCTintBy.action(1,c);
    CCTintBy reverse = tintBy.reverse();

    CCSequence sequence = CCSequence.actions(tintBy,reverse);//串行动作
    CCRepeatForever forever = CCRepeatForever.action(sequence);

    label.runAction(forever);
}

贝塞尔曲线运动

/**贝塞尔曲线移动*/
private void bezierBy() {
    CCBezierConfig config = new CCBezierConfig();
    config.controlPoint_1 = ccp(0,0);//起始点
    config.controlPoint_2 = ccp(100,100);//最高点
    config.endPosition = ccp(200,0);//结束点
    CCBezierBy bezierBy = CCBezierBy.action(3,config);
    getSprite().runAction(bezierBy);
}

动作的处理,序列帧的播放

前行

//序列帧的播放
    ArrayList<CCSpriteFrame> frames = new ArrayList<CCSpriteFrame>();
    String format = "z_1_%02d.png"; // 02d 是占位符,表示两位数字,当不足两位的时候,前面的数字用0补足
    for (int i= 1; i<=7;i++){
        CCSpriteFrame frame = CCSprite.sprite(String.format(format,i)).displayedFrame();
        frames.add(frame);
    }
    //参数1为动作的名称(主要是给程序员看的);参数2为每一帧播放的时长;参数3为所有用到的帧的集合
    CCAnimation animation = CCAnimation.animation("walking",0.2f,frames);
    CCAnimate animate = CCAnimate.action(animation);

    //播放序列帧默认是永不停止的动画
    CCRepeatForever forever = CCRepeatForever.action(animate);
    spriteZombie.runAction(forever);

    moveToNext();

    /**移动到下一个地点*/
    public void moveToNext() {
        position ++;
        if (position < mRoadPoints.size()){
            CGPoint point = mRoadPoints.get(position);
            CCMoveTo moveTo = CCMoveTo.action(2,point);
            CCSequence sequence = CCSequence.actions(moveTo,CCCallFunc.action(this,"moveToNext"));//相当于递归调用,反射的方法不能是私有的
            spriteZombie.runAction(sequence);
        }else{
            //移动完成
        }
    }

粒子系统的展示

Cocos2D自带的粒子系统,可以模拟下雪、烟雾、火场等场景。

private void loadParticle() {
    //创建了粒子系统 飘雪
    snowSystem = CCParticleSnow.node();
    //设置雪的样式
    snowSystem.setTexture(CCTextureCache.sharedTextureCache().addImage("f.png"));
    this.addChild(snowSystem,1);
}

猜你在找的Cocos2d-x相关文章