UI 界面：技术决定一切

转自：http://www.cnblogs.com/NEOCSL/archive/2012/12/10/2811153.html

　　在我看来，肖恩帕克不仅仅是一位技术天才和远见卓识的移动互联网领域先锋。同时谙熟社会之道，他认为技术才是改变人类生活结构和方式的核心，不是政府。整个世界和人类的生活方式都被技术最牛逼的公司苹果所影响着，我想未来会是一家生物工程公司。iOS平台的UI界面操作比以往的菜单选择和鼠标点击更能引发人们的情绪反馈。因此我将会着手iOS触屏界面系统的技术。

　　操作界面在MobileMenuScene中控制，后续有一个MobileMenuBase继承了MobileMenuScene，但是添加了Fade函数。

1.我写了一个AntMenuSceneMainMenu来定义自己的开始游戏一级菜单。

class AntMenuSceneMainMenu extends MobileMenuScene;

var MobilePlayerInput MPI;

2.在Controller中可以打开这个菜单(当然你可以用你的任何方式在任何时候任何位置打开自己需要的菜单，例如玩家死亡，可以在Pawn中打开菜单)

var AntMenuSceneMainMenu MainGameMenu;

MainGameMenu=AntMenuSceneMainMenu(MPI.OpenMenuScene(class'AntMenuSceneMainMenu'));

3.这样就打开了需要的MobileMenuScene

　　在这里的defaultproperties中添加需要的内容，Image,label,button基本上就是这三种内容了，他们都继承自MobileMenuObject

　　Button　　

Begin Object Class=MobileMenuButton Name=CloseButton
        Tag="Play"
        bRelativeLeft=true
        bRelativeTop=true
        bRelativeHeight=true
        bRelativeWidth=true
        bHeightRelativeToWidth=true
        Left=0.04
        Top=0
        Width=0.25           
        Height=1.0
        Caption="Play!"
        bCaptionShadow=true
        Images(0)=Texture2D'ChickenHUD.HenIcon'
        Images(1)=Texture2D'ChickenHUD.HenIcon'
        CaptionColor=(R=1.0,G=1.0,B=0.0,A=1.0)
        CaptionScale=1.1
    End Object
    MenuObjects.Add(CloseButton)

　　Lebel

Begin Object Class=MobileMenuLabel Name=HighScoreLabel
        Tag="HighScore"
        bRelativeLeft=true
        bRelativeTop=true
        Left=0.36
        Top=0.37
        TextFont=Font'ChickenFonts.Plump'
        TextColor=(R=50,G=255,B=100,A=255)
        TouchedColor=(R=50,G=255,B=100,A=255)
        Caption="High Score:"
        TextXScale=1.3
        TextYScale=1.3
        ShadowOffsetScale=1.7
    End Object
    MenuObjects.Add(HighScoreLabel)

　　Image

Begin Object Class=MobileMenuImage Name=Background
      Tag="Background"
      Left=0
      Top=0
      Width=1.0
      Height=1.0
      bRelativeWidth=true
      bRelativeHeight=true
      Image=Texture2D'CastleUI.menus.T_CastleMenu2'
      ImageDrawStyle=IDS_Stretched
      ImageUVs=(bCustomCoords=true,U=0,V=30,UL=1024,VL=180)
   End Object
   MenuObjects.Add(Background)

　　MobileMenuScene中有需要填充的函数，例如处理Touch的函数

event OnTouch(MobileMenuObject Sender, ETouchType EventType, float TouchX, float TouchY)
{
    if(sender==none)
    return;

    switch(Sender.tag)
    {
        case "Jump_tag":
        `log("this is work fine aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
        InputOwner.Outer.ConsoleCommand("jump");
        break;

        case "Weapon_tag":
        InputOwner.Outer.ConsoleCommand("nextweapon");
        break;

        case "zone_tag":
        InputOwner.Outer.ConsoleCommand("KillZone");
        break;

        case "Auto_tag":
        InputOwner.Outer.ConsoleCommand("AutoShoot");
        break;
    }

    if(sender.Tag!="Auto_tag")
    {
        InputOwner.Outer.ConsoleCommand("DisableAutoShoot");
    }

}

当然你也可以在初始化中显示自己想要布置的内容

event InitMenuScene(MobilePlayerInput PlayerInput, int ScreenWidth, int ScreenHeight)
{
    local MobileMenuLabel tLabel;
    super.InitMenuScene(PlayerInput,ScreenWidth,ScreenHeight);
    tLabel = MobileMenuLabel(FindMenuObject("HighScore"));
    tLabel.Caption = tLabel.Caption @ ChickenMenuGame(class'WorldInfo'.static.GetWorldInfo().Game).cHighScore.HighScore;
}

 

MobileMenuScene的后边有一个MobileMenuBase。他实现了按钮的Fade功能。而不仅仅是让按钮消除，因此我将重新完成继承工作。

　　1.该功能强大的地方在于：你不仅仅能获得慢慢消隐的效果，同时也将会使活跃的按钮Cooldown。

case “Play”:
         Fade(true,1.0);
         //实现想要的功能
       break;

　　2.遍历控件的强大功能

local MobileMenuObject mObject;

foreach MenuObjects(mObject)
{
//如果mObject.Tag是"CreditsSplash"那就隐藏
    mObject.bIsHidden=mObject.Tag=="CreditsSplash";
//mObject是否隐藏，没有的话就激活
    mObject.bIsActive=!mObject.bIsHidden;
}

UI界面不仅仅能呈现一种渐变效果，如果有推拉效果那就更加的牛逼闪耀。今天我将实现两个内容1.UI的推拉下滑效果 2.kismet中过场动画跳过。我想用一种更为黑客的方式进行下面的工作，一个点一个点的技术攻克每一方面的内容。

　　1.在OnTouch中获取Controller

local AntPlayerController PC;

pc=AntPlayerController(InputOwner.Outer);

　　2.初始化控件和按钮，为了更加的标准和匹配不同设备的分辨率

var float Scale;

event InitMenuScene(MobilePlayerInput PlayerInput,int ScreenWidth,int ScreenHeight,bool bIsFirstInitialization)
{ 
     local int i;

     super.InitMenuScene(PlayerInput,ScreenWidth,ScreeHeight,bIsFirstInitialization);

     Scale=(ScreenWidth>=960)?1.0:Float(ScreenWidth)/960;
     //resize the scale of button and image

go on bro

for(i=1;i<MenuObjects.length;i++)
{
   MenuObjects[i].Left*=Scale;
   MenuObjects[i].Top*=Scale;
   MenuObjects[i].Width*=Scale;
   MenuObjects[i].Height*=Scale;
}

MenuObjects[0].height*=Scale;
MenuObjects[0].Width*=Scale;

if(ScreenWidth==1024)
{
     MenuObjects[0].Width=2048;
}
else if(ScreenWidth<960)
{
     MobileMenuImage(MenuObjects[0].ImageDrawStyle=IDS_Stretched);
}

//Handle the main window
Width=ScreenWidth;
Height*=Scale;

MenuObjects[1].Left=(ScreenWidth/4)-(MenuObjects[2].width/2);
MenuObjects[2].Left=ScreenWidth-(ScreenWidth/4)-(MenuObjects[2].Width/2);

Top=-Height;
showSize=Height-MenuObjects[1].Top+(8*Scale);
}

　3.抓到了kismet的中心，怎么进入？在PlayerController中研究。两个函数ExitAttractMode(),EnterAttractMode()。后一篇文章专门进入这两个函数研究。

　　4.有一个OnSceneTouch函数处理任何在该屏幕上响应的事件，当然可以根据自己的参数设置来规定响应的区域。

if(PC.SliderZone！=none&&X>=PC.SliderZone.CurrentLocation.X&&X<PC.SliderZone.CurrentLocation.x&&Y>=PC.SliderZone.CurrentLocation.Y&&Y<PC.SliderZone.CurrentLocation.Y+PC.SliderZone.ActiveSizeY)

如此看来，PC.ResetMenu()又是重要的滑动显示效果。