cocos2d中对于图片动画加载缓存的使用

作者: 绿城河 | 来源:发表于2016-03-19 14:37 被阅读1664次

    注:所使用的cocos2d-x为3.10版本,lua脚本编写。

    1.SpriteBatchNode与SpriteFrameCache的使用

    为了提高cocos2d的执行效率,尽量做到尽可能的少进行渲染和对加载好的纹理进行替换。因此才会有了SpriteBatchNode和SpriteFrameCache这两个方法。这两种方法的目的在于就是使用合图中的资源,并使用资源时通过plist文件将其取出来,并且SpriteBatchNode做到是只进行一次渲染,请其他的渲染层全部都加到该节点上,当然缺点也是因为它把渲染层全部都加到该节点上了,不能分层添加。

    实例:

    -- SpriteBatchNoded的使用的例子
    -- @function createBatchNodedExample()
    function MainScene:createBatchNodedExample()
       local buttle2 = cc.SpriteBatchNode:create("bullet.png", 100)
          :setPosition(display.cx, display.cy)
          :addTo(self)
    
       for i = 1, 99 do
        local spriteItem = cc.Sprite:createWithTexture(buttle2:getTexture())
        spriteItem:setPosition(cc.p(math.random()*320,math.random()*160))
        buttle2:addChild(spriteItem, i, i)
       end
    end
    

    -- 将四个坦克从缓存帧中取出来的例子
    -- @function createFourTank
    function MainScene:createFourTank()
    
      -- 添加精灵帧缓存
      local spriteFrameCacheItem = cc.SpriteFrameCache:getInstance():addSpriteFrames("tankPlist.plist")
    
      -- 将精灵帧从精灵缓存帧中取出来,并通过精灵帧创建不同的精灵
      local spriteUp = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_u.png"))
      local spriteRight = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_r.png"))
      local spriteDown = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_d.png"))
      local spriteLeft = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_l.png"))
    
      -- 将不同的精灵加到主场景中
      spriteUp:setPosition(cc.p(math.random()*320,math.random()*160))
      spriteUp:addTo(self)
      spriteRight:setPosition(cc.p(math.random()*320,math.random()*160))
      spriteRight:addTo(self)
      spriteDown:setPosition(cc.p(math.random()*320,math.random()*160))
      spriteDown:addTo(self)
      spriteLeft:setPosition(cc.p(math.random()*320,math.random()*160))
      spriteLeft:addTo(self)
    
    end
    

    2.帧动画

    这里所讲的是帧动画,所谓帧动画就是将图片一张一张的添加到Animation中,再添加到Animate,再通过Node执行runAction。(这只是大概齐的具体的都不一样。。。)

    -- 小女孩走动的方法
    -- @function createRunGirl
    function MainScene:createRunGirl()
    
      -- 创造出女孩走的动画
      local animationGirlPng = cc.Animation:create()  
    
      -- 创建精灵帧缓存
      local spriteFrameCacheItemGirl = cc.SpriteFrameCache:getInstance():addSpriteFrames("girlPlist.plist")
    
      -- 将精灵帧取出来并添加到动画中对象中
      for i = 1, 8 do
        local girlName2 = "girl"..i..".png"
        -- 女孩的精灵帧
        local spriteFrameGirl = spriteFrameCacheItemGirl:getSpriteFrameByName(girlName2)
        
    
        animationGirlPng:addSpriteFrame(spriteFrameGirl)
      end
    
      -- 设置每片动画的延迟时间
      animationGirlPng:setDelayPerUnit(0.2)
    
      -- 添加精灵并做好初始化
      local spriteGirl = cc.Sprite:create("girl1.png")
      spriteGirl:setPosition(cc.p(display.cx, display.cy))
      spriteGirl:addTo(self)
    
      -- 把动作添加到精灵中然后再就调用node节点的runAction的方法
      local animateGirl = cc.Animate:create(animationGirlPng)
      local repeatAnimateGirl = cc.RepeatForever:create(animateGirl)
      spriteGirl:runAction(repeatAnimateGirl)
    end
    

    分享几篇博客:
    链接1 链接2 链接3

    3.对于jpg与png的理解

    同一张图片jpg格式与png格式,jpg的大小比png的小3倍,但是在cocos2d-x中还是一如既往地使用png。那么我们选择JPG还是PNG呢?很多人认为JPG文件比较小,PNG文件比较大,加载到内存纹理,JPG占有更少的内存。这种观点是错误的!纹理与图片是不同的两个概念,如果纹理是野营帐篷话,那么图片格式是收纳折叠后的帐篷袋子,装有帐篷的袋子大小,不能代表帐篷搭起来后的大小。特别是在Cocos2d-x平台JPG加载后被转化为PNG格式,然后再转换为纹理,保存在内存中,这样无形中增加了对JPG文件解码的时间,因此无论JPG在其它平台表现的多么不俗,但是在移动平台下一定它无法与PNG相提并论。
    图片格式的那些事

    4.pvr格式与TexturePacker编辑器

    对于图片的升级使用的pvr格式与好用的编辑器,具体内容详见这里这里
    这里

    -- 使用RGBA8888来加载图像
    -- @function createSpriteRGBA8888
    function MainScene:createSpriteRGBA8888()
    
      --local spriteNode =  cc.Sprite:create("spriteHd.pvr.ccz")
      --spriteNode:setPosition(cc.p(display.cx,display.cy))
      --spriteNode:addTo(self)
    
      -- 转换格式,rgb565格式没有透明度
      cc.Texture2D:setDefaultAlphaPixelFormat(cc.TEXTURE2_D_PIXEL_FORMAT_RG_B565)
      -- 添加精灵帧缓存
      local spriteFrameCacheItem = cc.SpriteFrameCache:getInstance():addSpriteFrames("spriteHd.plist")
    
      -- 将精灵帧从精灵缓存帧中取出来,并通过精灵帧创建不同的精灵
      local spriteUp = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_u.png"))
      local spriteRight = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_r.png"))
      local spriteDown = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_d.png"))
      local spriteLeft = cc.Sprite:createWithSpriteFrame(spriteFrameCacheItem:getSpriteFrameByName("tank_p_l.png"))
    
      -- 将不同的精灵加到主场景中
      spriteUp:setPosition(cc.p(math.random()*320,math.random()*160))
      spriteUp:addTo(self)
      spriteRight:setPosition(cc.p(math.random()*320,math.random()*160))
      spriteRight:addTo(self)
      spriteDown:setPosition(cc.p(math.random()*320,math.random()*160))
      spriteDown:addTo(self)
      spriteLeft:setPosition(cc.p(math.random()*320,math.random()*160))
      spriteLeft:addTo(self)
    
    end
    

    5.粒子效果

    cocos2d中自带了一些粒子效果,与此同时你也可以通过在线制作工具制作自己的粒子效果。制作工具

    FireShot Pro Screen Capture #001 - 'EffectHub Cocos2dx粒子特效编辑器' - www_effecthub_com_particle2.png
    -- 创建粒子效果
    -- @function createFireLayer
    function MainScene:createFireLayer()
    
      local layer = cc.Layer:create()
      local lighterSprite = cc.Sprite:create("fire.png")
      lighterSprite:setScale(0.3)
      lighterSprite:setPosition(cc.p(display.cx,display.cy))
      layer:addChild(lighterSprite)
    
      -- 添加粒子效果
      local fireSys = cc.ParticleFire:create()
      fireSys:setPosition(cc.p(display.cx - 10,display.cy+100))
      layer:addChild(fireSys)
    
      -- 将层添加到主场景中
      layer:addTo(self)
    
    end
    
    
    -- 创建自定义粒子效果
    -- @function createParticleByMyself
    function MainScene:createParticleByMyself()
      local particleItem = cc.ParticleSystemQuad:create("particle_texture.plist")
      particleItem:addTo(self)
    end
    
    
    -- 创建粒子效果(batchNode)
    -- @function createParticleByMyselfNode
    function MainScene:createParticleByMyselfNode()
      local particleItem = cc.ParticleSystemQuad:create("particle_texture.plist")
      particleItem:retain()
      local particleNode = cc.ParticleBatchNode:create("particle_texture.png", 500)
      --particleNode:setPosition(cc.p(display.cx,display.cy))
      particleNode:addTo(self)
      particleNode:addChild(particleItem)
      particleItem:release()
    end

    相关文章

      网友评论

        本文标题:cocos2d中对于图片动画加载缓存的使用

        本文链接:https://www.haomeiwen.com/subject/goyhlttx.html