lua脚本调用cocos2d-x 之实现精灵、Tmx地图创建【iOS游戏开发征文】

#本文参与——51CTO博客《iOS游戏开发征文活动[/u]》#

各位同学大家好，小编今天在此与各位一起通过Lua脚本实现一下用cocos2d-x 2.0.4来创建精灵、及Tmx地图，为大家进入IOS游戏开发提供一个学习实例。各位老人、高手、专家、大神请自觉飘过哈

当然要想拍砖请手下留情。

如果大虾们肯留下个脚印或其它相关学习实例就万分感谢了。


开发环境的搭建就不介绍了哈，大家可以度娘、谷哥一翻。

好啦，不费话了，开始正式编码啦。再废话一下，不知道lua脚本的请度娘、谷哥扫下盲


先创建好项目，如果不懂的，可直接从cocos2d-x的samples下搞个项目过来改改就好。

1)通过lua调用cocos2d-x创建精灵

准备一张精灵的四个方向的行走图片





定义createSprite脚本方法来生成精灵

--创建精灵
local sprite = nil --定义精灵变量
local function createSprite()
local layer = CCLayer:create()--定义图层
local frame0 --定义精灵默认显示图片帧
--通过CCSpriteFrame创建帧动画
frame0 = CCSpriteFrame:create("images/spirit001_32.png", CCRectMake(blockWH*0, blockWH*0, blockWH, blockWH))
--按帧动画初始化精灵
sprite = CCSprite:createWithSpriteFrame(frame0)
--设置精灵默认起始位置
sprite:setPosition(ccp(winSize.width / 2 - 64, winSize.height / 3))
--把精灵增加入图层
layer:addChild(sprite)
return layer --把图层返回，供CCScene用
end

2）通过lua调用cocos2d-x实现精灵帧动画

根据精灵图片特点：第一行为向下行走动画；第二行为向左行走动画；第三行为向右行走动画；第四行为向上行走动画。

--创建精灵帧动画动作
local animation = nil --定义动作 direction:精灵方向（上、下、左、右）
local function createAnimaByDirection(direction)
local frame0,frame1,frame2,frame3 --定义四帧精灵动画
frame0 = CCSpriteFrame:create("TileMaps/spirit001_32.png", CCRectMake(blockWH*0, blockWH*direction, blockWH, blockWH))
frame1 = CCSpriteFrame:create("TileMaps/spirit001_32.png", CCRectMake(blockWH*1, blockWH*direction, blockWH, blockWH))
frame2 = CCSpriteFrame:create("TileMaps/spirit001_32.png", CCRectMake(blockWH*2, blockWH*direction, blockWH, blockWH))
frame3 = CCSpriteFrame:create("TileMaps/spirit001_32.png", CCRectMake(blockWH*1, blockWH*direction, blockWH, blockWH))
--创建数组，用于存放精灵帧动作
local frameArray = CCArray:create()
frameArray:addObject(frame0)
frameArray:addObject(frame1)
frameArray:addObject(frame2)
frameArray:addObject(frame3)
--通过CCAnimation:createWithSpriteFrames创建动画
--参数1：帧动作数组；参数2：每帧动画播放时间
animation = CCAnimation:createWithSpriteFrames(frameArray, 0.2)
animation:setLoops(10)
--把动画返回供精灵使用
return CCAnimate:create(animation)
end

3）创建菜单控制精灵动画

为了方便实例演示，我们创建四个菜单项来控制精灵的上、下、左、右动画的播放。

--定义菜单项
local menuLeft,menuRight,menuLeft,menuRight，menu
--创建控制菜单
local function createControllerMenu()
local layer = CCLayer:create()
--初始化菜单项
menuLeft = CCMenuItemImage:create("Images/menu/leftNormal.png", "Images/menu/leftPress.png")
menuLeft:registerScriptTapHandler(runLeft)--点击处理函数
menuLeft:setPosition(ccp(menuLeft:getContentSize().width/2*3/2, menuLeft:getContentSize().height*2))--菜单项位置

menuUp = CCMenuItemImage:create("Images/menu/upNormal.png", "Images/menu/upPress.png")
menuUp:registerScriptTapHandler(runUp)
menuUp:setPosition(ccp(menuLeft:getContentSize().width/2*3/2+menuLeft:getContentSize().width, menuLeft:getContentSize().height*3))

menuRight = CCMenuItemImage:create("Images/menu/rightNormal.png", "Images/menu/rightPress.png")
menuRight:registerScriptTapHandler(runRight)
menuRight:setPosition(ccp(menuLeft:getContentSize().width/2*3/2+menuLeft:getContentSize().width*2, menuLeft:getContentSize().height*2))

menuDown = CCMenuItemImage:create("Images/menu/downNormal.png", "Images/menu/downPress.png")
menuDown:registerScriptTapHandler(runDown)
menuDown:setPosition(ccp(menuLeft:getContentSize().width/2*3/2+menuLeft:getContentSize().width, menuLeft:getContentSize().height))
--创建菜单
menu = CCMenu:create();
menu:addChild(menuLeft)--把菜单项加入到菜单
menu:addChild(menuUp)
menu:addChild(menuRight)
menu:addChild(menuDown)
menu:setPosition(ccp(0, 0))
--把菜单加入到图层
layer:addChild(menu)
return layer
end
--精灵向左行走动画
local function runLeft() sprite:runAction(createAnimaByDirection(left))--步骤2中的方法创建 end
--其它方向的行走动画控制方法与runLeft相同，所以不详细列出。
--其中 left:1;down:0;right:2;up:3分别对应精灵图片的相应方向

至此，我们就完成了通过lua脚本调用cocos2d-x实现精灵创建、精灵行走动画控制的脚本代码编写了。

运行结果是：按下左行走菜单时播放精灵向左行走动画；按下右行走菜单时播放精灵向右行走动画；按下下行走菜单时播放精灵向下行走动画；按下上行走菜单时播放精灵向上行走动画。

4）通过lua脚本调用cocos2d-x创建tmx地图

Tiled 这个地图编辑工具可以编辑了2D的很多很多游戏地图，只要你想得到的都行，具体使用方法及软件下载安装大家度娘一下就有一堆资料了，这里就不啰嗦了。

先用tiled创建好地图文件如：test-tilemap.tmx然后就可以写lua脚本进行创建操作啦，代码如下：

--创建tmx地图图层
local function CreateTileMapLayer()
local layer = CCLayer:create()
--以文件名方式创建TMX地图
local map = CCTMXTiledMap:create("TileMaps/test-tilemap.tmx")
layer:addChild(map)--把tmx地图添加到图层
return layer
end

简单吧

几行脚本即可创建出tmx地图图层了。当然这只是个例子，具体游戏中还会有更多的事件要处理的了。


5）显示到手机屏幕

把以上步骤中创建的各个图层加入到场景中，然后就可以显示到手机屏幕上啦。

--创建场景
local scene = CCScene:create()
scene:addChild(CreateTileMapLayer())--把tmx地图层加入场景
scene:addChild(createSprite())--把精灵层加入场景
scene:addChild(createControllerMenu())--把控制菜单层加入场景
CCDirector:sharedDirector():replaceScene(scene)--把场景显示到手机屏幕上

6）小结

本文中的可能有部分变量定义未列出，大家在编码时发现少了的话就自己local xxx定义一下即可。

好啦，先写到这里了。还有好多东西都不懂，所以还得好好学习。

感谢大家看完本文

同时也希望本文能给到你少少的学习帮助或参考。

如果你觉得本文有帮助的话请评论一下，赞一个哦