#本文参与——51CTO博客《》#

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. --定义菜单项 
2. local menuLeft,menuRight,menuLeft,menuRight，menu 
3. --创建控制菜单 
4. local function createControllerMenu() 
5. local layer = CCLayer:create() 
6. --初始化菜单项 
7. menuLeft = CCMenuItemImage:create("Images/menu/leftNormal.png", "Images/menu/leftPress.png") 
8. menuLeft:registerScriptTapHandler(runLeft)--点击处理函数 
9. menuLeft:setPosition(ccp(menuLeft:getContentSize().width/2*3/2, menuLeft:getContentSize().height*2))--菜单项位置 
10.  
11. menuUp = CCMenuItemImage:create("Images/menu/upNormal.png", "Images/menu/upPress.png") 
12. menuUp:registerScriptTapHandler(runUp) 
13. menuUp:setPosition(ccp(menuLeft:getContentSize().width/2*3/2+menuLeft:getContentSize().width, menuLeft:getContentSize().height*3)) 
14.  
15. menuRight = CCMenuItemImage:create("Images/menu/rightNormal.png", "Images/menu/rightPress.png") 
16. menuRight:registerScriptTapHandler(runRight) 
17. menuRight:setPosition(ccp(menuLeft:getContentSize().width/2*3/2+menuLeft:getContentSize().width*2, menuLeft:getContentSize().height*2)) 
18.  
19. menuDown = CCMenuItemImage:create("Images/menu/downNormal.png", "Images/menu/downPress.png") 
20. menuDown:registerScriptTapHandler(runDown) 
21. menuDown:setPosition(ccp(menuLeft:getContentSize().width/2*3/2+menuLeft:getContentSize().width, menuLeft:getContentSize().height)) 
22. --创建菜单 
23. menu = CCMenu:create(); 
24. menu:addChild(menuLeft)--把菜单项加入到菜单 
25. menu:addChild(menuUp) 
26. menu:addChild(menuRight) 
27. menu:addChild(menuDown) 
28. menu:setPosition(ccp(0, 0)) 
29. --把菜单加入到图层 
30. layer:addChild(menu) 
31. return layer 
32. end 
33. --精灵向左行走动画
34. local function runLeft() sprite:runAction(createAnimaByDirection(left))--步骤2中的方法创建 end
35. --其它方向的行走动画控制方法与runLeft相同，所以不详细列出。
36. --其中 left:1;down:0;right:2;up:3分别对应精灵图片的相应方向

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

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

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

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

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

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

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

5）显示到手机屏幕

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

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

6）小结

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

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

感谢大家看完本文同时也希望本文能给到你少少的学习帮助或参考。

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