Learning Cocos2d-x for XNA（6）——場景切換和場景過渡效果

本文轉載自查看原文 2013-01-23 22:32 3988 Cocos2d-x

在進行此部分學習的時候，確保Cocos2d-x for xna引擎的版本為0.1.2（或更高版本），實測0.1.0版本部分功能出現BUG。

之前的源碼都是0.1.0版本的，從此次開始都是0.1.2版本。

開始菜單

背景

添加背景圖片（“狼來了”的素材）和按鈕至內容管道（Content）

創建兩個類文件WolfMenuScene.cs和WolfMenuLayer.cs。

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

 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 原創，歡迎轉載分享。請尊重作者勞動，轉載時保留該聲明和作者博客鏈接，謝謝！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 cocos2d-x開發記錄：二，基本概念（導演，場景，層和精靈，場景切換，效果） Learning Cocos2d-x for XNA（9）——碰撞檢測 Learning Cocos2d-x for XNA（4）——中文顯示 Cocos2d-xna : 橫版戰略游戲開發實驗3 Scene和Director場景切換 Cocos2d-x入門之旅[4]場景 cocos2d-x 場景間傳值 wp7使用Cocos2d-X for XNA制作一個塔防類游戲 (一)游戲基礎場景搭建關於Cocos2d-x項目運行的過程和場景切換步驟 Cocos2d-JS切換場景與切換特效 Cocos2d-X3.0 刨根問底（九）----- 場景切換（TransitionScene）源碼分析