Silverlight 2.5D RPG游戏技巧与特效处理：（十八）开场卷轴与动态窗口
第一眼往往能起到决定性作用，这不仅是对人来说。优秀的游戏同样需要一个华丽而盛大的开场，以中国式古风古韵之柔情传承，配以卷轴展开壮丽山河之气势磅礴，云中漫步于旅仙境渐入开场，相信如此美好的初体验定能捕获无数玩家的心：华美的开端能不让人雀跃祈盼后续之旷世奇章吗？
实现开场卷轴的方案大致三类：随机移动、往复移动及无线延展。其中随机移动即宽大的背景在游戏视窗中任意移动，碰撞到边缘时再向随机方向弹回；往复移动即背景画卷以横向或纵向来回移动；而本节我要给大家展示的是无限延展的开场画卷效果。
无限延展运动的画卷给人最大的震撼就是恢弘而无穷无尽，我们需要事先准备一副可左右对合拼接且尺寸大于游戏最大可能视口的图片。作为可全屏操作的Silverlight网游来说，图片的宽度至少得大于2000px以满足目前几乎所有客户端分辨率。至于原理很简单，两张一样的画卷图片紧挨着向同一方向连续移动，当第一张超出游戏屏幕时立刻再返回到第二张的末尾继续跟随移动，由此自然而然便形成了无限延展而连贯的动态画卷背景效果：
当然，仅仅是空灵的卷轴似乎还无法体现宏大的游戏开场气势，我们还可以赋予它灿烂的阳光、飘渺的浮石、成群的飞燕等额外动画，外加整体隐约镂空的云层，然后将单独的背景卷轴搭配上这些动画最终封装成LoginBackground控件，由此开场卷轴便大功告成：
///<summary>
///背景的顺序
///</summary>
publicenumBackgourndIndex{
First=0,
Second=1,
}
///<summary>
///登陆部分的动画背景
///</summary>
publicsealedclassLoginBackground:EntityObject{
AnimationBasesunnyAnimation=newAnimationBase(){Loop=true,Z=2,};
AnimationBasepumiceAnimation=newAnimationBase(){Loop=true,Z=2,};
AnimationBaseflyBirds=newAnimationBase(){Loop=true,Z=2,};
AnimationBaseflowLightAnimation=newAnimationBase(){Loop=true,Z=2,};
publicLoginBackground(){
Source=GlobalMethod.GetImage("UI/ScrollPicture.jpg",UriType.Project);
}
///<summary>
///播放完一副的时间(毫秒)
///</summary>
publicstaticintInterval=20000;
Storyboardstoryboard;
BackgourndIndexindex;
///<summary>
///开始卷轴运动
///</summary>
publicvoidRun(BackgourndIndexindex,doublestart,doubleend){
this.index=index;
storyboard=newStoryboard();
storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(this,"(Canvas.Left)",start,end,TimeSpan.FromMilliseconds(index==BackgourndIndex.First?Interval:Interval*2),null));
storyboard.Completed+=newEventHandler(storyboard_Completed);
storyboard.Begin();
}
voidstoryboard_Completed(objectsender,EventArgse){
Storyboardstoryboard=senderasStoryboard;
storyboard.Completed-=storyboard_Completed;
storyboard=newStoryboard();
storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(this,"(Canvas.Left)",RealWidth-6,-RealWidth,TimeSpan.FromMilliseconds(Interval*2),null));
storyboard.Completed+=storyboard_Completed;
storyboard.Begin();
}
///<summary>
///显示内部动画
///</summary>
publicvoidDisplayAnimation(){
CreateAnimation(sunnyAnimation,14,newPoint(680,0));
CreateAnimation(pumiceAnimation,67,newPoint(810,25));
CreateAnimation(flyBirds,69,newPoint(570,410));
CreateAnimation(flowLightAnimation,68,newPoint(1760,105));
}
voidCreateAnimation(AnimationBaseanimation,intcode,Pointposition){
animation.Code=code;
animation.Position=position;
EventHandlerhandler=null;
animation.Disposed+=handler=delegate{
animation.Disposed-=handler;
this.Children.Remove(animation);
};
this.Children.Add(animation);
animation.HeartStart();
}
publicoverridevoidDispose(objectsender,EventArgse){
sunnyAnimation.Dispose(sunnyAnimation,null);
pumiceAnimation.Dispose(pumiceAnimation,null);
flyBirds.Dispose(flyBirds,null);
flowLightAnimation.Dispose(flowLightAnimation,null);
storyboard.Stop();
base.Dispose(sender,e);
}
}
///背景的顺序
///</summary>
publicenumBackgourndIndex{
First=0,
Second=1,
}
///<summary>
///登陆部分的动画背景
///</summary>
publicsealedclassLoginBackground:EntityObject{
AnimationBasesunnyAnimation=newAnimationBase(){Loop=true,Z=2,};
AnimationBasepumiceAnimation=newAnimationBase(){Loop=true,Z=2,};
AnimationBaseflyBirds=newAnimationBase(){Loop=true,Z=2,};
AnimationBaseflowLightAnimation=newAnimationBase(){Loop=true,Z=2,};
publicLoginBackground(){
Source=GlobalMethod.GetImage("UI/ScrollPicture.jpg",UriType.Project);
}
///<summary>
///播放完一副的时间(毫秒)
///</summary>
publicstaticintInterval=20000;
Storyboardstoryboard;
BackgourndIndexindex;
///<summary>
///开始卷轴运动
///</summary>
publicvoidRun(BackgourndIndexindex,doublestart,doubleend){
this.index=index;
storyboard=newStoryboard();
storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(this,"(Canvas.Left)",start,end,TimeSpan.FromMilliseconds(index==BackgourndIndex.First?Interval:Interval*2),null));
storyboard.Completed+=newEventHandler(storyboard_Completed);
storyboard.Begin();
}
voidstoryboard_Completed(objectsender,EventArgse){
Storyboardstoryboard=senderasStoryboard;
storyboard.Completed-=storyboard_Completed;
storyboard=newStoryboard();
storyboard.Children.Add(GlobalMethod.CreateDoubleAnimation(this,"(Canvas.Left)",RealWidth-6,-RealWidth,TimeSpan.FromMilliseconds(Interval*2),null));
storyboard.Completed+=storyboard_Completed;
storyboard.Begin();
}
///<summary>
///显示内部动画
///</summary>
publicvoidDisplayAnimation(){
CreateAnimation(sunnyAnimation,14,newPoint(680,0));
CreateAnimation(pumiceAnimation,67,newPoint(810,25));
CreateAnimation(flyBirds,69,newPoint(570,410));
CreateAnimation(flowLightAnimation,68,newPoint(1760,105));
}
voidCreateAnimation(AnimationBaseanimation,intcode,Pointposition){
animation.Code=code;
animation.Position=position;
EventHandlerhandler=null;
animation.Disposed+=handler=delegate{
animation.Disposed-=handler;
this.Children.Remove(animation);
};
this.Children.Add(animation);
animation.HeartStart();
}
publicoverridevoidDispose(objectsender,EventArgse){
sunnyAnimation.Dispose(sunnyAnimation,null);
pumiceAnimation.Dispose(pumiceAnimation,null);
flyBirds.Dispose(flyBirds,null);
flowLightAnimation.Dispose(flowLightAnimation,null);
storyboard.Stop();
base.Dispose(sender,e);
}
}
画卷展开后，接下来便是进入游戏正题。为了提高用户体验，我将所有窗体都设计为继承自WindowsBase附带透明拖动、渐显切入模式的九宫格控件，每个窗体所需UI素材部分不同(记录在Login.xml配置文件中)，因此按照动态加载原则，每此弹出新的窗口前都先分析并下载该窗口所需资源，完成后再以动画形式切入，其中配以伪模态Loading环，最终的效果连贯而不失精致(以语言选择窗体LanguageChoicer为例)：
///<summary>
///游戏语言选择
///</summary>
publicsealedclassLanguageChoicer:WindowBase{
///<summary>
///提交
///</summary>
publiceventMouseButtonEventHandlerSubmit;
publicLanguageChoicer(){
this.Loaded+=(s,e)=>{
QueueParallelDownloaderqueueDownloader=newQueueParallelDownloader();
queueDownloader.DownloadCompleted+=newOpenReadCompletedEventHandler(queueDownloader_OpenReadCompleted);
queueDownloader.OpenReadAsync(GetResourceList("LanguageChoicer"),null,false,300);
};
}
voidqueueDownloader_OpenReadCompleted(objectsender,OpenReadCompletedEventArgse){
QueueParallelDownloaderqueueDownloader=senderasQueueParallelDownloader;
queueDownloader.DownloadCompleted-=queueDownloader_OpenReadCompleted;
Canvasbody=newCanvas(){
Width=254,
Height=200,
Background=newImageBrush(){ImageSource=GlobalMethod.GetImage("UI/105.png",UriType.Web)}
};
RadioButton[]languages=newRadioButton[5];
languages[0]=newRadioButton(){
Tag="zh-cn",
Content=newTextBlock(){
Text="简体中文",
Style=Application.Current.Resources["TextStyle0"]asStyle,
TextWrapping=TextWrapping.Wrap,
Foreground=newSolidColorBrush(Color.FromArgb(255,239,255,208)),
},
FontSize=14,
GroupName="Language",
IsChecked=true,
};
languages[1]=newRadioButton(){
Tag="zh-tw",
Content=newTextBlock(){
Text="繁體中文",
Style=Application.Current.Resources["TextStyle0"]asStyle,
TextWrapping=TextWrapping.Wrap,
Foreground=newSolidColorBrush(Color.FromArgb(255,239,255,208)),
},
FontSize=14,
GroupName="Language",
};
languages[2]=newRadioButton(){
Tag="us",
Content=newTextBlock(){
Text="English",
Style=Application.Current.Resources["TextStyle0"]asStyle,
TextWrapping=TextWrapping.Wrap,
Foreground=newSolidColorBrush(Color.FromArgb(255,239,255,208)),
},
FontSize=14,
GroupName="Language"
};
languages[3]=newRadioButton(){
Tag="jp",
Content=newTextBlock(){
Text="日本語",
Style=Application.Current.Resources["TextStyle0"]asStyle,
TextWrapping=TextWrapping.Wrap,
Foreground=newSolidColorBrush(Color.FromArgb(255,239,255,208)),
},
FontSize=14,
GroupName="Language"
};
languages[4]=newRadioButton(){
Tag="kr",
Content=newTextBlock(){
Text="한국의",
Style=Application.Current.Resources["TextStyle0"]asStyle,
TextWrapping=TextWrapping.Wrap,
Foreground=newSolidColorBrush(Color.FromArgb(255,239,255,208)),
},
FontSize=14,
GroupName="Language"
};
for(inti=0;i<=languages.GetUpperBound(0);i++){
body.Children.Add(languages[i]);
Canvas.SetLeft(languages[i],86);Canvas.SetTop(languages[i],-5+i*35);
}
ImageButtoncloser=newImageButton(){
TotalWidth=93,
TotalHeight=27,
Background=newImageBrush(){ImageSource=GlobalMethod.GetImage("UI/106.png",UriType.Web),Stretch=Stretch.None},
Text="提交(OK)",
TextStyle=Application.Current.Resources["TextStyle1"]asStyle,
TextSize=14,
TextHasEffect=true,
TextEffectColor=Colors.Black,
TextBrush=newSolidColorBrush(Colors.LightGray),
TextHoverBrush=newSolidColorBrush(Colors.White),
};
body.Children.Add(closer);Canvas.SetLeft(closer,73);Canvas.SetTop(closer,167);
closer.Click+=(s1,e1)=>{
//LoginManager.loading.Show();
for(inti=0;i<=languages.GetUpperBound(0);i++){
if(languages[i].IsChecked.Value){
ParallelDownloaderdownloader=newParallelDownloader();
OpenReadCompletedEventHandlerhandler=null;
downloader.OpenReadCompleted+=handler=(s2,e2)=>{
Infos["Language"]=XElement.Load(e2.ResultasStream);
if(Submit!=null){Submit(this,e1);}
//LoginManager.loading.Hide();
};
downloader.OpenReadAsync(string.Format(GlobalMethod.WebPath("Language/{0}.xml"),languages[i].Tag.ToString()),DownloadPriority.Highest,null,false,0);
break;
}
}
};
StyleBoxstyleBox=newStyleBox(){
HeadHeight=60,
BodyHeight=200,
FootHeight=15,
NorthCenterWidth=74,
CenterWidth=254,
CenterEdgeWidth=30,
SouthCenterWidth=228,
NorthEdgeImageSource=GlobalMethod.GetImage("UI/100.png",UriType.Web),
NorthImageSource=GlobalMethod.GetImage("UI/101.png",UriType.Web),
CenterEdgeImageSource=GlobalMethod.GetImage("UI/102.png",UriType.Web),
SouthEdgeImageSource=GlobalMethod.GetImage("UI/103.png",UriType.Web),
SouthImageSource=GlobalMethod.GetImage("UI/104.png",UriType.Web),
CenterContent=body,
};
styleBox.HeadText.Foreground=newSolidColorBrush(Colors.White);
styleBox.HeadText.Text="选择语言";
styleBox.HeadText.FontSize=14;
styleBox.HeadText.Margin=newThickness(0,-20,0,0);
Body=styleBox;
base.OnResourceReady(this,e);
}
}
///游戏语言选择
///</summary>
publicsealedclassLanguageChoicer:WindowBase{
///<summary>
///提交
///</summary>
publiceventMouseButtonEventHandlerSubmit;
publicLanguageChoicer(){
this.Loaded+=(s,e)=>{
QueueParallelDownloaderqueueDownloader=newQueueParallelDownloader();
queueDownloader.DownloadCompleted+=newOpenReadCompletedEventHandler(queueDownloader_OpenReadCompleted);
queueDownloader.OpenReadAsync(GetResourceList("LanguageChoicer"),null,false,300);
};
}
voidqueueDownloader_OpenReadCompleted(objectsender,OpenReadCompletedEventArgse){
QueueParallelDownloaderqueueDownloader=senderasQueueParallelDownloader;
queueDownloader.DownloadCompleted-=queueDownloader_OpenReadCompleted;
Canvasbody=newCanvas(){
Width=254,
Height=200,
Background=newImageBrush(){ImageSource=GlobalMethod.GetImage("UI/105.png",UriType.Web)}
};
RadioButton[]languages=newRadioButton[5];
languages[0]=newRadioButton(){
Tag="zh-cn",
Content=newTextBlock(){
Text="简体中文",
Style=Application.Current.Resources["TextStyle0"]asStyle,
TextWrapping=TextWrapping.Wrap,
Foreground=newSolidColorBrush(Color.FromArgb(255,239,255,208)),
},
FontSize=14,
GroupName="Language",
IsChecked=true,
};
languages[1]=newRadioButton(){
Tag="zh-tw",
Content=newTextBlock(){
Text="繁體中文",
Style=Application.Current.Resources["TextStyle0"]asStyle,
TextWrapping=TextWrapping.Wrap,
Foreground=newSolidColorBrush(Color.FromArgb(255,239,255,208)),
},
FontSize=14,
GroupName="Language",
};
languages[2]=newRadioButton(){
Tag="us",
Content=newTextBlock(){
Text="English",
Style=Application.Current.Resources["TextStyle0"]asStyle,
TextWrapping=TextWrapping.Wrap,
Foreground=newSolidColorBrush(Color.FromArgb(255,239,255,208)),
},
FontSize=14,
GroupName="Language"
};
languages[3]=newRadioButton(){
Tag="jp",
Content=newTextBlock(){
Text="日本語",
Style=Application.Current.Resources["TextStyle0"]asStyle,
TextWrapping=TextWrapping.Wrap,
Foreground=newSolidColorBrush(Color.FromArgb(255,239,255,208)),
},
FontSize=14,
GroupName="Language"
};
languages[4]=newRadioButton(){
Tag="kr",
Content=newTextBlock(){
Text="한국의",
Style=Application.Current.Resources["TextStyle0"]asStyle,
TextWrapping=TextWrapping.Wrap,
Foreground=newSolidColorBrush(Color.FromArgb(255,239,255,208)),
},
FontSize=14,
GroupName="Language"
};
for(inti=0;i<=languages.GetUpperBound(0);i++){
body.Children.Add(languages[i]);
Canvas.SetLeft(languages[i],86);Canvas.SetTop(languages[i],-5+i*35);
}
ImageButtoncloser=newImageButton(){
TotalWidth=93,
TotalHeight=27,
Background=newImageBrush(){ImageSource=GlobalMethod.GetImage("UI/106.png",UriType.Web),Stretch=Stretch.None},
Text="提交(OK)",
TextStyle=Application.Current.Resources["TextStyle1"]asStyle,
TextSize=14,
TextHasEffect=true,
TextEffectColor=Colors.Black,
TextBrush=newSolidColorBrush(Colors.LightGray),
TextHoverBrush=newSolidColorBrush(Colors.White),
};
body.Children.Add(closer);Canvas.SetLeft(closer,73);Canvas.SetTop(closer,167);
closer.Click+=(s1,e1)=>{
//LoginManager.loading.Show();
for(inti=0;i<=languages.GetUpperBound(0);i++){
if(languages[i].IsChecked.Value){
ParallelDownloaderdownloader=newParallelDownloader();
OpenReadCompletedEventHandlerhandler=null;
downloader.OpenReadCompleted+=handler=(s2,e2)=>{
Infos["Language"]=XElement.Load(e2.ResultasStream);
if(Submit!=null){Submit(this,e1);}
//LoginManager.loading.Hide();
};
downloader.OpenReadAsync(string.Format(GlobalMethod.WebPath("Language/{0}.xml"),languages[i].Tag.ToString()),DownloadPriority.Highest,null,false,0);
break;
}
}
};
StyleBoxstyleBox=newStyleBox(){
HeadHeight=60,
BodyHeight=200,
FootHeight=15,
NorthCenterWidth=74,
CenterWidth=254,
CenterEdgeWidth=30,
SouthCenterWidth=228,
NorthEdgeImageSource=GlobalMethod.GetImage("UI/100.png",UriType.Web),
NorthImageSource=GlobalMethod.GetImage("UI/101.png",UriType.Web),
CenterEdgeImageSource=GlobalMethod.GetImage("UI/102.png",UriType.Web),
SouthEdgeImageSource=GlobalMethod.GetImage("UI/103.png",UriType.Web),
SouthImageSource=GlobalMethod.GetImage("UI/104.png",UriType.Web),
CenterContent=body,
};
styleBox.HeadText.Foreground=newSolidColorBrush(Colors.White);
styleBox.HeadText.Text="选择语言";
styleBox.HeadText.FontSize=14;
styleBox.HeadText.Margin=newThickness(0,-20,0,0);
Body=styleBox;
base.OnResourceReady(this,e);
}
}
额外需要说明一下，作为Silverlight网页游戏来说，多国语言(本地化)实现起来相当简单。游戏开端当玩家选择一种语言后，按照第十七节的方式首先将该语言包下载到本地并缓存，游戏中一切需要显示文字的地方都将从这里获取并解析。当然，特别要注意一些细节问题比如同一单词不同语言下长度不同，可能导致界面变形或超出范围，配合上一些偏移和字体尺寸参数可轻松解决。
下一节我会为大家继续讲解游戏登陆部分，其中的WCF+数据库操作将是重头大戏。相信《梦隋唐Online》这部强势作品的发布势将掀起新一轮Silverlight网游革命让世界仰望中国页游技术质的飞跃！
本系列源码请到目录中下载
在线演示地址：http://silverfuture.cn