วิธีการทำให้เกมเฟลกซ์เป็นแบบเต็มจอ by Ziah

จากประสบการณ์เกม 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; //เลื่อนกลับที่ปกติ

//ทำตรงข้ามกับด้านบน

เท่านี้เราก็จะมีฟังก์ชั่นการปรับเต็มจอที่ใช่ได้แล้วล่ะครับ