使用Quick-Cocos2d-x开发植物大战僵尸03-游戏加载页面

呵呵，之前说好的要用lua写一个植物大战僵尸的Demo，只是写了个开头，然后就没有后面了，现在没什么事，就觉得写了个开头算怎么回事啊喂，所以又无耻的开始写了，还请各位多多原谅。好了，废话不多说，开始吧！

这里我们开发的只是个Demo，所以游戏的加载页面我们就模拟一下就好了哈，并没有做该做的一些功能(比如预加载内存啊之类的，偷下懒)

首先在src/scenes下创建一个加载场景LoadingScene，这个类里面做的事情很简单，就是创建一个logo精灵放在中间，然后1秒后淡出，淡出之后在这个场景中加入加载层，代码如下

-- 导入加载层类
local LoadingLayer = require("app.layers.LoadingLayer")
-- 创建加载场景类
local LoadingScene = class("LoadingScene",function()
return display.newScene("LoadingScene")
end)
-- 构造函数
function LoadingScene:ctor()
-- 创建logo精灵
local logo=display.newSprite("popcap_logo.png")
:pos(display.cx,display.cy)
:addTo(self)
-- 1秒后淡出，然后创建加载层LoadingLayer，添加到场景中
logo:runAction(cc.Sequence:create(cc.DelayTime:create(1.0),cc.FadeOut:create(1.0),cc.CallFunc:create(function()
LoadingLayer.new()
:addTo(self)
end)))
end

return LoadingScene

在src下新建一个文件夹layers，在该目录下创建LoadingLayer类，该层的就是模拟资源的加载，很简单，具体看下面代码，都有注释

local LoadingLayer = class("LoadingLayer",function()
return display.newLayer()
end)


function LoadingLayer:ctor()
-- 播放背景音乐
audio.playMusic("music/start.mp3",true)
-- 添加背景图片
local loadingBg=display.newSprite("welcome.jpg")
:pos(display.cx,display.cy)
:addTo(self)
-- 进度条是否加载完毕的标记
self.isCanTouch=false
-- 加载的进度条
local loadingBar=display.newSprite("loading/loading_01.png")
:align(display.BOTTOM_CENTER,display.cx,0)
:addTo(self)
-- 设置精灵精度条接受touch事件
-- 设置进度条精灵可以被点击
loadingBar:setTouchEnabled(true)
-- 单点模式
loadingBar:setTouchMode(cc.TOUCH_MODE_ONE_BY_ONE)
-- 设置触摸回调函数
loadingBar:addNodeEventListener(cc.NODE_TOUCH_EVENT,function(event)
-- 如果进度条精灵被点击并且资源已经在家完毕
if event.name=="began" and self.isCanTouch then
-- 跳到主菜单场景
app:enterScene("MenuScene",nil,"crossFade",0.5)
return true
end

end)
-- 一下创建进度条前进的动画，模拟加载进度
-- 获取动画缓存
local animation=display.getAnimationCache("loading")
-- 如果没有该动画缓存
if animation==nil then
-- 创建Animation动画
animation=cc.Animation:create()
for i=1,9 do
-- 向动画中加入精灵帧 精灵帧创建 第一个参数是图片路径 第二个参数是图片的纹理大小
animation:addSpriteFrame(cc.SpriteFrame:create(string.format("loading/loading_%02d.png",i),
cc.rect(0,loadingBar:getContentSize().width,loadingBar:getContentSize().height)))--rect的原点在左下角
end
-- 每帧时间
animation:setDelayPerUnit(0.3)
-- 设置动画缓存
display.setAnimationCache("loading",animation)
end
-- 播放动画，完毕之后将图片设置为可以开始状态
loadingBar:runAction(cc.Sequence:create(cc.Animate:create(animation),cc.CallFunc:create(function()
loadingBar:setTexture("loading/loading_start.png")
self.isCanTouch=true
end)))
end


return LoadingLayer

这样一来 加载页面就完成了（ps：虽然并没有什么实际功能）我们来看看运行效果

好了，这一篇就先到这里，下一篇我们就来讲我们的主菜单场景！