Register    Login    Forum    Search    FAQ

Board index » General Programming




Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: [UDK]-Scaleform-UI at (@) Player (Moveable)
 Post Posted: Sat Feb 26, 2011 4:00 pm 
Offline
Site Admin

Joined: Sat Feb 19, 2011 1:33 am
Posts: 15




ในตอนแรกได้แนะนำวิธีการใช้ Scaleform เบื้องต้นกันไปแล้วนะครับ
บทความนี้ก็จะแนะนำวิธีการทำ UI ที่เคลื่อนที่ตาม Player ไม่ว่าจะเป็น Main Player หรือ AI
ซึ่งแน่นอนว่า ต้องมีการทำงานทั้งใน Flash และ UnrealScrpit
แต่การใช้งานเบื้องต้นผมจะไม่ใช้ Animation เข้ามาเกี่ยวข้องนะครับ

เริ่มกันเลยดีกว่า

Flash Content Create

ก่อนอื่นเราต้องออกแบบคร่าวๆก่อนว่า จะให้ UI ของเรา แสดงผลแบบไหน มีอะไรบ้าง
เช่น HP MP SP Name อื่นๆ แล้วแต่ความต้องการ
หลังจากนั้นก็เริ่มออกแบบในแฟลช โดยที่ผมจะใช้วิธีการ Import Texture เข้ามาเป็น แถบ HP MP SP

โดยการตั้งค่า Import Texture ให้ยึดถือ พื้นฐานตามนี้
เพื่อให้สามารถแชร์ Resource ได้ในกรณีที่มี SWF หลายตัวใช้ไฟล์ร่วมกัน
กรุณาสังเกต ชื่อฟล์ให้ดีว่า บางที่จะมีนามสกุล บางที่ไม่มีนามสกุลไฟล์
รวมถึงชื่อไฟล์ .SWF จะเป็นโปรเจคไฟล์หลัก
ดูเพิ่มเติมได้ที่
http://udn.epicgames.com/Three/ScaleformImport.html#Resource%20sharing

Image

ต่อไปก็เอาสิ่งที่เราออกแบบมาทำให้เป็น Object Symbol แล้ววางในตำแหน่งที่ต้องการซะ
พร้อมทั้งอย่าลืมเรื่อง Instance name และ การสืบทอด Object ด้วย
ในตัวอย่างผมมี Object ทั้งหมด ดังนี้ และมีหน้าที่ดังนี้

Image

Quote:
_root.ActorALLInfo //Main Object
_root.ActorALLInfo.ActorBG //BG
_root.ActorALLInfo.ActorName //Name Label
_root.ActorALLInfo.ActorDis //Distance Label
_root.ActorALLInfo.ActorHP_Back //MAX HP
_root.ActorALLInfo.ActorMP_Back //Max MP
_root.ActorALLInfo.ActorSP_Back //Max MP
_root.ActorALLInfo.ActorHP //Current HP
_root.ActorALLInfo.ActorMP //Current MP
_root.ActorALLInfo.ActorSP //Current MP
_root.ActorALLInfo.ActorHP_Text //Current HP as Text
_root.ActorALLInfo.ActorMP_Text //Current MP as Text
_root.ActorALLInfo.ActorSP_Text //Current MP as Text



ส่วน Object ไหนที่เราไม่มี่ความจำเป็นต้องเรียกใช้ก็ไม่ขำเป็นต้องกำหนด Instance name
เสร็จแล้วทำการ Publish แล้วจัดการยัดเข้า Package ซะ


UnrealScript

มาถึง UnrealScript จากตอนที่แล้ว Class เบื้องต้น จะมีแค่ Class GfxMoviePlayer หลัก
กับ Class ที่เกี่ยวข้องคือ Pawn

แต่ทีนี้ การที่เราจะทำให้ UI ของเรา ที่เป็น 2D ไปแสดงผลตามตำแหน่งของ AI ที่มีพิกัดเป็น 3D
เราจะต้องทำการแปลง 3D World Position มาเป็น 2D Screen Position ก่อน
หลังจากนั้นจึงนำค่าที่ได้มาอ้างอิงการแสดงผล
โดย Class ที่เกี่ยวข้องก็จะค่อนข้างจะยุ่งยากขึ้นจากเบื้องต้นพอสมควร

GfxMoviePlayer
Code:
class DMGFXActorInfo extends GFxMoviePlayer;
var DMMobAIController PC; // Buffer สำหรับ Controller
//----------
//ตัวแปรสำหรับ อ้างอิง Object ใน Flash
var GFxObject oALLInfo,oNameLabel,oRangeLabel,oHPBBar,oMPBBar,oSPBBar,oHPBar,oMPBar,oSPBar,oBG,oHPText,oMPText,oSPText;
//ระยะในการแสดงผล
var float fMaxDisplayRange,fMinDisplayRange;

DefaultProperties
{
   fMaxDisplayRange = 1500.0f;//Max Range can display. ระยะไกลสุดที่จะให้เริ่มแสดง UI
   fMinDisplayRange = 500.0f;//Min Range for Max Scale. ระยะใกล้สุดสำหรับแสดง UI ขนาด 100%
   bDisplayWithHudOff = false;
   bEnableGammaCorrection = false;
   MovieInfo = SwfMovie'DMGUI.ActorInfo';
}

function Init(optional LocalPlayer player)
{
   super.Init(player);
   Start();
   Advance(0.0f);

   //Get All Object Reference.
   oALLInfo = GetVariableObject("_root.ActorALLInfo");//Main BG.  Object หลัก
   oBG = GetVariableObject("_root.ActorALLInfo.ActorBG");//BG. แบคกราวน์
   oNameLabel = GetVariableObject("_root.ActorALLInfo.ActorName");//Name Label. ป้ายชื่อ
   oRangeLabel = GetVariableObject("_root.ActorALLInfo.ActorDis");//Distance Label. ระยะห่าง
   oHPBBar = GetVariableObject("_root.ActorALLInfo.ActorHP_Back");//Max HP. สำหรับอ้างอิง ค่า HP สูงสุด 
   oMPBBar = GetVariableObject("_root.ActorALLInfo.ActorMP_Back");//Max MP. สำหรับอ้างอิง ค่า MP สูงสุด
   oSPBBar = GetVariableObject("_root.ActorALLInfo.ActorSP_Back");//Max SP. สำหรับอ้างอิง ค่า SP สูงสุด 
   oHPBar = GetVariableObject("_root.ActorALLInfo.ActorHP");//Current HP. สำหรับ อ้างอิงค่า HP จริง
   oMPBar = GetVariableObject("_root.ActorALLInfo.ActorMP");//Current MP. สำหรับ อ้างอิง MP จริง
   oSPBar = GetVariableObject("_root.ActorALLInfo.ActorSP");//Current MP. สำหรับ อ้างอิง SP จริง
   oHPText = GetVariableObject("_root.ActorALLInfo.ActorHP_Text");//Current HP as Text. แสดงผล HP เป็นตัวหนังสือ
   oMPText = GetVariableObject("_root.ActorALLInfo.ActorMP_Text");//Current MP as Text. แสดงผล MP เป็นตัวหนังสือ
   oSPText = GetVariableObject("_root.ActorALLInfo.ActorSP_Text");//Current MP as Text. แสดงผล SP เป็นตัวหนังสือ
}
//สำหรับ Set Controller Reference ของ AI
function SetPlayer(DMMobAIController NewAI)
{
   PC = NewAI;
}
//Main Scaleform Loop
function TickHUD()
{
   local ASDisplayInfo MainInfo,HPBInfo,MPBInfo,SPBInfo,HPInfo,MPInfo,SPInfo; // ตัวแปรเก็บค่าของ Object
   local float fHPRatio,fMPRatio,fSPRatio; // อัตราส่วนพลังต่างๆ
   local string sName,sDistance;

   if(PC != none)
   {
      if(PC.fFarFromMainActor <= fMaxDisplayRange)
      {// ตรวจสอบว่า ระห่างระหว่าง Player และ Monster น้อยกว่า ค่าสูงสุดที่กำหนดไว้หรือไม่
         oALLInfo.SetVisible(true); // เซ็ทให้มองเห็น
         //Set Background Invisible.
         oBG.SetVisible(false); // ซ่อน แบคกราวน์

         //Basic HP MP Info.
         sName = string(PC.Pawn.Name); // ชื่อ Monster
         sDistance = string(int(PC.fFarFromMainActor)); // ระยะห่าง
               
         //Re Get Object Info. // อ่าน Info ของ Object
         HPBInfo = oHPBBar.GetDisplayInfo();
         MPBInfo = oMPBBar.GetDisplayInfo();
         SPBInfo = oSPBBar.GetDisplayInfo();
         HPInfo = oHPBar.GetDisplayInfo();
         MPInfo = oMPBar.GetDisplayInfo();
         SPInfo = oSPBar.GetDisplayInfo();
      
         //Set Position. เซ็ทตำแหน่งแสดง UI
         oALLInfo.SetPosition(PC.v3Pos2DScreen.X,PC.v3Pos2DScreen.Y - HPBInfo.YScale);
         //HP.
         fHPRatio = HPBInfo.XScale / PC.Pawn.HealthMax;// Ratio of HP
         oHPText.SetText(" "@PC.Pawn.Health @"/" @PC.Pawn.HealthMax);
         HPInfo.XScale = fHPRatio * PC.Pawn.Health;
         oHPBar.SetDisplayInfo(HPInfo);
         //MP.
         //fManaRatio = MPBInfo.XScale / PC.Pawn.HealthMax;// Ratio of HP
         //MPInfo.XScale = fManaRatio * PC.Pawn.HealthMax;
         oMPText.SetText("9999/9999");
         oMPBar.SetDisplayInfo(MPInfo);
         //
         //SP.
         //fManaRatio = MPBInfo.XScale / PC.Pawn.HealthMax;// Ratio of HP
         //MPInfo.XScale = fManaRatio * PC.Pawn.HealthMax;
         oSPText.SetText("9999/9999");
         oSPBar.SetDisplayInfo(SPInfo);
         //Range Distace.
         oRangeLabel.SetText(sDistance);
         //Name
         oNameLabel.SetText(sName);
      }
      else
      {
         oALLInfo.SetVisible(false);
      }
   }
}



HUD
Code:
class DMHUD extends UDKHUD;

simulated function PostBeginPlay()
{
   super.PostBeginPlay();
}

event PostRender()
{
   local DMMobAIController PCAI;
    local DMPlayerController PlayerControllerEx;
   local Vector v3PosA,v3PosB;

    super.PostRender();

    //Get a type casted reference to our custom player controller.
    PlayerControllerEx = DMPlayerController(PlayerOwner);// เซ็ท Object ของ Player หลัก

   //Get Project 3D WorldPosition to 2D Screen Position and Calculate Distance.
   foreach WorldInfo.AllControllers(class'DMMobAIController',PCAI)
   {// เอาเฉพาะ Monster มาแปลงค่าตำแหน่ง 3D เป็น 2D  พร้อมทั้งคำนวณ ระยะห่างระหว่าง Monster กับ Player
      v3PosA = PCAI.Pawn.Location;
      v3PosB = PlayerControllerEx.Pawn.Location;
      PCAI.v3Pos2DScreen = Canvas.Project(v3PosA);//แปลง 3D WorldPosition to 2D Screen Position
      PCAI.fFarFromMainActor = VSize(v3PosA - v3PosB);
   }

}

DefaultProperties
{

}



AIController ขึ้นอยู่กับว่า ใน HUD เราจะเรียกด้วย Controller หรือ Pawn ถ้า
เรา Reference จาก Pawn ก็เอาตัวแปรที่ต้องการเก็บค่า ไปใส่ไว้ใน Pawn Class ก็ได้ แต่ผมใช้ Controller
เพราะ Controller มันมี Pawn อยู่ภายใน และสามารถ Reference ได้ครอบคลุมกว่า
Code:
class DMMobAIController extends AIController;
//ตัวแปรเก็บค่าที่ต้องการใช้
var Vector          v3Pos2DScreen;
var float           fFarFromMainActor;


Pawn
Code:
class DMMobPawn extends GamePawn;

var DMMobAIController MyController;
var DMGFXActorInfo  HudActorInfo;

Defaultproperties
{

}

simulated function PostBeginPlay()
{
   super.PostBeginPlay();
   if (MyController == none)
   {//Init Controller หลักของ Monster
      MyController = Spawn(class'DMMobAIController', self);
      MyController.SetPawn(self);
   }
   if (HudActorInfo == none)
   {//Init Scaleform และเซ็ท Reference Controller
      HudActorInfo = new class'DefendMaster.DMGFXActorInfo';   
      HudActorInfo.Init();
      HudActorInfo.SetPlayer(MyController);
   }
}

//คืน Memory
simulated event Destroyed()
{
   if (HudActorInfo != none)
   {
      HudActorInfo.Close(true);
      HudActorInfo = none;
   }
}

simulated event Tick(float DeltaTime)
{
   super.Tick(DeltaTime);
   HudActorInfo.TickHUD();//ลูป Scaleform
}


ซึ่งใน Class ของ GfxMoviePlayer ก็สามารถดัดแปลงได้ตามความเหมาะสม

ผลลัพท์ได้ตามรูป

Image


Top 
 Profile  
 
Display posts from previous:  Sort by  
 
Post new topic Reply to topic  [ 1 post ] 

Board index » General Programming


Who is online

Users browsing this forum: No registered users and 1 guest

 
 

 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron