Professional Flash Game Development ဆိုတဲ့ Tutorial Series ကို ကိုမြင့်ကျော်သူ ရဲ့ ခွင့်ပြုချက်နဲ့အတူ Myanmar Tutorials မှာ ပြန်လည် တင်ဆက်ခြင်း ဖြစ်ပါတယ်။ ကွန်ပျူတာ မဂ္ဂဇင်းအတွက် ရေးသားထားသော ဆောင်းပါးများ ဖြစ်တယ်လို့လည်း သိရပါတယ်။

ရေးသားသူ – ကိုမြင့်ကျော်သူ

Chapter 4

Building a Game UI

Game တခုရေးဖို့အတွက် game အတွင်းထဲက character တွေ၊ graphic တွေတင်မကပါဘူး၊ game တခုရဲ့ UI (User Interface) လဲထည့် ပေးဖို့လိုပါတယ်။ ဒါမှ လောလောဆယ် ကစားနေတဲ့ game ရဲ့ အရေးကြီးတဲ့ အချက်အလက်တွေကို ကစားသူက သိမှာဖြစ်သလို၊ game ကို navigate လုပ်ဖို့ လွယ်ကူသွားမှာ ဖြစ်ပါတယ်။ Flash မှာတော့ UI ကိုဆောက်ဖို့အတွက် Symbol တွေသုံးပြီးပဲ ဆောက်သွားမှာဆိုတော့ အရမ်းလွယ်ကူပါတယ်။

Button Symbol

Flash မှာ Insert -> New Symbol ကိုရွေးလိုက်မယ်ဆိုရင် Create New Symbol Dialogbox တက်လာပါတယ်။ Symbol အသစ်တခုဆောက် ဒီလိုဘဲဆောက်ရတာ မှတ်မိအုန်းမှာပါ။ ဒီနေရာမှာ Type ကို MovieClip လို့မရွေးပဲ Button လို့ရွေးလိုက်မယ်ဆိုရင် ကျွန်တော်တို့ လိုချင်တဲ့ Button Symbol ရပါပြီ (အောက်မှာကြည့်ပါ)။

Create New Symbol Dialog for Button Symbol

Frame Set for Button Symbol

Button Symbol တခုကိုဆောက်လိုက်ရင် ထူးခြားတာက Frame ထားတဲ့ Timeline နေရာ မှာတွေ့ရမှာ ဖြစ်ပါတယ်။ အဲဒီနေရာမှာ Up, Over, Down နဲ့ Hit ဆိုပြီး frame တွေကို နာမည်ပေးထားပါတယ်။ ဆိုလိုတာ Up ဆိုတဲ့ frame နေရာမှာ ထည့်သမျှ graphic တွေကို button က up ဖြစ်တဲ့အချိန် (ဘာမှနှိပ်မထားသေးရင်) ပြမယ်လို့ ဆိုလိုတာပါ။ ဒီလိုဘဲ Over ဆိုတာ mouse က button အပေါ်ကို ချိန်လိုက်ရင် ပြမဲ့ graphic ဖြစ်ပါတယ်။ Down ဆိုတာကတော့ mouse နဲ့ button ကိုနှိပ်လိုက်ရင် ပြမဲ့ပုံ ဖြစ်ပါတယ်။ Graphic ထည့်လို့ပြောတာက button မှာကိုပေါ်စေချင်တဲ့ graphic တွေကို bitmap ဖြစ်စေ၊ Flash ထဲကပါတဲ့ စက်ဝိုင်း၊ လေးထောင့် Tool တွေနဲ့ ဆွဲလို့ဖြစ်စေ၊ စာ Text object ဘဲဖြစ်စေ ကြိုက်သလို ထည့်လို့ရပါတယ်။ တခုထက်ပိုပြီး MovielClip မှာလို စိတ်ကြိုက်ထည့်လို့ရတဲ့အတွက် အရမ်းရှုပ်ထွေးတဲ့ button တွေကို Flash မှာလွယ်လွယ်ကူကူနဲ့ တည်ဆောက်ယူနိုင်ပါတယ်။

Flash ရဲ့ Button ကို အောက်ကလို Windows က button တွေနဲ့ယှဉ်ကြည့်နိုင်ပါတယ်။ အောက်မှာတော့ Windows က button တခုကို print screen ဖမ်း၊ Bitmap အဖြစ် save လုပ်ပြီး Flash ထဲခေါ်ထည့်ထားပါတယ်။ စာဖတ်သူတွေ စမ်းကြည့်ချင်လဲ စမ်းကြည့်လို့ရပါတယ်။

Button တခုကို အမြင်အရတည်ဆောက်ပြီးရင် သူအလုပ်လုပ်အောင်လဲ ActionScript code တွေထည့်ပေးဖို့လိုပါတယ်။ Button တခုကိုအသက်သွင်းဖို့ အောက်က အဆင့်တွေ ရေးဖို့လိုပါတယ်။

-    Click နှိပ်လိုက်ရင် ခေါ်မဲ့ function တခုဆောက်ရပါမယ်။
-    ပြီးရင် function ထဲမှာ ကိုယ်ရေးချင်တဲ့ code ရေးထည့်လိုက်ပါ။
-    ပြီးရင် button မှာ addEventListener() ဆိုတဲ့ function ကိုသုံးပြီး ကိုယ်ရေးထားတဲ့ function နဲ့ပြန်ချိတ်ပေးဖို့ လိုပါတယ်။

ဥပမာ၊ ကျွန်တော်တို့ ရဲ့ button နာမည်က “ClickMe” ဆိုပါစို့၊

// attach event listener to button
var button : SimpleButton = getChildByName("ClickMe");
button.addEventListener(MouseEvent.CLICK, OnClick);

// Button click event function
public function OnClick(e : MouseEvent)
{
         trace("You click on a button");
}

ဆိုပြီးရေးပေးရပါမယ်။ ဒါမှ ကျွန်တော်တို့ button ကအလုပ်လုပ်မှာ ဖြစ်ပါတယ်။

Text

Game ရဲ့ UI မှာ button အတွက် Button Symbol ကိုသုံးပြီးရင်၊ game ရဲ့အချက်အလက်တွေ ပြဖို့အတွက်တော့ Text object ကိုသုံးရပါမယ်။ Text ထည့်ဖို့အတွက် Flash Toolbar မှာရှိတဲ့ Text tool ကိုသုံးပြီးထည့်ရပါမယ်။

Text Tool Properties Panel

Text Tool ကိုယူပြီး Workspace ထဲမှာဆွဲလိုက်ရင် text object တခုရလာပါမယ်။ Text object ထဲမှာကိုယ်ကြိုက်တာ ထည့်ရေးလိုက်ရင် ရပါပြီ။ Text Tool ကို select လုပ်ထားရင် ဖြစ်ဖြစ်၊ text object ကိုဘဲ select လုပ်ထားရင်ဖြစ်ဖြစ် ညာဘက်က Properties Panel မှာ text object ရဲ့ properties တွေကို တွေ့ရမှာ ဖြစ်ပါတယ်။ ပထမ property ကတော့ text အမျိုးအစားဖြစ်ပြီး အဲဒီမှာ Static Text၊ Dynamic Text နဲ့ Input Text ဆိုပြီး သုံးမျိုးရွေးလို့ရပါတယ်။ Static Text ဆိုတာကတော့ ဘယ်တော့မှ value မပြောင်းတော့တဲ့ စာတွေနေရာမှာ သုံးရပါတယ်။ ဥပမာ၊ game ရဲ့နာမည်၊ version အမှတ်၊ ရေးတဲ့သူနာမည် စတဲ့ အချက်အလက်တွေက game ကစားနေရင်း ပြောင်းသွားမှာ မဟုတ်တဲ့အတွက် Static Text ကိုသုံးရပါမယ်။

Dynamic Text ဆိုတာကတော့ အမြဲပြောင်းနေမဲ့ information တွေကိုပြချင်ရင် သုံးရပါတယ်။ ဥပမာ၊ game ရဲ့ Highscores ကကစားနေရင်း ပြောင်းနေမှာဆိုတော့ သူ့နေရာမှာတော့ Dynamic Text သုံးရပါမယ်။ Static Text နဲ့ Dynamic Text ကွာတာက Dynamic Text ရဲ့စာတွေကို ActionScript သုံးပြီး run-time ကျမှပြောင်းယူလို့ ရပြီး၊ Static Text ကတော့ မရပါ။ Static Text ရဲ့အားသာချက်က ပိုပြီး resource စားသက်သာတာ၊ ရုပ်ထွက်ပိုလှတာတို့ ဖြစ်ပါတယ်။ Input Text ဆိုတာကတော့ ကစားသူ ဆီက input လက်ခံချင်တဲ့နေရာ တွေမှာ သုံးရပါတယ်။ ဥပမာ၊ ကစားသူရဲ့ နာမည်ကို လက်ခံချင်ရင် Input Text သုံးရပါမယ်။

သူ့အောက်မှာတော့ Font Family၊ text အရွယ်အစားနဲ့ bold, italic စတဲ့ စတိုင်တွေ ရွေးယူလို့ရပါတယ်။ Flash game ဆိုတာ စက်တခုထဲမှာ run မှာမဟုတ်ဘဲ၊ system configuration မတူတဲ့စက်အစုံမှာ ဆော့မှာပါ။ ဒီတော့ text တခုကိုကိုယ်ပေးလိုက်တဲ့ font တခြားစက်မှာ ရှိချင်မှရှိပါမယ်။ ဒီအတွက် generic ဖြစ်တဲ့ font family ကိုရွေးပေးလို့ရပါတယ်။ Properties Panel က Font Family drop down list ကိုဖွင့်လိုက်ရင်၊ font တွေရဲ့နာမည်တွေကို တွေ့ရပါမယ်။ အဲဒီထဲမှာ _sans၊ _serif နဲ့ _typewrite တွေဟာ generic font နာမည်တွေဖြစ်ပါတယ်။ တကယ်လို့ _sans ကိုရွေးထားရင် စက်ထဲမှာရှိတဲ့ Sans ပုံစံတခြား font တခုခုနဲ့အစားထိုးပြီးပြပေးမှာ ဖြစ်ပါတယ်။ ဒီတော့ တခြားစက်မှာ font မရှိတဲ့ပြသနာမဖြစ်တော့ပါဘူး။

အဲလို generic ဖြစ်တဲ့ font ပုံစံတွေက ရိုးလို့မကြိုက်ဘူးဆိုရင် ကိုယ်လိုချင်တဲ့ font ကို Flash ထဲမှာ တခါတည်း embedded လုပ်ပေးလိုက်လို့လဲ ရပါတယ်။ ဒါဆို ကိုယ်လိုချင်တဲ့ font လည်းရသလို၊ ကစားသူ computer ထဲမှာ မရှိမှာလဲ မပူရတော့ပါဘူး။ Font တခုကို embedded လုပ်ဖို့၊ Library Panel က context menu button ကိုနှိပ်လိုက်ပါ။ ဒါဆို context menu ကျလာပါလိမ့်မယ် အဲဒီထဲက New Font ကိုရွေးလိုက်ပါ။ ဒါဆို Font Symbol Properties dialog box ကိုအောက်ကအတိုုင်းတွေ့ရပါမယ်။

Font Properties dialog box

Dialog box မှာ font နာမည်နဲ့ Linkage မှာ Class နာမည်ပေးလိုက်ပါ။ ပြီးရင် OK ကိုနှိပ်လိုက်ပါ။ Class နာမည်ကတော့ ActionScript မှာသုံးဖို့ပါ။ Embedded font လုပ်ကောင်းကောင်းလုပ်ဖို့ သူ့ကိုလဲနာမည်ပေးဖို့ လိုပါတယ်။ ပြီးရင် Export for ActionScript checkbox ကိုလဲ on ထားဖို့လိုပါတယ်။ ဒါဆိုရင် ခုဖန်တီးထားတဲ့ embedded font ရဲ့နာမည် “FntArial” က font family drop down list ထဲမှာတွေ့ရပါလိမ့်မယ်။ ဒါဆိုကိုယ့်ရဲ့ text တွေကို ဒီ font နာမည်ရွေးပေးပါ။ ဒါဆိုစက်တိုင်းမှာ text တွေကို ပုံစံမှန်မှန်ပြပေးပါလိမ့်မယ်။

Text object တခုကို Dynamic Text (သို့) Input Text ပြောင်းလိုက်ရင် သူ့ကို Instance Name ပေးလို့ရသွားပါတယ်။ ဆိုလိုတာက run-time ကျမှ ActionScript ထဲကနေ text ကိုစိတ်ကြိုက်ပြန်ပြောင်းလို့ရသွားတယ်လို့ ပြောတာပါ။ တကယ်လို့ ကျွန်တော်တို့ text object ရဲ့ instance name ကို “HighScores” လို့ပေးထားတယ်ဆိုပါစို့၊ ActionScript ကနေ HighScores ကိုပြင်ဖို့ အောက်က code ကိုသုံးရပါမယ်၊

// set new highscores
var scores : int = 1000;
var txtHighscores : TextField = getChildByName("HighScores");
txtHighscores.text = "Player Highscores: " + scores;

Components

Button နဲ့ text နှစ်ခုရှိရင် game တော်တော်များများရဲ့ UI ကိုဆောက်ယူလို့ ရပါပြီ။ ဒါပေမဲ့ ဒီထက်ပိုပြီး ရှုပ်ထွေးတဲ့ UI တွေဆောက်မယ်ဆိုရင်တော့ Components တွေကိုယူသုံးဖို့ လိုပါပြီ။ Component Panel ကိုဖွင့်ဖို့ Window -> Components menu ကိုရွေးလိုက်ရင် အောက်ကလို Component Panel ကိုတွေ့ရပါလိမ့်မယ်။

Component Panels

Components Panel မှာဆိုရင် Windows မှာတွေ့ရတဲ့ controls တော်တော်များများကို တွေ့ရမှာပါ။ တခြား program ရေးတဲ့ language (VB, C#) တွေကို လေ့လာဖူးရင် Flash က Components တွေကိုသဘောပေါက်ဖို့ သိပ်မခက်ပါဘူး။ လိုချင်တဲ့ component control တခုထည့်ချင်ရင် Components Panel ကနေ Workspace ထဲကိုဆွဲထည့်လိုက်ရုံပါဘဲ။ ဥပမာ၊ ကျွန်တော်တို့ CheckBox control ကိုဆွဲထည့်လိုက်တယ်ဆိုပါစို့၊ သူ့ရဲ့ Properties တွေကိုပြောင်းချင်ရင် Component Inspector ကိုခေါ်သုံးရပါမယ်။ Component Inspector ကိုခေါ်ဖို့ Window -> Component Inspector ကိုနှိပ်လိုက်ရင် အောက်ကလို Component Inspector Window တက်လာပါလိမ့်မယ်။

Component Inspector Panel

Component Inspector panel ထဲမှာဆိုရင် control ရဲ့ options တွေအကုန်ပြင်ယူလို့ရပါတယ်။ Control ရဲ့ပုံက အရမ်း generic ဖြစ်နေပြီး ကိုယ့်ရဲ့ game ရဲ့စတိုင်နဲ့ မကိုက်ရင် ပြင်ယူလို့ ရပါသေးတယ်။ Control တွေဟာ တကယ်တော့ Symbol တွေပါဘဲ။ ဒါကြောင့် သူတို့ကို double-click လုပ်လိုက်ရင် သူတို့ရဲ့ Edit Mode ထဲဝင်သွားပါလိမ့်မယ်။

Editing Checkbox Control

ဥပမာ၊ CheckBox control ကို double-click လုပ်လိုက်ရင် အပေါ်ကလို တွေ့ရမှာပါ။ ဒီနေရာမှာ CheckBox symbol ထဲမှာ သူ့ရဲ့ state တခုဆီအတွက် symbol တွေကို nested လုပ်ထားတာ တွေ့ရမှာပါ။ ဒါကြောင့် selected_up ဆိုတဲ့ပုံကိုပြောင်းချင်ရင် ဘေးက symbol ကို double-click လုပ်ပြီး edit mode ထဲထပ်ဝင်ပြီး ပြင်ပေးရပါမယ်။ ဒါကြောင့် ကိုယ်လိုချင်တဲ့ control တွေကို graphic လှလှလေးတွေနဲ့ အလွယ်တကူတည်ဆောက်ယူနိုင်တာ Flash ရဲ့အားသာချက်ဖြစ်ပါတယ်။ VB တို့ C# တို့လို programming language အကြီးစားတွေမှာတောင် ဒီလို ရှုပ်ထွေးတဲ့ control တွေကို ကိုယ်လိုချင်တဲ့ graphic တွေနဲ့တည်ဆောက်ယူဖို့ ဒီလိုမလွယ်ပါဘူး။

ဒါဆိုရင် Flash ထဲမှာ UI ကောင်းကောင်းဆောက်လို့ ရပါပြီ။ ကျွန်တော်တို့ သိသလောက်နဲ့ပဲ Chapter 3 မှာရေးထားတဲ့ Memory game လေးအတွက် Menu နဲ့ Game UI တွေထည့်ကြည့်ရအောင်ပါ။

Game ထဲမှာ Menu ထည့်ချင်ရင် နှစ်မျိုးထည့်လို့ရပါတယ်။ တမျိုးက screen တခုလုံးကို Menu အတွက် အသုံးပြုတာ ဖြစ်ပါတယ်။ Game စဖွင့်ဖွင့် ချင်းတွေ့ရတဲ့ Main Menu လိုမျိုးက screen အပြည့်တခုလုံးယူတဲ့ menu မျိုးပါ။ ဒီလို menu တွေဆောက်ဖို့ flash ရဲ့ main scene မှာ frame တခုလုံးသုံးပြီး ဆောက်ရပါမယ်။ နောက်တမျိုးကတော့ game ရဲ့အပေါ်မှာ ထည့်တဲ့ in-game menu လိုမျိုးပါ။ Scores တို့ Lives တို့ ပြတဲ့ menu မျိုးပါ။ ဒီလို menu မျိုးကိုတော့ symbol တခုဆောက်ယူပြီး အဲဒီ symbol ကိုမှ game run နေတဲ့ frame ရဲ့အပေါ်မှာ ထပ်ထည့်ရပါမယ်။ ပထမဆုံး ကျွန်တော်တို့ main menu ဆောက်ယူ ကြည့်ရအောင်ပါ။

Chapter 3 က save လုပ်ထားတဲ့ memory.fla Flash file ကိုဖွင့်လိုက်ရင် အောက်ကလို တွေ့မှာဖြစ်ပါတယ်။ ခုကျွန်တော်တို့က Main Menu ကို frame #1 မှာထည့်ချင်ပါတယ်။ ဒါကြောင့် လောလောဆယ်ရှိနေတဲ့ frame #1 ကို mouse နဲ့ drag လုပ်ပြီး frame #2 မှာနေရာချထားလိုက်ပါ။

Memory.fla from Chapter 3

ပြီးရင် ကျွန်တော်တို့ Start Game ဆိုတဲ့ button တခုဖန်တီးပါမယ်။ GfxStartGame ဆိုတဲ့ Button Symbol တခုဖန်တီးလိုက်ပါ။ အဲဒီမှာ Text object တခုဆောက်လိုက်ပါ။ Font Family ကို Arial၊ Style ကို Bold၊ Alignment ကို Center နဲ့ Size ကိုတော့ 32 ပေးလိုက်ပါ။ အရောင်ကိုတော့ အမဲရောင်မှာ ထားပါ (background ကအမဲဘက်များရင်တော့ အဖြူရောင်ထားလိုက်ပေါ့)။ Text အမျိုးအစား ကိုတော့ Static Text ပေးလိုက်ပါ (ဒီ text ကို run-time ကျရင် ကျွန်တော်တို့ ပြင်မှာမဟုတ်တဲ့ အတွက်ပါ၊ မပြင်တဲ့ text အားလုံးကို Static Text ပေးသင့်ပါတယ်)။ ပြီးရင် ကျွန်တော်တို့ Filter ထည့်ကြည့်ရအောင်ပါ။ Filter ဆိုတာ Photoshop က Layer Style နဲ့တူပါတယ်။ သူ့က symbol တွေမှာ shadow ထည့်တာ၊ blur လုပ်တာ၊ gradient glow ထည့်တာစတဲ့ effect တွေထည့်ပေးလို့ရပါတယ်။

Filter ထည့်ဖို့ Text ကို select လုပ်ထားရင်း Properties Panel အောက်ဆုံးက Filters ကိုရောက်အောင်သွားပါ။ Add Filter Icon လေးကို click နှိပ်ပြီး Glow ကိုရွေးပါ။ Color ကို အစိမ်းရင့်ရောင်၊ Blur X နဲ့ Blur Y ကို 5 မှာထားပါ။ ဒါဆို အောက်ကလိုမြင်ရပါလိမ့်မယ်။

Add Glow Filter to “START GAME” Text

ပြီးရင် “Over” Frame မှာ Right-click -> Insert Keyframe ကိုရွေးပြီး frame အသစ်ထည့်လိုက်မှာ။ Frame အသစ်က Text object မှာ Size ကို 34၊ Blur X နဲ့ Blur Y မှာ 7၊ Blur Color ကိုတော့ ပိုတောက်တဲ့ အစိမ်းရောင် ရွေးပေးပါ။ ပြီးရင် “Down” frame မှာ Insert Keyframe သုံးပြီး နောက် frame တခုထည့်လိုက်ပါအုန်း။ အဲဒီက text object ကိုတော့ Size 30၊ Blur X နဲ့ Blur Y မှာ 3၊ Blur Color ကိုတော့ မူလအစိမ်း(ရင့််)ရောင် ပြန်ရွေးပေးပါ။

ဒါဆိုကျွန်တော်တို့လိုချင်တဲ့ button ရပါပြီ။ Start Game button ကို frame #1 မှာနေရာချလိုက်ပါ။ ပြီးရင် စမ်းမကြည့်သေးပါနဲ့အုန်း။ Game ကို frame #1 မှာရပ်နေစေချင်တဲ့အတွက် code ရေးဖို့လိုပါသေးတယ်။ ဒါကြောင့် frame #1 ကို right-click -> Actions ကိုရွေးလိုက်ပါ။ အဲဒီက ပေါ်လာတဲ့ ActionScript panel ထဲမှာ stop(); လို့ရေးလိုက်ပါ။ ပြီးလို့ စမ်းကြည့်ရင် အောက်ကလို တွေ့ရမှာ ဖြစ်ပါတယ် (အောက်ကပုံမှာ game logo နဲ့ ဖန်တီးသူ credit ကို text နဲ့ filter သုံးပြီး ရိုးရိုးလေး ထည့်ထားပါတယ်၊ စာဖတ်သူတွေလဲ စမ်းသပ်ကြည့်နိုင်ပါတယ်)။

Memory Game Main Menu Screen

ပြီးရင် Start Game ဆိုတဲ့ button အလုပ်လုပ်ဖို့ ActionScript ထည့်းပေးရပါမယ်။ ဒီအတွက် addEventListener() function သုံးပြီး လိုချင်တဲ့ code ရေးပေးရပါမယ်။ ဒီနေရာမှာ ကျွန်တော်တို့ လိုချင်တာ Start Game ကိုနှိပ်လိုက်ရင် game screen ကိုရောက်သွားစေချင်တာပါ။ Game screen ဆိုတော့ frame #2 ပေါ့။ ဒီအတွက် gotoAndPlay() function သုံးပြီး သွားစေချင်တဲ့ frame ကိုသွားခိုင်းလိုက်ရင် ရပါပြီ။ ဒီအတွက် ActionScript code ကိုအောက်ကလို ရေးပါမယ်။

// attach event listener to button
var button : SimpleButton = SimpleButton(getChildByName("butStartGame"));
button.addEventListener(MouseEvent.CLICK, OnStartGame);

// Button click event function
function OnStartGame(e : MouseEvent)
{
	gotoAndPlay(1);
}

stop();

Code အလုပ်လုပ်ဖို့အတွက် ကျွန်တော်တို့ Start Game button ရဲ့ Instance Name ကို “butStartGame” လို့ပေးဖို့ လိုပါမယ်။ ပြီးရင် frame #2 ကိုသွားပြီး အောက်က ActionScript code ထည့်ပေးဖို့ လိုပါအုန်းမယ် (chapter 3 ကိုကြည့်ပါ)၊

StartLevel();
stop();

ဒါဆို ကျွန်တော်တို့ရဲ့ Memory game လေးမှာ Main Menu တခုဆောက်ပြီးသွားပြီ ဖြစ်ပါတယ်။ Game ကို Ctrl-ENTER သုံးပြီး စမ်း run ကြည့်ပါအုန်း။

Building Levels

Main Menu ဆောက်ပြီးရင် ကျွန်တော်တို့ Memory game လေးကိုဘဲ level အသစ်တွေ ထပ်ထည့်ကြည့်ရအောင်ပါ။ Level တိုးလာရင် ပိုခက်လာဖို့ အတွက် ကျွန်တော်တို့ ကစားတဲ့ card တွေကို ပိုတိုးပေးလိုက်ပါမယ်။

ဒီအတွက် frame #3 မှာ Insert Blank Frame သုံးပြီး frame အသစ်တခုထည့်လိုက်ပါ။ အဲဒီမှာ Library ထဲက GfxCard တွေလိုသလောက် ဆွဲထည့်ပြီး ကျွန်တော်တို့ လိုချင်တဲ့ level တခုဆောက်လိုက်ပါ။ ပြီးရင် frame #2 က code အတိုင်း frame#3 က ActionScript panel မှာလဲ အောက်က code ကူထည့်လိုက်ပါ၊

StartLevel();
stop();

ပြီးရင် ကျွန်တော်တို့ Chapter 3 တုန်းက ရေးခဲ့တဲ့ Memory.as ကိုသွားရပါမယ်။ ဒါကြောင့် FlashDevelop ထဲမှာ Memory.as ကိုဖွင့်လိုက်ပါ။ အဲဒီမှာ ကျွန်တော်တို့ ဂိမ်းလား မဂိမ်းလားဆိုတာ ကို စစ်ဖို့ function တခုထည့်ပေးဖို့ လိုပါမယ်။ ဂိမ်းဖို့အတွက် card တွေအားလုံး “ပွင့်”နေဖို့ လိုပါတယ်။ Card ပွင့်နေလား၊ ပွင့်မနေဘူးလားဆိုတာ m_bShown property သုံးပြီး စစ်လို့ရပါတယ်။ ဒါကြောင့် Card အားလုံးရဲ့ m_bShown က true ဖြစ်နေရင် ဂိမ်းအောင်မှာ ဖြစ်ပါတယ်။ မဟုတ်ရင်တော့ ဂိမ်းမအောင် သေးဘူးပေါ့။ ဒီအတွက် WinGame() ဆိုတဲ့ function ကို အောက်ကလို Memory class ထဲမှာ သွားရေးပါမယ်။

// check whether all cards are opened
public function WinGame() : Boolean
{
	var i : int;
	var card : Card;
	for (i = 0; i < m_ItemList.length; i++)
	{
		card = m_ItemList[i];
		if (!card.m_bShown)
			return false;
	}

	return true;
}

ပြီးရင် သူ့ကို ခေါ်ပေးရပါအုန်းမယ်။ ဒီအတွက်တော့ အရင်ကရေးထားတဲ့ CloseCard() function ထဲမှာ သွားရေးပါမယ်။

// Close the card
public function CloseCard(c : Card)
{
	if ( m_nCardIndex > 1 )
	{
		// check if card faces r shown
		if ( m_CurCard1.m_nFace == m_CurCard2.m_nFace )
		{
			m_CurCard1.SetShown();
			m_CurCard2.SetShown();

			// check if the game is won and go to next level
			if (WinGame())
			{
				if (currentFrame == totalFrames)
					gotoAndPlay(0);
				else
					nextFrame();
			}
		}
		else
		{
			// close both card back
			m_CurCard1.gotoAndPlay("close" + m_CurCard1.m_nFace);
			m_CurCard2.gotoAndPlay("close" + m_CurCard2.m_nFace);
		}

		// reset card count
		m_nCardIndex = 0;
	}

ဒီနေရာမှာ WinGame() function သာ true ပြန်ခဲ့ရင် ကျွန်တော်တို့ ပထမ ရှိသလောက် frame ကိုပြန်စစ်ပါတယ်။ နောက်ဆုံး frame ကိုရောက်နေရင် (နောက်ထပ် level မရှိတော့ရင်) Main Menu ကိုပြန်သွားခိုင်းလိုက်ပါတယ်။ ဒီအတွက် if (currentFrame == totalFrames) နဲ့ စစ်ကြည့်လိုက်ပါတယ်။ နောက်ထပ် level ရှိနေသေးရင် nextFrame() ဆိုတဲ့ function ကိုခေါ်ပြီး နောက် frame တခုကူးခိုင်းလိုက်ပါတယ်။

နောက်ထပ် level တွေထပ်ထည့်ချင်ရင် Insert Blank Frame သုံးပြီး level အသစ်တွေတိုး၊ ပြီးရင် StartLevel() function ကို frame တိုင်းမှာ ခေါ်ပေးလိုက်ရင် ရပါပြီ။ ဒီနေရာမှာ ကျွန်တော်တို့ Flash က frames တွေကို animation အတွက် မသုံးဘဲ၊ level တခုချင်းစီအတွက် frame တွေသုံးသွားတာ သတိထားမိမယ် ထင်ပါတယ်။ အောက်မှာတော့ Memory game အတွက် code အပြည့်အစုံ ထည့်ပေးထားပါတယ်။

Memory.as
package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.display.SimpleButton;

	/**
	 * ...
	 * @author mkt
	 */
	public class Memory extends MovieClip
	{
		public static const CARD_COUNT = 6;

		public var m_ItemList : Array;
		public var m_CurCard1 : Card;
		public var m_CurCard2 : Card;
		public var m_nCardIndex;

		public function Memory()
		{
		}

		// start a new level
		public function StartLevel()
		{
			m_nCardIndex = 0;
			m_ItemList = new Array();

			// retrieve items from the scene
			var i : int;
			var c : Card;
			var nFace : int = 0;
			var nSet : int = 0;
			for ( i = 0; i < numChildren; i++ )
			{
				if ( getChildAt(i) is Card )
				{
					Card(getChildAt(i)).Initialize();
					m_ItemList.push( getChildAt( i ) );
				}
			}

			// randomize
			var index1 : int;
			var index2 : int;
			for ( i = 0; i < 1000; i++ )
			{
				index1 = Math.random() * m_ItemList.length;
				index2 = Math.random() * m_ItemList.length;
				// shuffle
				c = m_ItemList[index1];
				m_ItemList[index1] = m_ItemList[index2];
				m_ItemList[index2] = c;
			}

			for ( i = 0; i < m_ItemList.length; i++ )
			{
				c = Card( m_ItemList[i] );

				// randomize the card face
				if ( nSet == 0 )
				{
					nFace++;
					if ( nFace >= CARD_COUNT )
						nFace = 0;
				}
				nSet++;
				if ( nSet == 2 )
					nSet = 0;

				c.m_nFace = nFace;

				// set the close face
				c.gotoAndPlay("open");
			}
		}

		// Open the card when the card is clicked
		public function OpenCard(c : Card)
		{
			m_nCardIndex++;

			if ( m_nCardIndex == 1 )
			{
				m_CurCard1 = c;
				// open up the card
				m_CurCard1.gotoAndPlay("close");
			}
			else if ( m_nCardIndex == 2 )
			{
				m_CurCard2 = c;
				// open up the card
				m_CurCard2.gotoAndPlay("close");
			}
		}

		// Close the card
		public function CloseCard(c : Card)
		{
			if ( m_nCardIndex > 1 )
			{
				// check if card faces r shown
				if ( m_CurCard1.m_nFace == m_CurCard2.m_nFace )
				{
					m_CurCard1.SetShown();
					m_CurCard2.SetShown();

					// check if the game is won and go to next level
					if (WinGame())
					{
						if (currentFrame == totalFrames)
							gotoAndPlay(0);
						else
							nextFrame();
					}
				}
				else
				{
					// close both card back
					m_CurCard1.gotoAndPlay("close" + m_CurCard1.m_nFace);
					m_CurCard2.gotoAndPlay("close" + m_CurCard2.m_nFace);
				}

				// reset card count
				m_nCardIndex = 0;
			}
		}

		// check whether all cards are opened
		public function WinGame() : Boolean
		{
			var i : int;
			var card : Card;
			for (i = 0; i < m_ItemList.length; i++)
			{
				card = m_ItemList[i];
				if (!card.m_bShown)
					return false;
			}

			return true;
		}
	}

}

Card.as
package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;

	/**
	 * ...
	 * @author mkt
	 */
	public class Card extends MovieClip
	{
		public var m_nFace : int;
		public var m_bShown : Boolean;

		public function Card()
		{
		}

		// Initialize the card
		public function Initialize()
		{
			mouseEnabled = true;
			buttonMode = true;
			useHandCursor = true;
			m_bShown = false;

			addEventListener( MouseEvent.CLICK, OnClick, false, 0, true );
		}

		// set the card as shown
		public function SetShown()
		{
			m_bShown = true;

			mouseEnabled = false;
			buttonMode = false;
			useHandCursor = false;
		}

		// open the card to current face
		public function OpenCard()
		{
			// move to the "face" animation frame
			gotoAndPlay( "open" + m_nFace );
		}

		// close the card face
		public function CloseCard()
		{
			stop();

			Memory(root).CloseCard( this );
		}

		// on click card
		public function OnClick(e : MouseEvent)
		{
			if ( !m_bShown )
				Memory(root).OpenCard( this );
		}
	}

}

Leave a comment

Name (required) Email (required) Website Comment (required)

CAPTCHA Code *