[Flex] วิธีการทำให้เกมของเราสามารถเปลี่ยนฟอนท์แบบตอน Run Time ได้ by

28
Feb
0

โดยปกติแล้วในเกมจะใช้ฟอนท์หลักๆ 1 ฟอนท์ แต่ที่นี้ปัญหามันเกิดเมื่อเราทำ Localize ซึ่งฟอนท์ของเรานั้นไม่ได้ครอบคลุมตัวหนังสือของทุกภาษาจึงทำให้ต้องมีการเปลี่ยนฟอนท์ขณะรันไทม์ขึ้นครับ (เพราะต้องรอรับข้อมูลก่อนว่าผู้เล่นเลือกภาษาใดมา)
• ส่วนแรกโดนปกติแล้ว Flex เราจะเตรียม css มาไว้ให้ในไฟล์หลักอยู่แล้ว แต่ถ้ายังไม่มีก็สร้างขึ้นตามนี้ครับ

• จากนั้นก็ใส่ฟอนท์ที่จำเป็นตามปกติ แล้วตามด้วย css class ทิ้งไว้ดังนี้

@namespace mx "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";
@font-face
{
fontFamily: "2005_iannnnnCPU";
src: url("/assets/fonts/2005_iannnnnCPU.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "Tahoma";
fontWeight: bold;
src: url("/assets/fonts/tahomabd.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "Tahoma";
src: url("/assets/fonts/TAHOMA.TTF");
embedAsCFF: true;
}
@font-face
{
fontFamily: "Impact";
src: url("/assets/fonts/impact_0.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "AgencyGP";
src: url("/assets/fonts/dY_AgencyGP.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "-Layiji TaMaiTine1";
src: url("/assets/fonts/layiji_TarMineTine1.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "Arial";
src: url("/assets/fonts/arial.ttf");
embedAsCFF: true;
}
@font-face
{
fontFamily: "Arial";
fontWeight: bold;
src: url("/assets/fonts/arialbd.ttf");
embedAsCFF: true;
}
.langFontStyle{}
.fontSize12{}
.fontSize18{}
.fontSize20{}
.fontSize21{}
.fontSize22{}
.fontSize24{}
.fontSize25{}
.fontSize27{}
.fontSize28{}
.fontSize30{}
.fontSize31{}
.fontSize32{}
.fontSize33{}
.fontSize34{}
.fontSize35{}
.fontSize36{}
.fontSize38{}
.fontSize39{}
.fontSize40{}
.fontSize42{}
.fontSize44{}
.fontSize45{}
.fontSize46{}
.fontSize48{}
.fontSize49{}
.fontSize50{}
.fontSize52{}
.fontSize54{}
.fontSize56{}
.fontSize60{}
.fontSize64{}
.fontSize72{}
.fontSize100{}
.fontSize120{}
.fontSize128{}

ซึ่งที่เขียนเตรียมไว้เยอะๆเพราะเราจะต้องเขียนเผื่อขนาดฟอนท์ที่จะใช้ทั้งหมดในโปรเจ็คนั่นเอง (หรือจะมาเขียนเพิ่มเองทุกครั้งที่มีไซส์ใหม่ก็ได้)

• จากนั้นในไฟล์ Application หลัก โดยปกติจะมี  <fx:Style source=”Main.css” /> แต่ถ้ายังไม่มีก็ให้ใส่ก่อน <fx:Script> ครับ
• ทีนี้ก็มาถึงส่วนตั้งค่าละ

if(lang=="en"||lang=="th"){ //ถ้าเป็นภาษาอังกฤษหรือไทย
styleManager.getStyleDeclaration(".langFontStyle").setStyle("fontFamily","2005_iannnnnCPU"); //ใช้ฟอนท์นี้
for(i=0;i<200;i++){
if(styleManager.getStyleDeclaration(".fontSize"+i)!=null)
styleManager.getStyleDeclaration(".fontSize"+i).setStyle("fontSize",i); //รันแก้คลาสชื่อนี้ทั้งหมดให้เป็นขนาดที่ใส่เลขไว้
}
}
else{ //ถ้าเป็นภาษาอื่นๆใช้ฟอนท์นี้และเซ็ทค่าต่างๆ
styleManager.getStyleDeclaration(".langFontStyle").setStyle("fontFamily","Arial");
styleManager.getStyleDeclaration(".langFontStyle").setStyle("fontWeight","bold");
for(i=0;i<200;i++){
if(styleManager.getStyleDeclaration(".fontSize"+i)!=null)
styleManager.getStyleDeclaration(".fontSize"+i).setStyle("fontSize",i/2);
}
}

• จากนั้นในแท็กต่างๆของเราที่ปกติใช้ property fontFamily=”xxx” fontSize=”yyy” ก็มาใช้เป็น styleName=”langFontStyle fontSize44″ เท่านี้แหละครับ

วิธีการแก้ปัญหาเวลาเพี้ยนที่เกิดจากเครื่องผู้ใช้ by

30
Nov
0

flex-time

โดยปกติแล้วเราใช้ new Date().getTime() เพื่อให้ได้เวลาปัจจุบันเพื่อไปเทียบในการแสดงผลเวลาต่างๆ ที่ใช้ในเกม แต่บางทีก็จะเกิดปัญหาขึ้นเนื่องงจากเครื่องผู้ใช้นั้นตั้งเวลาไม่ตรงกับเวลามาตรฐาน จึงทำให้การแสดงผลผิดเพี้ยนไปอย่างมาก เราจึงต้องทำการเอาเวลาจาก Server มาช่วยในการคำนวนเวลาปัจจุบันด้วย ดังนี้


public var timeDiff:Number = 0; //สร้างตัวแปรมาเก็บค่าความต่างจากเวลาปัจจุบัน
public function init():void{
timeDiff = current_server_time*1000-(new Date().getTime()); //ให้ current_server_time เป็นเวลาปัจจุบันที่ส่งมาจาก Server แล้วนำมาลบกับเวลาปัจจุบันของเครื่องผู้ใช้เพื่อเก็บเวลาที่ต่างกัน
}

ดังนั้นเราก็จะมีตัวแปรที่เก็บเวลาต่างกันของเวลาผู้ใช้และเวลาของ Server และนำไปใช้ ตัวอย่างเช่น


public var offerTimer:Timer = new Timer(1000); //ตัว Timer นับถอยหลังหมดเวลาของโปรโมชั่น
public function checkOfferTime(time:Number):void{ //ฟังก์ชั่นคิดเวลาที่เหลือของโปรโมชั่น
var nowDate:Date = new Date(); //เวลาปัจจุบัน
var endOffer:Date = new Date(time*1000); //เวลาที่จะหมด รับค่ามาเวลาถูกเรียก
var remainTime:Number = (endOffer.getTime()-(nowDate.getTime()+timeDiff))/1000; //เวลาที่เหลือของโปรโมชั่นก็จะเท่ากับ เวลาหมดลบด้วยเวลาปัจจุบันบวกด้วยความต่างของเวลาที่เราได้ทำการเก็บไว้ในตอนแรก
if(remainTime>0){ //ถ้าเวลายังเหลือ
offerTimer.repeatCount = remainTime; //ให้เวลาเหลือ (เป็นวินาที) เท่ากับจำนวนรอบนับถอยหลัง
offerTimer.reset(); //รีเซ็ท Timer
offerTimer.start(); //และสั่งเริ่มนับ
}
}

เท่านี้เวลาที่จะแสดงให้เห็นในเครื่องผู้ใช้ทุกเครื่องจะเท่ากันแล้วล่ะครัย

วิธีทำให้ TextField ใน Flash สามารถแก้ไขข้อมูลโดย Flex ได้ (พร้อมทิป) by

31
Oct
0

โดยปกติแล้วถ้าเราสร้างปุ่มขึ้นมาใน Flash แล้วต้องการให้มันมีตัวหนังสือ (label) เราก็จะสร้าง text field ไว้ในปุ่มนั้นๆเลย ทีนี้ปัญหามันอยู่ที่ว่า ถ้าเรา import ไปใช้กับ Flex แล้วเราจะไม่สามารถอ้างอิงถึง property ที่เป็น Text Field นี้ที่อยู่ใน button ได้ เช่น

text_button.txtOnButton.text = “change”; แบบนี้จะทำให้เกิด Error ได้ จึงมีวิธีมานำเสนอครับ

การสร้างปุ่มที่ใส่ text field ไว้ด้านในแบบทั่วไป ซึ่ง refer ถึง text field ไม่ได้

การสร้างปุ่มที่ใส่ Text Field ไว้ด้านในแบบทั่วไป ซึ่ง refer ถึง Text Field ไม่ได้

เนื่องจากปุ่มเป็น Button จึงเข้าถึงส่วนต่างๆข้างในด้วยโค้ดไม่ได้

เนื่องจากปุ่มเป็น Button จึงเข้าถึงส่วนต่างๆข้างในด้วยโค้ดไม่ได้

เมื่อรันใช้ได้ปกติ

เมื่อรันใช้ได้ปกติ

วิธีแก้ขั้นแรกให้เรา Cut ตัว Text Field ที่อยู่ในปุ่มออกมาก่อนแล้ว New Symbol (Ctrl + F8) แล้วให้เลือกเป็น Movie Clip (ไม่ใช่ Button) จากนั้นก็นำ Text Field ก่อนหน้ามาวาง เท่านี้เราก็สามารถเข้าถึงตัว Text Field จากสคริปได้แล้วล่ะครับ เช่น mcButton.txtOnButton.text = “change”;

ให้เรา cut text field ออกไปก่อน

ให้เรา cut Text Field ออกไปก่อน

นำปุ่มเปล่ามาใส่ใน Symbol พร้อมกับ text field ก่อนหน้ามาใส่

นำปุ่มเปล่ามาใส่ใน Movie clip พร้อมกับ Text Field ก่อนหน้ามาใส่

แต่! มันจะมีปัญหาคือตัว Text Field จะบังตัวปุ่มทำให้เวลาชี้ในระยะกล่อง Text Field มันจะถือว่าไม่ได้ Hover ปุ่มอยู่เลย วิธีแก้ก็คือเขียนสคริปตั้ง Property mouseEnabled ให้เป็น  false สำหรับ Text Field ครับ เท่านี้ก็ใช้งานได้ปกติแล้วล่ะครับ

เวลาชี้แถวตัว text ปุ่มจะไม่ขยายและ cursor ไม่เปลี่ยนเป็นรูปมือ

เวลาชี้แถวตัว text ปุ่มจะไม่ขยายและ cursor ไม่เปลี่ยนเป็นรูปมือ

ใส่ ActionScript ตั้งค่า Property ของ text field เรา mouseEnabled = false;

ใส่ ActionScript ตั้งค่า Property ของ Text Field เรา mouseEnabled = false;

เมื่อรันใช้ได้ปกติ

กลับไปเป็นรูปมือดังเคย

วิธีการเพิ่มหรือลดคำสั่งเมื่อกดคลิ้กขวาในแอปพลิเคชั่น Flex by

30
Sep
0

เนื่องด้วยความซนของผู้เล่นทำให้เราต้องค้นหาวิธีการเพิ่มลดคำสั่งเมื่อกดคลิ้กขวาใน Flex app ของเรา เพราะโดนปกติแล้วคลิ้กขวาจะมีคำสั่ง Print ซึ่งเมื่อ Print แล้วพวก effect ต่างๆใน Flex app ของเราจะผิดเพี้ยนไป ทำให้ผู้เล่นอาจจะเจออะไรบางอย่างที่เราไม่ต้องการแสดงก็เป็นได้

คำสั่งเมื่อคลิ้กขวาใน Flex Application ของเรา ส่วนที่บอกไว้ก่อนหน้าคือมีคำสั่ง Print ด้วย

คำสั่งเมื่อคลิ้กขวาใน Flex Application ของเรา ส่วนที่บอกไว้ก่อนหน้าคือมีคำสั่ง Print ด้วย

Print เสร็จก็จะเห็นหมดเลย (เนื่องจากเวลาพิมพ์น่าจะลบ Effect ต่างๆของ Flash ออกให้)

Print เสร็จก็จะเห็นหมดเลย (เนื่องจากเวลาพิมพ์น่าจะลบ Effect ต่างๆของ Flash ออกให้)

เลยได้วิธีตั้งค่าคลิ้กขวาดังนี้

ในไฟล์ Application ของเรา เพิ่มฟังก์ชั่นด้านล่าง และเรียกใช้เมื่อ applicationComplete ครับ

private function setContextMenu():void{

var customContextMenu:ContextMenu = new ContextMenu(); //สร้าง contextMenu ขึ้นมาใหม่

customContextMenu.hideBuiltInItems(); //ลบ contextMenu ที่มีมาให้ออกให้หมด

this.contextMenu = customContextMenu; //ตั้งค่าเป็นตัวใหม่

}

เท่านี้เมนูที่มีมาให้ก็จะหายไปแล้วครับ

เหลือแต่คำสั่งพื้นฐานของ Flash

เหลือแต่คำสั่งพื้นฐานของ Flash

แถมให้ ถ้าเราอยากเพิ่มตัวเลือกใหม่ๆก็ทำได้ดังนี้ครับ

private function setContextMenu():void{

var customContextMenu:ContextMenu = new ContextMenu();

customContextMenu.hideBuiltInItems();

var testOption:ContextMenuItem = new ContextMenuItem(“Test Me!”); //สร้างตัวเลือกใหม่ขึ้นมาชื่อว่า Test Me!

testOption.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,contextEvent); //ใส่ Event ให้ตัวเลือกใหม่

customContextMenu.customItems.push(testOption); //เพิ่มเข้าไป

this.contextMenu = customContextMenu;

}

private function contextEvent(event:ContextMenuEvent):void{ //ฟังก์ชั่นที่ถูกเรียกใช้เมื่อเลือกตัวเลือกที่สร้างมา

Alert.show(“PENTAKILL”);

}

ตัวเลือกคลิ้กขวาที่มีเพิ่มขึ้นมา ก่อนและหลังคลิ้ก

ตัวเลือกคลิ้กขวาที่มีเพิ่มขึ้นมา ก่อนและหลังคลิ้ก

ง่ายๆแค่นี้เองครับ ลองเอาไปประยุกต์ใช้กันดูได้นะครับ

วิธีทำให้ TextField ใน Flash CS5 มี Font ตัวหนา เมื่อถูกแก้ไขโดย Flex by

30
Sep
0

โดยปกติแล้วถ้าเราตั้ง TextField ใน Flash ให้มีตัวหนาแล้ว มันก็จะคงฟอนท์ตัวหนาไว้ตลอด แต่เมื่อเรามาแก้ไขตัวหนังสือของมันด้วย Flex แล้วมันจะทำให้ฟอนท์ของ TextField ดังกล่าวกลายเป็นตัวธรรมดาไปเฉยๆ วันนี้มีวิธีแก้มาฝากกันครับ

TextField สองอันตัวอย่างที่ทำมาจาก Flash เซ็ทไว้ให้เป็นตัวหนา

TextField สองอันตัวอย่างที่ทำมาจาก Flash เซ็ทไว้ให้เป็นตัวหนา

เมื่อเรานำ Flash ด้านบนเข้าไปใช้ใน Flex แล้วสั่งให้มีการแก้ไขข้อความใน TextField

ผลลัพธ์คือตัวอักษรจะไม่ติดตัวหนาแล้ว

txt_name.text = “Cybermon”;

txt_skill.text = “Destroy itself after attack”;

แก้ไขค่าในสอง TextField ทำให้ตัวอักษรไม่ Bold

แก้ไขค่าในสอง TextField ทำให้ตัวอักษรไม่ Bold

วิธีแก้ไขก็ไม่ยากเลยครับ หลังจากที่เราใส่ค่าใหม่แล้ว เราต้องทำการเรียก setTextFormat เพื่อตั้งค่าให้เป็นตัวหนาอีกรอบครับ

ตัวอย่าง

var myTextFormat:TextFormat = new TextFormat();

myTextFormat.bold = true;

myTextField.setTextFormat(myTextFormat);

หรือเราจะเขียนย่อๆแบบนี้ก็ได้ครับถ้าเรารู้ว่ามันรับ Parameter ยังไงบ้างแล้ว (เพิ่มเติม) ซึ่งจะทำให้ได้โค้ดดังนี้

txt_name.text = “Cybermon”;

txt_skill.text = “Destroy itself after attack”;

txt_name.setTextFormat(new TextFormat(null,null,null,true));

txt_skill.setTextFormat(new TextFormat(null,null,null,true));

เท่านี้เราก็จะได้ผลลัพธ์เป็นตัวหนาตามปกติแล้วล่ะครับ

TextField ที่ผ่านฟังก์ชั่น setTextFormat แล้วก็จะตัวหนาตามเดิม

TextField ที่ผ่านฟังก์ชั่น setTextFormat แล้วก็จะตัวหนาตามเดิม

กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ