Learning Cocos2d-x for XNA（6）——场景切换和场景过渡效果
实战Menu设计，详细介绍场景（页面）切换的方法（pushScene、popScene、replaceScene）。同时实现场景切换（CCTransitionScene）特效的过渡效果，显得更炫。
在进行此部分学习的时候，确保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 原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢！
