การใช้งาน AS3isolib แบบพื้นฐาน (ตอนที่ 1) by Ziah
Nov0
As3isolib (ActionScript 3.0 Isometric Library) เป็นโอเพ็นซอร์ส ที่พัฒนาขึ้นเพื่อช่วยในการสร้างคอนเทนท์แบบ Isomatric (เช่นเกมและกราฟิก) สำหรับแพลตฟอร์ม Flash Player. As3isolib ประกอบด้วย utilities, primitives และ views. As3isolib ได้รับการพัฒนาให้มีความเรียบง่ายความเร็วและประสิทธิภาพในตัว เพื่อให้นักพัฒนาสามารถมุ่งเน้นไปที่การนำไปใช้จริงแทนที่จะต้องเรียนรู้ API ที่ซับซ้อน. สามารถหาข้อมูลเพิ่มเติมและดาวน์โหลดนำมาใช้งานได้ที่ http://code.google.com/p/as3isolib/
ในขั้นตอนแรกนี้จะแนะนำ 3 ตัว พื้นฐานที่จะนำมาใช้งานหลักๆก่อน คือ Grid Scene และ View พร้อมทั้ง Isobox ที่เป็นตัวทดลองการใช้งาน
- Grid จะเป็นส่วนแสดงช่องของพื้นซึ่งเป็นพื้นของ iso
- Scene จะเป็นส่วนของหน้าที่จะทำการประมวลผลก่อนจะแสดงผล
- View เป็นส่วนแสดงผล
- IsoBox เป็นคอมโพเนนท์พื้นฐานในการทดลองใช้ iso
package
{
//ทำการ Import ส่วนต่างๆเข้ามา
import as3isolib.display.IsoView;
import as3isolib.display.primitive.IsoBox;
import as3isolib.display.scene.IsoGrid;
import as3isolib.display.scene.IsoScene;
import as3isolib.geom.IsoMath;
import as3isolib.geom.Pt;
import eDpLib.events.ProxyEvent;
import flash.display.Sprite;
import flash.events.MouseEvent;
public class Iso extends Sprite
{
private static const CELL_SIZE:Number = 50; //ทำการตั้งขนาดช่องของ Grid
//สร้างตัวแปรทั้ง 4
private var grid:IsoGrid;
private var scene:IsoScene;
private var view:IsoView;
private var box:IsoBox;
public function Iso()
{
grid = new IsoGrid();
grid.setGridSize(10, 10, 1); //เซ็ทขนาดของ Grid โดยตามตัวอย่างให้มีขนาด 10×10 ช่อง
grid.showOrigin = true; //boolean ตั้งโชว์ลูกศรบอกทิศทาง
grid.cellSize = CELL_SIZE; //ตั้งค่าขนาดของช่อง Grid ให้เท่ากับค่าที่สร้างไว้
box = new IsoBox();
box.setSize(CELL_SIZE, CELL_SIZE, CELL_SIZE); //สร้างกล่อง isoBox ให้มีขนาด กว้าง x ยาว x สูง จากตัวอย่างให้ขนาดพอดีกบัช่อง Grid
box.moveTo(CELL_SIZE*2, CELL_SIZE*2, 0); //เป็นคำสั่งเคลื่อนย้ายเหมือนกับการเซ็ท x y z แต่ทำในมิติของ iso
scene = new IsoScene();
scene.addChild(grid);
scene.addChild(box);
scene.render(); //เป็นคำสั่งที่ทำให้ซีนทำการเปลี่ยนแปลงการแสดงผล *ต้องสั่งทุกครั้งถ้าต้องการให้การแสดงผลเปลี่ยนตาม*
view = new IsoView();
view.setSize(800, 600); //ตั้งขนาดของ view
view.centerOnPt(new Pt(200, 200, 0)); //ให้จออยู่ตรงตำแหน่งที่ตั้ง x y z
view.addScene(scene);
addChild(view);
}
}
}
ซึ่งจะทำให้ได้ผลลัพธ์ตามรูป
[Tips] เปิด Skype แล้ว Start Apache ไม่ได้? by Ziah
Oct0
เปิด Skype แล้วทำให้ Start Apache ไม่ได้
เปิด Skype แล้ว Start Apache ไม่ได้ เป็นปัญหาที่แก้ไขได้ง่ายแต่คนส่วนมากมักคาดไม่ถึง เมื่อเราทำการเปิดโปรแกรม Skype มาก่อนการ Start Apache จะทำให้ Apache ไม่ทำงาน เนื่องจาก Skype มีการใช้พอร์ทสำรอง ซึ่งก็คือ 80 และ 433 ซึ่งทำให้ไปชนกับพอร์ทของ Apache โดยวิธีการแก้ง่ายๆก็คือทำการ Start Apache ก่อนที่จะที่จะเปิด Skype และมีอีกวิธีการแก้อย่างถาวรคือไปปิดพอร์ทสำรองของ Skype ซะ ตามนี้ครับ
เข้า Skype ไปที่ Tools -> Options...
ไปที่แท็บ Advanced -> Connection จากนั้นก็ทำการติ๊ก "Use port 80 and 433 as alternatives for incoming connections" ออกซะครับ
ใช้งานพร้อมกันได้แล้ว :)
ปัญหา Java heap space Out of memory by Ziah
Sep4
จากที่ได้ทำโปรเจ็คเกมที่ผ่านมา ด้วยตัวเกมนั้นมีขนาดใหญ่จำนวน ไฟล์จึงมีมากตามจึงทำให้เกิดปัญหา Java Heap Space: Out of memory ซึ่งจะทำให้โปรแกรมปิดตัวลง ซึ่งวิธีแก้จากการหาใน google จะมีวิธีช่วยได้บ้างตามนี้
1. Windows -> Preferences
2. Java -> Installed JREs
3. เลือก Adobe Flash Builder แล้วเลือก Edit..
4. เพิ่ม VM arguments -Xmx1024M (หรือตามใจผู้ใช้แต่คำพนึงถึงแรมเครื่องด้วย)
ซึ่งจากที่ลองทำแล้วปรากฎว่าการDebug ช้าลงเล็กน้อยและกินแรมมากขึ้นซึ่งอาจจะทำให้เกิดน้อยลง(หรือป่าว?)
ที่นี้บางคนอาจจะมีปัญหาเมื่อหลังจากมีปัญหาแล้วเปิดกลับมาอีกรอบ พอรันแล้วจะขึ้น Error Watcher ซึ่งจะขึ้นกับทุก File MXML ของเรา ซึ่งวิธีแก้ที่ผมใช้คือ แก้ไขและเซฟทีละไฟล์ครับ - -” (เคาะสเปซและลบ ทีละไฟลจนครบ) ซึ่งหลังจากนั้นก็จะกลับมาใช้ได้ปกติแล้วล่ะครับ
วิธีการทำให้เกมเฟลกซ์เป็นแบบเต็มจอ 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 มีความสะดวกสบายขึ้นในเวอร์ชั่นใหม่นี่ครับ
Who are we?
