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

ต่อจากคราวก่อนที่เราได้รู้จักส่วนพื้นฐานของ As3isolib กันไปแล้ว ในตอนนี้เราจะอธิบายถึงการนำมาใช้จริง โดยปกติแล้วเราจะนำคอนเทนท์ต่างๆที่สร้างใน Adobe Flash มาใช้

ขั้นแรกให้เรารัน isoGrid เปล่าๆมาก่อน เพื่อจะได้ Capture รูปภาพ Grid ไปใช้ในการจัดคอนเทนท์ต่างๆที่เราจะนำมาใช้ หลังจาก Capture เสร็จให้เราเปิด Adobe Flash ขึ้นมาและ Paste รูปลงไป

ในส่วนแรกให้เรานำรูปที่จะใช้มาใส่เข้ามาแล้วจัดให้มีขนาดพอดีกับ Grid 1 ช่อง

แล้วก็จะมาถึงในส่วนสำคัญ คือเราต้องกำหนดจุด Registeration Point หรือ จุด Pivot ให้อยู่ในตำแหน่ง ที่อยู่สูงที่สุดของพื้นวัตถุนั้นๆ สังเกตุตามภาพ

เลื่อนวัตถุโดยให้จุด Registration Point อยู่ที่มุมบนของช่อง Grid

จากนั้น Edit วัตถุโดยเลื่อนให้พื้นของวัตถุ มีจุดสูงสุดตรงกันกับจุด Registration Point

จากนั้นเราก็ทำการตั้งชื่อวัตถุนั้นๆโดยการคลิ้กขวา Property และเลือก Export for Action Script เพื่อที่จะนำ swc ไปใช้ต่อ จากนั้นก็ทำการ Publish โดยเลือก Export SWC ด้วย แล้วนำ swc ที่ได้ไปไว้ใน Lib ของ Action Script Project ของเรา

และทำการเพิ่มโค้ดที่ทำใน ตอนที่ 1 ตรงส่วนที่หลังจากสร้าง isoScene แล้ว

var iso:IsoSprite = new IsoSprite(); //สร้าง isoSprite ซึ่งเป็นตัวแสดงผลวัตถุต่างๆ

iso.sprites = [brick]; //รับค่าเป็นอาเรย์ ใส่ชื่อของวัตถุนั้นลงไป

iso.moveBy(CELL_SIZE,CELL_SIZE, 0); //ขยับไปที่ช่องแรก

scene.addChild(iso); //ใส่เข้าใน scene

พอรันก็จะได้ผลลัพธ์ดังนี้

ถ้าเราเขียนลูปวนแสดงผลของวัตถุก็จะมีหน้าตาออกมาเช่นนี้ครับ

เท่านี้โลก iso ของเราก็เริ่มดูเป็นรูปเป็นร่างแล้วล่ะครับ

การใช้งาน 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);

}

}

}

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