如何制作一个基于Tile的游戏 Cocos2d-x 2 0 4
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
本文实践自 Ray Wenderlich 的文章《How To Make a Tile-Based Game with Cocos2D》,文中使用Cocos2D,我在这里使用Cocos2D-x 2.0.4进行学习和移植。这个游戏是关于一个忍者在沙漠中寻找西瓜的故事。
在这部分内容,将会学习到如何用Tile创建一个地图,如何加载地图到游戏,如何让地图跟随玩家滚动,以及如何使用对象层。下一部分内容,将介绍如何在地图中创建可碰撞的区域,如何使用Tile属性,如何创建可拾取的物品和动态修改地图,以及如何确保忍者不会吃撑掉。
步骤如下:
1.新建Cocos2d-win32工程,工程名为"TileGame",去除"Box2D"选项,勾选"Simple Audio Engine in Cocos Denshion"选项;
2.下载本游戏所需的资源,将资源放置"Resources"目录下;
3.使用Tiled工具制作地图。首先,下载开源的Tiled Map Editor工具,当前版本为0.8.1,建议使用QT版本。在Tiled工具,点击菜单栏→"文件"→"新文件",在弹出的对话框中,填入如下内容:
地图方向分为:正常、45度。地图大小填入的是tile单位。块大小是资源每个tile的实际像素大小,在本篇中,使用32x32大小。点击"确定"。
4.接着,把所需要的tile集合加入到工具中。菜单栏→"地图"→"新图块",填入如下内容:
点击"浏览",选择"Resources"目录下的tmw_desert_spacing.png文件,会自动填充"名称"内容。块的宽高都为32像素。边距就是当前tile块开始计算实际像素时,应该跳过多少像素,宽高一样。间距就是两个tile块之间的像素距离,宽高一样。看看tmw_desert_spacing.png文件,可以看到每个tile块都1像素的黑色边框,这就是为什么要设置边距和间距为1像素。
点击"确定"。
5.可以看到tile块出现在"图块"窗口中。现在可以开始画地图。点击菜单栏→"视图"→"显示网格",可以开启网格参照线。点击工具栏"图章刷",然后在"图块"窗口点选一个tile块,接着在地图中,点击放入你所想要的位置。
用工具栏"填充",把地图背景填充成同一个tile块,这里为沙漠背景。可以从"图块"窗口点选多个tile块,可按Ctrl键多选,这样可以一次性将多个tile块放入地图中。进行制作地图,确保至少有一对建筑在地图上,因为后面需要一些东西来做碰撞。一旦完成了地图的制作,双击"图层"窗口中的当前层"块层 1",重命名为"Background"。然后点击工具栏"保存",命名为"TileMap.tmx",保存在"Resources"目录下。
6.将Tile地图加入到场景中。在HelloWorldScene.h文件中,添加如下代码:
1
2 |
CC_SYNTHESIZE_RETAIN(cocos2d::CCTMXTiledMap*, _tileMap, TileMap);
CC_SYNTHESIZE_RETAIN(cocos2d::CCTMXLayer*, _background, Background); |
在HelloWorldScene.cpp文件中,构造函数添加如下:
1
2 3 4 5 |
HelloWorld::HelloWorld()
{ _tileMap = NULL; _background = NULL; } |
初始化init函数,修改如下:
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
bool HelloWorld::init()
{ bool bRet = false; do { CC_BREAK_IF(! CCLayer::init()); this->setTileMap(CCTMXTiledMap::create("TileMap.tmx")); return bRet; |
7.编译运行,可以看到整个地图的左下角,如下图所示:
要让它成为一个游戏,还需要三件事:玩家、玩家初始点、移动视图以便能够看到玩家。
8.Tiled支持两种类型层:tile层和对象层。对象层允许你在地图上可能发生事件的区域绘制矩形。比如:你可能需要一个怪物出生区域,或者一个一进入就会挂掉的区域。在这里,我们给玩家创建一个出生地。菜单栏→"图层"→"添加对象层",命名为"Objects",点击工具栏"插入对象",在地图上选择一个位置并点击它,这时会出现一个灰色的矩形框,右键选择"对象属性",名称填入"SpawnPoint",如下图所示:
按"确定"按钮。保存地图。
9.在HelloWorldScene.h文件中,添加如下声明:
1
|
CC_SYNTHESIZE_RETAIN(cocos2d::CCSprite*, _player, Player);
|
在HelloWorldScene.cpp构造函数中,添加如下:
1
|
_player = NULL;
|
在init初始化函数,添加如下:
1
2 3 4 5 6 7 8 9 10 11 12 |
CCTMXObjectGroup *objects = _tileMap->objectGroupNamed("Objects");
CCAssert(objects != NULL, "Objects' object group not found"); CCDictionary *spawnPoint = objects->objectNamed("SpawnPoint"); CCAssert(spawnPoint != NULL, "SpawnPoint object not found"); int x = spawnPoint->valueForKey("x")->intValue(); int y = spawnPoint->valueForKey("y")->intValue(); this->setPlayer(CCSprite::create("Player.png")); this->setViewpointCenter(_player->getPosition()); |
添加一个方法setViewpointCenter,代码如下:
1
2 3 4 5 6 7 8 9 10 11 12 13 14 |
void HelloWorld::setViewpointCenter(CCPoint position)
{ CCSize winSize = CCDirector::sharedDirector()->getWinSize(); int x = MAX(position.x, winSize.width / 2); CCPoint centerOfView = ccp(winSize.width / 2, winSize.height / 2); |
用户传任何的坐标过来,但是有一些点不希望显示出来,比如,我们不想屏幕移出地图边界,那里只是一片空白。如图:
摄像机的中心若是小于winSize.width/2或winSize.height/2,部分的视图将会在屏幕之外。同样的,我们需要检查边界条件。到目前为止,我们一直把这个函数看作是设置摄像机中心的位置。但是,这并不是我们实际做的。实际做的是移动整个层。看下图:
想象一下,身处在一个巨大的世界中,我们能看到的区域是从0到winSize.height/width的这部分。我们视野的中心是centerOfView,并且我们知道要让中心在哪儿(actualPosition)。所以要让我们视野的中心向上向右移动到actualPosition,我们只需要让地图相对的向下向左移动即可。这一步是通过actualPosition与centerOfView坐标相减得到的,然后把HelloWorld层的坐标设为这个结果。
10.编译运行,可以看到忍者在屏幕中,如下图所示:
11.接下来,让忍者可以移动。在HelloWorldScene.cpp文件init函数中,添加如下代码:
1
|
this->setTouchEnabled(true);
|
开启触摸,然后重载registerWithTouchDispatcher函数,代码如下:
1
2 3 4 |
void HelloWorld::registerWithTouchDispatcher(void)
{ CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 0, true); } |
注册触摸事件,这样单点触摸ccTouchBegan和ccTouchEnded会被调用。重载ccTouchBegan函数,代码如下:
1
2 3 4 |
bool HelloWorld::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent)
{ return true; } |
返回true表明接受这个触摸。添加setPlayerPosition方法,来设置玩家坐标,代码如下:
1
2 3 4 |
void HelloWorld::setPlayerPosition(CCPoint position)
{ _player->setPosition(position); } |
重载ccTouchEnded方法,代码如下:
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
void HelloWorld::ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent)
{ CCPoint touchLocation = this->convertTouchToNodeSpace(pTouch); CCPoint playerPos = _player->getPosition(); |
计算触摸点与玩家坐标之间的差值,来决定玩家的移动方向。
12.编译运行,点击屏幕,让忍者动起来,如下图所示:
参考资料:
1.How To Make a Tile-Based Game with Cocos2D http://www.raywenderlich.com/1163/how-to-make-a-tile-based-game-with-cocos2d
2.如何使用Cocos2D制作一款基于tile的游戏 http://www.raywenderlich.com/zh-hans/16771/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8cocos2d%E5%88%B6%E4%BD%9C%E4%B8%80%E6%AC%BE%E5%9F%BA%E4%BA%8Etile%E7%9A%84%E6%B8%B8%E6%88%8F
3.(译)如何使用cocos2d制作基于tile地图的游戏教程:第一部分 http://www.cnblogs.com/zilongshanren/archive/2011/04/11/2012852.html
非常感谢以上资料,本例子源代码附加资源下载地址:http://download.csdn.net/detail/akof1314/4966622
如文章存在错误之处,欢迎指出,以便改正。
给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow
如何制作一个基于Tile的游戏 Cocos2d-x 2 0 4相关推荐
- 如何制作一个基于Tile的游戏 2 Cocos2d-x 2 0 4
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在第一篇 ...
- 使用小程序制作一个飞机大战小游戏
此文主要基于微信小程序制作一个飞机大战小游戏,上手即用,操作简单. 一.创建小程序 二.页面实现 三.代码块 一.创建小程序 访问微信公众平台,点击账号注册. 选择小程序,并在表单填写所需的各项信息进 ...
- python turtle 画老鼠,python用turtle制作一个猫捉老鼠游戏
CSDN网友写的猫捉老鼠游戏代码 看着不错 大家借鉴一下 import turtle import time import random def up(): jerry.setheading(90) ...
- 如何制作一个横版格斗过关游戏 Cocos2d x 2 0 4
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本文实践 ...
- 如何制作一个塔防游戏 Cocos2d x 2 0 4
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本文实践 ...
- 基于C#制作一个飞机大战小游戏
此文主要基于C#制作一个飞机大战游戏,重温经典的同时亦可学习. 实现流程 1.创建项目 2.界面绘制 3.我方飞机 4.敌方飞机 5.子弹及碰撞检测 实现流程 1.创建项目 打开Visual Stud ...
- 微信小程序|使用小程序制作一个足球拼图小游戏
世界杯的意义永远不止是冠军,它是每个精彩的瞬间,是呐喊,是青春.此文用小程序制作一个足球的拼图小游戏,一起为世界杯疯狂吧! 开发步骤 一.工具安装 二.功能实现 1 . 提示图展示 2 . 绘制画布内 ...
- 100行代码,使用 Pygame 制作一个贪吃蛇小游戏!
作者 | 周萝卜 来源 | 萝卜大杂烩 相信我们大家都玩过贪吃蛇游戏,今天我们就从头一起来写一个贪吃蛇小游戏,只需要100多行的代码就完成了. 用到的 Pygame 函数 贪吃蛇小游戏用到的函数 功能 ...
- AndroidStudio 制作一个超简易记账本App(1.0)【含详细步骤】
先看最终效果: 1.首先创建一个Empty Activity 2.在activity_main.xml里编写主界面布局 根据预览图,主界面需要一个ListView和一个ImageButton,还要给I ...
最新文章
- Pandas映射(转化)dataframe中的布尔值True和False值到1和0数值、使用astype函数
- 在IT的世界里,分享是一种快乐.
- java.swing调难度_Java Swing BorderLayout调整了难度
- oracle数据库 名词,Oracle数据库名词解释
- SAP Cloud for Customer和Hybris Commerce的session保护机制
- MyEclipse生成Javadoc帮助文档
- 01_SpringCoud 整合SpringCoud alibaba Nacos
- 基础【枚举】-----(枚举)------(转)
- swap函数_【Golang】图解函数调用栈
- python爬虫数据分析案例-Python 爬虫和数据分析实战
- (首个填坑)联想拯救者Y7000(自带win10 home) 安装Ubuntu16.04.6 + NVIDIA GTX1650驱动
- iTextSharp 显示中文字体
- ETC和车联网安全认证的基本原理的分析和比较
- 过零检测法MATLAB仿真,过零检测
- MATLAB Simulink
- MathWorks 中国
- 达观数据爱心公益再出发,走进广西桥业小学开展捐书助学活动
- 【转】60系列应用的全屏处理
- java-php-python-汽车销售系统计算机毕业设计
- 神舟 mini pc Android,神舟四核mini PC不仅仅是小巧
- python二维码生成识别代码_Python3+qrcode+zxing生成和识别二维码教程
- ImportError: cannot import name ‘deform_conv_cuda‘ from partially initialized module ‘assets.ops.dcn
热门文章
- MySQL面试 - 读写分离
- TCP/IP五层模型(五层因特网协议栈)||| OSI参考模型|||数据的封装与解封装
- docker 守护进程
- C语言/找出任意两整数之间的素数以及他们的和
- 排序算法理解总结篇——冒泡排序、选择排序、插入排序、希尔排序、归并排序、堆排序、计数排序、基数排序、桶排序
- 【Python】二维数据格式化
- IntelliJ IDEA上手这一篇就够了,从入门到上瘾
- Linux入门学习(十一)
- javascript指南_JavaScript的完整指南
- c语言全角半角转换函数,全角半角转换函数(示例代码)