การใช้งาน AS3isolib แบบพื้นฐาน (ตอนที่ 1) by Ziah

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);

}

}

}

ซึ่งจะทำให้ได้ผลลัพธ์ตามรูป