CVP认证学习笔记--(何小成)016--实现纹理缓存

概念

本节课内容讲的精灵的纹理缓存，由于在手机上的资源是非常宝贵的，遇到多个相同图片的精灵，我们不可能一个一个绘制，cocos中提供了纹理缓存机制，在程序预加载之后，就已经放在了纹理缓存中，而我们new cc.Sprite的时候，构造函数默认会先从textureCache中去取图片，取不到图片才会选择load一个，这个过程我们也可以从cc.Sprite的源码中看到。纹理就相当于调用了canvas绘图来绘制一个图片，这个图片用的人都可以拿去用这同一个图片，然后Sprite就相当于封装一个精灵，包含图片以及其他属性。

作业

本节课的作业，是完成通过纹理加载一个精灵“冰女”（话说跟我们公司的某游戏的冰女美术形象长得好像。。。），然后点击屏幕中的位置，冰女可以移动过去，相当于本节课纹理加载图片和上节课触摸事件的综合应用。
我实现了通过点击屏幕，冰女会在一定时间内跳跃着过去，如果方向不同，精灵还会进行水平翻转的效果：

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    npcDirect:"right",// 精灵面部朝向
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();
        //为了显示和管理所有图片资源
        // cocos 定义了纹理缓存对象
        var bgTexture=cc.textureCache.addImage("res/bg.jpg");//读取图片到缓存
        var bnTexture=cc.textureCache.addImage("res/h2.png");
        //使用纹理对象来创建sprite 
        //纹理对象是对 Image的封装，包含了图片的像素信息但不能直接显示需要
        //通过sprite来包装 
        var bg=new cc.Sprite(bgTexture);
        this.addChild(bg);
        bg.setPosition(cc.winSize.width/2,cc.winSize.height/2);
        var bn=new cc.Sprite(bnTexture);
        this.addChild(bn);
        bn.setPosition(200,200);
        bn.setScale(0.1);
        bn.setTag(1);
        return true;
    },
    onEnter:function(){
        this._super();
        //添加触屏事件
       cc.eventManager.addListener({
           event:cc.EventListener.TOUCH_ONE_BY_ONE,
           swallowTouches:true,//吞噬事件 不再传递
           onTouchBegan:this.touchbegan,
           onTouchMoved:this.touchmoved,
           onTouchEnded:this.touchended
       },this);
    },
    touchbegan:function(touch,event){
        var x = touch.getLocation().x;
        var y = touch.getLocation().y;
        var bn = event.getCurrentTarget().getChildByTag(1);
        // 走路时间
        var time = Math.round(Math.sqrt(Math.pow(x-bn.getPositionX(),2)+Math.pow(y-bn.getPositionY(),2)))/100;
        // 跳跃次数
        var jumps = Math.round(Math.sqrt(Math.pow(x-bn.getPositionX(),2)+Math.pow(y-bn.getPositionY(),2)))/20;
        bn.stopAllActions();
        if(event.getCurrentTarget().npcDirect=="right"&&x<bn.getPositionX()){
            // 转向
            event.getCurrentTarget().npcDirect = "left";
            bn.runAction(cc.flipX(true));// 水平翻转
        }else if(event.getCurrentTarget().npcDirect=="left"&&x>bn.getPositionX()){
            // 转向
            event.getCurrentTarget().npcDirect = "right";
            bn.runAction(cc.flipX(false));// 翻转回来
        }
        bn.runAction(cc.jumpTo(time,cc.p(x,y),10,jumps));
        return true;
    },
    touchmoved:function(){
        return true;
    },
    touchended:function(touch,event){
        return true;
    }
});
 
var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

最终效果

http://www.cocoscvp.com/usercode/2016_04_22/38160c80fb0e368cc9ab2cff54bad163961fbfb5/