2854人阅读
Quick-Cocos2d-x（15）
前面提到的是基本的菜单使用，还是很容易的，不过我们在商业产品中，经常看到的按钮都是非常好看，不光光是图片做得精美，而且动画效果也很棒。Candy Crash都玩过吧，看它们那个按钮，真的像果冻一样，效果确实很赞，所以我们也来做个，当然不是它那个效果，而且点击之后有一个抖动的效果。像这样，
好了，开始做个吧，我这个也是搬了一下coinflip中的按钮代码，算是学习一下。
创建一个views文件夹，里面创建一个MyButton.lua文件，这个就是我们的自定义按钮类了。实现的原理比较简单，在ui.newImageMenuItem的table参数中，有图片，回调函数等参数，所以我们的做法就是在传入这些参数之后，我们在内部修改一些东西就可以了。等于quick给图片按钮封装了一次，我们自己再封装一下。
local MyButton = {}
function MyButton.new(params)
local button = nil
button = ui.newImageMenuItem(params)
return button
return MyButton
这就封装了一下quick中的ui.newImageMenuItem，下面做的就是把params的参数捕获，处理我们的效果之后再传给ui.newImageMenuItem中的参数。
function MyButton.new(params)
local button = nil
local listener = params.listener
params.listener = function (tag)
--do things
listener(tag)
button = ui.newImageMenuItem(params)
return button
上面这段代码中，我们将传入的回调函数先用listener变量保存起来，然后在listener参数中处理一些事情，最后记得在里面调用之前传入的回调函数即可。所以现在还没添加效果代码，为了后面大家能看得更清楚些。
接下来，我们就来添加一下之前展示的效果了。
params.listener = function (tag)
local function zoom1(offset, time, onComplete)
local x, y = button:getPosition()
local size = button:getContentSize()
local scaleX = button:getScaleX() * (size.width + offset) / size.width
local scaleY = button:getScaleY() * (size.height - offset) / size.height
transition.moveTo(button, {y = y - offset, time = time})
transition.scaleTo(button, {
onComplete = onComplete,
local function zoom2(offset, time, onComplete)
local x, y = button:getPosition()
local size = button:getContentSize()
transition.moveTo(button, {y = y + offset, time = time / 2})
transition.scaleTo(button, {
onComplete = onComplete,
button:getParent():setEnabled(false)
--先关闭父类menu的功能
zoom1(40, 0.08, function()
zoom2(40, 0.09, function()
zoom1(20, 0.10, function()
zoom2(20, 0.11, function()
button:getParent():setEnabled(true)
listener(tag)
zoom1和zoom2是两个效果函数，主要是move和scale两个动作，在做效果之前，首先关闭父类的menu功能，这样防止在这个menu item还没做完动作又被玩家点上别的按钮上了，执行一系列的缩放效果之后，再开启menu功能，最后执行之前的回调函数，这样一个动画按钮就新鲜出炉了。
赶紧放到menu中测试一下，
local Button = import(&..views.MyButton&) --导入Button
local MyScene = class(&MyScene&, function ()
return display.newScene(&myscene&)
function MyScene:ctor()
local button = Button.new({
image = &icon.png&,
listener = function ()
print(&click&)
x = display.cx,
y = display.cy
local menu = ui.newMenu({button})
self:addChild(menu)
return MyScene
这样就可以添加上去了，还可以和quick封装的其他按钮一起放在menu管家中。
好了，大家都可以自己做个喜欢的效果了。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：199181次
积分：2620
积分：2620
排名：第10311名
原创：53篇
评论：91条
文章：14篇
阅读：46722
文章：13篇
阅读：70106
(1)(1)(5)(15)(1)(4)(2)(2)(9)(4)(8)(1)(1)quick-cocos2d-x android返回键监听并实现原生退出对话框
这两天终于闲了一下，就顺手又把quick捡起来又学了学，一直都觉得quick比cocos2dx那套lua绑定要方便许多，今天试了下android返回键的监听，还是挺好弄的，所以就有了这篇。
首先说明一下使用的quick版本——2.2.5。
直接上代码
function MainScene:addBackEvent()
if device.platform == "android" then
self.touchLayer = display.newLayer()
self.touchLayer:addNodeEventListener(cc.KEYPAD_EVENT, function(event)
if event.key == "back" then
--CCDirector:sharedDirector():endToLua()
local javaClassName = "com/cocos2dx/testgame/Testgame"
local javaMethodName = "exit"
luaj.callStaticMethod(javaClassName, javaMethodName)
self.touchLayer:setKeypadEnabled(true)
self:addChild(self.touchLayer)
end比较好理解，创建一个层，为该层添加一个事件监听，这个事件监听的类型是keypad，如果key的值是back那么就执行里面的代码了，如果不需要显示android原生的对话框，只要关闭程序，只需要执行上面代码中注释的部分就可以了。
2.2.3之后的版本在添加事件监听上与之前有所不同，这里需要注意下。
当然做软件嘛，好歹有个温馨提示，防止用户无意点到退出游戏就不友好了，所以这里调用了一下android原生对话框来显示。quick提供了一个luajavabridge这个sample，可以很轻松调用到android中的静态函数。
这里还是贴一下android中调用的函数代码
public static void exit() {
instance.runOnUiThread(new Runnable() {
public void run() {
Builder builder = new Builder(instance);
builder.setTitle("提示");
builder.setMessage("确定退出吗");
builder.setIcon(android.R.drawable.ic_dialog_info);
builder.setPositiveButton("确定", new OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
System.exit(0);
builder.setNegativeButton("取消", new OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}).show();
}这样就大功告成！
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'阅读：3034次
我们创建了游戏的菜单场景，并讲解了一些基础元素的创建，接下来这章，我们会先让大家了解一些接下来游戏开发中需要用到的辅助工具，然后再教大家创建另一个游戏场景，并跳着到该场景中来。工具介绍在开始真真的写代码之前，其实早该讲讲以下这些辅助工具的。这些工具可以让我们更好更方便的实现程序中的某些功能，比如地图编辑工具、粒子编辑工具等。尽管这些工具在我之前的教程中已经不厌其烦的讲了好多次了，但是为了做到真正的初学者教程，本小节还是先来简单的介绍下这些工具的使用方法，毕竟接下来的章节中我们会陆续的用到这些工具。还是那句话，希望对初学者有所帮助。TexturePackerTexturePacker 是一款图片编辑打包工具，它能将我们游戏中用到的多个图片资源打包成一张大图，这样加载图片不仅能节省空间，而且还能提升速度。TexturePacker 的下载可以到它的进行下载。Texturepacker工具的使用很简单，它的每个设置项都给出了相应的提示信息，这里我们打包的步骤如下：
将资源图片拖动到 TexturePacker 右侧窗口中。
设置导出资源的格式、位置，这里会导出两种文件，其中一个是储存图片信息属性的列表文件，该文件只能是 .plist 格式；另一个文件是打包后的图片文件，它可以是 .png，.jpg，.pvr.ccz 等等格式，但这里建议打包为pvr.ccz格式，因为使用这种图片格式的好处有两点：1、可以使你的应用程序更小，因为图片是被压缩过了的。2、你的游戏能够启动地更快。
点击 Publish 按钮导出资源。
在 Quick 中要想使用这种被打包的资源，那么我们首先需要把它载入精灵帧缓存。以下函数能实现这一目的：display.addSpriteFrames(数据文件名, 材质文件名)
材质文件名：由多张图片组成；
数据文件（plist 文件）：记录了图片在材质文件中的位置等信息。如下是用Xcode打开的 plist 文件的结构，我想这样可以让各位更加直观的感受下打包这个概念。
精灵帧缓存 SpriteFrameCache 是用来存储精灵帧 SpriteFrame 的，SpriteFrame 精灵帧对象可以用来追踪所有精灵帧缓存中精灵的信息。缓存精灵帧有助于提高程序的效率。其中 SpriteFrameCache 是一个单例模式，它不属于某个精灵，是所有精灵共享使用的。addSpriteFrames 方法将从传人的 plist 列表文件的元数据部分获取各个纹理的纹理名，并将它载入到纹理缓存中，然后解析它属性列表里的文件。当我们要使用精灵帧来创建一个精灵时，我们可以像前面创建普通精灵一样使用newSprite方法。但为了和直接用文件中的图片创建精灵区分开来，Quick 中规定：如果图片名以“#”字符开头，那么该图片将从SpriteFrameCache中读取，如果没有“#”开头，才表示直接从文件中读取。关于打包文件的实际应用，我们后面会给出例子。这里你可以先把资源载入精灵帧缓存，如下在 MyApp:run() 方法中添加以下代码：display.addSpriteFrames("image/player.plist", "image/player.pvr.ccz")TiledMap编辑器TiledMap 编辑器是一款地图编辑工具，我们可以利用它把单个单个的图块（或称之为瓦片）拼接成一幅完整的地图，我们也称之为瓦片地图编辑器。TiledMap 编辑器制作的地图为 TMX 格式的文件，该文件可以被 Cocos2d-x（Quick）很好的支持。其官方下载地址为：。本游戏中，我们将用TiledMap编辑器编辑本游戏的部分地图，具体的方法我们在用到时在详细讲解。粒子编辑器本游戏中，后面我们会用粒子效果来渲染游戏场景，使游戏更加炫丽，所以下面我要说说这个粒子编辑器是个咋回事！因为游戏中往往需要有到一些特殊的粒子效果（如烟花、爆炸、下雪等等），所以粒子系统这样的程序模块便在各类游戏引擎中孕育而生，Cocos2d-x（Quick）也不例外，它为我们提供了强大的粒子系统。只不过Cocos2d-x（Quick）中的粒子系统有非常多的属性需要设置和调节，使用起来还是有些复杂。所以为了能偷懒，程序员们开发了粒子编辑器，它可以很方便的编辑出漂亮的粒子效果，让你勉去手动设置粒子属性的过程。常用的粒子编辑器也有两种，一种是ParticleDesigner，另一种是ParticleEditor（之前我也写过一篇关于如何使用相关的文章，可供大家可以参考）。教程中我们所用的粒子编辑器是ParticleDesigner，下面是我用该编辑器调出的一个粒子效果。注意：如果想要调出满意的粒子效果，那么需要了解整个粒子系统的组成原理，所以想自己试试的童鞋可以参考一文.以上我们就粗劣的介绍完了开发中将用到的辅助工具，接下来我们来看看如何创建新的游戏场景。新建游戏场景在 Sublime 编辑器中新建一个 lua 文件是非常容易的，只需要在菜单栏中选择 File－》New File 就可以新建一个文档，然后再把这个文档以 .lua 的形式保存在 src ? app ? scenes 目录下就可以了。此处我们新建一个 lua 文件，取名为 GameScene。这个 GameScene 场景将是本游戏的逻辑场景，飞行游戏的所有逻辑部分的代码都将在本场景中实现。所以下面我们就来开始构建这样的一个游戏场景吧。首先，根据 MainScene.lua 文件的构成形式，我们依葫芦画瓢在 GameScene.lua 文件中加入如下的一段代码，该段代码将为我们创建一个空白的游戏场景。local GameScene = class("GameScene", function()
return display.newScene("GameScene")
function GameScene:ctor()
function GameScene:onEnter()
function GameScene:onExit()
return GameScene添加好以上代码后，一个简单且背景黢黑的 GameScene 场景就算创建好了。关于 GameScene 的代码我们暂时就这样子，在下章分析完 GameScene 的构成后我们再着手编写。下面我们先来跳转到 GameScene 场景看看跳转效果。跳转场景我们知道，游戏运行的第一个游戏场景是 MainScene 场景，所以，现在请打开 MainScene.lua 文件，让我们来添加代码使它能跳转到 GameScene 场景，添加的位置是在点击开始按钮时触发的 onButtonClicked 函数中。代码如下所示：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方法的定义，如下所示：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，我们就会看到跳转场景的效果。转载请注明出自：
相关文章推荐
泰然网手游开发官方群：
独立游戏人：quick-cocos2d-x android返回键监听并实现原生退出对话框
博文评论:36
资源评论:121
积分与排名
阅读排行榜
quick-cocos2d-x android返回键监听并实现原生退出对话框
这两天终于闲了一下，就顺手又把quick捡起来又学了学，一直都觉得quick比cocos2dx那套lua绑定要方便许多，今天试了下android返回键的监听，还是挺好弄的，所以就有了这篇。
首先说明一下使用的quick版本&&2.2.5。
直接上代码
function MainScene:addBackEvent()&
&&& if device.platform == &android& then&
&&&&&&& self.touchLayer = display.newLayer()&
&&&&&&& self.touchLayer:addNodeEventListener(cc.KEYPAD_EVENT, function(event)&
&&&&&&&&&&& if event.key == &back& then&&&
&&&&&&&&&&&&&&& --CCDirector:sharedDirector():endToLua()&
&&&&&&&&&&&&&&& local javaClassName = &com/cocos2dx/testgame/Testgame&&
&&&&&&&&&&&&&&& local javaMethodName = &exit&&
&&&&&&&&&&&&&&& luaj.callStaticMethod(javaClassName, javaMethodName)&
&&&&&&&&&&& end&
&&&&&&& end)&
&&&&&&& self.touchLayer:setKeypadEnabled(true)&
&&&&&&& self:addChild(self.touchLayer)&
function MainScene:addBackEvent()
if device.platform == &android& then
self.touchLayer = display.newLayer()
self.touchLayer:addNodeEventListener(cc.KEYPAD_EVENT, function(event)
if event.key == &back& then
--CCDirector:sharedDirector():endToLua()
local javaClassName = &com/cocos2dx/testgame/Testgame&
local javaMethodName = &exit&
luaj.callStaticMethod(javaClassName, javaMethodName)
self.touchLayer:setKeypadEnabled(true)
self:addChild(self.touchLayer)
比较好理解，创建一个层，为该层添加一个事件监听，这个事件监听的类型是keypad，如果key的值是back那么就执行里面的代码了，如果不需要显示android原生的对话框，只要关闭程序，只需要执行上面代码中注释的部分就可以了。
2.2.3之后的版本在添加事件监听上与之前有所不同，这里需要注意下。
当然做软件嘛，好歹有个温馨提示，防止用户无意点到退出游戏就不友好了，所以这里调用了一下android原生对话框来显示。quick提供了一个luajavabridge这个sample，可以很轻松调用到android中的静态函数。
这里还是贴一下android中调用的函数代码
public static void exit() {&
&&&&&&& instance.runOnUiThread(new Runnable() {&&&&&&&&&&
&&&&&&&&&&& @Override&
&&&&&&&&&&& public void run() {&
&&&&&&&&&&&&&&&& Builder builder = new Builder(instance);&
&&&&&&&&&&&&&&& builder.setTitle(&提示&);&
&&&&&&&&&&&&&&& builder.setMessage(&确定退出吗&);&
&&&&&&&&&&&&&&& builder.setIcon(android.R.drawable.ic_dialog_info);&
&&&&&&&&&&&&&&& builder.setPositiveButton(&确定&, new OnClickListener() {&
&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&& @Override&
&&&&&&&&&&&&&&&&&&& public void onClick(DialogInterface dialog, int which) {&
&&&&&&&&&&&&&&&&&&&&&&& System.exit(0);&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&&&& });&
&&&&&&&&&&&&&&& builder.setNegativeButton(&取消&, new OnClickListener() {&
&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&& @Override&
&&&&&&&&&&&&&&&&&&& public void onClick(DialogInterface dialog, int which) {&
&&&&&&&&&&&&&&&&&&&&&&& dialog.dismiss();&&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&&&& }).show();&&&&&&&&&&&&&&&
&&&&&&&&&&& }&
&&&&&&& });&
public static void exit() {
instance.runOnUiThread(new Runnable() {
public void run() {
Builder builder = new Builder(instance);
builder.setTitle(&提示&);
builder.setMessage(&确定退出吗&);
builder.setIcon(android.R.drawable.ic_dialog_info);
builder.setPositiveButton(&确定&, new OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
System.exit(0);
builder.setNegativeButton(&取消&, new OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}).show();
这样就大功告成！
所属分类：
推荐成功关注成功
收藏成功消息已发发送
您可能还喜欢原文请猛戳：
最近在处理一个略奇怪的问题：app在某些情况下点按钮会消失后又重新出现，报bug的童鞋们把现象描述得有些扑朔迷离，因此本渣在排查问题时花了不少时间，在查了一些不相关的问题之后最后终于确定了现象和原因（详情请参见本渣另一篇）。本渣也发现了quickx的按钮类UIButton在实现上存在的一些问题，与其不改动其内部实现去做个workaround，还不如根除问题。于是本渣对相关类的内部逻辑重新做了些设计和实现，相关的改动可以通过patch命令来采用。
{% include_code StateMachine.lua.patch lang:lua %}
{% include_code UIButton.lua.patch lang:lua %}
{% include_code UIPushButton.lua.patch lang:lua %}
{% include_code UICheckBoxButton.lua.patch lang:lua %}
完整的代码请猛戳：