Silverlight 2.5D RPG游戏技巧与特效处理：（十五）任务剧情

任务是贯穿游戏剧情发展的核心线索，具有极强的多元性、组合性、循环性与随机性；它的设计原则浓缩起来便是：触发-执行-完成。别小看这短短6个字，里面的学问可大了，由什么触发、如何触发的，因素很多；怎样执行、什么样的过程，一切随便；怎么算完成，完成后的奖励是啥，什么都行。而不同的故事背景、不同的操作玩法，在任务设计方面都会大相径庭。比如RPG游戏，角色扮演即是虚拟人生，需要还原一个完整而虚幻的世界，因此它的任务系统通常会被设计得极其丰富，可以比喻：人生有多复杂，RPG的任务系统就有多庞大；又比如SLG游戏，大致以独立的场景为线索进行剧情串联，因而任务系统设计起来便相对简单得多；除此之外还有RTS、FPS等类型游戏，它们的侧重点在于策略和战斗操控，通常只需面对面的对话、走到指定地点或杀掉某个对象便可触发/完成剧情任务，被视为最简单的任务模式之一。由此可见，不同类型游戏，所强调的核心玩法及需要表达的世界观都不同，作为游戏进展的纽带，任务系统也需酌情设计。

因此，MMORPG的任务系统确实非常非常复杂，一款成功的MMORPG离不开其背后优秀的任务系统，我们需要不断借鉴与微创新，比如《任务系统设计思路》、《游戏任务多样化分析》等在分析魔兽世界的任务系统方面都具有很好的参考价值，网上还能搜罗到相当多的类似资料，作为策划的主要工作，我们暂且就不掺和了。

本节，我只想将其中一个微小却又极具传统韵味的分支：任务剧情功能实现呈现给大家；通过它，最终将游戏中的所有角色都关联了起来，作为庞大而复杂的任务系统的开端，今后若有充足时间我会陆续一一补充。

剧情任务通常是游戏的主线，尤其在单机游戏中。玩家可能不会记得为哪个工匠打了把刀，为哪个NPC杀了些怪，但是肯定会记住游戏中那些贯穿始终的儿女情长，乱世纷争。于是模仿经典的武侠网游《剑侠世界》的剧情功能设计，我们同样可以在Silverlight中制作出独具特色的剧情写实功能：

以上是最终效果截图，我将剧情对话控件由上至下分成功能窗口、特写窗口和剧情窗口；通过一些渐进渐出的动画，每次与NPC对话时触发剧情都会平缓的隐藏掉UI并突出剧情界面，此类特写便是让玩家更加重视主线内容的重要手法。剧情的呈现作为单独的一个控件，其中集成了阻断向下路由的鼠标操作，同时也需要处理好游戏画面的层次感让玩家更有身临其境之感觉，即便是在战斗中，如触发了剧情，游戏世界的时间(循环)依旧运转而不会因为你的私事造成一丝滞留：

    /// <summary>
    /// 剧情对话板
    /// </summary>
    public sealed class DramaDialogue : UIBase {

        /// <summary>
        /// 显示时触发
        /// </summary>
        public event EventHandler Showing;

        /// <summary>
        /// 消失时触发
        /// </summary>
        public event EventHandler Hiding;

        Rectangle topRect = new Rectangle() { Fill = new ImageBrush() { ImageSource = GlobalMethod.GetImage("UI/DramaLine.jpg", UriType.Project), Stretch = Stretch.Fill } };
        Rectangle middleRect = new Rectangle() { Fill = new ImageBrush() { ImageSource = GlobalMethod.GetImage("UI/GrayRect.png", UriType.Project), Stretch = Stretch.Fill } };
        Rectangle bottomRect = new Rectangle() { Fill = new ImageBrush() { ImageSource = GlobalMethod.GetImage("UI/DramaLine.jpg", UriType.Project), Stretch = Stretch.Fill } };
        Canvas topCanvas = new Canvas();
        Canvas bottomCanvas = new Canvas();
        EntityObject closer = new EntityObject() { Source = GlobalMethod.GetImage("UI/EndDialogue.png", UriType.Project) };
        TextBlock tip = new TextBlock() { Text = "【按Esc退出对话】", Foreground = new SolidColorBrush(Colors.Orange), FontSize = 18, TextWrapping = TextWrapping.Wrap };
        TextBlock content = new TextBlock() { Foreground = new SolidColorBrush(Colors.White), FontSize = 24, TextWrapping = TextWrapping.Wrap };
        EntityObject avatar = new EntityObject() { Source = GlobalMethod.GetImage("UI/Avatar0.png", UriType.Project) };
        DispatcherTimer timer = new DispatcherTimer() { Interval = TimeSpan.FromMilliseconds(30) };

        /// <summary>
        /// 是否正在显示
        /// </summary>
        public bool IsShowing { get; private set; }

        /// <summary>
        /// 获取或设置剧情播放速度
        /// </summary>
        public int DialogSpeed {
            get { return timer.Interval.Milliseconds; }
            set { timer.Interval = TimeSpan.FromMilliseconds(value); }
        }

        public DramaDialogue() {
            this.Children.Add(topCanvas);
            topCanvas.Children.Add(topRect);
            topCanvas.Children.Add(closer); Canvas.SetTop(closer, 10);
            this.Children.Add(middleRect);
            this.Children.Add(bottomCanvas);
            bottomCanvas.Children.Add(bottomRect);
            bottomCanvas.Children.Add(tip); Canvas.SetLeft(tip, 15); Canvas.SetTop(tip, 65);
            bottomCanvas.Children.Add(content); Canvas.SetTop(content, 10);
            bottomCanvas.Children.Add(avatar); Canvas.SetLeft(avatar, 10);
            timer.Tick += delegate {
                countText++;
                if (countText > drama.Content[countDrama].Length) {
                    if (timer.IsEnabled) {
                        timer.Stop();
                        countDrama++;
                    }
                } else {
                    content.Text = drama.Content[countDrama].Substring(0, countText);
                }
            };
            this.MouseLeftButtonDown += (s, e) => {
                if (IsShowing) {
                    Point p = e.GetPosition(closer);
                    if (p.X >= 0 && p.X <= closer.RealWidth && p.Y >= 0 && p.Y <= closer.RealHeight) { Hide(); e.Handled = true; return; }
                    if (timer.IsEnabled) {
                        content.Text = drama.Content[countDrama];
                        timer.Stop();
                        countDrama++;
                    } else {
                        if (countDrama == drama.Content.Count) {
                            Hide();
                        } else {
                            countText = 0;
                            avatar.Source = GlobalMethod.GetImage(string.Format("UI/Avatar{0}.png", drama.Avatar[countDrama]), UriType.Project);
                            timer.Start();
                        }
                    }
                }
                e.Handled = true;
            };
        }

        Drama drama;
        int countText = 0;
        int countDrama = 0;
        public void Show(Drama drama) {
            IsShowing = true;
            if (Showing != null) { Showing(this, null); }
            this.drama = drama;
            avatar.Source = GlobalMethod.GetImage(string.Format("UI/Avatar{0}.png", drama.Avatar[countDrama]), UriType.Project);
            Storyboard storyboard = new Storyboard();
            Duration duration = TimeSpan.FromMilliseconds(500);
            PowerEase powerEase = new PowerEase() { EasingMode = EasingMode.EaseOut };
            storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(topCanvas, "(Canvas.Top)", -topRect.Height, 0, duration, powerEase));
            storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(middleRect, "Opacity", 0, 1, duration, powerEase));
            storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(bottomCanvas, "(Canvas.Top)", Application.Current.Host.Content.ActualHeight, Application.Current.Host.Content.ActualHeight * 4 / 5, duration, powerEase));
            storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(avatar, "Opacity", 0, 1, duration, powerEase));
            EventHandler handler = null;
            storyboard.Completed += handler = delegate {
                storyboard.Completed -= handler;
                timer.Start();
            };
            storyboard.Begin();
        }

       public void Hide() {
            IsShowing = false;
            Storyboard storyboard = new Storyboard();
            Duration duration = TimeSpan.FromMilliseconds(500);
            PowerEase powerEase = new PowerEase() { EasingMode = EasingMode.EaseOut };
            storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(topCanvas, "(Canvas.Top)", 0, -topRect.Height, duration, powerEase));
            storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(middleRect, "Opacity", 1, 0, duration, powerEase));
            storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(bottomCanvas, "(Canvas.Top)", Application.Current.Host.Content.ActualHeight * 4 / 5, Application.Current.Host.Content.ActualHeight, duration, powerEase));
            storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(avatar, "Opacity", 1, 0, duration, powerEase));
            EventHandler handler = null;
            storyboard.Completed += handler = delegate {
                storyboard.Completed -= handler;
                countText = 0;
                countDrama = 0;
                content.Text = string.Empty;
                timer.Stop();
                if (Hiding != null) { Hiding(this, null); }
            };
            storyboard.Begin();
        }

        public override void AdaptiveWindowSize() {
            try {
                topRect.Width = middleRect.Width = bottomRect.Width = Application.Current.Host.Content.ActualWidth;
                topRect.Height = Application.Current.Host.Content.ActualHeight / 14;
                middleRect.Height = Application.Current.Host.Content.ActualHeight;
                bottomRect.Height = Application.Current.Host.Content.ActualHeight * 1 / 5;
                tip.Width = Application.Current.Host.Content.ActualWidth * 1 / 5 - 15;
                content.Width = Application.Current.Host.Content.ActualWidth * 4 / 5 - 15;
                Canvas.SetLeft(closer, Application.Current.Host.Content.ActualWidth - closer.RealWidth -15);
                Canvas.SetLeft(content, Application.Current.Host.Content.ActualWidth * 1 / 5);
                Canvas.SetTop(avatar, -avatar.RealHeight);
                Canvas.SetTop(bottomCanvas, Application.Current.Host.Content.ActualHeight * 4 / 5);
            } catch { }
        }

    }

到此，本系列Demo的编写已告一段落。有些技巧和功能太小不便作为单独章节详细讲述了，比如地图的视口缓动、地形的预测与碰撞处理、角色的特殊动画体系(如弹开、击飞、颤栗等)处理等；当然也还存在很多可拓展元素，比如《博得之门》中的游戏暂停、录像功能；格斗游戏中增强体验的烟尘、声效和印记效果等。代码方面除还可能进一步优化的小部分外，整体框架在反复的思考与重构后已近乎成熟；相比两年前的QXGameEngine，可谓翻天覆地的变化。

最后剩下几节，我将为本系列Demo焊接上游戏登陆模块，赋予它一个相对完整的商业产品流程。之前写过的两篇《动态资源》和《多国语言本地化》便是其开头，重新整编入本系列作为章节。

本系列源码请到目录中下载

在线演示地址：http://silverfuture.cn