Cocos2d-xna : 横版战略游戏开发实验3 Scene和Director场景切换

在上一篇中，使用CCSprite和CCMenu构建了开始场景，并且说明了关于优化程序内容的问题，一个好的游戏会有很多的场景场景组合，每个场景管理自身的脚本也就是规则，在整个游戏中是如何跳转场景的呢？先看下图：

本图来自Elvis的CCDirector类解析配图，先不用看太全面，只需要看最上面的就行了，前面说过，整个游戏有一个导演（CCDirector）在管理整个场景，为了让切换场景完成的更好，需要按照之前的场景制作方法将其他的场景补齐，即例如关卡选择界面、游戏界面、游戏结束界面的完成。

完成全部的场景

在制作前需要生成图片资源

上面的资源中，包含了基本场景的元素，和一张用来演示游戏界面的示意图，打开TexturePackerGUI，将它们组合，由于有几张比较大的图，制作的时候看看是否有浪费，也可以将它们分成多个plist，比如说，我这次将一定会用上的图片打包到GameUI01.plist，而预览图就打包到了GameUI02.plist中，将它们添加到Content里：

好了，现在有了两个资源plist，GameUI01在SceneStart类中载入过，为了保证资源载入的统一性，建立一个GameRoot的类，并用静态的方法取得，不要忘记将SceneStart里的addSpriteFramesWithFile删除：

public class GameRoot
{
    public static void InitializeResource()
    {
        CCSpriteFrameCache.sharedSpriteFrameCache().addSpriteFramesWithFile("GameUI01", "images/GameUI01");
        CCSpriteFrameCache.sharedSpriteFrameCache().addSpriteFramesWithFile("GameUI02", "images/GameUI02");
    }
}

注意要把GameRoot.InitializeResource();添加到AppDelegate.cs的applicationDidFinishLaunching函数中，注意要添加到场景跳转的前面一行，这样场景在构建的时候就会先载入了图片资源。

也许有更好的方案，比如放在一个Loading界面里面，在这里GameRoot还有其他的作用，就如它的名字当成游戏根来处理，我们可以在这里将所有的场景集合管理，采用单例的方式完成全局的控制访问，我们可以这样做：

//通过一个全局的根来管理整个游戏的所有场景实例
public class GameRoot
{
    public static void InitializeResource()
    {
        CCSpriteFrameCache.sharedSpriteFrameCache().addSpriteFramesWithFile("GameUI01", "images/GameUI01");
        CCSpriteFrameCache.sharedSpriteFrameCache().addSpriteFramesWithFile("GameUI02", "images/GameUI02");
    }
        
    private static SceneStart _SceneStart;
    public static SceneStart pSceneStart
    {
        get
        {
            if (_SceneStart == null)
                _SceneStart = new SceneStart();
            return _SceneStart;
        }
    }

    private static SceneSelect _SceneSelect;
    public static SceneSelect pSceneSelect
    {
        get
        {
            if (_SceneSelect == null)
                _SceneSelect = new SceneSelect();
            return _SceneSelect;
        }
    }
    private static SceneGame _SceneGame;
    public static SceneGame pSceneGame
    {
        get
        {
            if (_SceneGame == null)
                _SceneGame = new SceneGame();
            return _SceneGame;
        }
    }
    private static SceneOver _SceneOver;
    public static SceneOver pSceneOver
    {
        get
        {
            if (_SceneOver == null)
                _SceneOver = new SceneOver();
            return _SceneOver;
        }
    }
}

由于比较长，给折叠了，在这里可以保证唯一的单例完成统一管理，在游戏的任何地方，都可以呼唤GameRoot取得场景实例了。

下面是SceneSelect类的代码，选择界面如果想做的复杂的话就得这么搞了，当然这样也更有趣，本篇该类代码只是实现了基本功能，未来在用到CCAction类的时候将它做到更完美：

public class SceneSelect : CCScene
{
    public SceneSelect()
    {
        base.init();
        //背景图
        CCSprite background = CCSprite.spriteWithSpriteFrameName("bg_select.png");
        background.anchorPoint = new CCPoint(0, 0);
        this.addChild(background);

        CCMenuItemSprite btn_back = CCMenuItemSprite.itemFromNormalSprite(
            CCSprite.spriteWithSpriteFrameName("btn_back1.png"),
            CCSprite.spriteWithSpriteFrameName("btn_back2.png"),
            this, click_back);
        CCMenu menu = CCMenu.menuWithItems(btn_back);
        menu.position = new CCPoint(666,32);
        this.addChild(menu);

        CCSprite tab1 = CCSprite.spriteWithSpriteFrameName("tab_shu1.png");
        CCSprite tab2 = CCSprite.spriteWithSpriteFrameName("tab_wu2.png");
        CCSprite tab3 = CCSprite.spriteWithSpriteFrameName("tab_wei2.png");
        tab1.position = new CCPoint(115, 430);
        tab2.position = new CCPoint(335, 430);
        tab3.position = new CCPoint(575, 430);
        this.addChild(tab1);
        this.addChild(tab2);
        this.addChild(tab3);

        CCPoint offset = new CCPoint(150, 150);
        for (int i = 0; i < 4; i++)
        {
            for (int j = 0; j < 3; j++)
            {
                CCMenuItemSprite level = CCMenuItemSprite.itemFromNormalSprite(
                    CCSprite.spriteWithSpriteFrameName("btn_level1.png"),
                    CCSprite.spriteWithSpriteFrameName("btn_level2.png"),
                    this, click_level);
                menu = CCMenu.menuWithItems(level);
                menu.position = new CCPoint(offset.x + 160 * i,offset.y + 85 * j);
                this.addChild(menu);
            }
        }
    }
    private void click_back(CCObject s)
    {
    }
    private void click_level(CCObject sender)
    {
    }
}

场景选择的实现效果：

选择关卡的场景里，全部都跳转到SceneGame中，以后将对应的关卡进行设计。

下面是游戏场景SceneGame的代码，这里的Code只是贴了一张图，然后加了一个“出征”按钮，这个出征按钮在本例中将做成游戏结束的触发器：

public class SceneGame : CCScene
{
    public SceneGame()
    {
        base.init();
        //背景图
        CCSprite background = CCSprite.spriteWithSpriteFrameName("bg_game.png");
        background.anchorPoint = new CCPoint(0, 0);
        this.addChild(background);
        //返回按钮
        CCMenuItemSprite btn_attack = CCMenuItemSprite.itemFromNormalSprite(
            CCSprite.spriteWithSpriteFrameName("btn_soldierattack1.png"),
            CCSprite.spriteWithSpriteFrameName("btn_soldierattack2.png"),
            this, click_attack);
        CCMenu menu = CCMenu.menuWithItems(btn_attack);
        menu.position = new CCPoint(732, 36);
        this.addChild(menu);
    }
    private void click_attack(CCObject sender)
    {}
}

代码效果如下：

最后一个是结束场景：

public class SceneOver : CCScene
{
    public SceneOver()
    {
        base.init();
        //背景图
        CCSprite background = CCSprite.spriteWithSpriteFrameName("bg_over.png");
        background.anchorPoint = new CCPoint(0, 0);
        this.addChild(background);
        //文字
        CCSprite title = CCSprite.spriteWithSpriteFrameName("text_over.png");
        title.position = new CCPoint(CCDirector.sharedDirector().getWinSize().width / 2, CCDirector.sharedDirector().getWinSize().height / 2 + 150);
        this.addChild(title);
        //返回按钮
        CCMenuItemSprite btn_back = CCMenuItemSprite.itemFromNormalSprite(
            CCSprite.spriteWithSpriteFrameName("btn_back1.png"),
            CCSprite.spriteWithSpriteFrameName("btn_back2.png"),
            this, click_back);
        CCMenu menu = CCMenu.menuWithItems(btn_back);
        menu.position = new CCPoint(666, 32);
        this.addChild(menu);
    }
    private void click_back(CCObject s)
    {}
}

效果如下：

 

场景切换 Transition

好了， 我们现在完成了基本的场景，现在要进行场景的切换操作，下面将会用上三个CCDirector类方法：

popScene() : 返回到上一个场景

pushScene(CCScene pScene) ：切换到一个指定的场景

replaceScene(CCScene pScene) ：替换掉当前的场景

在CCDirector中场景管理是一个队列，写说明还是比较麻烦，下面画张图来表示一下：

如图示意，场景队列内部已经帮你管理好了，所以不用考虑太多。

那么在代码中如何体现呢？只需要对对应的委托事件进行处理就行了，例如在开始界面点击“开始”就会pushScene到SceneSelect场景，而点击返回则执行popScene，replaceScene就很简单了，用于在游戏结束的时将SceneGame替换成为SceneOver。

所添加的代码如下：

SceneStart：

private void click_start(CCObject sender)
{
    CCDirector.sharedDirector().pushScene(GameRoot.pSceneSelect);
}

SceneSelect：

private void click_back(CCObject s)
{
    CCDirector.sharedDirector().popScene();
}
private void click_level(CCObject sender)
{
    CCDirector.sharedDirector().pushScene(GameRoot.pSceneGame);
}

SceneGame：

private void click_attack(CCObject sender)
{
    CCDirector.sharedDirector().replaceScene(GameRoot.pSceneOver);
}

SceneOver：

private void click_back(CCObject s)
{
    CCDirector.sharedDirector().popScene();
}

现在运行一下效果，点击按钮看切换。

转场效果 Effect

最后说一说，转场的效果，点击直接变化是不是显得非常的单调？更加绚丽的转场效果在引擎中已经提供了，可以看cocos2d-xna代码中的transition部分，几十个切换效果任由选择：

具体的用法非常简单，例如我们在开始界面点击“开始”按钮的时候，进行一个CCTransitionFade转场效果，这个效果可以让屏幕一黑，然后变成新的场景，在SceneStart.cs中click_start方法里加入如下代码：

private void click_start(CCObject sender)
{
    var s = CCTransitionFade.transitionWithDuration(0.5f, GameRoot.pSceneSelect);
    CCDirector.sharedDirector().pushScene(s);
}

这种一般情况下要折腾很久的切换效果，在引擎里只是一行代码而已，不同的Transition有不同的参数，有兴趣的朋友可以参看OpenXLive移植的cocos2d-xna里的test工程样本，里面展示了非常多的切场效果，在这里就不再太多的演示了。

本篇例子工程：https://github.com/Nowpaper/SanguoCommander_cocos2dxna_Sample
本例工程名为：SanguoCommander3

本篇主要讲述了场景的深度制作和Transition用法，主要是对场景Scene内容，下篇中将使用CCLayer，还会结合CCAction完成复杂的界面互动编写。