Quick-Cocos2d-x初学者游戏教程(五) --------------------- 辅助工具和跳转场景

Quick-Cocos2d-x初学者游戏教程(五)

上一章我们创建了游戏的菜单场景,并讲解了一些基础元素的创建,接下来这章,我们会先让大家了解一些接下来游戏开发中需要用到的辅助工具,然后再教大家创建另一个游戏场景,并跳着到该场景中来。

工具介绍

在开始真真的写代码之前,其实早该讲讲以下这些辅助工具的。这些工具可以让我们更好更方便的实现程序中的某些功能,比如地图编辑工具、粒子编辑工具 等。尽管这些工具在我之前的教程中已经不厌其烦的讲了好多次了,但是为了做到真正的初学者教程,本小节还是先来简单的介绍下这些工具的使用方法,毕竟接下 来的章节中我们会陆续的用到这些工具。还是那句话,希望对初学者有所帮助。

TexturePacker

TexturePacker 是一款图片编辑打包工具,它能将我们游戏中用到的多个图片资源打包成一张大图,这样加载图片不仅能节省空间,而且还能提升速度。
TexturePacker 的下载可以到它的官方网站进行下载。

Texturepacker工具的使用很简单,它的每个设置项都给出了相应的提示信息,这里我们打包的步骤如下:

  1. 将资源图片(PS:如果图片资源本身就大,那不建议使用 TexturePacker 进行打包,因为打包出来的资源很有可能会超出硬件设备对纹理最大尺寸的限制。)拖动到 TexturePacker 右侧窗口中。
  2. 设置导出资源的格式、位置,这里会导出两种文件,其中一个是储存图片信息属性的列表文件,该文件只能是 .plist
    格式;另一个文件是打包后的图片文件,它可以是 .png,.jpg,.pvr.ccz
    等等格式,但这里建议打包为pvr.ccz格式,因为使用这种图片格式的好处有两点:1、可以使你的应用程序更小,因为图片是被压缩过了的。2、你的游戏
    能够启动地更快。
  3. 点击 Publish 按钮导出资源。

在 Quick 中要想使用这种被打包的资源,那么我们首先需要把它载入精灵帧缓存。以下函数能实现这一目的:


1

display.addSpriteFrames(数据文件名, 材质文件名)

  • 材质文件名:由多张图片组成;
  • 数据文件(plist 文件):记录了图片在材质文件中的位置等信息。
    如下是用Xcode打开的 plist 文件的结构,我想这样可以让各位更加直观的感受下打包这个概念。

精灵帧缓存 SpriteFrameCache 是用来存储精灵帧 SpriteFrame 的,SpriteFrame
精灵帧对象可以用来追踪所有精灵帧缓存中精灵的信息。缓存精灵帧有助于提高程序的效率。其中 SpriteFrameCache
是一个单例模式,它不属于某个精灵,是所有精灵共享使用的。

addSpriteFrames 方法将从传人的 plist 列表文件的元数据部分获取各个纹理的纹理名,并将它载入到纹理缓存中,然后解析它属性列表里的文件。

当我们要使用精灵帧来创建一个精灵时,我们可以像前面创建普通精灵一样使用newSprite方法。但为了和直接用文件中的图片创建精灵区分开
来,Quick
中规定:如果图片名以“#”字符开头,那么该图片将从SpriteFrameCache中读取,如果没有“#”开头,才表示直接从文件中读取。

关于打包文件的实际应用,我们后面会给出例子。这里你可以先把资源载入精灵帧缓存,如下在 MyApp:run() 方法中添加以下代码:

`


1

display.addSpriteFrames("image/player.plist", "image/player.pvr.ccz")

`

TiledMap编辑器

TiledMap 编辑器是一款地图编辑工具,我们可以利用它把单个单个的图块(或称之为瓦片)拼接成一幅完整的地图,我们也称之为瓦片地图编辑器。

TiledMap 编辑器制作的地图为 TMX 格式的文件,该文件可以被 Cocos2d-x(Quick)很好的支持。其官方下载地址为:http://www.mapeditor.org/

本游戏中,我们将用TiledMap编辑器编辑本游戏的部分地图,具体的方法我们在用到时在详细讲解。

粒子编辑器

本游戏中,后面我们会用粒子效果来渲染游戏场景,使游戏更加炫丽,所以下面我要说说这个粒子编辑器是个咋回事!

因为游戏中往往需要有到一些特殊的粒子效果(如烟花、爆炸、下雪等等),所以粒子系统这样的程序模块便在各类游戏引擎中孕育而生,Cocos2d-
x(Quick)也不例外,它为我们提供了强大的粒子系统。只不过Cocos2d-x(Quick)中的粒子系统有非常多的属性需要设置和调节,使用起来
还是有些复杂。

所以为了能偷懒,程序员们开发了粒子编辑器,它可以很方便的编辑出漂亮的粒子效果,让你勉去手动设置粒子属性的过程。

常用的粒子编辑器也有两种,一种是ParticleDesigner,另一种是ParticleEditor(之前我也写过一篇关于如何使用ParticleEditor编辑器相关的文章,可供大家可以参考)。

教程中我们所用的粒子编辑器是ParticleDesigner,下面是我用该编辑器调出的一个粒子效果。

注意:如果想要调出满意的粒子效果,那么需要了解整个粒子系统的组成原理,所以想自己试试的童鞋可以参考《粒子效果》一文.

以上我们就粗劣的介绍完了开发中将用到的辅助工具,接下来我们来看看如何创建新的游戏场景。

新建游戏场景

在 Sublime 编辑器中新建一个 lua 文件是非常容易的,只需要在菜单栏中选择 File-》New File
就可以新建一个文档,然后再把这个文档以 .lua 的形式保存在 src ? app ? scenes 目录下就可以了。此处我们新建一个 lua
文件,取名为 GameScene。

这个 GameScene 场景将是本游戏的逻辑场景,飞行游戏的所有逻辑部分的代码都将在本场景中实现。所以下面我们就来开始构建这样的一个游戏场景吧。

首先,根据 MainScene.lua 文件的构成形式,我们依葫芦画瓢在 GameScene.lua 文件中加入如下的一段代码,该段代码将为我们创建一个空白的游戏场景。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

local GameScene = class("GameScene", function()

    return display.newScene("GameScene")

end)

function GameScene:ctor()

end

function GameScene:onEnter()

end

function GameScene:onExit()

end

return GameScene

添加好以上代码后,一个简单且背景黢黑的 GameScene 场景就算创建好了。

关于 GameScene 的代码我们暂时就这样子,在下章分析完 GameScene 的构成后我们再着手编写。下面我们先来跳转到 GameScene 场景看看跳转效果。

跳转场景

我们知道,游戏运行的第一个游戏场景是 MainScene 场景,所以,现在请打开 MainScene.lua
文件,让我们来添加代码使它能跳转到 GameScene 场景,添加的位置是在点击开始按钮时触发的 onButtonClicked
函数中。代码如下所示:


1

2

3

4

cc.ui.UIPushButton.new({ normal = "image/start1.png", pressed = "image/start2.png" })

    :onButtonClicked(function()

        app:enterScene("GameScene", nil, "SLIDEINT", 1.0)

    end)

enterScene 方法我们曾在讲解 MyApp.lua 文件时提到过,当时只是使用该方法简单的进入场景而已,而此处我们则添加了特别的切换效果。并没有深入的解析,下面我们就来看看enterScene方法的定义,如下所示:


1

enterScene(sceneName, args, transitionType, time, more)

它的参数分别是:

  • sceneName:表示跳转场景的场景名,也就是我们将要进入的场景的场景名。
  • args:表示跳转场景传给该场景类构造函数的参数,args需要是一个table。
  • transitionType:表示场景切换的过渡动画类型,lua中定义的过渡动画类型差不多有30种.
  • time:表示从当前场景跳转到 sceneName 场景的过渡时间。
  • more:表示过渡效果附加参数。

所以,app:enterScene("GameScene", nil, "SLIDEINT", 1.0)表示从当前场景切换到 GameScene 场景,切换的过渡动画是 SLIDEINT 类型(新场景 GameScene 从顶部进入,同时现有场景 MainScene 从底部退出),整个切换过程用时1秒。

transitionType可以是如下的一些类型:

  • crossFade:淡出当前场景的同时淡入下一个场景
  • fade:淡出当前场景到指定颜色,默认颜色为 ccc3(0, 0, 0),可用 wrapSceneWithTransition() 的最后一个参数指定颜色
  • fadeBL:从左下角开始淡出场景
  • fadeDown:从底部开始淡出场景
  • fadeTR:从右上角开始淡出场景
  • fadeUp:从顶部开始淡出场景
  • flipAngular:当前场景倾斜后翻转成下一个场景,默认从左边开始翻转,可以指定为:
    • cc.TRANSITION_ORIENTATION_LEFT_OVER 从左边开始
    • cc.TRANSITION_ORIENTATION_RIGHT_OVER 从右边开始
    • cc.TRANSITION_ORIENTATION_UP_OVER 从顶部开始
    • cc.TRANSITION_ORIENTATION_DOWN_OVER 从底部开始
  • flipX:水平翻转,默认从左往右翻转,可用的附加参数同上
  • flipY:垂直翻转,默认从上往下翻转,可用的附加参数同上
  • zoomFlipAngular:倾斜翻转的同时放大,可用的附加参数同上
  • zoomFlipX:水平翻转的同时放大,可用的附加参数同上
  • zoomFlipY:垂直翻转的同时放大,可用的附加参数同上
  • jumpZoom:跳跃放大切换场景
  • moveInB:新场景从底部进入,现有场景同时从顶部退出
  • moveInL:新场景从左侧进入,现有场景同时从右侧退出
  • moveInR:新场景从右侧进入,现有场景同时从左侧退出
  • moveInT:新场景从顶部进入,现有场景同时从底部退出
  • pageTurn:翻页效果,如果指定附加参数为 true,则表示从左侧往右翻页
  • rotoZoom:旋转放大切换场景
  • shrinkGrow:收缩交叉切换场景
  • slideInB:新场景从底部进入,直接覆盖现有场景
  • slideInL:新场景从左侧进入,直接覆盖现有场景
  • slideInR:新场景从右侧进入,直接覆盖现有场景
  • slideInT:新场景从顶部进入,直接覆盖现有场景
  • splitCols:分成多列切换入新场景
  • splitRows:分成多行切换入新场景,类似百叶窗
  • turnOffTiles:当前场景分成多个块,逐渐替换为新场景

此时刷新 player,我们就会看到跳转场景的效果。

时间: 2024-10-05 00:33:25

Quick-Cocos2d-x初学者游戏教程(五) --------------------- 辅助工具和跳转场景的相关文章

Quick-Cocos2d-x初学者游戏教程(二) -------------------- Quick内部的代码结构及相应的原理

Quick-Cocos2d-x初学者游戏教程(二) 上一章我们已经了解了Quick的一些基础知识,所以本章我们将开始深入到Quick内部,了解它内部的代码结构,同时在解析的过程中学到相应的原理,并学会如何修改.添加相应的代码文件,比如实现屏幕的分辨率适配. 前面我们创建了一个叫做parkour的游戏项目,其意思就是本人本来打算要做一个跑酷游戏的,但是因为这几天玩了一款叫做<el>的飞行游戏,非常有意境,并且几乎零差评,所以请允许我任性一下,善变的我不想做跑酷游戏了,而是想要挑战下这种类型的游戏

Quick-Cocos2d-x初学者游戏教程(三) ---------------------------- 解析quick新建项目的代码文件

Quick-Cocos2d-x初学者游戏教程(三) 2.main.lua 在src目录下,除了 config.lua 文件外,还有一个 main.lua 文件,这个 main.lua 是 Quick 项目的通用入口文件,它类似于 Cocos2d-x 中的 AppDelegate.h/cpp 文件,同时也类似于一般 Windows 工程中的 main 文件. 打开 main.lua 文件,其内容如下所示: 1 2 3 4 5 6 7 8 9 10 function __G__TRACKBACK__

Quick-Cocos2d-x初学者游戏教程(一)--------------------Quick的一些基础知识

本文转自Quick-Cocos2d-x初学者游戏教程(一) 前言 虽然之前已经写过了很多 Cocos2d-x 相关的教程和文档,但本次却是我第一次接触 Quick,第一次接触 Lua,所以此次的教程本人将站在一个初学者的角度(看到这里是不是想白眼我了,哈哈,别切啊!尽管第一次,但我身边可是有很多 Quick 大神的,廖大大也在旁边办公室,没准撒个娇大神就把他知道的全部要点倾囊相授了啦!),全方位的解析 Quick 的学习过程,并同大家一起学习如何利用 Quick-Cocos2d-x 开发一款属于

Quick-Cocos2d-x初学者游戏教程(六) --------------------- 游戏逻辑

Quick-Cocos2d-x初学者游戏教程(六) 上一章我 们介绍了开发中会用到的辅助工具,并创建了 GameScene 场景,接下来这章我们将继续 GameScene 的传(bai)奇(bi).不过在开始编写 GameScene 场景的代码之前,我们还是先来明确一下游戏的功能和实现方法.这样可以帮我们更好的理解并设计逻辑.下面是总结出的结论: 在 GameScene 场景中,我们将创建一个飞行的娃娃角色,这个角色是游戏的唯一主角.游戏初始状态下,这个角色有满满的生命值,但随着时间的推移,生命

Quick-Cocos2d-x初学者游戏教程(十三) ---------- 完善游戏功能

Quick-Cocos2d-x初学者游戏教程(十三) 本章将是本教程的最后一章,在这章我们将完善游戏功能,即给游戏添加粒子特效,音乐音效,和玩家的受伤动画等等. 添加受伤动画 首先,我们来添加玩家受伤动画. 玩家受伤动画是 Player 与障碍物或地面碰撞的时候播放的一个动画效果,它是一个独立的帧动画,帧序列图片如下: PS:该动画添加到玩家上是非常丑的,所以如果各位有更好地资源可以不用它.我的美术御用妹子前两周出车祸把手伤了,没人给我画,所以才迫不得已找了这个丑图来替代,看不下去的见谅! 我们

Quick-Cocos2d-x初学者游戏教程(四) --------------- 开发初探(添加背景,标题,动作,按钮)

Quick-Cocos2d-x初学者游戏教程(四) 前面我们已经大概的讲解完了Quick的框架和代码结构,接下来,本章开始我们将正式进入到游戏的开发.当然在开发的过程中,如果遇到值得一提的知识点和概念,我们还是会为大家详细讲解的. 哈哈,这章的内容我加它为——开发初探,因为我们将先来实现一些基础的内容.本章将实现的效果如下图所示: 菜单场景 从前面章节讲解的的知识点中,我们知道每个新建的 Quick 项目里都已经默认创建好了一个 mainScene 场景,所以下面我们将利用这个现成的场景,把它改

Quick-Cocos2d-x初学者游戏教程(十一) ------------------ 物体碰撞检测

Quick-Cocos2d-x初学者游戏教程(十一) 本章主要讲解物体碰撞检测之间的原理,以及具体的实现方法. 碰撞检测 本游戏使用物理引擎的一个重要目的是为了让碰撞检测更方便,使用物理引擎可以进行精确的碰撞检测,而且执行的效率也很高. 在 Quick 3.3final 版本中,所有事件均有事件派发器统一管理,物理引擎的碰撞事件也不例外.它由 cc.EventListenerPhysicsContact 的实例来监听. 监听事件分类 碰撞监听事件有以下几种: cc.Handler.EVENT_P

Quick-Cocos2d-x初学者游戏教程(八)----------------- 物理引擎和角色

Quick-Cocos2d-x初学者游戏教程(八) 续上章载入 TiledMap 背景后,接下来的这章我们将开始引入物理引擎相关的东西,并且会开始创建我们的游戏角色.游戏地图中各类障碍物和奖励品的创建则会留到下一章. 构建物理世界 首先,物理引擎是干什么的应该不用我说吧?好吧,还是说一下(百度的):物理引擎通过为刚性物体赋予真实的物理属性的方式来计算运动.旋转和碰撞反映.所以用它来模拟真实世界的飞行.掉落等功能是具有得天独厚的优势的,这也是为什么我们的游戏要使用它的原因. 然后,我们要怎样使用物

Quick-Cocos2d-x初学者游戏教程(十) ---------------- 添加游戏障碍物

Quick-Cocos2d-x初学者游戏教程(十) 在我们的游戏中,我们除了添加奖励品外,还需要添加一些必要的障碍物来丰富游戏逻辑,增加游戏难度,所以本章我们将继续上章的内容——添加游戏障碍物.游戏中,障碍物是不止一种,这里有飞行的鸟,有上下移动的飞艇. 创建障碍物-飞艇 其实创建飞艇的逻辑和前面创建心心的逻辑是一样的,只不过这里我想让飞艇不停的上下移动,一方面做点带感的效果出来,另一方面也可以增加游戏难度. 看过之前教程的童鞋,现在应该懂得怎样创建这样的一个飞艇了吧.所以下面我们直接给出它的定