chapter5 二维游戏场景绘制

Cocos2d-x中使用砖块地图使用的类 • TMXBojectGroup
– 地图中包含一个物体层，物体层由许多对象组成。 TMXObjectGroup类表示地图中的物体层的对 象集合。 – 在每个TMXObjectGroup类的对象中又包含了 多个TMXObject类的对象，TMXObject类表示 地图中的物体层的对象集合中的一个对象。
扩展控件
• Scal9Sprite
– 将精灵图片分成九宫格样式的9个区域 – 有效控制精灵图片放缩拉伸范围
游戏实例——英雄快跑 • 游戏简介
– 游戏实例实现的是英雄快跑，通过触屏来实现跳 跃动作，来躲避路面设置的障碍，并且实现地图 滚动效果，当英雄跑到地图终点即为成功。 – 辅助工具：TiledMap地图编辑器
菜单项 • 菜单(Menu)
– Layer的子类，可以包含多种不同菜单项 – 继承关系：
菜单项 • 菜单(MenuItem)
– 分类：标签菜单项、精灵菜单项、触发菜单项等 – 继承关系：
菜单项 • 菜单项分类
– 标签菜单项 – 文字标签菜单项 – 文字菜单项 – 精灵菜单项
菜单项 • 菜单和菜单项的使用过程
– 步骤2，新建图块：
“地图”->“新图块”来新建图块 在弹出框中可以设置图块名称、素材源、素材切割块 大小和块 间距等属性
游戏地图的创建与显示
• 砖块地图编辑器 – Tiled Map Editor - 步骤3，绘制地图： 通过工具栏图章刷，地形刷、填充和橡皮 拼接地图
Cocos2d-x中使用砖块地图使用的类 • TMXTiledMap
文字与字体 • Cocos2d-x中的文字与字体
– Label 可以使用系统或自定义字体 – Label 相关类继承关系：
Ref Node
SpriteBatchNode
BlendProtccal
TextureProtocol
LabelProtocol
Label
文字与字体 • 自定义字体制作
– Bitmap Font Generator
游戏地图的创建与显示 • 多层地图
– 小地图能够重叠或者有层次关系 – 在背景上有多个物体运动 – 可以模拟物体远近不同的透视关系
游戏地图的创建与显示 • 菱形地图
– 使用二维模拟三维效果 – 使用小的菱形地图块拼接形成
游戏地图的创建与显示 • Cocos2d-x中的地图显示
– 砖块地图（可复用的小块拼接而成）
– 由Director统一管理 – 单一场景由Scene类实现 – 以类似场景图的节点树来组织场景的游戏元素
游戏场景的组织管理 • Director管理场景的几个方面
– 游戏启动时，运行游戏主场景 – 不同场景间切换的两种方式
（1）直接切换场景 （2）当前场景入栈后切换到新场景
– 游戏的暂停（定时器、动作等） – 游戏的恢复 – 游戏的终止，退出游戏
– 常见于棋牌类和策略类的游戏。这类游戏的特点 是站在俯视的角度，观察整个游戏
– 典型游戏
《三国志》 《黑色沙漠》
游戏地图的创建与显示 • 固定地图
– 使用固定背景 – 屏幕切割成棋盘状 – 内存中保持小块编号 – 小块拼接成背景地图
游戏地图的创建与显示 • 滚屏地图
– 是固定地图的扩展 – 可以显示远大于地图的图像 – 根据角色当前位置显示图像中对应区域地图
《1942》 《塞尔达传说》
二维游戏背景类型 • 斜45度型
– 主要用于策略类和角色扮演类游戏，允许开发者 创建壮观的，详细的视觉效果，常见于一些日韩 的角色扮演类游戏中。这类游戏的特点是背景中 的物体具有层次感，有视觉上的遮挡关系 – 典型游戏
《最终幻想》 《仙剑奇侠传》
二维游戏背景类型 • 俯视角型
扩展控件 • 滑动条控件
– 可用于调节游戏数值，如音量等 – 由ControlSlider实现 – 相关方法：
1. setMaximumValue：设置最大值 2. setValue：设置当前值 3. setMinimumValue：设置最小值
扩展控件 • 开关控件
– 可用于调节效果开关，如音效的开关等 – 由ControlSwitch实现 – 相关方法：
平面游戏地图
斜45度角砖块地图
游戏地图的创建与显示 • 砖块地图编辑器 – Tiled Map Editor
– 步骤1，新建地图：
“文件”->“新文件”来新建一张地图 创建时可设置地图方向（块排列方向），地图大小 （宽高的块数），以及块大小
游戏地图的创建与显示 • 砖块地图编辑器 – Tiled Map Editor
1. setOn：设置开关状态 2. isOn：获取开关状态 3. setEnabled：设置开关可用状态
扩展控件 • 按钮控件
– 用于效果调节、用户交互等 – 由ControlButton实现 – 相关方法：
1. setBackgroundSpriteForState：设置不同 状态下按钮的图片 2. setTitleColorForState：设置不同状态 的按钮文字颜色
游戏画面背景 • 游戏画面特点
– 画面质量直接影响游戏销量 – 不是单一的图片组成 – 分层次显示：前景、远景、底色和建筑层等
• 二维游戏背景类型
– 平面滚动型 – 斜45度型 – 俯视角型
二维游戏背景类型 • 平面滚动型
– 大多数二维游戏产品均是此类型，多用于冒险类 和设计类的游戏。这类游戏的特点是保持游戏主 角不动，游戏背景向反方向运动，使游戏主角与 背景产生相对运动，从而制作出动画效果 – 典型游戏
– 创建菜单对象 – 创建一个或多个菜单项 – 把这些菜单项添加到菜单当中
菜单项 • 菜单和菜单项的使用过程
– 创建菜单对象:
Menu* menu = Menu::create(); menu->setPosition(Point::ZERO); a程
testMIL->setPosition(Point(visibleSize.width/2,700));
菜单项 • 菜单和菜单项的使用过程
- 把这些菜单项添加到菜单当中: menu->addChild(testMIL);
菜单项 • 菜单和菜单项的使用过程
Menu* menu = Menu::create(); addChild(menu);
菜单项 • 菜单效果示例
添加各类菜单项效果
扩展控件 • 滚动框
– 可显示多于一页内容 – 分类：
(1) ScrollView (2) TableView
扩展控件 • 滚动框之ScrollView
– 相关方法：
1. setDirection ：设置滚动方向 2. scrollToBottom：滚动到最低位置，可设置延迟 3. jumpToBottom：直接跳转到最低位置 4. setInnerContainerSize：设置尺寸 5. addEventListenerScrollView：添加事件侦听
第 5 章 二维游戏场景绘制
浙江大学软件学院 梁秀波 Email：liangxb@
主要内容 • • • • • • • 游戏场景的组织管理 游戏画面背景 文字与字体 菜单项 扩展控件 游戏场景渲染实例——英雄快跑 小结
游戏场景的组织管理 • 场景的几何组织与优化
– 着重提高场景绘制效率 – 建立优化的场景表达模型
扩展控件 • 滚动框TableView
– 相关方法：
1.setVerticalFillOrder：单元格垂直顺序 2.reloadData：刷新数据 3.dequeueCell：滑出可视范围的行添加到缓存 4.tableCellSizeForIndex：每行尺寸 5.cellSizeForTable：获得表格对象尺寸 6.tableCellAtIndex：获得某行内容
– 地图类，可以通过create方法创建并显示到场景 中 – 简单加载与显示：
auto testMap = TMXTiledMap::create("ddd.tmx"); This->addChild(testMap);
Cocos2d-x中使用砖块地图使用的类 • TMXLayer
– 一个地图中可能有多个层次 – TMXLayer类是精灵帧批处理类 （SpriteBatchNode类）的子类，地图对象可以 通过地图中的图层名来获得图层名对应的对象， 也可以通过标签获得其对应的图层。
– 创建一个或多个菜单项:
Label* labelMIL = Label::createWithSystemFont("MenuItemLabel", "bitfont",40); labelMIL->setColor(Color3B(0,250,0));
MenuItemLabel* testMIL = MenuItemLabel::create(labelMIL, CC_CALLBACK_1(HelloWorld::testCallback,this));
• 场景的画面质量
– 文理映射 – 粒子特效
• 模拟真实物理定律
– 物理遮挡 – 碰撞检测
游戏场景的组织管理
• 二维游戏程序应该具备的两个基本功能 – 交互 – 输出
• 游戏的简单调度模块
– 串行执行的do-while循环
开始
· · ·
再绘 制
交互 输出
再输 出
游戏场景的组织管理 • Cocos2d-x中的场景管理
游戏实例——英雄快跑 • 游戏制作步骤
– 使用TiledMap编辑地图并加载 – 添加玩家以及播放简单帧动画 – 添加砖块左边和屏幕坐标转化 – 增加角色跳动和跑动效果 – 判断游戏输赢
游戏实例——英雄快跑 • 游戏最终效果图