วิธีการทำให้เกมเฟลกซ์เป็นแบบเต็มจอ by Ziah
Sep0
จากประสบการณ์เกม Flex ที่ผ่านมา ที่ตอนแรกคิดว่าการกดเต็มจอคงเป็นอะไรที่ไม่ยาก ก็ต้องมานั่งงมพอสมควร วันนี้เลยจะมาบอกวิธีการทำใหเกมของเราเป็นแบบเต็มจอ(ฟูลสกรีน)ให้ครับ
โดยตอนแรกโค้ดที่คิดไว้เป็นดังนี้
public function setFullscreen():void {
stage.displayState = StageDisplayState.FULL_SCREEN; //ทำให้เต็มจอ
}
public function unsetFullscreen():void {
stage.displayState = StageDisplayState.NORMAL; //ทำให้กลับเป็นปกติ
}
แต่ปรากฎว่าผลที่ได้คือเข้าโหมดฟูลกรีนจริงครับ แต่ตัวเกมยังขนาดเท่าเดิมชิดมุมซ้ายบนของจอ
ที่นี้เราจะทำอย่างไรให้ Flex เกมของเราขยายเต็มจอ ก็ทำตามนี้เลยครับ
public function setFullscreen():void {
stage.align = StageAlign.TOP; //สั่งให้ตัวเกมจัดกลางจอชิดด้านบนก่อนครับ
stage.displayState = StageDisplayState.FULL_SCREEN;
}
public function unsetFullscreen():void {
stage.align = StageAlign.TOP_LEFT; //ให้เกมไปชิดซ้ายบนตามปกติ
stage.displayState = StageDisplayState.NORMAL;
}
ทีนี้เราก็ทำการขยายขนาดของเกมดังนี้ครับ
public var DEFAULT_WIDTH:int = 760; //ค่าความกว้างพื้นฐานของตัวเกม เซ็ทไว้เท่ากันกับ Group ที่ครอบทั้งเกมไว้ด้วย
public var DEFAULT_HEIGHT:int = 600; //เช่นเดียวกันกับความสูง
public function setFullscreen():void {
stage.align = StageAlign.TOP;
stage.displayState = StageDisplayState.FULL_SCREEN;
allApp.width = stage.width; // allApp ของผมคือ Group ที่ครอบตัวเกมทั้งหมดไว้ครับเราก็ทำการขยายมันให้เท่ากัน stage.width ซึ่งก็มีค่าเท่ากับความกว้างของจอในขณะนั้นแล้ว
allApp.height = stage.height; //เช่นเดียวกับบรรทัดก่อนหน้าแต่เป็นความสูง
}
public function unsetFullscreen():void {
stage.align = StageAlign.TOP_LEFT; //ให้เกมไปชิดซ้ายบนตามปก
ติstage.displayState = StageDisplayState.NORMAL;
allApp.width = DEFAULT_WIDTH; //สั่งให้ค่ากลับเป็นค่าพื้นฐาน
allApp.height = DEFAULT_HEIGHT; //เช่นกันกับความกว้าง
}
ที่นี้ขนาดของหน้าจอเกมก็จะถูกต้องแล้ว ที่เหลือก็แค่ทำการปรับขนาดของส่วนต่างๆในเกม เช่นบาร์ด้านบนและล่าง และการขยายตัวเกม
public function setFullscreen():void {
stage.align = StageAlign.TOP;
stage.displayState = StageDisplayState.FULL_SCREEN;
allApp.width = stage.width;
allApp.height = stage.height;
component.scaleX = stage.height/DEFAULT_HEIGHT; //ทำการขยายขนาดขอคอทโพเนนท์ตัวหนึ่งๆ ซึ่งจะทำให้มีขนาดเท่ากับจอที่ทำการขยายแล้วด้วยสเกลเมื่อเทียบกับขนาดจอแล้วมีขนาดเท่าเดิม
component.scaleY = stage.height/DEFAULT_HEIGHT; // ที่ต้องใช้ height มาคำนวนไม่ใช้ width เพราะ Resolution ของจอคอมพิวเตอร์จะมีด้านกว้างมากกว่าด้านสูงดังนั้นวัตถุที่มีขนาดใหญ่เท่าขนาดเกมก่อนหน้าก็จะพอดีกับความสูงของขนาดจอครับ
component.x -= ((component.width*stage.height/DEFAULT_HEIGHT) - (component.width))/2; //ทำการเลื่อนแกน x ของวัตถุต่างๆ จากที่ยกตัวอย่างจะเป็นวัตถุที่ขนาดเต็มจอ ทำให้ไม่ต้องเลื่อนแกน y
//จากนั้นเราก็ทำการปรับค่าส่วนต่างๆของเกมให้ตรงกับที่ต้องการครับ
}
public function unsetFullscreen():void {
stage.align = StageAlign.TOP_LEFT; //ให้เกมไปชิดซ้ายบนตามปก
ติstage.displayState = StageDisplayState.NORMAL;
allApp.width = DEFAULT_WIDTH;
allApp.height = DEFAULT_HEIGHT;
component.scaleX = 1; //ปรับกลับเป็นขนาดปกติ component.scaleY = 1;
component.x = 0; //เลื่อนกลับที่ปกติ
//ทำตรงข้ามกับด้านบน
เท่านี้เราก็จะมีฟังก์ชั่นการปรับเต็มจอที่ใช่ได้แล้วล่ะครับ
การทำงานระหว่าง Flash Catalyst CS5.5 และ Flash Builder 4.5 ในเวอร์ชั่นใหม่ by Ziah
Jul0
ในก่อนหน้านี้ Flash Catalyst 5 (ต่อจากนี้จะเรียกว่า Fc) และ Flash Builder 4 (ต่อจากนี้จะเรียกว่า Fb) ได้สร้างความสะดวกในการสร้าง UI ใน Fc แล้วจึงนำไปโค้ดดิ้งต่อใน Fb แต่หลังจากที่ตัวผมเองได้ทำงานกับทั้งสองโปรแกรมมาสักพัก ก็ได้พบความลำบากนิดหนึ่งในการใช้งานคือ มันเป็นโฟลว์ทางเดียว เมื่อคนออกแบบสร้าง Fc มาเสร็จแล้ว เราก็ต้องอิมพอร์ทเข้ามาทำงานใน Fb เพราะ Fc ไม่สามารถแก้ไขโค้ดใดๆได้เลย และเมื่อทางโค้ดดิ้งแก้ไขอะไรเรียบร้อยแล้ว เมื่อถึงเวลาจะมีการแก้ UI ต้องแก้ในโค้ดดิ้งเลย เพราะเมื่อเราทำการอิมพอร์ทเข้า Fb แล้ว เราจะไม่สามารถนำกลับไปทำใน Fc ได้อีก แต่หลังจากนั้นเพียงไม่นาน Adobe ก็ได้ปล่อยเวอร์ชั่นใหม่มาครับ คือเพิ่ม .5 เข้าไปเป็น Fc CS 5.5 และ Fb 4.5 ซึ่งส่วนใหญ่จะมากับการซัพพอร์ท Mobile ต่างๆ แต่ก็มีผลพลอยได้ด้วยคือ ทาง Fb สามารถเรียก Fc ขึ้นมาแก้ไข UI ได้แล้วล่ะครับ!
เรามาดูกันเลยดีกว่าว่าเป็นอย่างไร
• เรามาทำการ Import Flash Catalyst Project กันก่อนเลยครับ โดยตอนนี้ได้ย้ายที่แล้ว
• ก็จะได้โปรเจ็ค Flex จาก Fc เหมือนเวอร์ชั่นเดิมนะครับ
• จากนั้นเราลองมาแก้โค๊ดกันสักหน่อย
• ต่อไปเราก็ใช้ความสามารถใหม่ของ Fb 4.5 ครับ กดไปที่ Edit Project in Flash Catalyst
• จะทำให้เราเห็นโปรเจ็คใน Fb ของเราโดนล็อคดังรูป และโปรแกรม Fc ก็จะทำการเปิดโปรเจ็ค Fb ของเราใน Fc เองครับ
• เรามาดูกันใน Fc จะเห็นได้ว่าโค้ดที่เราแก้ไขไว้ได้เข้ามาใน Fc แล้ว ซึ่งทำให้เราสามารถแก้ไข UI หลังโค้ดดิ้งได้แล้วล่ะครับ
• เรามาลองใส่ State เพิ่มอีกตัว
• เมื่อเราแก้ไข UI ต่างๆ ใน Fc เสร็จแล้วเราก็มาเลือก Resume Working On Project in Flash Builder ครับ
- หรือถ้าต้องการทำการเริ่มการแก้ไขใหม่อีกครั้งจาก Fb ที่มีอยู่ให้เลือก Re-open Project in Flash Catalyst ครับ
- หรือถ้าต้องการยกเลิกการแก้ไขจาก Fc ให้เลือก Cancel Editing Project in Flash Catalyst ครับ
• เมื่อเราแก้ไขเสร็จแล้ว UI ที่ถูกแก้ไขก็จะถูกนำมาแก้ใน Fb Project ของเราในทันทีเลยล่ะครับ
Flow การทำงานแบบใหม่ของ Flash Catalyst CS5.5 และ Flash Builder 4.5
เราจะเห็นได้ว่าโฟลว์การทำงานของ Fc 5.5 และ Fb 4.5 ไม่ได้ไปทางเดียวเหมือนเวอร์ชั่นเก่าๆอีกต่อไปครับ เพราะเราสามารถแก้ไขไปมาระหว่างสองโปรแกรมได้อย่างอิสระแล้ว ทำให้ผู้ที่ทำ Flex มีความสะดวกสบายขึ้นในเวอร์ชั่นใหม่นี่ครับ
ทดสอบประสิทธิภาพเครื่องด้วย apachebench + newrelic by heha
Jul0
ช่วงนี้กำลังทดสอบประสิทธิภาพ server เลยต้องใช้งาน apachebench (ขอเรียกสั้นๆ ว่า ab) เป็น tools ในการทดสอบประสิทธิภาพ server อย่างหนึ่ง หลังจากลงโปรแกรมแล้ว เราสามารถทดสอบการใช้งานได้ดังนี้
ลองพิมพ์คำสั่งด้านล่างกัน โดย -n คือจำนวน request ทั้งหมดที่จะยิง และ -c คือจำนวน concurrent connection ที่จะใช้ (คือจำลองว่ามีผู้ใช้เข้าใช้งานพร้อมกันกี่คนนั่นเอง) โดยเวลาพิมพ์ชื่อเว็บอย่าลืมพิมพ์ / ต่อท้ายด้วยไม่งั้นจะยิงไม่ได้ ผลจะเป็นดังนี้
วิธีแก้ปัญหาเมื่อตาราง InnoDB ไม่สามารถ alter, optimize, dump ได้เลย by heha
Jun0
เนื่องจากช่วงนี้มีปัญหาโลกแตกที่ตาราง InnoDB อยู่ๆ ก็เกิด alter, optimize, dump ไมได้เลยซักกะอย่าง มันจะบอกว่า “MySQL server has gone away” หรือ “Error 2013: Lost connection to MySQL server during query when …” ซึ่งช่างเป็น error ที่สื่อความหมายได้ดีเยี่ยมเสียจริง! ไปดูใน log error ก็ฟ้องว่า thread MySQL ตายกลางทาง กรุณา submit bug ไปให้ MySQL เอ่อ… พอสั่ง Check table มันก็บอกว่าปกติดี เอะยังไง! สุดท้ายเนื่องจากจนปัญญาจึงต้องมานั่ง query ทีละ rowๆ ออกมาใส่ตารางใหม่ที่โครงสร้างเหมือนเดิม ซึ่งได้ผลดังนี้
1. ตารางที่ query มันใหญ่มาก! ไม่สามารถสั่ง INSERT INTO user2 (SELECT * FROM user) ได้ตรงๆ เลยแบบง่ายๆ
2. ลองสั่ง INSERT INTO user2 (SELECT * FROM user LIMIT 0,1000) ไรทำนองนี้ก็ไม่ให้อีก! มันฟ้องว่า subquery ไม่ support limit เวรจริงๆ ครับ 55
3. ลองใช้ php ช่วย คือสั่ง SELECT * FROM user WHERE user_id NOT IN (SELECT user_id FROM user2) LIMIT 0,1000 แล้วค่อยเอา user_id ที่ได้มา query ต่อเป็น “INSERT INTO user2 (SELECT * FROM user WHERE user_id IN(”.implode(’,', $a_user_id).”))” ก็ยังไม่ได้เพราะแต่ละ row มันใหญ่มาก กว่าจะเสร็จก็ช้ามากๆ
4. สุดท้ายจึงได้เป็น SELECT user_id FROM user WHERE user_id NOT IN (SELECT user_id FROM user2) LIMIT 0,1000 แล้วต่อด้วย ”INSERT INTO user2 (SELECT * FROM user WHERE user_id IN(”.implode(’,', $a_user_id).”))” เหมือนเดิม ก็ใช้ได้ละครับ 
5. รันไปซักพักพบ “MySQL Server has gone away” อีกแล้ว - -” จึงค่อยๆ ลด Limit มาเหลือ 1 ก็ยังพัง และค่อยๆ ลอง SELECT * FROM user WHERE id=1 ไปเรื่อยๆ โดยเปลี่ยน * เป็น field ในตารางที่มีทีละ field ปรากฏว่าก็เจอ field เจ้าปัญหาจนได้ เป็น Text field นี่เอง! ซึ่งเราไม่สามารถแม้กระทั่งสั่ง DELETE FROM user WHERE id=1 ช่างโหดร้ายยิ่ง!
6. ต่อมาจึงต้องใส่ offset เพื่อ skip row ที่มีปัญหาไป แล้วก็รันๆ ไปซักพักอีกก็เจออีก สรุปว่าข้อมูล user แสนคน เจอ row ที่มีปัญหาทั้งหมด 5 row มันไปทำอีท่าไหนถึงพังก็ไม่อาจทราบได้ และตอนนี้ก็สามารถกลับมาใช้งานได้ตามปกติซะที
ตัวนับเวลาถอยหลัง (Midnight-Daily-Reset) อย่างง่าย ด้วย Javascript by seeer
May0
จากที่เราเล่นเกมกันบ่อยๆ คงไม่มีใครไม่เคยเห็นระบบเล็กๆน้อยของเกม ที่กำหนดเวลาอนุญาตให้ทำ พูดง่ายๆก็อย่างเช่น ทำได้ทุกๆ สองชั่วโมง สิบสองชั่วโมง หรือ ธรรมดาๆก็ ทำทุกๆ 1 วัน อาทิเช่น ตีเมืองคนอื่นได้แค่วันละครั้ง ส่งของให้เพื่อนได้แค่วันละครั้ง อะไรแบบนี้เป็นต้น และเพื่อความเก๋ไก๋ เราก็ต้องมีตัวนับเวลาถอยหลัง โชว์เวลาถอยหลังให้ตื่นเต้นเล่นๆกันนิดหน่อย ตัวนับเวลาถอยหลังทำได้หลายแบบ เช่น นับจากวันที่กำหนดไว้ เหลือเวลาอีกเท่าไหร่จะถึงวันที่นี้ๆ เดือนนี้ๆ เป็นต้น ตัวนับที่นับถอยตามชั่วโมงที่มีให้เห็นได้ทั่วไป เราจะมาพูดถึง ตัวนับเวลาถอยหลัง ที่ทำทุกๆวัน หรือที่เรียกว่า Daily reset โดยที่ไม่ได้ reset โดยนับ 24 ชั่วโมง แต่จะ reset ตอนเที่ยงคืนของทุกวัน (เพราะเรานับวันใหม่หลังเที่ยงคืน เป็นอะไรที่มาตรฐาน)
มาดูกันว่า ถ้าเราอยากได้ ตัวนับถอยหลังที่นับจากเวลาเที่ยงคืน จะเขียนได้อย่างไรบ้าง
<html>
<head>
<title>Countdown to Mid-night</title>
<script type=”text/javascript”>
function ShowTimes() {
var now = new Date();
var hrs = 23-now.getHours();
var mins = 59-now.getMinutes();
var secs = 59-now.getSeconds();
// ถึงเที่ยงคืนแล้วจะให้ทำอะไรก็เชคไป บลาๆๆ
if(now.getHours() == 23 && now.getMinutes() == 59 && now.getSeconds() == 59)
{
document.getElementById(”start_butt”).style.display = “block”;
}
var str = ”;
str = now.toString();
str += ‘<br> Timeleft: ‘+hrs+’ hours ‘+mins+’ minutes ‘+secs+’ seconds’;
document.getElementById(’countdownToMidnight’).innerHTML = str;
}
var _cntDown;
function dontClick() {
document.getElementById(”start_butt”).style.display = “none”;
}
</script>
</head>
<body onload=”_cntDown=setInterval(’ShowTimes()’,1000)”>
<div id=”countdownToMidnight”></div>
<div id=”start_butt” style=”display:block”>
<button onclick=”dontClick()”>Start</button>
</div>
</body>
</html>
จากตัวอย่าง จะเห็นว่า ถ้ากดปุ่ม Start ไปแล้ว ปุ่มก็หายไป แล้วบอกเป็นนัยๆว่า รอกดใหม่พรุ่งนี้นะ บอกแล้วอย่างง่ายจริงๆ ขอบคุณบทความจาก http://www.webdeveloper.com/forum/archive/index.php/t-215504.html
Who are we?
