• cocos2d-js 笔记

    2017-01-17 11:47:06
    cocos new -l js projectname 运行项目:cocos run -p web 项目打包:cocos compile -p web -m release 字典 Scene:场景,pushScene,加载或切换场景但不销毁上一个场景。popScene,销毁当前场景,回到上一...

    第三章

    命令

    新建项目: cocos new -l js projectname

    运行项目:cocos run -p web

    项目打包:cocos compile -p web -m release


    字典

    Scene:场景,pushScene,加载或切换场景但不销毁上一个场景。popScene,销毁当前场景,回到上一个场景。

    Director:导演,cc.director.runScene,这个函数用来加载或切换场景。cc.director.getWinSize():获取窗口尺寸。cc.director.getVisibleSize(),获取窗口实际尺寸。cc.director.getScheduler(),获取全局定时器。pause/resume:暂停,恢复场景。

    Node:节点

    scheduleUpdate():通知当前节点

    Layer:层

    Sprite:精灵

    cc:cc是一个JS对象,把各种cocos2d-js的原生类都封装到这个命名空间里,extend()函数接受一个对象作为参数。

    addChild():增加子节点。

    removeChild():移除子节点。

    ctor:类的构造函数

    _super():继承父类方法,调用父类同名函数。

    anchor:锚点,anchorX和anchorY默认值都是0.5,锚点坐标原点位于左下角。

    bind():bind方法返回一个新的function,这个function执行的时候this将固定指向bind的第一个参数。


    其他

    CCTransition.js记录了所有切换效果,第一个参数代表切换时间,单位S。

    第四章

    基本动作

    moveTo和moveBy

    moveTo(2,cc.p(100,100)):2代表2秒,后两个参数代表终点坐标。

    moveBy()

    缩放scaleTo和scaleBy

    cc.scaleTo(1,2,4);1代表1秒,2代表横向比例,4代表纵向比例。缩放比例为负数是可以让精灵做水平/垂直翻转。scaleBy是在当前缩放比例基础上再乘以一个比例,而scaleTo是从原图尺寸缩放。

    淡入淡出fadeTo,fadeIn,fadeOut

    fadeIn(2),fadeOut(2),2代表消失/出现时间。fadeTo(2.255)改变透明度,2代表时间,0-255代表透明度,255代表完全不透明。

    闪烁blink

    cc.blink(2,10)让精灵2秒钟闪烁10次。

    改变颜色通道tintTo

    cc.tintTo(2,100,0,0),时间,红通道,绿通道,蓝通道,就是让原来RGB颜色的数值乘以括号内的数值再除以255。

    组合动作

    1.顺序cc.sequence(action1,action2,…);

    2.重复cc.repeat(action,times);第一个参数代表动作,第二个代表重复次数。

    3.无限重复cc.repeatForover(action),让某个动作无线重复。

    4.同时执行cc.spawn(action1,action2,…);

    5.反向:cc.reverse(action);返回一个新动作。cc.reverseTime(action);只能处理有限长度的动作。

    运动轨迹

    action.easing(easeObject);easing方法,用来设置该动作执行过程中采用哪种缓动方式。参数在CCActionEase.js里。

    控制动作

    1.开始/停止动作
    node.runAction(action);
    node.stopActionByTag(tag);tag是预先设置给action的标记,例如action.tag = 123;
    node.stopAllAction(action);
    2.暂停/恢复动作

    node.pause();

    node.resume();

    全局暂停:

    cc.director.pause();

    cc.director.resume();

    监听动作开始与结束:

    var callback = cc.callFunc(function,target,data);

    cc.sequence(action, callback);

    第一个参数代表函数名,第二个参数代表函数最后被调用时的目标对象,第三个参数是附加的数据。

    如果我们串联了多个动作,可以在每个动作之间都放置一个监听函数,

    cc.sequence(action1, cc.callFunc(function1),action2, cc.callFunc(function2),action3);

    播放声音

    1.背景音乐

    cc.audioEngine.playMusic("res/sounds/bg.mp3",true);第二个参数代表是否重复播放。

    cc.audioEngine.stopMusic();停止播放

    cc.audioEngine.setMusicVolume(0);静音,参数为1时恢复音量。

    2.音效

    cc.audioEngine.playEffect("res/sounds/bg.mp3",true);第二个参数代表是否重复播放。

    cc.audioEngine.stopEffect(effect);停止播放

    cc.audioEngine.stopAllEffects();关闭全部音效

    cc.audioEngine.setEffectsVolume(0);静音,参数为1时恢复音量。

    事件绑定

    1.鼠标事件

    if( 'mouse' in cc.sys.capabilities ) {
        cc.eventManager.addListener({
            event: cc.EventListener.MOUSE,
            onMouseDown: function(event){
                var pos = event.getLocation();
                var target = event.getCurrentTarget();
                if(event.getButton() === cc.EventMouse.BUTTON_RIGHT)
                    trace("onRightMouseDown at: " + pos.x + " " + pos.y );
                else if(event.getButton() === cc.EventMouse.BUTTON_LEFT)
                    trace("onLeftMouseDown at: " + pos.x + " " + pos.y );
            },
            onMouseMove: function(event){
                var pos = event.getLocation(), target = event.getCurrentTarget();
                trace("onMouseMove at: " + pos.x + " " + pos.y );
            },
            onMouseUp: function(event){
                var pos = event.getLocation(), target = event.getCurrentTarget();
                trace("onMouseUp at: " + pos.x + " " + pos.y );
            }
        }, this);
    } else {
        trace("MOUSE Not supported");
    }

    第一个参数代表监听信息,第二个代表监听的节点,'mouse' in cc.sys.capabilities ,判断运行环境。

    event对象的方法:

    1.event.getLocation();获取鼠标事件发生的坐标。

    2.event.getLocationX();event.getLocationY();X/Y坐标。

    3.event.getCurrentTarget();获取触发事件的对象,就是node,

    4.event.getButton();判断鼠标左右键。

    5.event.getDelta();获取鼠标移动偏移值。

    6.event.getDeltaX();event.getDeltaY();获取鼠标偏移的X值或Y值。

    2.触摸事件

    1.单点触摸

    if( 'touches' in cc.sys.capabilities ) {
        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
            onTouchBegan: function(touch,event){},
            onTouchMoved: function(touch,event){},
            onTouchEnded: function(touch,event){},
            onTouchCancelled: function(touch,event){}
        }, this);
    } else {
        trace("TOUCH-ONE-BY-ONE test is not supported on desktop");
    }
    touch参数封装了触摸事件专有的数据,onTouchEnded和onTouchCancelled可以等同处理。

    touch参数有待查询API。

    2.多点触摸

    if( 'touches' in cc.sys.capabilities ) {
        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
            onTouchBegan: function(event){},
            onTouchMoved: function(event){},
            onTouchEnded: function(event){},
            onTouchCancelled: this.onTouchCancelled
        }, this);
    } else {
        trace("TOUCH-ONE-BY-ONE test is not supported on desktop");
    }
    touches参数是一个数组,每个数组元素

    3.键盘事件

    if( 'keyboard' in cc.sys.capabilities ) {
        cc.eventManager.addListener({
            event: cc.EventListener.KEYBOARD,
            onKeyReleased: function(keyCode, event) {
                if (keyCode == cc.KEY.back) {
                    cc.log("return button clicked. keycode:" + keyCode);
                    cc.director.end();
                }
                else if (keyCode == cc.KEY.menu) {
                    cc.log("menu button clicked. keycode:" + keyCode);
                }
            }
        }, this);
    } else {
        cc.log("KEYBOARD Not supported");
    }
    keyCode是一个数字,API在CCCommon.js里,

    4.重力感应事件

    if( 'accelerometer' in cc.sys.capabilities ) {
        cc.inputManager.setAccelerometerInterval(1/30);
        cc.inputManager.setAccelerometerEnabled(true);
        cc.eventManager.addListener({
            event: cc.EventListener.ACCELERATION,
            callback: function(accelerometerInfo, event){
                var target = event.getCurrentTarget();
                cc.log('Accel x: '+ accelerometerInfo.x + ' y:' + accelerometerInfo.y + ' z:' + accelerometerInfo.z + ' time:' + accelerometerInfo.timestamp );
    
                var w = winSize.width;
                var h = winSize.height;
    
                var x = w * accelerometerInfo.x + w/2;
                var y = h * accelerometerInfo.y + h/2;
    
                x = x*0.2 + target.prevX*0.8;       //使小球慢慢移动到目标位置
                y = y*0.2 + target.prevY*0.8;
    
                target.prevX = x;
                target.prevY = y;
                target.sprite.x = x;
                target.sprite.y = y ;
            }
        }, this);
    
        var sprite = this.sprite = new cc.Sprite("res/item_2.png");
        this.addChild( sprite );
        sprite.x = winSize.width/2;
        sprite.y = winSize.height/2;
    
        this.prevX = 0;
        this.prevY = 0;
    } else {
        cc.log("ACCELEROMETER not supported");
    }
    setAccelerometerInterval函数设置重力感应频率。

    5.进入后台,恢复显示事件

    进入后台
    cc.eventManager.addCustomListener(cc.game.EVENT_HIDE,function(){
    //游戏进入后台
    });
    恢复显示
    cc.eventManager.addCustomListener(cc.game.EVENT_SHOW,function(){
    //游戏恢复显示
    });

    第六章  定时器

    1.scheduleOnce取代setTimeout
    node.scheduleOnce(callback,delay);scheduleOnce只能依赖节点触发

    2.schedule取代setInterval

    node.schedule(callback,interval,repeat,delay);
    interval是每次触发的间隔,以秒为单位,repeat是重复次数,delay是第一次触发前的延迟时间,以秒为单位。如果希望无限循环,省略后两个参数即可,也可以把repeat设置为cc.REPEAT_FOREVER。
    3.取消定时器

    取消scheduleUpdate使用node.unscheduleUpdate();

    取消scheduleOnce和schedule使用node.unschedule(callback);

    4.暂停/恢复定时器

    node.pause();//暂停定时器

    node.resume();//恢复计时器

    5.定时器的误差

    由于schedule的实现基于帧频,当帧频降低时,误差会越来越大,所以schedule只能用于动画控制,不能用于逻辑处理。

    6.解决误差

    ctor: function () {
        this._super();
    
        var startTime = Date.now();
        var count = 0;
        this.schedule2(function(){
            var timePass = Date.now() - startTime;
            count++;
            var delta = timePass - (count*100);
            trace("time pass", timePass, "total delta", delta, "count", count);
        }, 0.1);
        this.scheduleUpdate();
    },
    
    schedule2: function (callback, interval) {
        var then = Date.now();
        interval = interval*1000;
        this.schedule(function(){
            var now = Date.now();
            var delta = now - then;
            if(delta > interval){
                then = now - (delta % interval);
                callback.call(this);
            }
        }.bind(this), 0);
    },
    
    update: function () {
        for (var i = 0; i < 10000000; i++) {
            b = 1/0.22222;
        }
    }

    第七章 游戏界面

    1.原生组件--按钮

    cocos2d-js中共有4种按钮MenuItemSprite、MenuItemImage、MenuItemFont、MenuItemLabel,
    1.MenuItemSprite具有按钮的最基本功能,即点击后的回调,用法:

    var menuSprite = new cc.MenuItemSprite(spriteNormal, spriteSelected, spriteDisable, clickHandler,target);
    spriteNormal表示正常态的效果,spriteSelected表示按下时的效果,spriteDisable表示禁用时的效果,clickHandler是点击的回调函数,target是作用于clickHandler的target对象。spriteDisable和target可以缺省。

    禁用按钮:menuSprite.setEnabled(false);false代表禁用,true代表可以使用。

    2.MenuItemImage继承自MenuItemSprite,区别是不用新建spirit,可以在参数中直接写图片路径。

    var menuImage = new cc.MenuItemImage("res/startgame.png", "res/startgame2.png", "res/startgame3.png", this.startGame, this);

    3.MenuItemFont用于制作文字按钮

    var menuFont = new cc.MenuItemFont(text, clickHandle, target);

    4.MenuItemLabel可以使用TTF文字或位图文字

    //TTF文字

    var label = new cc.LabelTTF("START GAME", "Arial", 32);
    var item = new cc.MenuItemLabel(label, this.startGame, this);


    //位图文字

    var label = new cc.LabelBMFont("START GAME", "res/font.fnt");

     var item = new cc.MenuItemLabel(label, this.startGame, this);

    5.开关按钮

    var on = new cc.MenuItemFont("ON");
    var off = new cc.MenuItemFont("OFF");
    var item = new cc.MenuItemToggle(off, on, callback, target);

    2.原生组件--菜单

    cc.MenuItemFont.setFontName("Arial");
    cc.MenuItemFont.setFontSize(24);
    var one = new cc.MenuItemFont("one", this.clickHandler);
    var two = new cc.MenuItemFont("two", this.clickHandler);
    var three = new cc.MenuItemFont("three", this.clickHandler);
    var four = new cc.MenuItemFont("four", this.clickHandler);
    var five = new cc.MenuItemFont("five", this.clickHandler);
    var six = new cc.MenuItemFont("six", this.clickHandler);
    var menu = new cc.Menu(one, two, three, four, five, six);

    menu.alignItemsVertically();//纵向排列

    menu.alignItemsHorizontally();//横向排列

    menu.alignItemsHorizontallyWithPadding(20);//横向间距

    menu.alignItemsVerticallyWithPadding(20);//纵向间距

    2.原生组件--文本

    new cc.LabelTTF(text, font, fontSize, labelsize, halign, valign);

    LabelTTF.color= cc.color(255,0,0);

    第八章 实战

    >遮罩节点

    利用遮罩我们可以让指定范围内的内容显示,超出范围的内容隐藏。首先我们需要添加内容到遮罩节点上,然后再给遮罩节点指定一个裁剪的模板。

    >绘制节点
    var stencil = new cc.DrawNode();
    stencil.drawRect(cc.p(this.mapPanel.x,this.mapPanel.y), cc.p(this.mapPanel.x+Constant.CANDY_WIDTH*Constant.MAP_SIZE,this.mapPanel.y+Constant.CANDY_WIDTH*Constant.MAP_SIZE),cc.color(0,0,0), 1, cc.color(0,0,0));

    >本地存储

    cc.sys.localStorage.setItem(key,value);
    cc.sys.localStorage.getItem(key);


    第九章 打包上传

    cocos compile-p web-m release
    >如何压缩项目的体积?
    打开项目目录中的frameworks/cocos-2d-html5/moduleConfig.json,可以看到全部预定义的模块选项,我们把project.json中的modules改为我们使用到的模块,然后再打包上传。

    第十章 简单的性能优化

    1.雪碧图

    下载安装TextturePacker,设置游戏引擎和图片比例(scale),然后点击publish导出,导出的spiritsheet将生成2个文件:plist和png。
    把spiritsheet加载到游戏里,

    cc.spriteFrameCache.addSpriteFrames("res/candy.plist");

    var ball = new cc.Sprite("#1.png");

    使用小图时调用“#精灵帧名字”,精灵帧名字就是原来小图的文件名。

    2.spriite批处理

    SpriteBatchNode的用法和普通精灵类似:
    var batchNode = new cc.SpriteBatchNode("res/candy.png");

    3.缓存池

    把重复使用的精灵回收到缓存池中,在下次创建精灵时重复使用,可以节约硬件消耗。使用步骤:
    1.建立一个可回收的类,该类中必须有reuse和unuse方法,从cc.pool中取出实例的时候调用reuse方法把该实例重新初始化,而该实例从舞台删除放回到cc.pool的时候调用unuse方法。其中reuse方法可以接受若干参数,跟getFromPool对应。
            2.判断cc.pool中是否有某个类的实例:
    1. cc.pool.hasObject(TargetClass)  
    cc.pool.hasObject(TargetClass)
    如果有,则使用cc.pool.getFromPool(TargetClass, args)获取实例,在getFromPool中会调用实例reuse方法,传递的就是args,所以args参数的数目要跟reuse方法对应。如果没有,则需要使用new方法创建新的TargetClass实例。
            3.当时用完某个类的实例时,把该实例放入cc.pool中:
    cc.pool.putInPool(TargetClass);

            代码示例:


    if(cc.pool.hasObject(ReuseSprite)){
        ball = cc.pool.getFromPool(ReuseSprite, param);
    } else {
        ball = new ReuseSprite("#" + (parseInt(Math.random() * 5) + 1) + ".png");
    }


    4.位图缓存

    Layer的bake方法可以后续每帧的重绘只需要把这个位图绘制到画布上即可,不需要遍历全部子节点。如果要解除位图缓存,可以调用unbake方法。代码示例:

    layer.bake();layer.unbake();



    第十一章 动画效果

    帧动画:Animation类


    var animation = new cc.Animation(frames,delay,loops);

    for (var i = 0; i < N; i++) {
        animation.addSpriteFrameWithFile(files[i]);
        //animation.addSpriteFrame(cc.spriteFrameCache.getSpriteFrame("file.png"););




    }
    //files是一个数组,包含每一帧的图片
    animation.setDelayPerUnit(1/14);
    animation.setLoops(5);
    var action = cc.animate(animation);
    action.repeatForever();//使用无限循环后,原来的loops设置就会失效
    sprite.runAction(action);


    第十二章 动态背景

    视差滚动背景

            在cocos2d-js中,使用ParallaxNode类实现视差滚动背景,ParallaxNode继承了node,使用方式跟node类似,我们可以通过ParallaxNode的addChild方法,添加多个远近不同的背景层,并设置每个背景层的移动速度比例。缺点:不能循环滚动。代码示例:

    var bg = new cc.ParallaxNode();
    var bg1 = new cc.Sprite("res/bgLayer.jpg");
    var bg2 = new cc.Sprite("res/bgLayer2.png");
    var bg3 = new cc.Sprite("res/bgLayer3.png");
    var bg4 = new cc.Sprite("res/bgLayer4.png");
    bg.addChild(bg1, 1, cc.p(0.1, 0), cc.p(bg1.width/2, bg1.height/2));
    bg.addChild(bg2, 2, cc.p(0.3, 0), cc.p(bg2.width/2, bg2.height/2));
    bg.addChild(bg3, 3, cc.p(0.5, 0), cc.p(bg3.width/2, bg3.height/2));
    bg.addChild(bg4, 4, cc.p(1, 0), cc.p(bg4.width/2, bg4.height/2));
    var action = cc.moveBy(1, -200, 0);
    bg.runAction(cc.sequence(action, action.clone().reverse()).repeatForever());
    this.addChild(bg);

    无限循环滚动背景

    第一步:让背景图动起来。
    第二步:让背景层重复加载一遍。
    第三步:在update函数中判断背景层移动的情况,当背景层移动了一个图片长度的时候,让背景层位置重置一下,如此反复成循环。代码示例:
    var UnlimitedParallaxLayer = cc.Layer.extend({
    
        _bg1:null,
        _bg2:null,
        _bg3:null,
        _bg4:null,
    
        speed:5,
    
        ctor:function () {
            this._super();
            this.scheduleUpdate();
    
            var buildParallaxBackground = function(texture){
                var layer = new cc.Layer();
                var bg1 = new cc.Sprite(texture);
                bg1.x = bg1.width/2;
                bg1.y = bg1.height/2;
                layer.addChild(bg1);
                var bg2 = new cc.Sprite(texture);
                bg2.x = bg2.width/2 + bg2.width;
                bg2.y = bg2.height/2;
                layer.addChild(bg2);
                return layer;
            };
    
            //sky
            this._bg1 = buildParallaxBackground("res/bgLayer.jpg");
            this.addChild(this._bg1);
            //hill
            this._bg2 = buildParallaxBackground("res/bgLayer2.png");
            this.addChild(this._bg2);
            //buildings
            this._bg3 = buildParallaxBackground("res/bgLayer3.png");
            this.addChild(this._bg3);
            //trees
            this._bg4 = buildParallaxBackground("res/bgLayer4.png");
            this.addChild(this._bg4);
    
            return true;
        },
    
        update:function(dt) {
            var winSize = cc.director.getWinSize();
            this._bg1.x -= Math.ceil(this.speed * 0.1);
            if (this._bg1.x < -parseInt(winSize.width))
                this._bg1.x = 0;
    
            this._bg2.x -= Math.ceil(this.speed * 0.3);
            if (this._bg2.x < -parseInt(winSize.width))
                this._bg2.x = 0;
    
            this._bg3.x -= Math.ceil(this.speed * 0.5);
            if (this._bg3.x < -parseInt(winSize.width))
                this._bg3.x = 0;
    
            this._bg4.x -= Math.ceil(this.speed * 1);
            if (this._bg4.x < -parseInt(winSize.width))
                this._bg4.x = 0;
        }
    });


    第十三章 位图文字

    制作位图字体

    第一步:使用BMfont制作位图字体。
    第二步:挑选字符,选择字体(options>font settings),设置3项属性(font或add font file,size,bold)。
    第三步:选择导出格式(options>font settings),设置Bit depth:32,preset:white text……,Font descriptor:Text.
    第四步:导出位图字体文件(options> save bitmap font as),保存后生成1个fnt文件和一个png文件。

    将图片保存为位图字体

    第一步:Edit>open image manger>image>import image,在ID框中输入字符的ASCⅡ。相应的ASCⅡ码可以度娘一下。

    第二步:设置导出选项,presets>custom,RGB都设成one,A设成gkyph.

    第三步:options > save bitmap font as,导出字体文件。

    代码示例:

    var bmFont1 = new cc.LabelBMFont("I am Kenko.", "res/font.fnt", 500, cc.TEXT_ALIGNMENT_CENTER);
    bmFont1.color = cc.color(255, 0, 0);
    this.addChild(bmFont1);
    LabelBMFont类的5个参数
    1.str,需要显示的字符串。2.fntFile,fnt文件的url,3.width,整个label的宽度。4.alignment,对齐方式cc.TEXT_ALIGNMENT_CENTER、cc.TEXT_ALIGNMENT_LEFT、
    cc.TEXT_ALIGNMENT_RIGHT。5.imageoffset,每个字符的偏移值。

    第十四章 粒子系统

    新建一个粒子系统类:

    var particleSystem = new cc.ParticleSystem(100);
    this.addChild(particleSystem);
    particleSystem.texture = cc.textureCache.addImage("res/star.png");
    //属性
    var size = cc.director.getWinSize();
    particleSystem.x = size.width / 2;
    particleSystem.y = size.height / 2;
    particleSystem.positionType = free;//粒子位置类型,有自由模式(free),相对模式(relative),打组模式(grouped)三种。
    particleSystem.posVar = cc.p(0, 0);//发射器位置的变化范围
    sourcePosition;//发射器原始坐标位置
    
    particleSystem.duration = cc.ParticleSystem.DURATION_INFINITY;//发射器生存时间
    particleSystem.emitterMode = cc.ParticleSystem.MODE_RADIUS;//发射器模式,有重力模式(MODE_GRAVITY)和半径模式(MODE_RADIUS)两种
    /*重力模式用于模拟重力,参数如下:
    gravity重力X,radiaAccel:粒子径向加速度,radiaAccelVar:粒子径向(平行重力方向)加速度变化范围,speed:速度,speedVar:速度变化范围,tangentialAccel:粒子切向(垂直重力方向)加速度,tangentialAccelVar:粒子切向(垂直重力方向)加速度变化范围。*/
    //半径模式可以使粒子做环形旋转,也可以创造出螺旋效果,参数如下:
    particleSystem.startRadius = 0;
    particleSystem.startRadiusVar = 30;
    particleSystem.endRadius = 240;
    particleSystem.endRadiusVar = 30;
    
    particleSystem.rotatePerS = 180;
    particleSystem.rotatePerSVar = 0;
    //半径模式结束
    
    particleSystem.angle = 90;//角度属性,粒子角度
    particleSystem.angleVar = 0;//粒子角度变化范围
    
    particleSystem.life = 10;//生命属性,生存时间
    particleSystem.lifeVar = 0;//生命时间变化范围
    
    particleSystem.startSpin = 0;//自旋属性,粒子开始的自旋角度
    particleSystem.startSpinVar = 0;//粒子开始的自旋角度变化范围
    particleSystem.endSpin = 0;//粒子结束的自旋角度
    particleSystem.endSpinVar = 0;//粒子结束的自旋角度变化范围
    
    
    particleSystem.startColor = cc.color(128, 128, 128, 255);//颜色属性,粒子初始颜色
    particleSystem.startColorVar = cc.color(128, 128, 128, 255);//颜色属性,粒子初始颜色变化范围
    particleSystem.endColor = cc.color(128, 128, 128, 50);//粒子结束颜色
    particleSystem.endColorVar = cc.color(26, 26, 26, 50);//粒子结束颜色变化范围
    
    particleSystem.startSize = 32;//大小属性,粒子初始大小
    particleSystem.startSizeVar = 0;//粒子初始大小变化范围
    particleSystem.endSize = cc.ParticleSystem.START_SIZE_EQUAL_TO_END_SIZE;//粒子结束大小,-1表示和初始大小一样
    particleSystem.endSizeVar = 0;//粒子结束大小变化范围
    
    
    particleSystem.emissionRate = particleSystem.totalParticles / particleSystem.life;//每秒喷发的粒子数,totalParticles场景中最大粒子数
    particleSystem.isAutoRemoveOnFinish = true;//粒子数结束的时候是否自动删除

    cocos2d封装好的效果

    1.烟花

    var particleSystem = new cc.ParticleFireworks();
    particleSystem.texture = cc.textureCache.addImage("res/firework.png");

    2.火焰

    var particleSystem = new cc.ParticleFire();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    3.太阳

    var particleSystem = new cc.ParticleSun();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    4.银河

    var particleSystem = new cc.ParticleGalaxy();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    5.花

    var particleSystem = new cc.ParticleFlower();
    particleSystem.texture = cc.textureCache.addImage("res/firework.png");
    6.雪

    var particleSystem = new cc.ParticleSnow();
    particleSystem.texture = cc.textureCache.addImage("res/snow.png");
    7.雨

    var particleSystem = new cc.ParticleRain();
    particleSystem.texture = cc.textureCache.addImage("res/snow.png");
    8.流星

    var particleSystem = new cc.ParticleMeteor();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    9.烟

    var particleSystem = new cc.ParticleSmoke();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    10.螺旋

    var particleSystem = new cc.ParticleSpiral();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    11.爆炸
    var particleSystem = new cc.ParticleExplosion();
    particleSystem.texture = cc.textureCache.addImage("res/firework.png");

    粒子系统可视化编辑器

    ParticleEditor在线编辑地址:http://onebyonedesign.com/flash/particleeditor/

    导出效果时,必须勾选Include .PLIST file选项,单后点Export particle,导出文件里只有.png和.plist文件有用。在代码中加载:

    var particleSystem = new cc.ParticleSystem("res/particle.plist");
    this.addChild(particleSystem);
    particleSystem.duration = 3;

    停止和销毁

    停止:

    ParticleSystem.stopSystem();

    this.removeChild(ParticleSystem);

    自动销毁:

    ParticleSystem.setAutoRemoveOnFinish(true);

    第十九章 事件机制

    阻止事件传递

    cocos2d事件触发顺序:子节点优先于父节点,上层节点优先于下层节点。

    阻止事件冒泡,让同一个事件的后续监听器都失效:event.stopPropagation();

    自定义事件

    cc.eventManager.addCustomListener("myEvent", function (event){});//添加自定义事件监听
    cc.eventManager.dispatchCustomEvent("myEvent", data);//派发事件data是该event携带的数据,我们可以自定义数据,在监听函数中用event.getUserData()方法获取。
    cc.eventManager.removeCustomListeners("eventName");//取消订阅

    第二十章 屏幕尺寸适配

    cc.view.setDesignResolutionSize(720, 1280, cc.ResolutionPolicy.SHOW_ALL);//根据屏幕尺寸等比例缩放。
    展开全文
  • cocos2d-js项目全过程

    2018-03-13 15:06:01
    命令新建项目: cocos new -l js projectname运行项目:cocos run -p web项目打包:cocos compile -p web -m release字典Scene:场景,pushScene,加载或切换场景但不销毁上一个场景。popScene,销毁当前场景,回到上...

    命令

    新建项目: cocos new -l js projectname

    运行项目:cocos run -p web

    项目打包:cocos compile -p web -m release


    字典

    Scene:场景,pushScene,加载或切换场景但不销毁上一个场景。popScene,销毁当前场景,回到上一个场景。

    Director:导演,cc.director.runScene,这个函数用来加载或切换场景。cc.director.getWinSize():获取窗口尺寸。cc.director.getVisibleSize(),获取窗口实际尺寸。cc.director.getScheduler(),获取全局定时器。pause/resume:暂停,恢复场景。

    Node:节点

    scheduleUpdate():通知当前节点

    Layer:层

    Sprite:精灵

    cc:cc是一个JS对象,把各种cocos2d-js的原生类都封装到这个命名空间里,extend()函数接受一个对象作为参数。

    addChild():增加子节点。

    removeChild():移除子节点。

    ctor:类的构造函数

    _super():继承父类方法,调用父类同名函数。

    anchor:锚点,anchorX和anchorY默认值都是0.5,锚点坐标原点位于左下角。

    bind():bind方法返回一个新的function,这个function执行的时候this将固定指向bind的第一个参数。


    其他

    CCTransition.js记录了所有切换效果,第一个参数代表切换时间,单位S。

    第四章

    基本动作

    moveTo和moveBy

    moveTo(2,cc.p(100,100)):2代表2秒,后两个参数代表终点坐标。

    moveBy()

    缩放scaleTo和scaleBy

    cc.scaleTo(1,2,4);1代表1秒,2代表横向比例,4代表纵向比例。缩放比例为负数是可以让精灵做水平/垂直翻转。scaleBy是在当前缩放比例基础上再乘以一个比例,而scaleTo是从原图尺寸缩放。

    淡入淡出fadeTo,fadeIn,fadeOut

    fadeIn(2),fadeOut(2),2代表消失/出现时间。fadeTo(2.255)改变透明度,2代表时间,0-255代表透明度,255代表完全不透明。

    闪烁blink

    cc.blink(2,10)让精灵2秒钟闪烁10次。

    改变颜色通道tintTo

    cc.tintTo(2,100,0,0),时间,红通道,绿通道,蓝通道,就是让原来RGB颜色的数值乘以括号内的数值再除以255。

    组合动作

    1.顺序cc.sequence(action1,action2,…);

    2.重复cc.repeat(action,times);第一个参数代表动作,第二个代表重复次数。

    3.无限重复cc.repeatForover(action),让某个动作无线重复。

    4.同时执行cc.spawn(action1,action2,…);

    5.反向:cc.reverse(action);返回一个新动作。cc.reverseTime(action);只能处理有限长度的动作。

    运动轨迹

    action.easing(easeObject);easing方法,用来设置该动作执行过程中采用哪种缓动方式。参数在CCActionEase.js里。

    控制动作

    1.开始/停止动作
    node.runAction(action);
    node.stopActionByTag(tag);tag是预先设置给action的标记,例如action.tag = 123;
    node.stopAllAction(action);
    2.暂停/恢复动作

    node.pause();

    node.resume();

    全局暂停:

    cc.director.pause();

    cc.director.resume();

    监听动作开始与结束:

    var callback = cc.callFunc(function,target,data);

    cc.sequence(action, callback);

    第一个参数代表函数名,第二个参数代表函数最后被调用时的目标对象,第三个参数是附加的数据。

    如果我们串联了多个动作,可以在每个动作之间都放置一个监听函数,

    cc.sequence(action1, cc.callFunc(function1),action2, cc.callFunc(function2),action3);

    播放声音

    1.背景音乐

    cc.audioEngine.playMusic("res/sounds/bg.mp3",true);第二个参数代表是否重复播放。

    cc.audioEngine.stopMusic();停止播放

    cc.audioEngine.setMusicVolume(0);静音,参数为1时恢复音量。

    2.音效

    cc.audioEngine.playEffect("res/sounds/bg.mp3",true);第二个参数代表是否重复播放。

    cc.audioEngine.stopEffect(effect);停止播放

    cc.audioEngine.stopAllEffects();关闭全部音效

    cc.audioEngine.setEffectsVolume(0);静音,参数为1时恢复音量。

    事件绑定

    1.鼠标事件

    if( 'mouse' in cc.sys.capabilities ) {
        cc.eventManager.addListener({
            event: cc.EventListener.MOUSE,
            onMouseDown: function(event){
                var pos = event.getLocation();
                var target = event.getCurrentTarget();
                if(event.getButton() === cc.EventMouse.BUTTON_RIGHT)
                    trace("onRightMouseDown at: " + pos.x + " " + pos.y );
                else if(event.getButton() === cc.EventMouse.BUTTON_LEFT)
                    trace("onLeftMouseDown at: " + pos.x + " " + pos.y );
            },
            onMouseMove: function(event){
                var pos = event.getLocation(), target = event.getCurrentTarget();
                trace("onMouseMove at: " + pos.x + " " + pos.y );
            },
            onMouseUp: function(event){
                var pos = event.getLocation(), target = event.getCurrentTarget();
                trace("onMouseUp at: " + pos.x + " " + pos.y );
            }
        }, this);
    } else {
        trace("MOUSE Not supported");
    }

    第一个参数代表监听信息,第二个代表监听的节点,'mouse' in cc.sys.capabilities ,判断运行环境。

    event对象的方法:

    1.event.getLocation();获取鼠标事件发生的坐标。

    2.event.getLocationX();event.getLocationY();X/Y坐标。

    3.event.getCurrentTarget();获取触发事件的对象,就是node,

    4.event.getButton();判断鼠标左右键。

    5.event.getDelta();获取鼠标移动偏移值。

    6.event.getDeltaX();event.getDeltaY();获取鼠标偏移的X值或Y值。

    2.触摸事件

    1.单点触摸

    if( 'touches' in cc.sys.capabilities ) {
        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
            onTouchBegan: function(touch,event){},
            onTouchMoved: function(touch,event){},
            onTouchEnded: function(touch,event){},
            onTouchCancelled: function(touch,event){}
        }, this);
    } else {
        trace("TOUCH-ONE-BY-ONE test is not supported on desktop");
    }
    touch参数封装了触摸事件专有的数据,onTouchEnded和onTouchCancelled可以等同处理。

    touch参数有待查询API。

    2.多点触摸

    if( 'touches' in cc.sys.capabilities ) {
        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
            onTouchBegan: function(event){},
            onTouchMoved: function(event){},
            onTouchEnded: function(event){},
            onTouchCancelled: this.onTouchCancelled
        }, this);
    } else {
        trace("TOUCH-ONE-BY-ONE test is not supported on desktop");
    }
    touches参数是一个数组,每个数组元素

    3.键盘事件

    if( 'keyboard' in cc.sys.capabilities ) {
        cc.eventManager.addListener({
            event: cc.EventListener.KEYBOARD,
            onKeyReleased: function(keyCode, event) {
                if (keyCode == cc.KEY.back) {
                    cc.log("return button clicked. keycode:" + keyCode);
                    cc.director.end();
                }
                else if (keyCode == cc.KEY.menu) {
                    cc.log("menu button clicked. keycode:" + keyCode);
                }
            }
        }, this);
    } else {
        cc.log("KEYBOARD Not supported");
    }
    keyCode是一个数字,API在CCCommon.js里,

    4.重力感应事件

    if( 'accelerometer' in cc.sys.capabilities ) {
        cc.inputManager.setAccelerometerInterval(1/30);
        cc.inputManager.setAccelerometerEnabled(true);
        cc.eventManager.addListener({
            event: cc.EventListener.ACCELERATION,
            callback: function(accelerometerInfo, event){
                var target = event.getCurrentTarget();
                cc.log('Accel x: '+ accelerometerInfo.x + ' y:' + accelerometerInfo.y + ' z:' + accelerometerInfo.z + ' time:' + accelerometerInfo.timestamp );
    
                var w = winSize.width;
                var h = winSize.height;
    
                var x = w * accelerometerInfo.x + w/2;
                var y = h * accelerometerInfo.y + h/2;
    
                x = x*0.2 + target.prevX*0.8;       //使小球慢慢移动到目标位置
                y = y*0.2 + target.prevY*0.8;
    
                target.prevX = x;
                target.prevY = y;
                target.sprite.x = x;
                target.sprite.y = y ;
            }
        }, this);
    
        var sprite = this.sprite = new cc.Sprite("res/item_2.png");
        this.addChild( sprite );
        sprite.x = winSize.width/2;
        sprite.y = winSize.height/2;
    
        this.prevX = 0;
        this.prevY = 0;
    } else {
        cc.log("ACCELEROMETER not supported");
    }
    setAccelerometerInterval函数设置重力感应频率。

    5.进入后台,恢复显示事件

    进入后台
    cc.eventManager.addCustomListener(cc.game.EVENT_HIDE,function(){
    //游戏进入后台
    });
    恢复显示
    cc.eventManager.addCustomListener(cc.game.EVENT_SHOW,function(){
    //游戏恢复显示
    });

    第六章  定时器

    1.scheduleOnce取代setTimeout
    node.scheduleOnce(callback,delay);scheduleOnce只能依赖节点触发

    2.schedule取代setInterval

    node.schedule(callback,interval,repeat,delay);
    interval是每次触发的间隔,以秒为单位,repeat是重复次数,delay是第一次触发前的延迟时间,以秒为单位。如果希望无限循环,省略后两个参数即可,也可以把repeat设置为cc.REPEAT_FOREVER。
    3.取消定时器

    取消scheduleUpdate使用node.unscheduleUpdate();

    取消scheduleOnce和schedule使用node.unschedule(callback);

    4.暂停/恢复定时器

    node.pause();//暂停定时器

    node.resume();//恢复计时器

    5.定时器的误差

    由于schedule的实现基于帧频,当帧频降低时,误差会越来越大,所以schedule只能用于动画控制,不能用于逻辑处理。

    6.解决误差

    ctor: function () {
        this._super();
    
        var startTime = Date.now();
        var count = 0;
        this.schedule2(function(){
            var timePass = Date.now() - startTime;
            count++;
            var delta = timePass - (count*100);
            trace("time pass", timePass, "total delta", delta, "count", count);
        }, 0.1);
        this.scheduleUpdate();
    },
    
    schedule2: function (callback, interval) {
        var then = Date.now();
        interval = interval*1000;
        this.schedule(function(){
            var now = Date.now();
            var delta = now - then;
            if(delta > interval){
                then = now - (delta % interval);
                callback.call(this);
            }
        }.bind(this), 0);
    },
    
    update: function () {
        for (var i = 0; i < 10000000; i++) {
            b = 1/0.22222;
        }
    }

    第七章 游戏界面

    1.原生组件--按钮

    cocos2d-js中共有4种按钮MenuItemSprite、MenuItemImage、MenuItemFont、MenuItemLabel,
    1.MenuItemSprite具有按钮的最基本功能,即点击后的回调,用法:

    var menuSprite = new cc.MenuItemSprite(spriteNormal, spriteSelected, spriteDisable, clickHandler,target);
    spriteNormal表示正常态的效果,spriteSelected表示按下时的效果,spriteDisable表示禁用时的效果,clickHandler是点击的回调函数,target是作用于clickHandler的target对象。spriteDisable和target可以缺省。

    禁用按钮:menuSprite.setEnabled(false);false代表禁用,true代表可以使用。

    2.MenuItemImage继承自MenuItemSprite,区别是不用新建spirit,可以在参数中直接写图片路径。

    var menuImage = new cc.MenuItemImage("res/startgame.png", "res/startgame2.png", "res/startgame3.png", this.startGame, this);

    3.MenuItemFont用于制作文字按钮

    var menuFont = new cc.MenuItemFont(text, clickHandle, target);

    4.MenuItemLabel可以使用TTF文字或位图文字

    //TTF文字

    var label = new cc.LabelTTF("START GAME", "Arial", 32);
    var item = new cc.MenuItemLabel(label, this.startGame, this);


    //位图文字

    var label = new cc.LabelBMFont("START GAME", "res/font.fnt");

     var item = new cc.MenuItemLabel(label, this.startGame, this);

    5.开关按钮

    var on = new cc.MenuItemFont("ON");
    var off = new cc.MenuItemFont("OFF");
    var item = new cc.MenuItemToggle(off, on, callback, target);

    2.原生组件--菜单

    cc.MenuItemFont.setFontName("Arial");
    cc.MenuItemFont.setFontSize(24);
    var one = new cc.MenuItemFont("one", this.clickHandler);
    var two = new cc.MenuItemFont("two", this.clickHandler);
    var three = new cc.MenuItemFont("three", this.clickHandler);
    var four = new cc.MenuItemFont("four", this.clickHandler);
    var five = new cc.MenuItemFont("five", this.clickHandler);
    var six = new cc.MenuItemFont("six", this.clickHandler);
    var menu = new cc.Menu(one, two, three, four, five, six);

    menu.alignItemsVertically();//纵向排列

    menu.alignItemsHorizontally();//横向排列

    menu.alignItemsHorizontallyWithPadding(20);//横向间距

    menu.alignItemsVerticallyWithPadding(20);//纵向间距

    2.原生组件--文本

    new cc.LabelTTF(text, font, fontSize, labelsize, halign, valign);

    LabelTTF.color= cc.color(255,0,0);

    第八章 实战

    >遮罩节点

    利用遮罩我们可以让指定范围内的内容显示,超出范围的内容隐藏。首先我们需要添加内容到遮罩节点上,然后再给遮罩节点指定一个裁剪的模板。

    >绘制节点
    var stencil = new cc.DrawNode();
    stencil.drawRect(cc.p(this.mapPanel.x,this.mapPanel.y), cc.p(this.mapPanel.x+Constant.CANDY_WIDTH*Constant.MAP_SIZE,this.mapPanel.y+Constant.CANDY_WIDTH*Constant.MAP_SIZE),cc.color(0,0,0), 1, cc.color(0,0,0));

    >本地存储

    cc.sys.localStorage.setItem(key,value);
    cc.sys.localStorage.getItem(key);


    第九章 打包上传

    cocos compile-p web-m release
    >如何压缩项目的体积?
    打开项目目录中的frameworks/cocos-2d-html5/moduleConfig.json,可以看到全部预定义的模块选项,我们把project.json中的modules改为我们使用到的模块,然后再打包上传。

    第十章 简单的性能优化

    1.雪碧图

    下载安装TextturePacker,设置游戏引擎和图片比例(scale),然后点击publish导出,导出的spiritsheet将生成2个文件:plist和png。
    把spiritsheet加载到游戏里,

    cc.spriteFrameCache.addSpriteFrames("res/candy.plist");

    var ball = new cc.Sprite("#1.png");

    使用小图时调用“#精灵帧名字”,精灵帧名字就是原来小图的文件名。

    2.spriite批处理

    SpriteBatchNode的用法和普通精灵类似:
    var batchNode = new cc.SpriteBatchNode("res/candy.png");

    3.缓存池

    把重复使用的精灵回收到缓存池中,在下次创建精灵时重复使用,可以节约硬件消耗。使用步骤:
    1.建立一个可回收的类,该类中必须有reuse和unuse方法,从cc.pool中取出实例的时候调用reuse方法把该实例重新初始化,而该实例从舞台删除放回到cc.pool的时候调用unuse方法。其中reuse方法可以接受若干参数,跟getFromPool对应。
            2.判断cc.pool中是否有某个类的实例:
    [html] view plain copy
    1. cc.pool.hasObject(TargetClass)  
    [html] view plain copy
    1. cc.pool.hasObject(TargetClass)  
    如果有,则使用cc.pool.getFromPool(TargetClass, args)获取实例,在getFromPool中会调用实例reuse方法,传递的就是args,所以args参数的数目要跟reuse方法对应。如果没有,则需要使用new方法创建新的TargetClass实例。
            3.当时用完某个类的实例时,把该实例放入cc.pool中:
    cc.pool.putInPool(TargetClass);

            代码示例:


    if(cc.pool.hasObject(ReuseSprite)){
        ball = cc.pool.getFromPool(ReuseSprite, param);
    } else {
        ball = new ReuseSprite("#" + (parseInt(Math.random() * 5) + 1) + ".png");
    }


    4.位图缓存

    Layer的bake方法可以后续每帧的重绘只需要把这个位图绘制到画布上即可,不需要遍历全部子节点。如果要解除位图缓存,可以调用unbake方法。代码示例:

    layer.bake();layer.unbake();



    第十一章 动画效果

    帧动画:Animation类


    var animation = new cc.Animation(frames,delay,loops);

    for (var i = 0; i < N; i++) {
        animation.addSpriteFrameWithFile(files[i]);
        //animation.addSpriteFrame(cc.spriteFrameCache.getSpriteFrame("file.png"););




    }
    //files是一个数组,包含每一帧的图片
    animation.setDelayPerUnit(1/14);
    animation.setLoops(5);
    var action = cc.animate(animation);
    action.repeatForever();//使用无限循环后,原来的loops设置就会失效
    sprite.runAction(action);


    第十二章 动态背景

    视差滚动背景

            在cocos2d-js中,使用ParallaxNode类实现视差滚动背景,ParallaxNode继承了node,使用方式跟node类似,我们可以通过ParallaxNode的addChild方法,添加多个远近不同的背景层,并设置每个背景层的移动速度比例。缺点:不能循环滚动。代码示例:

    var bg = new cc.ParallaxNode();
    var bg1 = new cc.Sprite("res/bgLayer.jpg");
    var bg2 = new cc.Sprite("res/bgLayer2.png");
    var bg3 = new cc.Sprite("res/bgLayer3.png");
    var bg4 = new cc.Sprite("res/bgLayer4.png");
    bg.addChild(bg1, 1, cc.p(0.1, 0), cc.p(bg1.width/2, bg1.height/2));
    bg.addChild(bg2, 2, cc.p(0.3, 0), cc.p(bg2.width/2, bg2.height/2));
    bg.addChild(bg3, 3, cc.p(0.5, 0), cc.p(bg3.width/2, bg3.height/2));
    bg.addChild(bg4, 4, cc.p(1, 0), cc.p(bg4.width/2, bg4.height/2));
    var action = cc.moveBy(1, -200, 0);
    bg.runAction(cc.sequence(action, action.clone().reverse()).repeatForever());
    this.addChild(bg);

    无限循环滚动背景

    第一步:让背景图动起来。
    第二步:让背景层重复加载一遍。
    第三步:在update函数中判断背景层移动的情况,当背景层移动了一个图片长度的时候,让背景层位置重置一下,如此反复成循环。代码示例:
    var UnlimitedParallaxLayer = cc.Layer.extend({
    
        _bg1:null,
        _bg2:null,
        _bg3:null,
        _bg4:null,
    
        speed:5,
    
        ctor:function () {
            this._super();
            this.scheduleUpdate();
    
            var buildParallaxBackground = function(texture){
                var layer = new cc.Layer();
                var bg1 = new cc.Sprite(texture);
                bg1.x = bg1.width/2;
                bg1.y = bg1.height/2;
                layer.addChild(bg1);
                var bg2 = new cc.Sprite(texture);
                bg2.x = bg2.width/2 + bg2.width;
                bg2.y = bg2.height/2;
                layer.addChild(bg2);
                return layer;
            };
    
            //sky
            this._bg1 = buildParallaxBackground("res/bgLayer.jpg");
            this.addChild(this._bg1);
            //hill
            this._bg2 = buildParallaxBackground("res/bgLayer2.png");
            this.addChild(this._bg2);
            //buildings
            this._bg3 = buildParallaxBackground("res/bgLayer3.png");
            this.addChild(this._bg3);
            //trees
            this._bg4 = buildParallaxBackground("res/bgLayer4.png");
            this.addChild(this._bg4);
    
            return true;
        },
    
        update:function(dt) {
            var winSize = cc.director.getWinSize();
            this._bg1.x -= Math.ceil(this.speed * 0.1);
            if (this._bg1.x < -parseInt(winSize.width))
                this._bg1.x = 0;
    
            this._bg2.x -= Math.ceil(this.speed * 0.3);
            if (this._bg2.x < -parseInt(winSize.width))
                this._bg2.x = 0;
    
            this._bg3.x -= Math.ceil(this.speed * 0.5);
            if (this._bg3.x < -parseInt(winSize.width))
                this._bg3.x = 0;
    
            this._bg4.x -= Math.ceil(this.speed * 1);
            if (this._bg4.x < -parseInt(winSize.width))
                this._bg4.x = 0;
        }
    });


    第十三章 位图文字

    制作位图字体

    第一步:使用BMfont制作位图字体。
    第二步:挑选字符,选择字体(options>font settings),设置3项属性(font或add font file,size,bold)。
    第三步:选择导出格式(options>font settings),设置Bit depth:32,preset:white text……,Font descriptor:Text.
    第四步:导出位图字体文件(options> save bitmap font as),保存后生成1个fnt文件和一个png文件。

    将图片保存为位图字体

    第一步:Edit>open image manger>image>import image,在ID框中输入字符的ASCⅡ。相应的ASCⅡ码可以度娘一下。

    第二步:设置导出选项,presets>custom,RGB都设成one,A设成gkyph.

    第三步:options > save bitmap font as,导出字体文件。

    代码示例:

    var bmFont1 = new cc.LabelBMFont("I am Kenko.", "res/font.fnt", 500, cc.TEXT_ALIGNMENT_CENTER);
    bmFont1.color = cc.color(255, 0, 0);
    this.addChild(bmFont1);
    LabelBMFont类的5个参数
    1.str,需要显示的字符串。2.fntFile,fnt文件的url,3.width,整个label的宽度。4.alignment,对齐方式cc.TEXT_ALIGNMENT_CENTER、cc.TEXT_ALIGNMENT_LEFT、
    cc.TEXT_ALIGNMENT_RIGHT。5.imageoffset,每个字符的偏移值。

    第十四章 粒子系统

    新建一个粒子系统类:

    var particleSystem = new cc.ParticleSystem(100);
    this.addChild(particleSystem);
    particleSystem.texture = cc.textureCache.addImage("res/star.png");
    //属性
    var size = cc.director.getWinSize();
    particleSystem.x = size.width / 2;
    particleSystem.y = size.height / 2;
    particleSystem.positionType = free;//粒子位置类型,有自由模式(free),相对模式(relative),打组模式(grouped)三种。
    particleSystem.posVar = cc.p(0, 0);//发射器位置的变化范围
    sourcePosition;//发射器原始坐标位置
    
    particleSystem.duration = cc.ParticleSystem.DURATION_INFINITY;//发射器生存时间
    particleSystem.emitterMode = cc.ParticleSystem.MODE_RADIUS;//发射器模式,有重力模式(MODE_GRAVITY)和半径模式(MODE_RADIUS)两种
    /*重力模式用于模拟重力,参数如下:
    gravity重力X,radiaAccel:粒子径向加速度,radiaAccelVar:粒子径向(平行重力方向)加速度变化范围,speed:速度,speedVar:速度变化范围,tangentialAccel:粒子切向(垂直重力方向)加速度,tangentialAccelVar:粒子切向(垂直重力方向)加速度变化范围。*/
    //半径模式可以使粒子做环形旋转,也可以创造出螺旋效果,参数如下:
    particleSystem.startRadius = 0;
    particleSystem.startRadiusVar = 30;
    particleSystem.endRadius = 240;
    particleSystem.endRadiusVar = 30;
    
    particleSystem.rotatePerS = 180;
    particleSystem.rotatePerSVar = 0;
    //半径模式结束
    
    particleSystem.angle = 90;//角度属性,粒子角度
    particleSystem.angleVar = 0;//粒子角度变化范围
    
    particleSystem.life = 10;//生命属性,生存时间
    particleSystem.lifeVar = 0;//生命时间变化范围
    
    particleSystem.startSpin = 0;//自旋属性,粒子开始的自旋角度
    particleSystem.startSpinVar = 0;//粒子开始的自旋角度变化范围
    particleSystem.endSpin = 0;//粒子结束的自旋角度
    particleSystem.endSpinVar = 0;//粒子结束的自旋角度变化范围
    
    
    particleSystem.startColor = cc.color(128, 128, 128, 255);//颜色属性,粒子初始颜色
    particleSystem.startColorVar = cc.color(128, 128, 128, 255);//颜色属性,粒子初始颜色变化范围
    particleSystem.endColor = cc.color(128, 128, 128, 50);//粒子结束颜色
    particleSystem.endColorVar = cc.color(26, 26, 26, 50);//粒子结束颜色变化范围
    
    particleSystem.startSize = 32;//大小属性,粒子初始大小
    particleSystem.startSizeVar = 0;//粒子初始大小变化范围
    particleSystem.endSize = cc.ParticleSystem.START_SIZE_EQUAL_TO_END_SIZE;//粒子结束大小,-1表示和初始大小一样
    particleSystem.endSizeVar = 0;//粒子结束大小变化范围
    
    
    particleSystem.emissionRate = particleSystem.totalParticles / particleSystem.life;//每秒喷发的粒子数,totalParticles场景中最大粒子数
    particleSystem.isAutoRemoveOnFinish = true;//粒子数结束的时候是否自动删除

    cocos2d封装好的效果

    1.烟花

    var particleSystem = new cc.ParticleFireworks();
    particleSystem.texture = cc.textureCache.addImage("res/firework.png");

    2.火焰

    var particleSystem = new cc.ParticleFire();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    3.太阳

    var particleSystem = new cc.ParticleSun();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    4.银河

    var particleSystem = new cc.ParticleGalaxy();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    5.花

    var particleSystem = new cc.ParticleFlower();
    particleSystem.texture = cc.textureCache.addImage("res/firework.png");
    6.雪

    var particleSystem = new cc.ParticleSnow();
    particleSystem.texture = cc.textureCache.addImage("res/snow.png");
    7.雨

    var particleSystem = new cc.ParticleRain();
    particleSystem.texture = cc.textureCache.addImage("res/snow.png");
    8.流星

    var particleSystem = new cc.ParticleMeteor();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    9.烟

    var particleSystem = new cc.ParticleSmoke();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    10.螺旋

    var particleSystem = new cc.ParticleSpiral();
    particleSystem.texture = cc.textureCache.addImage("res/fire.png");
    11.爆炸
    var particleSystem = new cc.ParticleExplosion();
    particleSystem.texture = cc.textureCache.addImage("res/firework.png");

    粒子系统可视化编辑器

    ParticleEditor在线编辑地址:http://onebyonedesign.com/flash/particleeditor/

    导出效果时,必须勾选Include .PLIST file选项,单后点Export particle,导出文件里只有.png和.plist文件有用。在代码中加载:

    var particleSystem = new cc.ParticleSystem("res/particle.plist");
    this.addChild(particleSystem);
    particleSystem.duration = 3;

    停止和销毁

    停止:

    ParticleSystem.stopSystem();

    this.removeChild(ParticleSystem);

    自动销毁:

    ParticleSystem.setAutoRemoveOnFinish(true);

    第十九章 事件机制

    阻止事件传递

    cocos2d事件触发顺序:子节点优先于父节点,上层节点优先于下层节点。

    阻止事件冒泡,让同一个事件的后续监听器都失效:event.stopPropagation();

    自定义事件

    cc.eventManager.addCustomListener("myEvent", function (event){});//添加自定义事件监听
    cc.eventManager.dispatchCustomEvent("myEvent", data);//派发事件data是该event携带的数据,我们可以自定义数据,在监听函数中用event.getUserData()方法获取。
    cc.eventManager.removeCustomListeners("eventName");//取消订阅

    第二十章 屏幕尺寸适配

    cc.view.setDesignResolutionSize(720, 1280, cc.ResolutionPolicy.SHOW_ALL);//根据屏幕尺寸等比例缩放。




    该文章转载至http://blog.csdn.net/w_han__/article/details/54581698#t7

    适合查看使用

    展开全文
  • cocos2d 像素格式

    2012-05-02 15:35:04
    纹理的像素格式 的图像存储在GPU内存的方式。 可能的像素格式: ...RGBA8888(32位)(kTexture2DPixelFormat_RGBA8888) ...RGBA4444(16位)(kTexture2DPixelFormat_RGBA4444) ...RGB5_A1(16位)(kTexture2...

    纹理的像素格式 的图像存储在GPU内存的方式。

    可能的像素格式:

    • RGBA8888(32位)(kTexture2DPixelFormat_RGBA8888)
    • RGBA4444(16位)(kTexture2DPixelFormat_RGBA4444)
    • RGB5_A1(16位)(kTexture2DPixelFormat_RGB5A1)
    • RGB565(16位)(kTexture2DPixelFormat_RGB565)

    RGBA8888:

    • 8位分配给红色通道, 绿色通道,8蓝色通道和8位alpha 通道8
    • 使用此像素格式,当您需要最大可能为您的图像质量
    • 但它会占用的内存比16位的纹理双。记忆是一种宝贵的资源,在iPhone上
    • 通常它是呈现也比较慢。
    • 有用:您介绍的场景的背景图像,并为大量的渐变颜色的图像

    RGBA4444

    • 4位被分配到的红色通道, 绿色通道,蓝色通道44alpha通道4
    • 它可以让你在所有渠道,良好的速度,良好的内存消耗,质量好。
    • 有用的: 有不同的透明度值的精灵

    RGB5A1

    • 5位被分配到的红色通道, 绿色通道,蓝色通道5只有1位alpha 通道5
    • 它可以让你在RGB通道的质量好,但质量差的一个通道。它还为您提供良好的速度和良好的内存消耗。
    • 有用的精灵 ,有透明的部分,但在透明度上或关闭

    RGB565

    • 5位被分配到的红色通道, 绿色通道65蓝色通道。它有没有alpha通道支持
    • 它给你的16位最好的质量的纹理,但支持alpha通道。
    • 有用的:在游戏中的背景图像。

    默认的像素格式 RGBA8888。

    如何使用它:

    / /设置之前加载的图像的像素格式 / 8888 / RGBA的图像(32位 [的Texture2D setDefaultAlphaPixelForm  kTexture2DPixelFormat_RGBA8888 ] ; 雪碧* sprite1 [雪碧spriteWithFile ::“测试,rgba1.png的” ] ;   / /设置之前加载的图像的像素格式/ / RGBA的4444图像(16位)的Texture2D setDefaultAlphaPixelForm kTexture2DPixelFormat_RGBA4444 ] ; 雪碧* sprite2 [雪碧spriteWithFile “测试,rgba2.png的” ] ;   / /设置之前加载的图像的像素格式/ / RGB5A1图像(16位)的Texture2D setDefaultAlphaPixelForm kTexture2DPixelFormat_RGB5A1 ] ; 雪碧* sprite3 [雪碧spriteWithFile ::“测试,rgba3.png的” ] ;   / /设置之前加载的图像的像素格式/ / RGB565图像(16位)[的Texture2D setDefaultAlphaPixelForm  kTexture2DPixelFormat_RGB565 ] ; 雪碧* sprite4 [雪碧spriteWithFile “测试,rgba4.png的” ] ;   / /恢复默认的像素格式的Texture2D setDefaultAlphaPixelForm  kTexture2DPixelFormat_Default ] ;

    常见问题:

    • 问:我可以使用这种技术PVRTC图像?
    • 答: 没有,PVRTC图像有自己的格式。PVRTC图像的速度更快,占用更少的内存,因为他们是2位或4位的纹理,但质量是没有很大的。
    • 问:如果我用16位的纹理,将我的游戏载入速度?
    • 答: 纹理像素格式有没有做你的游戏的加载时间。像素格式是如何在GPU内存中存储的图像。如果你想更快的加载时间,你应该减少你.PNG /的GIF / TIFF / TMP图像文件的大小。
    • 问:我应该使用RGB565图像压缩由Xcode吗?
    • 答: 当XCode的PNG图像压缩,这将创建一个压缩的PNG图像有它的RGB通道,预乘alpha通道。PNG格式是RGB565,但你不应该混淆纹理像素格式为PNG格式。据了解PNG图像Photoshop和cocos2d,但GPU知道关于PNG图像。PNG图像需要转换成纹理(GPU所理解的格式)。答案是:这取决于你想要什么。图像格式(PNG,GIF TIFF,BMP)的独立的纹理格式。
    • 问:如果我创建一个PNG / BMP / TIFF / GIF等图像没有alpha通道,我可以改变纹理像素格式?
    • 答:如果您的PNG / BMP / TIFF / GIF等图像没有alpha通道(或不预乘),然后将纹理 ​​像素格式是RGB565。它不能被改变使用API,但你可以改变修改Texture2D.m文件
    • 问:我可以更改一次创建纹理的像素格式。
    • 答: 号 一旦创建纹理,你不能修改的像素格式。但是你可以同时使用不同的像素格式的图像创建新的纹理。只要记住从TextureMgr删除的形象!




    原文:

    Since cocos2d v0.7.3, you can specify the texture’s pixel format of your PNG/TIFF/BMP/GIF images.
    The texture’s pixel format is the way the image is stored in GPU memory.

    Possible pixel formats:

    • RGBA8888 (32-bit) (kTexture2DPixelFormat_RGBA8888)
    • RGBA4444 (16-bit) (kTexture2DPixelFormat_RGBA4444)
    • RGB5_A1 (16-bit)(kTexture2DPixelFormat_RGB5A1)
    • RGB565 (16-bit) (kTexture2DPixelFormat_RGB565)

    RGBA8888:

    • 8 bits are assigned to the red channel, 8 bits to the green channel, 8 bits to the bluechannel and 8 bits to the alpha channel.
    • Use this pixel format when you need the maximum possible quality for your image.
    • But it will consume the double of memory compared to 16-bit textures. Memory is a precious resource on the iPhone
    • Usually it is also slower to render.
    • Useful for: background image of your intro scene, and for images with lots of gradient colors

    RGBA4444:

    • 4 bits are assigned to the red channel, 4 bits to the green channel, 4 bits to the bluechannel, and 4 bits to the alpha channel
    • It gives you good quality in all channels, good speed, good memory consumption.
    • Useful for: sprites that have different values of transparency

    RGB5A1:

    • 5 bits are assigned to the red channel, 5 bits to the green channel, 5 bits to the bluechannel, and only 1 bit to the alpha channel
    • It gives you good quality in RGB channels but poor quality on the A channel. It also gives you good speed and good memory consumption.
    • Useful for: sprites that have transparent parts, but the transparency is either On or Off

    RGB565:

    • 5 bits are assigned to the red channel, 6 bits to the green channel, and 5 bits to the bluechannel. It has no alpha channel support
    • It gives you the best possible quality for 16-bit textures, but without alpha channel support.
    • Useful for: background images in your game.

    The default pixel format in v0.7.3 is RGBA8888.

    How to use it:

    // Set the pixel format before loading the image // RGBA 8888 image (32-bit [Texture2D setDefaultAlphaPixelFormat:kTexture2DPixelFormat_RGBA8888]; Sprite *sprite1 = [Sprite spriteWithFile:@"test-rgba1.png"];   // Set the pixel format before loading the image// RGBA 4444 image (16-bit) [Texture2D setDefaultAlphaPixelFormat:kTexture2DPixelFormat_RGBA4444]; Sprite *sprite2 = [Sprite spriteWithFile:@"test-rgba2.png"];   // Set the pixel format before loading the image // RGB5A1 image (16-bit) [Texture2D setDefaultAlphaPixelFormat:kTexture2DPixelFormat_RGB5A1]; Sprite*sprite3 = [Sprite spriteWithFile:@"test-rgba3.png"];   // Set the pixel format before loading the image // RGB565 image (16-bit) [Texture2D setDefaultAlphaPixelFormat:kTexture2DPixelFormat_RGB565]; Sprite *sprite4 = [Sprite spriteWithFile:@"test-rgba4.png"];   // restore the default pixel format [Texture2D setDefaultAlphaPixelFormat:kTexture2DPixelFormat_Default];

    FAQ:

    • Q: Can I use this technique for PVRTC images ?
    • A: No, PVRTC images have their own format. PVRTC images are faster and they consume less memory since they are either 2-bit or 4-bit textures but the quality is not that great.
    • Q: If I use 16-bit textures, will my game load faster ?
    • A: The texture pixel format has nothing to do with the loading times of your game. The Pixel Format is how the image is stored in the GPU memory. If you want faster loading times you should reduce the size of your .PNG/GIF/TIFF/TMP image file.
    • Q: Should I use RGB565 for the images that are compressed by XCode ?
    • A: When XCode compresses the PNG images, it will create a compressed PNG image that has it’s alpha channel premultiplied in the RGB channels. The PNG format is RGB565, but you should NOT confuse a PNG format with a texture pixel format. A PNG image is understood by Photoshop and cocos2d, but the GPU knows nothing about PNG images. The PNG images need to be converted into a Texture (the format understood by the GPU). The answer is: it depends on what you want. The Image (PNG,GIF,TIFF,BMP) format is independent of the Texture format.
    • Q: If I create a PNG/BMP/TIFF/GIF image without alpha channel, can I change the texture pixel format ?
    • A: If your PNG/BMP/TIFF/GIF image has no alpha channel (premultiplied or not), then the pixel format that will be used for the texture is RGB565. It can’t be changed using the API but you can change by modifying the Texture2D.m file
    • Q: Can I change the pixel format once the texture was created.
    • A: No. Once the Texture was created you can’t modify the pixel format. But you can create new textures from the same image using different pixel formats. Just remember to remove the image from the TextureMgr!


    展开全文
  • 除此之外,还有其他的版本如这是写在Javacocos2d-iphone,android的为Android茯苓的。科科斯2D-JavaScript是用于Web开发的目的。 的的cocos2d的iPhone是为iOS和Mac OS X的Objective C的端口,工作在相同的设计和...
    科科斯二维X已经写在C + +中这是非常有用的iOS,Android和其他移动平台。除此之外,还有其他的版本如这是写在Java中的cocos2d-iphone,android的为Android茯苓的。科科斯2D-JavaScript是用于Web开发的目的。   的的cocos2d的iPhone是为iOS和Mac OS X的Objective C的端口,工作在相同的设计和概念的原有框架。 Cocos2D中的API,集成了Box2D的和花栗鼠物理引擎。   的cocos2d是一个框架,有助于在iPhone应用程序开发。它是免费的且易于使用。科科斯2D使得它非常便于开发人员提供如基本菜单和按钮的功能来设计方案。它提供了触控和加速感应器。它还提供了粒子系统。它还提供了视差滚动的支持和条纹运动的支持。此外,它提供了文本渲染和纹理图集支持。有准备正交,等角六边形瓷砖地图科科斯2D。它使人们能够把声音和集成的暂停和恢复。
       包含在Cocos2D中,这使得它喜欢在开发人员使用这个框架是现场管理,场景之间的过渡,精灵和雪碧片,特效的波浪,涟漪,镜头,液体等的cocos2d制作一个游戏的特点还允许创建各种动作。这些行动可以被归类为转型动作,组合的动作,缓和的动作和其他动作。   科科斯2D是建立在客观的C语言是用于iPhone应用开发和iPhone游戏开发的最流行的二维框架。它是开放式和封闭源代码的项目兼容。它是基于Open GL ES 1.1.Using科科斯2D,一个可以让在OneR游戏可在纵向和横向模式。科科斯2D已通过应用商店和超过2500
     App store的游戏已经建成就可以了。科科斯2D为iPhone支持内置在iPod的触摸,iPhone,iPad和OS X的应用   展望未来,有狗头2D。狗头人2D是一个框架,是Cocos2D中的iPhone上分布,提供了一些额外的库,一个安装程序,这使得它易于使用,如ARC-自动引用计数和跨样本项目作为例子,代码改进技术以及其他各种特性开发平台为iOS和Mac OS X保存高分。   Cocos2D中呈现的各种功能以进行有效的游戏一样移动,旋转,闪烁,时尚,在和淡出,重复动作,顺序,产卵,反向序列,再打行动,加快行动,轨道摄像机的动作,粒子系统和工作流控制。
       的cocos2d是一个灵活的框架,并与方便的特点缩短了开发时间。与惊人的功能,它使游戏更贴近现实生活。科科斯2D已经很多倍增加复杂的智能手机游戏的水平。
    
    展开全文
  • Cocos Creator v2.2 已于 10 月 18 日正式发布,该版本对原生平台进行了大幅性能优化,同时在引擎层面也做了不少改动,包括 3D 模型渲染合批、大幅增强 TiledMap 支持等等,详细的版本改动可[点击这里]查看。...

    Cocos Creator v2.2 已于 10 月 18 日正式发布,该版本对原生平台进行了大幅性能优化,同时在引擎层面也做了不少改动,包括 3D 模型渲染合批、大幅增强 TiledMap 支持等等,详细的版本改动可 [点击这里] 查看。

    此外,Cocos Creator 2.2 版本基本同步了 Cocos Creator 3D 的材质系统,新版本的材质系统已趋于稳定,可以很方便地在编辑器中进行材质及 Effect 文件的创建及编写。相比之前的版本,v2.2 在渲染组件层面也有不少的差异。

    Cocos 引擎开发工程师刘航,将为各位开发者详细介绍如何基于 Creator 2.2 版本进行渲染组件及材质的自定义。

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    讲师,刘航

    一、渲染组件,Assembler 及材质

    在引擎中,所有的渲染组件都是继承自 cc.RenderComponent,例如 cc.Sprite,cc.Label 等。组件的 Assembler 主要负责组件数据的更新处理及填充,由于不同的渲染组件在数据内容及填充上也都不相同,所以每一个渲染组件都会对应拥有自己的 Assembler 对象,而所有的 Assembler 对象都是继承自 cc.Assembler。Material 作为资源,主要记录渲染组件的渲染状态,使用的纹理及 Shader。

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    二、自定义渲染组件及 Assembler
    **自定义渲染组件 自定义渲染组件需要继承 cc.RenderComponent 对象。cc.RenderComponent 有两个空方法必须要重写_resetAssembler 及_activeMaterial 方法。
    _resetAssembler 在组件创建的时候会去调用,会在组件生命周期方法之前执行,主要负责创建并初始化渲染组件的 Assembler 实例。_activeMaterial 方法负责创建并设置渲染组件所使用的材质实例,会在组件启用及材质修改时调用。
    另外,渲染组件有一系列控制渲染状态的方法:

    • markForRender 及 disableRender 控制渲染组件是否进行渲染

    • setVertsDirty 在渲染组件数据有更新时,设置标记

    • setMaterial 则是设置材质实例给渲染组件

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    自定义 Assembler 定义了自定义渲染组件之后,还需要定义对应的 Assembler。自定义的 Assembler 需继承 cc.Assembler 对象,cc.Assembler 有三个空方法必须要去重写:init,updateRenderData 及 fillBuffers。

    • init 负责初始化渲染数据及一些局部参数

    • updateRenderData 负责在渲染组件的顶点数据有变化时进行更新修改

    • fillBuffers 负责在渲染时进行顶点数据的 Buffer 填充

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    **自定义材质及 Effect

    Cocos Creator 2.2 版本的材质及 Effect 是作为资源存在,可以通过编辑器很方便快捷地进行新建操作,而不需要通过代码进行创建。

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    材质对象的层级结构如下图所示:每个材质对象都指向唯一的一个 Effect 对象,每个 Effect 对象可以拥有多个 Technique,每个 Technique 又可以创建多个 Pass,Pass 里就记录了 Blend 模式, Stencil Test 等渲染模式,所使用的 Shader 名字及 Shader 中使用的 Uniform 值。

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    在编辑器中选中材质资源,通过属性检查器对比材质的资源文件,可以看到具体的属性对应:

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    材质中通过 uuid 指定所使用的 Effect 资源,在编辑器中选中 Effect 资源,以 2d-sprite 为例,可以看到文件具体的内容,Effect 中主要有三部分:CCEffect,CCProgram vs 及 CCProgram fs。

    CCEffect 即为前面介绍的材质对象结构中的内容,记录了渲染组件所有相关的渲染状态及 Uniform,这部分的语法及格式是基于 YAML,相比 JSON 书写更加简洁方便,详细的介绍可查阅 [YAML 官方文档]。

    CCProgram vs 及 CCProgram fs 分别是顶点着色器及片元着色器,语法是标准的 GLSL 语法。

    Effect 文件的编写可以使用 VS Code ,在编辑器中双击 Effect 文件会自动在 VS Code 中打开,另外 VS Code 的插件 Cocos Effect 也支持 Effect 文件的语法高亮。

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    Demo 示例

    本文相关的自定义渲染组件及自定义 Assembler 的 Demo。

    下载地址 :

    https://github.com/cocos-creator/demo-shader

    为了方便大家学习和参考如何进行材质的自定义及 Shader 的编写,Demo 中创建并移植了一些 Shader 的示例场景。例如:

    基于 RenderTexture 的屏幕后处理示例:

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    简单的跟随点光源效果:

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    滚动背景:

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    屏幕雨滴效果:

    Cocos Creator v2.2 自定义渲染组件及材质介绍

    以上就是今天带来的 Cocos Creator v2.2 材质系统介绍,在使用过程中,如有哪些问题和困惑,亦或者是有更有价值的使用方法,欢迎大家移步至 Cocos 中文社区与大家一起交流。

    参考链接

    Cocos Creator 2.2 下载:

    https://www.cocos.com/creator

    YAML 官方文档

    https://yaml.org/spec/1.2/spec.html

    展开全文
  • cocos2d 创建精灵

    2019-07-10 06:02:49
    // 在init这个函数当中做一些初始化的事情 bool HelloWorld::init() { ////////////////////////////// // 先构造父级对象 if ( !CCLayer::init() ) { return false;... CCSize size=CCDir...
  • cocos2d-x 写游戏(3)

    2014-07-19 16:41:52
    上面提到,我们写游戏是从定制我们的Scene开始的。这里有liang'ge
  • 一边学cocos,一边做,几经波折后终于上线了。然鹅,功能是实现了,但是加载速度十分感人(毕竟没经验嘛,无辜脸)。1.8M的资源需要10秒钟左右才能全部加载完。于是被老大一有机会就拿出同类产品跟我们的比较,然后一...
  • 使用粒子系统可以把粒子按照不同的属性(位置,数量,大小,速度……)组合起来形成一种对应的视觉效果比如:天在下雨就是老天爷在玩雨粒子的特效……很多有大有小的雨滴粒子从天而降便形成了雨景……
  • 并给我发来了TexturePacker3.0和PhysicsEditor的License, 很是感动了一番,这两个工具可是我期待以久的,可惜现在资金有限,一直没舍得买,为了感谢Andreas Loew的慷慨,我以后得多写几篇这个工具的使用心得。...
  • 尽管图形是如此简单,为什么我的游戏延迟这么多? 为什么我的游戏加载时间如此之高? 为什么屏幕之间的切换如此之慢? 为什么我游戏的FPS一直很低? 我已经压缩过纹理贴图和精灵了,怎么还那么大?...
  • 前言 最近在练习做NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机端官网和管理后台 - 第三章的3.8-使用精灵图片(sprite)时,...可以通过上传精灵整体图片获取背景图中某个精灵的background-size,width...
  • ‎时间:2017‎年‎6‎月‎29‎日 【】Unity3D Unity3D游戏开发 脚本系统 Unity3D地形编辑器 Unity3D 音频系统 Unity3D 灯光系统 Unity3D 五子棋大战 Unity3D 笨鸟先飞 NGUI ...【】Cocos2d-x Coco
  • Pixi教程 基于官方教程翻译;水平有限,如有错误欢迎提PR,转载请注明出处。翻译者为htkz(完成了用 Pixi 绘制几何图形 和 显示文本 章节)和zainking(完成了其他所有章节) 另感谢htkz、NearZXH以及HHHHhgqcdxhg对...
  • 一些著名的开源项目

    2012-10-20 15:33:14
    0ad 3D游戏 ...cocos2d 游戏库 delta3d 游戏引擎 OGRE 渲染引擎 facebook-hiphop php引擎 d2x-xl 游戏 hadoop 分布式文件系统 mangos wow 模拟server opencv 图形库 tbb 并发库 three。js j
  • 前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5...适用于网页的一些简单动画,对于由许多元素相互联系的复杂动画实现起来有些难度。当然也有基于css实现的比...
  • 从0到1开发H5游戏

    2018-05-09 10:24:08
    前言每个游戏犹如一部电影,它能带给我们快乐,让我们在游戏世界释放最真的自我,玩游戏过程学习到智慧。游戏也是游戏开发者发现生活的智慧的展示载体,传播了开发者对生活智慧的乐趣。我们将从0到1,帮助游戏...
  • 原先只是简单整理一下笔记,在记录过程,自己有一些想法冒了出来,于是就成了这篇笔记里的 “XX注”。 由于当时在星巴克看的直播,有些内容没有听清楚,加上自己理解偏差所以笔记难免有所疏漏或者错误,自己也在有...
  • 写给想做前端或者已经在做前端的你 写这篇文章希望和大家分享、交流,共同进步;更希望能够给将要在前端行业工作、实习的同学一些帮助。 P.S. 喷神请绕道,大神勿喷,不引战,不攻击,不钻牛角尖。...
  • 运算符和条件语句

    2019-07-10 08:34:32
    今日学习到的内容: 算术运算: 1、取模的正负取决与取模数的正负 2、取模运算符的操作只能是整数 优先级结合方向 int a =(10 * 2) + (3 / 2) ...优先级:优先级高的操作符他们两遍操作数优先于这个操作符进行结合...
1 2
收藏数 28
精华内容 11