本系列文章由Aimar_Johnny编写，欢迎转载，转载请标明出处，谢谢。

http://blog.csdn.net/lzhq1982/article/details/12856597





通过前面十三篇文章的介绍，我的游戏场景基本搭建完成了，我们在玩任何一款手游产品时，都是先上来个logo界面，游戏欢迎界面等，这就意味着我们要做一款游戏需要多个场景，场景之间来回切换实现游戏逻辑，unity也不例外，所以从本篇开始将会介绍如何搭建多个场景，本篇先看游戏logo场景的制作，先上图：




再次用时空领地的logo了，这里的时空领地的logo是个动画，全部是用NGUI实现的，重点是做这个界面没用一句代码，除了点击切换场景。




之前那个游戏场景，我起名GameScene，然后我新建一个场景File->New Scene，起名BeginMenuScene。下面开始制作。

1、先用NGUI新建一个Atlas，把场景中用到的图片都加到Atlas里，不知道怎么建Atlas的看前面的文章。

2、用NGUI建一个UI Root，然后在Panel下新建一个Panel和Texture，因为上图右上角的游戏logo是由背板，文字动画，箭头动画三个部分组成的，所以我把它们统一放到这个Panel里，背景图片放到Texture里，其实背景图片也可以是个Sprite，由你喜好。结构图如下：




3、把背景图片拖到Texture的UITexture里，这样背景就有了，别忘了把尺寸改成图片大小。




4、把logo的Panel移到合适位置，里面的那个背板不说了，就是个sprite，放到合适位置就可以了，重点说Sprite动画，先看一下atlas图片：




上图中包含一个logo背板，11帧文字动画，14帧箭头动画，以文字动画为例，NGUI怎么不用一句代码加载动画呢，我们要用到Sprite Animation，选Component->NGUI->UI->Sprite Animation，这样我的Sprite(LogoText)就增加了UISprite Animation组件，是个脚本，你可以看看里面的代码。我的设置如下：




Framerate是帧速率，最大60，越大播放越快，Name Prefix是图片名的前缀，这个很有用，比如我的atlas里有很多不同种类的图片，像上面，有背板图片，文字图片，箭头图片，那我这里的动画只想用文字的11张图片，怎么办呢，Name Prefix起作用了，它能够对文件名过滤，比如我的文字的图片都是以menu_title_为前缀的，menu_title_01，menu_title_02，...，menu_title_11，这样它就只会用到这11张图片了，并且会根据后面的数字排序播放，有一点要注意，后面的数字如果像01，02等有0在前面，那超过9的话要把0取消，直接10，11等，而不能010，011，这样顺序会错。Loop表示是否循环播放。就这么简单就能实现简单的动画循环播放了，如果想程序控制，那就看源代码怎么用吧。箭头动画也是如此，我就不介绍了。

5、NGUI屏幕自适应

不要以为这样就完了，如果你的图片是960*640的，或是其他的分辨率，而你的屏幕不是，在手机各种屏幕尺寸的今天，做不同分辨率的图片是多么痛苦的一件事，就像上面，运行一下程序，总是有难看的黑边，除非我把屏幕也拉成960*640的，不要怕，NGUI早就为我们处理了，只要加个Stretch就好了，点选Anchor下的那个Panel，我要把Stretch给它，因为它是整个界面的Panel，选择Component->NGUI->UI->Stretch，你就会发现你的Inspector面板上新增了一个UIStretch脚本，下面就是调参数，网上搜的NGUI屏幕自适应教程大部分都是转的，调一堆参数，也有人经过试验发现了个捷径，我这里只说捷径，Style那里选Both，表示长宽都拉伸，Relative
 Size那里X=1/960，Y=1/640，这样就可以了，960和640是图片的宽高，根据你的尺寸可改，截个图：







本篇重点介绍了NGUI的Animation Sprite制作sprite动画和如何屏幕自适应，但这里并没有交互，下一篇文章介绍如何异步加载游戏场景。

转载注明出处：点击打开链接
Unity 2017.1 推出的Timeline功能，不仅可以高效的帮助大家实现游戏场景中的物体动画，还可以制作出更为复杂的过场动画及电影内容。今天这篇文章将由Unity大中华区技术经理成亮，通过实例分析让大家了解Timeline的多轨道，把各类场景中的元素整合实现更为复杂的动画。

Timeline简介

Timeline 是一套基于时间轴的多轨道动画系统，它支持可视化编辑，实时预览，主要包括Timeline 资源，PlayableDirector，组件以及Timeline编辑器。下图底部展示了Timeline的编辑器，可以看到每一条轨道左边是绑定的场景中的物体，这部分信息会记录在PlayableDirector中；右边就是轨道的播放数据，这部分信息会记录在Timeline资源中。下图中部的红框展示了PlayableDirector组件，它的主要作用是播放Timeline资源，以及保存Timeline所绑定的场景物体。





目前Timeline包括以下六个基本轨道类型：

Animation：用于播放AnimationClip或者关键帧动画
。

Activation：用于控制物体的激活状态。


Audio：用于音效的播放。


Control：用于控制粒子，或者另一个Timeline对象的播放。


Playable：用于自定义的播放行为。


Cinemachine：用于控制Cinemachien相机系统的播放。


Timeline提供给了用户足够的扩展性，可以通过Playable轨道，自定义任何我们想要的动画行为。比如改变图片Alpha值，或者材质中的某个参数。下面我们将会用实际案例帮助大家了解Timeline基本使用方法及一些特性的应用。

Timeline基本使用方法





上图中角色从咖啡机取咖啡的动画就是使用Timeline完成的。它使用了Animation，Activation，Audio以及Control四种基本轨道类型，上图中Timeline的轨道如下图所示：







Animation 轨道

这是最常用的轨道类型，角色和咖啡机都使用了Animation轨道。首先我们看到角色的Animation轨道除了一段human_idle_01的Animation Clip，还包含了一段子轨道Action Track。这段子轨道比较特别，我们称之为覆盖轨道（Override Track），它的作用是在这个时间段内优先播放子轨道的内容，也就是角色取咖啡这一段动画。再来看一下咖啡机的轨道，轨道上包含了一系列Animation
 Clip，它们会按照先后顺序进行播放。另外，Animation轨道还支持关键帧动画的编辑并导出到Animation Clip，具体使用可以参考官方手册。

Activation轨道

咖啡杯(CoffeeCup)对象的出现，隐藏使用了Activation轨道。这个轨道的功能很简单，就是控制对象的激活状态。这个功能确实非常的实用。

Audio轨道

Audio轨道的使用也很简单，将声音素材直接拖入轨道即可。下图展示了AudioClip的属性，可以看到每一段Clip都有对应的音效素材。





Control轨道

本例中Control轨道用于控制咖啡流出的粒子效果的播放。用Control轨道来播放粒子效果，可以预览每一帧的粒子效果，这个功能对粒子效果的调试非常的有帮助。当然Control轨道还有更多的控制功能，比如它还可以控制子Timeline的播放。





在Timeline中我们可以通过多轨道很方便的控制场景中不同物体的动画，同时轨道覆盖以及粒子效果预览等功能也为动画制作提供了很好的帮助。

复用Timeline

可以被复用是Timeline一个很重要的特性。只要是有相同的动画行为，即使是不同的物体，也可以复用相同的Timeline资源。比如说游戏中常见的收集物品，通常都有相同的一些动画表现效果，如果每一类物品都要单独制作动画，显然从制作和性能上都是低效的。下面我们就以收集物动画的例子来分析Timeline 是如何被复用的。





下图中所示的红心、五角星、磁铁、翻倍四个收集物的动画行为完全一致，因此它们的收集动画统一使用了PickedUp-CollectableTimeline这个Timeline资源。在Timeline窗口中第一个轨道是收集者的动画，由于在预制件中是无法知道场景中的收集者的，所以需要动态绑定收集者，因此暂时留空；第二个轨道是缩放和旋转收集物的动画，直接绑定到目标对象上即可；第三，四条轨道通过Control轨道播放相同的粒子效果。





如何动态绑定轨道的目标对象，如下面这段代码所示，collectedTimeline就是Timeline资源所对应的PlayableDirector，首先通过遍历的方式找到相应的轨道playableAssetOutput，然后调用PlayableDirector的SetGenericBinding把收集者动态绑定到轨道上。





从上述例子可以看到，Timeline通过把动画数据和动画目标分离，实现了资源复用的特性，可以大大提升使用效率。

Timeline嵌套

有时候在场景中常常会出现这种情况，一个物体会在某一处按照一定间隔出现，比如天空中的闪电。闪电本身是一个动画序列，而控制闪电的间隔本身也可以看作是一段动画。而这样的双层动画也可以通过Timeline来实现，因为Timeline支持嵌套。





我们首先来看主Timeline的轨道，这里有六条控制闪电的轨道，都是Control类型的轨道，在每一条轨道中控制闪电出现的时机和间隔。


 



而具体闪电的表现效果由Control Clip对应的子Timeline来负责。如下图所示，闪电效果的Timeline包含四条Control类型的轨道，分别控制不同粒子效果的播放。
    

 



结语

通过今天的学习，可以让大家初步了解Timeline的多轨道机制，以及资源复用和嵌套使用等特性。可以帮助大家实现很多之前需要代码才能完成的功能。后面我们还将继续为大家分享Timeline强大的扩展性，即自定义行为的Playable轨道。以及结合Cinemachine智能相机系统所创造的丰富表现力等内容在Unity官方中文社区（unitychina.cn），请保持关注！

我们在玩任何一款手游产品时，都是先上来个logo界面，游戏欢迎界面等，这就意味着我们要做一款游戏需要多个场景，场景之间来回切换实现游戏逻辑，unity也不例外，所以从本篇开始将会介绍如何搭建多个场景，本篇先看游戏logo场景的制作，先上图：



再次用时空领地的logo了，这里的时空领地的logo是个动画，全部是用NGUI实现的，重点是做这个界面没用一句代码，除了点击切换场景。

之前那个游戏场景，我起名GameScene，然后我新建一个场景File->New Scene，起名BeginMenuScene。下面开始制作。

1、先用NGUI新建一个Atlas，把场景中用到的图片都加到Atlas里，不知道怎么建Atlas的看前面的文章。

2、用NGUI建一个UI Root，然后在Panel下新建一个Panel和Texture，因为上图右上角的游戏logo是由背板，文字动画，箭头动画三个部分组成的，所以我把它们统一放到这个Panel里，背景图片放到Texture里，其实背景图片也可以是个Sprite，由你喜好。结构图如下：



3、把背景图片拖到Texture的UITexture里，这样背景就有了，别忘了把尺寸改成图片大小。



4、把logo的Panel移到合适位置，里面的那个背板不说了，就是个sprite，放到合适位置就可以了，重点说Sprite动画，先看一下atlas图片：



上图中包含一个logo背板，11帧文字动画，14帧箭头动画，以文字动画为例，NGUI怎么不用一句代码加载动画呢，我们要用到Sprite Animation，选Component->NGUI->UI->Sprite Animation，这样我的Sprite(LogoText)就增加了UISprite Animation组件，是个脚本，你可以看看里面的代码。我的设置如下：



Framerate是帧速率，最大60，越大播放越快，Name Prefix是图片名的前缀，这个很有用，比如我的atlas里有很多不同种类的图片，像上面，有背板图片，文字图片，箭头图片，那我这里的动画只想用文字的11张图片，怎么办呢，Name Prefix起作用了，它能够对文件名过滤，比如我的文字的图片都是以menu_title_为前缀的，menu_title_01，menu_title_02，...，menu_title_11，这样它就只会用到这11张图片了，并且会根据后面的数字排序播放，有一点要注意，后面的数字如果像01，02等有0在前面，那超过9的话要把0取消，直接10，11等，而不能010，011，这样顺序会错。Loop表示是否循环播放。就这么简单就能实现简单的动画循环播放了，如果想程序控制，那就看源代码怎么用吧。箭头动画也是如此，我就不介绍了。

5、NGUI屏幕自适应

不要以为这样就完了，如果你的图片是960*640的，或是其他的分辨率，而你的屏幕不是，在手机各种屏幕尺寸的今天，做不同分辨率的图片是多么痛苦的一件事，就像上面，运行一下程序，总是有难看的黑边，除非我把屏幕也拉成960*640的，不要怕，NGUI早就为我们处理了，只要加个Stretch就好了，点选Anchor下的那个Panel，我要把Stretch给它，因为它是整个界面的Panel，选择Component->NGUI->UI->Stretch，你就会发现你的Inspector面板上新增了一个UIStretch脚本，下面就是调参数，网上搜的NGUI屏幕自适应教程大部分都是转的，调一堆参数，也有人经过试验发现了个捷径，我这里只说捷径，Style那里选Both，表示长宽都拉伸，Relative
 Size那里X=1/960，Y=1/640，这样就可以了，960和640是图片的宽高，根据你的尺寸可改，截个图：



本篇重点介绍了NGUI的Animation Sprite制作sprite动画和如何屏幕自适应，但这里并没有交互，下一篇文章介绍如何异步加载游戏场景。

前言：cocos2dx引擎中自带了几十种场景切换的动画，可以使场景切换的过程中平滑过渡，不至于太生硬。那么问题来了，这些动画是怎么实现的呢？如果觉得系统自带的场景切换动画太丑陋，或者满足不了我们游戏的个性化需求，这时我们就完全可以自定义。
PS: 使用引擎版本3.10


一、引擎中怎么实现场景切换动画的？
随便查看一个场景切换动画类（比如TransitionMoveInR、TransitionSlideInL、TransitionShrinkGrow ...等等）的源码，可以看到他们都是继承自Scene类的，那么就说明他们本身就是一个场景。
下面我们跟踪一遍场景切换代码的流程，就可以清晰的明白其中的原理了：
1、先定义一个我们自己需要切换到的普通场景：auto pScene = HomeScene::createScene();  （这个很简单，没什么好说的）


2、使用任意一个场景切换动画包装一下这个场景：auto pTransitionMove = TransitionMoveInR::create(0.6f, pScene);
这段代码，跟进create源码中可以看到调用了bool TransitionScene::initWithDuration(float t,Scene *scene)方法进行初始化：

bool TransitionScene::initWithDuration(float t, Scene *scene)
{
    CCASSERT( scene != nullptr, "Argument scene must be non-nil");

    if (Scene::init())
    {
        _duration = t;

        // retain
        _inScene = scene;    // 我们需要切换到的场景（下一个场景HomeScene）
        _inScene->retain();
        _outScene = Director::getInstance()->getRunningScene();   // 当前显示的场景
        if (_outScene == nullptr)
        {
            _outScene = Scene::create();
        }
        _outScene->retain();

        CCASSERT( _inScene != _outScene, "Incoming scene must be different from the outgoing scene" );
        
        sceneOrder();  // 设置_isInSceneOnTop变量，控制播放动画时，_inScene和_outScene绘制的层级（这里默认就是设置_inScene在上面）
        return true;
    }
    else
    {
        return false;
    }
}
可以看到，这里并没有立即把场景切换到我们的HomeScene场景中去，而只是在TransitionMoveInR（也是一个场景）中简单的保存了下来。



3、执行场景切换代码：Director::getInstance()->replaceScene(pTransitionMove); 跟进replaceScene方法

void Director::replaceScene(Scene *scene)  
{  
    //CCASSERT(_runningScene, "Use runWithScene: instead to start the director");  
    CCASSERT(scene != nullptr, "the scene should not be null");  
      
    if (_runningScene == nullptr) {  
        runWithScene(scene);  
        return;  
    }  
      
    if (scene == _nextScene)  
        return;  
      
    if (_nextScene)  
    {  
        if (_nextScene->isRunning())  
        {  
            _nextScene->onExit();  
        }  
        _nextScene->cleanup();  
        _nextScene = nullptr;  
    }  
  
    ssize_t index = _scenesStack.size();  
  
    _sendCleanupToScene = true;  
    _scenesStack.replace(index - 1, scene);  // 将场景栈（其实就是一个Vector）中保存的当前场景替换为TransitionMoveInR场景  
  
    _nextScene = scene;// 到这里就大概可以看出来了，本质上是先切换到TransitionMoveInR场景，再切换到HomeScene场景，多么巧妙的过渡！  
  
} 



4、到主循环中，开始切换场景。mainLoop() --> drawScene() --> setNextScene()，跟进到setNextScene()方法中看看：

void Director::setNextScene()
{
    bool runningIsTransition = dynamic_cast<TransitionScene*>(_runningScene) != nullptr;
    bool newIsTransition = dynamic_cast<TransitionScene*>(_nextScene) != nullptr;

    // If it is not a transition, call onExit/cleanup
     if (! newIsTransition)
     {
         if (_runningScene)
         {
             _runningScene->onExitTransitionDidStart();
             _runningScene->onExit();
         }
 
         // issue #709. the root node (scene) should receive the cleanup message too
         // otherwise it might be leaked.
         if (_sendCleanupToScene && _runningScene)
         {
             _runningScene->cleanup();
         }
     }

    if (_runningScene)
    {
        _runningScene->release();
    }
    _runningScene = _nextScene;    // 这是当前运行的场景_runningScene就为TransitionMoveInR场景了
    _nextScene->retain();
    _nextScene = nullptr;

    if ((! runningIsTransition) && _runningScene)   // 执行TransitionMoveInR场景的onEnter()和onEnterTransitionDidFinish()方法
    {
        _runningScene->onEnter();
        _runningScene->onEnterTransitionDidFinish();
    }
}

5、跟进TransitionMoveInR场景的 onEnter() 方法（即父类TransitionMoveInL的 onEnter() 方法）：

void TransitionMoveInL::onEnter()  
{  
    TransitionScene::onEnter();  
    this->initScenes();   // 初始化场景  
  
    ActionInterval *a = this->action();  
    //_inScene在上面第2点中说了保存的就是HomeScene场景。这里就执行了一个Action动作，就是我们看到的场景切换动画！（因此自定义动画只需要自己在这里修改即可）
    _inScene->runAction(Sequence::create(this->easeActionWithAction(a), CallFunc::create(CC_CALLBACK_0(TransitionScene::finish,this)), nullptr)); // 动画执行完了之后调用回调方法TransitionScene::finish()} 
  

6、跟进回调方法TransitionScene::finish() ：


void TransitionScene::finish()  
{  
    // clean up  
    _inScene->setVisible(true);  
    _inScene->setPosition(0,0);  
    _inScene->setScale(1.0f);  
    _inScene->setRotation(0.0f);  
    _inScene->setAdditionalTransform(nullptr);  
  
    _outScene->setVisible(false);  
    _outScene->setPosition(0,0);  
    _outScene->setScale(1.0f);  
    _outScene->setRotation(0.0f);  
    _outScene->setAdditionalTransform(nullptr);  
  
    //[self schedule:@selector(setNewScene:) interval:0];  
    this->schedule(CC_SCHEDULE_SELECTOR(TransitionScene::setNewScene), 0);// 处理非常简单，但是这里为什么要用定时器，而不直接调用，有点奇怪！  
}  
  
void TransitionScene::setNewScene(float dt)  
{      
    CC_UNUSED_PARAM(dt);  
  
    this->unschedule(CC_SCHEDULE_SELECTOR(TransitionScene::setNewScene));  
      
    // Before replacing, save the "send cleanup to scene"  
    Director *director = Director::getInstance();  
    _isSendCleanupToScene = director->isSendCleanupToScene();  
      
    director->replaceScene(_inScene); //关键点就在这里！ 这里有调用了一遍replaceScene方法，而_inScene就是我们的HomeScene场景，这下就明白了吧！  
    // issue #267  
    _outScene->setVisible(true);  
}



二、如何自定义一个场景切换动画？

明白了原理，就好办了，不多说。下面就直接给一个我的项目中用到的一个动画吧，很简单！就是实现类似iOS里面的一个功能：当我切换场景到下一个场景后（场景动画是从右向左滑入界面），我需要回退到上一个场景（场景动画是当前界面向右滑出），但是cocos2dx中自带没有这个动画！



1、头文件.hpp：


#ifndef XCaseTransitionMoveOutR_hpp  
#define XCaseTransitionMoveOutR_hpp  
  
#include <stdio.h>  
#include "cocos2d.h"  
  
USING_NS_CC;  
class XCaseTransitionMoveOutR : public TransitionScene, public TransitionEaseScene {  
public:  
    XCaseTransitionMoveOutR();  
    ~XCaseTransitionMoveOutR();  
    static XCaseTransitionMoveOutR* create(float t, Scene* scene);  
    virtual bool init(float t, Scene* scene);  
      
    virtual ActionInterval* action(void);  
    virtual ActionInterval* easeActionWithAction(ActionInterval * action) override;  
    virtual void onEnter() override;  
      
protected:  
    /** initializes the scenes */  
    virtual void initScenes();  
};  
  
#endif /* XCaseTransitionMoveOutR_hpp */


2、实现文件.cpp：


#include "XCaseTransitionMoveOutR.hpp"  
  
XCaseTransitionMoveOutR::XCaseTransitionMoveOutR()  
{  
      
}  
  
XCaseTransitionMoveOutR::~XCaseTransitionMoveOutR()  
{  
      
}  
  
XCaseTransitionMoveOutR* XCaseTransitionMoveOutR::create(float t, Scene* scene)  
{  
    auto newScene = new (std::nothrow) XCaseTransitionMoveOutR();  
    if(newScene && newScene->init(t, scene))  
    {  
        newScene->autorelease();  
        return newScene;  
    }  
    CC_SAFE_DELETE(newScene);  
    return nullptr;  
}  
  
bool XCaseTransitionMoveOutR::init(float t, Scene* scene)  
{  
    bool isInit = false;  
    do{  
        CC_BREAK_IF(!TransitionScene::initWithDuration(t, scene));  
        _isInSceneOnTop = false;  
          
        isInit = true;  
    }while (0);  
    return isInit;  
}  
  
ActionInterval* XCaseTransitionMoveOutR::action(void)  
{  
    Size s = Director::getInstance()->getWinSize();  
    return MoveTo::create(_duration, Vec2(s.width,0));  
}  
  
ActionInterval* XCaseTransitionMoveOutR::easeActionWithAction(ActionInterval * action)  
{  
    return EaseOut::create(action, 2.0f);  
}  
  
void XCaseTransitionMoveOutR::onEnter()  
{  
    TransitionScene::onEnter();  
    this->initScenes();  
      
    ActionInterval *a = this->action();  
      
    _outScene->runAction(Sequence::create(this->easeActionWithAction(a), CallFunc::create(CC_CALLBACK_0(TransitionScene::finish, this)), nullptr)  
     );  
}  
  
void XCaseTransitionMoveOutR::initScenes()  
{  
    _outScene->setPosition(0, 0);  
    _inScene->setPosition(0, 0);  
}