在进行此部分学习的时候，确保Cocos2d-x for xna引擎的版本为0.1.2（或更高版本），实测0.1.0版本部分功能出现BUG。

之前的源码都是0.1.0版本的，从此次开始都是0.1.2版本。

开始菜单

背景

添加背景图片（“狼来了”的素材）和按钮至内容管道（Content）

创建两个类文件WolfMenuScene.cs和WolfMenuLayer.cs。

WolfMenuScene

WolfMenuScene

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using cocos2d;
 6
 7 namespace LearningCocos2d_xForXNA.Classes
 8 {
 9     class WolfMenuScene:CCScene
10     {
11         public WolfMenuScene()
12         {
13             CCLayer _wolfMenuLayer = new WolfMenuLayer();
14             this.addChild(_wolfMenuLayer);
15         }
16     }
17 }

WolfMenuLayer

设置屏幕朝向deviceOrientation

默认下是横屏显示，该属性有四个值

kCCDeviceOrientationLandscapeLeft始终朝向设备左侧

kCCDeviceOrientationLandscapeRight始终朝向设备右侧

kCCDeviceOrientationPortrait kCCDeviceOrientationPortraitUpsideDown始终朝向设备下侧

现在我们要它竖屏显示

CCDirector.sharedDirector().deviceOrientation = ccDeviceOrientation.kCCDeviceOrientationPortraitUpsideDown;//设置朝向，竖屏

设置背景图

我们用CCSprite实现，其中涉及到anchorPoint（锚点），简单的讲，默认下，cocos2d-x识别图片的position是以图片的中心为基准的，这点为锚点，我们可以设置锚点的位置，符合我们的需求。

            background.anchorPoint = new CCPoint(0, 0);//设置锚点在图片右上角background.position = new CCPoint(0, 0);//图片位置

当然，你也可以不修改anchorPoint，默认锚点（图片中心），实现图片位置。

background.position = new CCPoint(CCDirector.sharedDirector().getWinSize().width / 2, CCDirector.sharedDirector().getWinSize().height / 2);

addChild方法，使用了addChild(CCNode child, int zOrder)

其中zOrder为坐标轴的Z方向。其目的是同层中显示的顺序（遮挡）。

cocos2d提供的访问顺序是Z-Order为负值的子节点->自身节点->Z-Order为正值的子节点。

WolfMenuLayer

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using cocos2d;
 6
 7 namespace LearningCocos2d_xForXNA.Classes
 8 {
 9     class WolfMenuLayer:CCLayer
10     {
11         public WolfMenuLayer()
12         {
13             //背景
14             CCDirector.sharedDirector().deviceOrientation = ccDeviceOrientation.kCCDeviceOrientationPortraitUpsideDown;//设置朝向，竖屏
15             CCSprite background = CCSprite.spriteWithFile("img/Wolf/Menu/img_background");
16             //background.position = new CCPoint(CCDirector.sharedDirector().getWinSize().width / 2, CCDirector.sharedDirector().getWinSize().height / 2);
17             background.anchorPoint = new CCPoint(0, 0);//设置锚点在图片右上角
18             background.position = new CCPoint(0, 0);//图片位置
19             this.addChild(background, -1);
20         }
21     }
22 }

显示效果

菜单

菜单按钮

修改后的代码

WolfMenuLayer

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using cocos2d;
 6
 7 namespace LearningCocos2d_xForXNA.Classes
 8 {
 9     class WolfMenuLayer:CCLayer
10     {
11         public WolfMenuLayer()
12         {
13             //背景
14             CCDirector.sharedDirector().deviceOrientation = ccDeviceOrientation.kCCDeviceOrientationPortraitUpsideDown;//设置朝向，竖屏
15             CCSprite background = CCSprite.spriteWithFile("img/Wolf/Menu/img_background");
16             //background.position = new CCPoint(CCDirector.sharedDirector().getWinSize().width / 2, CCDirector.sharedDirector().getWinSize().height / 2);
17             background.anchorPoint = new CCPoint(0, 0);//设置锚点在图片右上角
18             background.position = new CCPoint(0, 0);//图片位置
19             this.addChild(background, -1);
20
21             //菜单按钮
22             string strBtnMenuItemSprite = "img/Wolf/Menu/btn_Menu";
23             CCSprite btnStartNormal = CCSprite.spriteWithFile(strBtnMenuItemSprite, new CCRect(0, 42 * 0, 125, 42));
24             CCSprite btnStartSelected = CCSprite.spriteWithFile(strBtnMenuItemSprite, new CCRect(0, 42 * 1, 125, 42));
25             CCSprite btnSettingNormal = CCSprite.spriteWithFile(strBtnMenuItemSprite, new CCRect(0, 42 * 2, 125, 42));
26             CCSprite btnSettingSelected = CCSprite.spriteWithFile(strBtnMenuItemSprite, new CCRect(0, 42 * 3, 125, 42));
27             CCSprite btnRecordNormal = CCSprite.spriteWithFile(strBtnMenuItemSprite, new CCRect(0, 42 * 4, 125, 42));
28             CCSprite btnRecordSelected = CCSprite.spriteWithFile(strBtnMenuItemSprite, new CCRect(0, 42 * 5, 125, 42));
29             CCSprite btnHelpNormal = CCSprite.spriteWithFile(strBtnMenuItemSprite, new CCRect(0, 42 * 6, 125, 42));
30             CCSprite btnHelpSelected = CCSprite.spriteWithFile(strBtnMenuItemSprite, new CCRect(0, 42 * 7, 125, 42));
31
32             CCMenuItemSprite btnStart = CCMenuItemSprite.itemFromNormalSprite(btnStartNormal, btnStartSelected, this, this.btnStartClickHandle);
33             CCMenuItemSprite btnSetting = CCMenuItemSprite.itemFromNormalSprite(btnSettingNormal, btnSettingSelected, this, this.btnSettingClickHandle);
34             CCMenuItemSprite btnRecord = CCMenuItemSprite.itemFromNormalSprite(btnRecordNormal, btnRecordSelected, this, this.btnRecordClickHandle);
35             CCMenuItemSprite btnHelp = CCMenuItemSprite.itemFromNormalSprite(btnHelpNormal, btnHelpSelected, this, this.btnHelpClickHandle);
36
37             CCMenu menu = CCMenu.menuWithItems(btnStart, btnSetting, btnRecord, btnHelp);
38             menu.alignItemsVertically();
39             this.addChild(menu, 0);
40         }
41
42         public void btnStartClickHandle(CCObject sender)
43         { }
44
45         public void btnSettingClickHandle(CCObject sender)
46         { }
47
48         public void btnRecordClickHandle(CCObject sender)
49         { }
50
51         public void btnHelpClickHandle(CCObject sender)
52         { }
53     }
54 }

显示效果

设置页面

新增WolfGameSettingScene.cs和WolfGameSettingLayer.cs

WolfGameSettingScene

WolfGameSettingScene

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using cocos2d;
 6
 7 namespace LearningCocos2d_xForXNA.Classes
 8 {
 9     class WolfGameSettingScene:CCScene
10     {
11         public WolfGameSettingScene()
12         {
13             CCLayer _wolfGameSettingLayer = new WolfGameSettingLayer();
14             this.addChild(_wolfGameSettingLayer);
15         }
16     }
17 }

WolfGameSettingLayer

添加背景素材（“狼来了”的素材）至内容管道(Content)文件夹img/Wolf/Setting

布局相关游戏设置按钮(音效\背景切换)并添加事件。

WolfGameSettingLayer

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using cocos2d;
 6
 7 namespace LearningCocos2d_xForXNA.Classes
 8 {
 9     class WolfGameSettingLayer:CCLayer
10     {
11         public WolfGameSettingLayer()
12         {
13             CCSprite backGround = CCSprite.spriteWithFile("img/Wolf/Setting/img_background");
14             backGround.anchorPoint = new CCPoint(0, 0);
15             backGround.position = new CCPoint(0, 0);
16             this.addChild(backGround, -1);
17
18             CCMenuItemFont.FontName = "Wolf/WolfGameSettingMenuTitle";
19             #region 音效
20             CCMenuItemFont toggleSoundTitle = CCMenuItemFont.itemFromString("音效");
21             toggleSoundTitle.Enabled = false;//不可用
22             CCMenuItemToggle toggleSound = CCMenuItemToggle.itemWithTarget(this,
23                 this.toggleSoundClickHandle,
24                 CCMenuItemFont.itemFromString("开"),
25                 CCMenuItemFont.itemFromString("关"));
26             #endregion
27             #region 背景
28             CCMenuItemFont toggleBgTitle = CCMenuItemFont.itemFromString("背景");
29             toggleBgTitle.Enabled = false;//不可用
30             CCMenuItemToggle toggleBg = CCMenuItemToggle.itemWithTarget(this,
31                 this.toggleBgClickHandle,
32                 CCMenuItemSprite.itemFromNormalSprite(CCSprite.spriteWithFile("img/bg_Sea1Mini"), CCSprite.spriteWithFile("img/bg_Sea1Mini")),
33                 CCMenuItemSprite.itemFromNormalSprite(CCSprite.spriteWithFile("img/bg_Sea2Mini"), CCSprite.spriteWithFile("img/bg_Sea2Mini")));
34             #endregion
35             CCMenu menu = CCMenu.menuWithItems(toggleSoundTitle, toggleSound, toggleBgTitle, toggleBg);
36             menu.alignItemsVerticallyWithPadding(10);
37             this.addChild(menu);
38             #region 返回按钮
39             CCLabelTTF label = CCLabelTTF.labelWithString("返回", "Wolf/WolfGameSettingMenuTitle", 20);
40             CCMenuItemLabel btnBack = CCMenuItemLabel.itemWithLabel(label, this, new SEL_MenuHandler(BackClickHandle));
41             label.Color = new ccColor3B(255, 0, 0);
42             CCSize s = CCDirector.sharedDirector().getWinSize();
43             btnBack.position = new CCPoint(0, -s.height/2+30);
44             CCMenu menuBack = CCMenu.menuWithItem(btnBack);
45             this.addChild(menuBack);
46             #endregion
47         }
48
49         public void toggleSoundClickHandle(CCObject sender)
50         {}
51
52         public void toggleBgClickHandle(CCObject sender)
53         {}
54
55         public void BackClickHandle(CCObject sender)
56         {}
57     }
58 }

显示效果

场景切换

CCDirector中的三个方法

pushScene (CCScene *pScene)

终止正在运行的场景，把它放到暂停场景的堆栈（内存）中去，新的场景将被执行。由于将场景放置内存中，场景并没有release。

popScene (void)

将经过pushScene的场景从堆栈（内存）中pop出来执行（前提是堆栈内存中存在场景）。

replaceScene (CCScene *pScene)

用一个新的场景去替换掉正在运行的场景，正在运行的场景将被终止。

在WolfMenuLayer中给“设置”按钮添加事件处理，创建WolfGameSettingScene对象，pushScene切换场景（页面）。

1         public void btnSettingClickHandle(CCObject sender)
2         {
3             CCScene _wolfGameSettingScene = new WolfGameSettingScene();
4             CCDirector.sharedDirector().pushScene(_wolfGameSettingScene);
5         }

同样在WolfGameSettingLayer中给“返回”按钮添加事件处理，popScene方法从堆栈内存中pop出场景（WolfMenuScene）。

        public void BackClickHandle(CCObject sender){CCDirector.sharedDirector().popScene();}

执行，点击“设置”，会跳转到“设置”页面，同样再点击“返回”按钮时，可实现返回之前的页面（场景）。

同样，你可在replaceScene实现同样的效果。

WolfMenuLayer

1         public void btnSettingClickHandle(CCObject sender)
2         {
3             CCScene _wolfGameSettingScene = new WolfGameSettingScene();
4             CCDirector.sharedDirector().replaceScene(_wolfGameSettingScene);
5         }

WolfGameSettingLayer

1         public void BackClickHandle(CCObject sender)
2         {
3             CCScene _wolfMenuScene = new WolfMenuScene();
4             CCDirector.sharedDirector().replaceScene(_wolfMenuScene);
5         }

场景切换特效

在介绍的场景切换中，场景中切换显得单调了许多。cocos2d-x引擎内置很多场景切换的特效。父类为 CCTransitionScene，继承关系图。

CCTransitionFade, //渐隐效果

CCTransitionFadeTR, //碎片效果
CCTransitionJumpZoom, //跳动效果
CCTransitionMoveInL, //从左向右移动
CCTransitionPageTurn, //翻页效果
CCTransitionRadialCCW, //钟摆效果
CCTransitionRotoZoom,//涡轮效果
CCTransitionSceneOriented,//
CCTransitionShrinkGrow, //渐远效果
CCTransitionSlideInL, //左移
CCTransitionSplitCols,//上下移动
CCTransitionTurnOffTiles//
CCTransitionScene : CCScene  基类

CCRotoZoomTransition 旋转缩小切换
CCJumpZoomTransition 缩小后跳跃切换
CCSlideInLTransition 从左向右切换
CCSlideInRTransition 从右向左切换
CCSlideInTTransition 从上向下切换
CCSlideInBTransition 从下向上切换
CCShrinkGrowTransition 逐渐缩小切换
CCFlipXTransition 已x中间为轴平面式旋转切换
CCFlipYTransition 已y中间为轴平面式旋转切换
CCFlipAngularTransition 侧翻式旋转切换
CCZoomFlipXTransition 缩小后x为轴旋转切换
CCZoomFlipYTransition 缩小后y为轴旋转切换
CCZoomFlipAngularTransition 缩小侧翻式旋转切换
CCFadeTransition 逐渐变暗切换
CCCrossFadeTransition   逐渐变暗切换2
CCTurnOffTilesTransition 随机方块覆盖切换
CCSplitColsTransition 三条上下分开切换
CCSplitRowsTransition 三条左右分开切换
CCFadeTRTransition 小方块大方块式切换 左下到右上 眩！
CCFadeBLTransition 小方块大方块式切换 右上到左下 眩！
CCFadeUpTransition 百叶窗从下向上
CCFadeDownTransition 百叶窗从上向下

CCTransitionRotoZoom : CCTransitionScene 旋转进入
CCTransitionJumpZoom : CCTransitionScene 跳动进入
CCTransitionMoveInL : CCTransitionScene<CCTransitionEaseScene> 从左侧进入
CCTransitionMoveInR : CCTransitionMoveInL 从右侧进入
CCTransitionMoveInT : CCTransitionMoveInL 从顶部进入
CCTransitionMoveInB : CCTransitionMoveInL 从底部进入
CCTransitionSlideInL : CCTransitionScene<CCTransitionEaseScene> 从左侧滑入
CCTransitionSlideInR : CCTransitionSlideInL 从右侧滑入
CCTransitionSlideInB : CCTransitionSlideInL 从顶部滑入
CCTransitionSlideInT : CCTransitionSlideInL 从底部滑入
CCTransitionShrinkGrow : CCTransitionScene<CCTransitionEaseScene> 交替进入
CCTransitionFlipX : CCTransitionSceneOriented x轴翻入（左右）
CCTransitionFlipY : CCTransitionSceneOriented y轴翻入（上下）
CCTransitionFlipAngular : CCTransitionSceneOriented 左上右下轴翻入
CCTransitionZoomFlipX : CCTransitionSceneOriented x轴翻入放大缩小效果（左右）
CCTransitionZoomFlipY : CCTransitionSceneOriented y轴翻入放大缩小效果（上下）
CCTransitionZoomFlipAngular :CCTransitionSceneOriented  左上右下轴翻入放大缩小效果
CCTransitionFade : CCTransitionScene  变暗变亮进入
CCTransitionCrossFade : CCTransitionScene 渐变进入
CCTransitionTurnOffTiles : CCTransitionScene<CCTransitionEaseScene> 小方格消失进入
CCTransitionSplitCols : CCTransitionScene<CCTransitionEaseScene> 竖条切换进入
CCTransitionSplitRows : CCTransitionSplitCols 横条切换进入
CCTransitionFadeTR : CCTransitionScene<CCTransitionEaseScene> 小方格右上角显示进入
CCTransitionFadeBL : CCTransitionFadeTR 小方格左下角显示进入
CCTransitionFadeUp : CCTransitionFadeTR 横条向上显示进入
CCTransitionFadeDown : CCTransitionFadeTR 横条向下显示进入

在WolfMenuLayer中“设置”按钮点击事件处理中，我选择CCTransitionZoomFlipX作为场景切换特效的过渡效果。

修改后代码

1         public void btnSettingClickHandle(CCObject sender)
2         {
3             //CCScene _wolfGameSettingScene = new WolfGameSettingScene();
4             //CCDirector.sharedDirector().replaceScene(_wolfGameSettingScene);
5             CCScene _wolfGameSettingScene = new WolfGameSettingScene();
6             CCScene transScene = CCTransitionZoomFlipX.transitionWithDuration(1.2f, _wolfGameSettingScene, tOrientation.kOrientation              LeftOver);//场景切换特效
7             CCDirector.sharedDirector().pushScene(transScene);
8         }

运行，点击“设置”按钮，显示切换效果

这样，添加场景切换特效的过渡后，使得场景切换不再生硬，显得更炫。

本实例用到的“狼来啦”素材，仅为方便学习，请勿用于商业用途，尊重版权。

本实例源码下载

著作权声明：本文由http://www.cnblogs.com/suguoqiang 原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢！

转载于:https://www.cnblogs.com/suguoqiang/archive/2013/01/23/2874004.html

Learning Cocos2d-x for XNA（6）——场景切换和场景过渡效果相关推荐

  1. Unity(13)-场景切换，保留资源

    文章目录 前言 其他介绍 上一篇笔记 一.项目结构 二.脚本 [1]. 场景切换 [2]. 资源保留 前言 在切换场景的时候会删除上一个场景的所有资源,所以需要给需要的游戏对象上挂载脚本,从而保留游戏 ...

  2. Cocos2d中从场景切换到UIViewController视图方法总结

    第一种:直接从场景切换到UIViewController视图(网上流传的版本) - (void) showUIViewController:(UIViewController *) controlle ...

  3. Cocos2d场景切换效果汇总

    http://blog.sina.com.cn/s/blog_76086559010129pw.html 在iPhone游戏开发中,游戏之间的场景开发中有很多动画可以实现,具体实现的动画如下: (PS ...

  4. 8 cocos2dx添加场景切换效果，控制场景切换彻底完成之后再执行动画

     1 添加场景切换效果 供场景切换的类: CCTransitionJumpZoom CCTransitionProgressRadialCCW CCTransitionProgressRadial ...

  5. cocos2dx场景切换分析之如何自定义场景切换动画

    前言:cocos2dx引擎中自带了几十种场景切换的动画,可以使场景切换的过程中平滑过渡,不至于太生硬.那么问题来了,这些动画是怎么实现的呢?如果觉得系统自带的场景切换动画太丑陋,或者满足不了我们游戏的 ...

  6. 动态加载子节点_微信小游戏开发之场景切换和常驻节点传递数据

    主题 场景切换 场景间数据传递方式 小游戏全局背景音效 特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有些知识点的 ...

  7. cocos2d-x 3.x 场景切换特效大集合

            游戏开发中经常需要用到Cocos2d-x 3.x中的场景切换特效,本文中进行一下汇总.       基本使用思路如下: ? 1 2 3 auto scene=HelloWorld::c ...

  8. JavaScript强化教程 -- cocosjs场景切换

    为什么80%的码农都做不了架构师?>>>    本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- cocosjs场景切换 场景切换在m ...

  9. Unity3D笔记 愤怒的小鸟一场景切换

    新建3个场景,场景1 Start 十秒后自动切换到场景2 Splash,场景2在二秒后自动切换到场景3 Selection 一.场景一Start 二.场景2 Splash 三.场景3 Selectio ...

最新文章

  1. 删除windows上的oracle产品
  2. POJ 1222 1681 1830 3185 开关灯问题 (高斯消元 异或方程组)
  3. 【Java】Java SimpleDateFormat 线程安全 问题
  4. 推荐一款弹出窗口插件 lhgdialog 4.2.0 正式版
  5. 前端开发必须知道的JS（二） 闭包及应用
  6. 《神经网络与深度学习》——邱锡鹏（读书笔记_C2_1）
  7. java jbutton间隔_如何通过百分比设置JButton宽度？ - java
  8. electron-mac应用-代码签名及公证（教科书式操作-亲测有效）
  9. 模态综合医疗时间序列数据：REAL-VALUED (MEDICAL) TIME SERIES GENERATION WITH RECURRENT CONDITIONAL GANS
  10. Hbuilder X 语法助手无法访问问题
  11. 自动阅读是如何赚取收益的
  12. 利用PyCharm实现服务器远程代码开发
  13. 关于原创文章特此说明
  14. 在系统中集成淘宝扫码登录
  15. grub effect
  16. Python FAQ from newsmth.net
  17. ssr Android简书,Vue 服务端渲染（SSR）
  18. java修改源码方法
  19. 佛前的虔诚，千年回眸
  20. KV存储-Aerospike之索引(Index)

热门文章

  1. Arch Linux 系统迁移
  2. ElasticSearch使用（嵌套查询、嵌套高亮）
  3. 怎么卸载影子系统?卸载影子系统解决方法
  4. 【原创】2009年太白山穿越
  5. 假作真时真亦假——“真实”IP带来的安全隐患
  6. WMI_04_常见的WMI类的属性
  7. 百度服务器保存信息多久,百度快照在百度服务器里保存多长时间？？？
  8. Git(5) SourceTree安装使用
  9. ESP32学习入门：WiFi连接网络
  10. Alex 我为自己代言