Chat Room

บทที่ 6 Scale Form



Scale Form เนื่องจาก UDK ได้ลบ UIScense ไปจึงทำให้ผมนั้นสร้าง GUI ของเกมไม่ได้
ก็เลยจำเป็นต้องมาพึ่งพา flash สามารถ
Download ตัวทดลองไปใช้ได้ครับ ที่นี่
Download อ่าเมื่อ Download มาติดตั้งแล้วเรียบร้อย ( สาเหตุทำไมผมถึงไม่ใช้ UDK ทำเนื่องจากว่า UIScense ถูกตัดออกไป ถ้ายังดึงดันที่จะทำ จะใช้เวลานาน และ ดวงที่จะออกมาไม่สวยเลยมีสูง ผมก็จึงตัดปัญหาไป ครับ ) ซึ่งถ้าใครมี CS3 - 5 ก็สามารถ มาทำได้ครับ ซึ่งในที่นี้ผมจะสอนการ ใช้งาน flash เบื้องต้นด้วย เอาละเริ่มมาเริ่มจาก การทำหน้าตา GUI กันก่อนดีกว่าครับ
หลังจากจำเจ ในรูปแบบการนำเสนอเดิมๆผมได้เปลี่ยน รูปแบบใหม่ให้ดูสวยขึ้น
ยังไงก็ช่วยกัน vote ด้วยนะครับ ว่าอ่านเข้าใจหรือไม่

Installing
ก่อนอื่นก็เข้าไปที่ Adobe Extension Manager CS5 กด Install แล้วก็ไปที่ Folder UDK ของเรานะครับ เข้าไปที่ Binaries\GFx\CLIK Tools แล้วจะเห็นไฟล์ Scaleform CLIK ให้กดเลือกแล้วกด ตกลงครับ จากนั้นเมื่อทำเสร็จแล้ว
ให้ทำการเข้า Flash Pro เลยครับ
หลังจากนั้นก็ทำการ กด Edit ตรง Title Bar ครับเมื่อคุณทำการกดแล้ว
ให้คุณ สังเกตุ Category นะครับให้เลือกคำว่า Actionscript แล้วจะสังเกตุมีปุ่มให้เลือก ว่า Language ถ้ามี actionscript 2 ให้เลือก actionscript 2 นะครับ เลือกเลยครับ actionscript 2


หลังจาก ทำการกดแล้ว Folder ในภาพที่ สามแล้ว ก็จะมีให้เลือกอะไรก็ไม่รู้ไม่ต้องสนใจ ตรงเข้าไปหา Folder UDK คุณ เข้าไป Folder Development เข้าที่ Flash ในที่นี้ผมบอกวิธีการใช้ AS2 ผมก็กด AS2 ครั้งนึง จะมี CLIK โผล่มา เลือกเลยครับ CLIK เลือกแล้วทำการ กด OK แล้วก็ กด OK อีกรอบนึง เพื่อเป็นการยืนยันครับ หลังจากนั้น ไปที่ Title Bar อีกรอบ เลือกคำว่า Window แล้วไปที่
Other Panel ครับ เลือกคำว่า Scaleform Launcher ครับกด มันลงไป




นี่คือตัวทดสอบนะครับ
ก็จะได้หน้าตาแบบนี้มา กด + ครับให้จังเกตุตรง Player Exe กด + บรรทัดนั้นครับยังไม่ต้องไปทำอะไรมันมากครับ คราวนี้กลับมาที่ Folder UDK ครับ เลือก Binaries\GFx แล้วจะสังเกตุว่าจะมีไฟล์ที่ชื่อว่า FxMediaPlayer แล้วมันจะมีให้ตั้งชื่อ Player name ตั้งเลยครับ แล้วกด Ok
แล้ว ก็ กด OK ซ้ำไปอีกรอบครับ
ก็จะได้มา แค่นี้แหล่ะครับ กด็จะได้
ตัวทดสอบมาแล้วเรามาต่อ การทำงานต่อดีกว่า



Working 
เรามาเริ่มทำการสร้างก่อนดีกว่า
ในที่นี้ผมจะเลือกใช้ Actionscript 2.0 นะครับกดมันเข้าไป หลังจากนั้น
ทำการ สร้างเลยครับ











หลังจากนั้นให้ทำการ Edit เพื่อเลือกเพื่อนที่ครับ
สำหรับผมแล้วจะเลือก มาทดลอง ประมาณ 1024 x 720
ก่อนนะครับเพื่อเราเอามาทดสอบ

หลังจากนั้นผมจะทำการ เลือก Tool bar ให้เลือก

Icon ดังต่อไปนี้รูปนี้ครับ เมื่อ ผมเลือกแล้ว ผมก็เลือกสีดำ นะครับแล้วก็ ลากคลุมเพื่อนที่ทั้งหมด
เพื่อสร้างเป็น BG ครับตรงนี้คุณสามารถ คิดเองทำเองได้นะครับ
หลังจากนั้นให้ คุณลาก พื้นหลังที่คุณตกแต่งไว้ไปยัง Library ครับ

หลังจากนั้นนะครับ ผมก็ทำการลากดึง ตกแต่งอะไรบ้างแล้ว
ผมก็ เอามาวางไว้นะครับ เวลาลากวาง มันจะมาให้เลือก ตั้งชื่อ
แล้วจะมี select item ให้เลือก คุณเลือกเป็น Movie clip นะครับ
เพราะว่า มันจะง่ายต่อการเขียน เดี๋ยวส่วน button เดี๋ยวเรามาเริ่ม
กันต่อ อีกครับนะครับ หลังจากนั้น ผมว่า เราควรจะมาสร้าง mouse กันก่อนนะครับ

เนื่องจากเป็นส่วนประกอบที่ ขาดไม่ได้เลยทีเดียว

มาเรามาสร้างกัน ให้เราใช้ไอรูปเหลี่ยมๆ ที่ผม แนะนำให้สร้างเป็นพื้นในขั้นต้นนะครับ จริงๆมันชื่อ Rectangle Tool นะครับ Key ลัด กด R เพื่อ
ความเร็วในการใช้งาน

อ่ามาเลือกกันดีกว่า กดมันลงไปคับ แล้วสร้างนอก กรอบนะครับอย่า

สร้างในพื้นที่ BG ของเรานะครับ เลือกมันไปวางเป็น movie clip ก่อนนะครับ  หรือใครจะสร้าง mouse เองเลือกเอาเลยครับ

สำหรับผมก็สร้างเป็นรุปแบบนี้อิอิ


Mouse Cursor

อ่า จะได้รูปแบบ ผมก็เอาไปทำเป็น movie clip แล้วหลังจากทำแล้วให้กดมัน
เป็นกรอบ สีน้ำเงินแบบนี้ครับ เพื่อเราจะไปกด F9 จะได้ เขียน actionscript กัน

ให้คุณเอา Code นี้ไปใส่ นะครับ
แต่เดี่ยวก่อน mouse คุณควรจะสร้าง Layer ไว้ใน Layer ท้ายๆนะครับ เพระว่า
Layer ต้นๆ จะทำให้ Button นั้นทับ Cursor จนทำให้ มองไม่เห็น Mouse นั่นเอง
หลังจากนี้เรามาใส่ code กัน



onClipEvent(enterFrame)
{
_x=_root._xmouse;
_y=_root._ymouse;
}

มันจะหมายถึง การให้ mouse ควบคุม แกน X Y หน้าจอได้โดย parameter ให้เฟรมแต่ละเฟรม เข้าไปทำงานเปลี่ยน ครับ

หลังจากนั้นให้ทำการ Save ครับ Save เลยครับ Save ไว้ใน UDKGame > Flash > ตั้งชื่อ folder คุณแล้วเอาเข้าไปไว้เลยครับ

หลังจากนั้น กลับไปอ่านข้างบนครับ ซึ่งผมทำการบอกว่า นั่นมันคือ ตัวทดสอบ อ่า ทำการเปิดขึ้น
มาแล้วทำการ กดทดสอบครับ

เมื่อทำการ กดแล้วคุณจะได้
เห็นดั่งภาพที่ผมกำลังจะเอาขึ้นแสดงให้คุณดู






เอาแล้ว มันขยับตามแล้ว
ต่อไปเราจะมาสร้าง Button กันดีกว่า















Button

มาเรามาสร้าง button กันเถอะโอ้วจะเที่ยงคืนแล้ว ผมจะใช้ rectangle นะครับในการสร้าง button
ผมก็สร้าง Layer อีกชั้นขึ้นมาครับเพื่อที่จะมาทับ พื้นหลังครับไม่งั้นถ้าไม่สร้างโดนพื้นหลังทับแน่ๆ
หลังจากที่ผมสร้างเสร็จแล้วผมก็กระทำการลากไปวางที่ Library อีกทีครับ แล้วก็ทำการเลือกจาก Movie เป็น Button นะครับ

อ่าเรา หลังจากนั้น ให้เราลบ อันเดิมออกไปก่อนแล้ว เราก็ดึงจาก Library มันครับ ชักมันมาลงมาครับ
แล้ว double click เข้าไปที่ ปุ่มตัวนั้นครับทำการสร้าง Text Layer จัดอะไรให้เรียบร้อยครับ ใน Layer ที่
สองผมแนะนำให้เป็น Text ครับ ใน Tab Timeline คุณจะ KeyFrame จะมีสี่ช่องครับ

Up , Over , Down , Hit ครับ

Up หมายถึง มันยังไม่ได้ทำอะไรเลย ว่างๆครับ
Over หมายถึง เมื่อเอาเมาส์ เข้าไปวางครับ
Down หมายถึง ทำการ กดลงครับ
Hit หมายถึง ปล่อย ครับ

คลิก ขวา ที่ช่องเหล่านั้น

เรามาเริ่มกันต่อ จะสังเกตุ สามตัวที่
ผมวงกลมมันไว้ ลองไปเล่นกันดูครับ
ซึ่งผมจะอธิบายเกิ่นไว้ๆ
Insert Frame เป็นการสร้าง frame โดย
การกระเถิบ ครับ
Insert Keyframe เป็นการเลือกช่องที่
ยังไม่มี Frame เลยให้เป็น Frame ว่างๆครับส่วน เจ้า Scene 1 และ Play นั้น
เป็นการเข้า ฉากครับ เมื่อถ้าเรา
กด Double click ที่ฉากไหน เราก็จะ
สามารถ เข้าไปกระทำ Scene ข้างใน
นั้นได้อีกครับ ต้องลองว่ามันต่างกันตรงไหน ให้คุณลอง ไปเล่นกันดู

หลังจากนั้นให้เรา มาตกแต่งแต่ละ
Keyframe ดูครับ อ่าเมื่อเราตกแต่งเสร็จแล้ว มาดูของผมดีกว่า ผมจะทำการ Test Run




นี่ผลงานของผม อ่า มาถึงตานี้
ให้คุณมาสร้าง Actionscript กันอีกรอบ
แต่คราวนี้ เราจะมาสร้างหน้า root
หรือว่า แรกสุดว่างั้น
หลังจากนั้นก็สร้าง Layer ขึ้นมาใหม่
ให้ตั้งชื่อว่า Actionscript ครับสาเหตุ
เพื่อที่เราจะได้ไม่ งง ไงครับ

ผมลืมบอก ให้ทำการตั้งชื่อปุ่มด้วยนะครับ วิธีมีดังนี้ ให้ทำการคลิกที่ปุ่ม ให้

ให้คลิกที่ปุ่ม ที่เราสร้างขึ้นครับแล้วทำการ ตั้งชื่อ ใน input box ที่ผมวง
แดงๆไว้ครับ ผมจะตั้งชื่อว่า PlayGameMath นะครับ
จากนั้นให้ใส่ code ไว้ใน Layer Actionscript นะครับ



import flash.external.ExternalInterface;
import gfx.controls.Button;
import gfx.motion.Tween;
_global.gfxExtension = true;
import mx.utils.Delegate;

PlayGameMath.onPress = function(){
ExternalInterface.call("StartGamePlay");
}

// PlayGameMath.onPress เมื่อ ปุ่ม ที่ชื่อ PlayGameMath ทำการกด
จะเท่ากับ function เหล่านี้ หมายถึง สร้าง function ย่อยหรือ ทำงานใน
function นั้นเลยก็ได้

// ExternalInterface.call("StartGamePlay"); ตัวนี้จะเป็นการเรียก function ใน class GFX นะครับ
เมื่อทำการ ใส่ code เสร็จแล้ว เวลาเราไปกด Test แล้วกดปุ่ม ก็จะได้แบบนี้ ขึ้นมาครับ หลังจากนี้ ให้ทำการ
Save แล้วทำการ Export ครับ
ไปที่ File > Export > Export movie
หรือเราจะทำการกด key ลัดโดย
กด ctrl+alt+shift+s พร้อมกันครับ
แล้วก็เลือก folder ไว้ที่เดียวกับ file เรานะครับ นั่นก็ต้องอยู่ใน UDKGame  > Flash ด้วยนะครับ หลังจากนี้ให้ทำการเข้า Editor ครับ เพื่อเราจะ ได้ Import File ที่เข้าสร้างขึ้นไปใช้กับ unrealscript ครับ
อ่าก่อนอื่นให้ทำการเข้า Editor ก่อนเลยครับ สังเกตุใน Content ครับ
จะมีให้สร้าง My_Collection อยู่ ผม กด + เลยทันทีแล้วทำการตั้งชื่อ ผมจะตั้งชื่อว่า My Flash ครับ

อ่าเมื่อได้แล้วทำการ click ขวา


แล้วก็ทำการเลือกไฟล์ที่อยู่ใน UDKGame > Flash เอาไฟล์ที่คุณ Export มาครับ swf อ่าเมื่อได้แล้ว
ก็จะขึ้นรูปแดงๆแบบนั้นครับ ให้เราลากไปวาง My Flash เลยครับ
มันก็จะอยู่ในนั้นหลังจากนั้นให้เรา
คลิกขวา ที่รูป File ที่เรา Import มาหลังจากนั้นกด คำว่า Save คัรบ
ซึ่งมันจะอยู่ล่างๆครับจากนั้นก็ออก
Editor เลยครับ มาขึ้น Unrealscript กัน










Unrealscript

คราวนี้ เราจะมาสร้าง Class เพื่มอีก สอง Class ครับ MyHUD และ MyGFxHUD

เรามาดูกันเลยครับ Class แรก เขียนอะไรบ้างเน้อ

class MyHUD extends UDKHUD;


Defaultproperties
{
}

//=======================================================

class  MyGFxHUD extends GFxMoviePlayer;


Defaultproperties
{
}

//=======================================================

หลังจากทำการสร้างแล้วนะครับให้สร้างเพิ่มครับ ตั้งชื่อว่า MainMenuGame.uc นะครับ


class   MainMenuGame extends GameInfo;


Defaultproperties
{
HUDType=class' MyHUD'
}

แล้วก็เปลี่ยน ตัวรัน จาก shotcut บทแรกๆที่ผมสอนไปนะครับให้เปลี่ยน

Game=MyGame.TestGame

เป็น

Game=MyGame.MainMenuGame

แทนนะครับ

อ่ะเรามาดู Class MyHUD



//================================================

class MyHUD extends UDKHUD;

var MyGFxHUD GFxMovieGame;


singular event Destroyed() {
 if ( GFxMovieGame != none) {
  GFxMovieGame.Close(true);
  GFxMovieGame = none;
 }
}

simulated function PostBeginPlay() {
  super.PostBeginPlay();
  GFxMovieGame = new class' MyGFxHUD'; // ทำการเชื่อม class
  GFxMovieGame.SetTimingMode(TM_Real); // ตั้ง mode ของ เวลา
  GFxMovieGame.start(); // เริ่มการทำงาน จาก class MyGFxHUD
}


Defaultproperties
{
}
//================================================




class  MyGFxHUD extends GFxMoviePlayer;


function bool Start(optional bool StartPaused = false)
{
    Super.Start(); // เริ่ม ให้ MovieInfo ได้แสดงหรือ Show นั้นเอง
    Advance(0); // เวลาที่กำหนด
   
    return true; // true = ให้แสดง  false = ไม่ให้แสดง หรือ ยังไม่ให้สั่ง start จนกว่าจะ true
}

function StartGamePlay(){
            ConsoleCommand("Open 2?Game=MyGame.TestGame"); // เป็นการสั่งการทำงาน ใจรูปแบบ ConsoleCommand สามารถ พิมพ์ในเกมได้ด้วย กด tab จะมี box ขึ้นมาให้พิมพ์ command
}



Defaultproperties
{
        MovieInfo=SwfMovie'Game1.CLIK_tutorial_skinned'; // ทำการเลือกไฟล์มาโชว์  swfmovie จาก Content
bDisplayWithHudOff=TRUE
    TimingMode=TM_Real
bPauseGameWhileActive=TRUE // หยุดเกมจนกว่า จะเป็น false
bCaptureInput=true // ให้ Input ยังทำงานได้ต่อ  false = ไม่ยอมให้ Input ทำงาน
}



หลังจากเสร็จ ทุกขั้นตอนแล้วลองรันดูครับ อิอิ

จากนั้นมันก็จะเข้าเกม เราเอาแค่นี้ก่อนละกันเดี๋ยว ชื่ออะไร นี่จะขอต่อหลังจาก เกมแรกนะครับ

แต่ต่อเป็นบทอื่นแทนครับ









1 ความคิดเห็น:

ไม่ระบุชื่อ กล่าวว่า...

ไม่รู้เรื่องเบยย -__-

อยากให้ทำวีดีฑโอ อ่าครับ