[Flex] วิธีการทำให้เกมของเราสามารถเปลี่ยนฟอนท์แบบตอน Run Time ได้ by Ziah
Feb0
โดยปกติแล้วในเกมจะใช้ฟอนท์หลักๆ 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 Ziah
Nov0
โดยปกติแล้วเราใช้ 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 CS5 มี Font ตัวหนา เมื่อถูกแก้ไขโดย Flex by Ziah
Sep0
โดยปกติแล้วถ้าเราตั้ง TextField ใน Flash ให้มีตัวหนาแล้ว มันก็จะคงฟอนท์ตัวหนาไว้ตลอด แต่เมื่อเรามาแก้ไขตัวหนังสือของมันด้วย Flex แล้วมันจะทำให้ฟอนท์ของ TextField ดังกล่าวกลายเป็นตัวธรรมดาไปเฉยๆ วันนี้มีวิธีแก้มาฝากกันครับ
เมื่อเรานำ Flash ด้านบนเข้าไปใช้ใน Flex แล้วสั่งให้มีการแก้ไขข้อความใน TextField
ผลลัพธ์คือตัวอักษรจะไม่ติดตัวหนาแล้ว
txt_name.text = “Cybermon”;
txt_skill.text = “Destroy itself after attack”;
วิธีแก้ไขก็ไม่ยากเลยครับ หลังจากที่เราใส่ค่าใหม่แล้ว เราต้องทำการเรียก 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));
เท่านี้เราก็จะได้ผลลัพธ์เป็นตัวหนาตามปกติแล้วล่ะครับ