LevelUp! Studio » Fullscreen https://blog.levelup.in.th Experience the new world. Fri, 26 May 2017 10:06:07 +0000 th hourly 1 http://wordpress.org/?v=3.8.1 วิธีการทำให้เกมเฟลกซ์เป็นแบบเต็มจอ https://blog.levelup.in.th/2011/09/30/how-to-make-fullscreen-flex-game%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%97%e0%b8%b3%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%80%e0%b8%81%e0%b8%a1%e0%b9%80%e0%b8%9f%e0%b8%a5/ https://blog.levelup.in.th/2011/09/30/how-to-make-fullscreen-flex-game%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%97%e0%b8%b3%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%80%e0%b8%81%e0%b8%a1%e0%b9%80%e0%b8%9f%e0%b8%a5/#comments Thu, 29 Sep 2011 20:12:53 +0000 http://blog.levelup.in.th/?p=1192 จากประสบการณ์เกม 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; //เลื่อนกลับที่ปกติ

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

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

]]>
https://blog.levelup.in.th/2011/09/30/how-to-make-fullscreen-flex-game%e0%b8%a7%e0%b8%b4%e0%b8%98%e0%b8%b5%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%97%e0%b8%b3%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%80%e0%b8%81%e0%b8%a1%e0%b9%80%e0%b8%9f%e0%b8%a5/feed/ 0