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

30
Nov
1

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

}

}

}

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

ผลลัพธ์จากการรัน

วิธี upgrade php 5.2 >> 5.3 (ไม่ทั้งหมดหรอกนะ เฉพาะที่ใช้ในโปรเจคเราเท่านั้นล่ะ) by

30
Nov
0

- เวลาจะ new อะไรขึ้นมาใช้ก๊ไม่ต้องใส่ & ข้างหน้าอีกต่อไป เช่น
$a = &new $b; -> $a = new $b;

- เอา & ตอนส่ง parameter ให้ function ออกแล้ว ไปเติม & ตอนประกาศ function แทน เช่น
func(&$param); -> func($param);
function func($param){} -> function func(&$param){}
PS. ถ้าเป็น function มาตรฐาน php เช่น shuffle( &$opp_all ); ก็ไม่ต้องทำไร ลบ & ออกอย่างเดียว

- เปลี่ยน function split เป็น explode เช่น
$a = split(‘ ‘,$b,2); แก้เป็น $a = explode(‘ ‘,$b,2);

- เปลี่ยน function ereg และ eregi เป็น preg_match และเปลี่ยน parameter ตัวแรกเป็น Regular Expression เช่น
ereg(‘_model$’, $model); -> preg_match(‘/_model$/’, $model);
eregi(‘^(.+):([0-9]+)$’, $hosts[$index], $hostinfo); -> preg_match(‘/^(.+):([0-9]+)$/i’, $hosts[$index], $hostinfo);

- เปลี่ยน function ereg_replace และ eregi_replace เป็น preg_replace และเปลี่ยน parameter ตัวแรกเป็น Regular Expression เช่น
ereg_replace(“,$”, “”, $insert); -> preg_replace(“/,$/”, “”, $insert);
eregi_replace(‘_form$’, ”, $form); -> preg_replace(‘/_form$/i’, ”, $form);

การใช้ List ใน Flex by

30
Nov
0

เราจะมาพูดถึงส่วนประกอบของ List ใน Flex
สิ่งที่พูดถึงนี้อยู่ใน spark.components.list

แท็ก list เวลาเรียกใช้คือ <s> </s> แบบโค้ดตัวอย่างนี้

<s:List x="295" y="207" width="412" height="112" id="prtList1" dataProvider="{usedArr1}" itemRenderer="components.partCustomComponent" />
</s:List>

x, y : จุด x y ที่เราจะวาง list ลงไป
width, height : ความกว้าง ความสูง ของ list ที่เราสร้าง
dataProvider : ข้อมูลที่จะใส่ลงใน list
itemRenderer : component แต่ละตัวใน list

ลงรายละเอียดกันอีกนิด
ข้อมูลที่จะใส่ใน dataProvider จะเป็นข้อมูลแบบ array เช่น

var usedArr:Array =[{"friend_id":1234,"nick":"Paiboon","level":10,"exp":2},
{"friend_id":5678,"nick":"Ziah","level":99,"exp":999999}];

จะมีข้อมูลคือ friend_id เป็น 1234, nick เป็น Paiboon, level เป็น 10, exp เป็น 2

itemRenderer จะเป็นคลาสที่สร้าง component แต่ละตัวออกมา โดยใช้ข้อมูลจาก dataProvider ทีละตัว

public function init():void {
str = data.nick;
exp = data.exp;
level = data.level;
id = "id: "+data.friend_id;
}

data คือข้อมูลจากในอาร์เรย์ . ด้วยชื่อของข้อมูลที่ต้องการ
แล้วจึงนำไปใส่

<s:Label text="name: {str}" y="60" />
<s:Label text="exp: {exp}" y="70" />
<s:Label text="level: {level}" y="80" />

มาดูให้เห็นภาพ (ไม่ตรงตามโค้ดนะจ๊ะ)
หลังจากข้อมูลหนึ่งตัวเข้า itemRenderer แล้ว จะออกมาเป็นลักษณะแบบนี้

พอใช้ข้อมูลทุกตัว ก็จะออกมาเป็นแบบนี้ :D

เปิด Firefox หลายๆ Profile by

30
Nov
3

ขอเกริ่นที่มาของเรื่องนี้ก่อนนะครับ ว่าทำไมการเปิด Firefox หลายๆอันเนี่ย มันเกี่ยวยังไงกับการทำ Facebook Game

เนื่องมาจากว่า Facebook Game นั้นจะมีระบบหลายๆอย่าง ที่จะเกี่ยวข้องกับ Friend ใน Facebook เช่น

การ Request Item จากเพื่อน, Publish Feed ให้เพื่อนคลิ๊กให้ และ อื่นๆอีกหลากหลายรูปแบบ

ดังนั้นในการ Test Game เพื่อทดสอบระบบและหาบั๊ก จึงต้องมีการให้ Facebook ID มากกว่า 1 อันครับ

ทีนี้จะให้นั่ง Log in / Log out บ่อยๆก็เหนื่อยตาย จึงจำเป็นต้องเปิด Browser หลายๆอัน ที่ Log in Facebook คนละ ID กันครับ

ถาม : ทำไมไม่ใช้ คนละ Browser กันล่ะ

ตอบ: ในหลายๆครั้ง ใช้ มากกว่า 3 ID ครับ Browser ที่ใช้ทดสอบมีแ่ค่ Firefox, Chrome, IE ก็หมดละครับ


จำนวนบอทที่ผมใช้ในการทดสอบเกม

มาที่วิธีทำกันเลยดีกว่าครับ
คลิ๊กขวาที่ Short Cut ของ Firefox ครับ

จากนั้นให้เติมคำว่า -profilemanager -no-remote ต่อท้าย Path ของ firefox ในช่อง Target ครับ
ตัวอย่าง
“C:\Program Files (x86)\Mozilla Firefox\firefox.exe” -profilemanager -no-remote

เท่านี้ทุกๆครั้งที่กดเปิด Firefox ก็จะมีหน้าต่างให้เลือก Profile โผล่ขึ้นมาให้เลือกทุกครั้งแล้วครับ

ปล.1 ถ้ามีแค่ Profile Default อันเดียวก็สร้างเพิ่มครับ ง่ายๆ กด next ไปเรื่อยๆ

ปล.2 ถ้ารำคาญที่จะต้องเลือกทุกครั้ง ก็สร้าง Short Cut แยกไว้ 2 อันครับ อันนี้เป็นธรรมดา กดแล้วเปิด Default Profile เลย

มาทำดอกซากุระกันเถอะ by

28
Nov
0

เริ่มจากทำกลีบดอกกันก่อนเลยนะคะ :-)

เปิดโปรแกรม  Illustrator เลือก new แ่ผ่นงานใหม่

สร้างรูปวงรีแนวนอนด้วย Polygon Tool

ใช้ Pen Tool มาร์กตำแหน่งแล้วใช้ลูกศรสีขาว (Direct Selection Tool)

ลากจุดเข้ามาในวงรีตามภาพค่ะ

Convert ให้เป็นมุมแหลม กดตรงนี้

จะได้กลีบดอกซากุระหน้าตาแบบนี้ค่ะ

ใช้ลูกศรสีดำ (Selection Tool) บีบให้แคบลงหน่อย

มันยังอ้วนไปอะ >_<;

จากนั้นใช้ Rotate Tool จิ้มตรงฐานกลีบ

กด Alt ค้างแล้วลากเพิ่มจำนวนกลีบค่ะ

ทำจนครบทั้ง 5 กลีบ ได้ดอกซากุระแย๊ว

จะเลือก Object >> Group หรือ

เลือก Pathfinder >> Shape Modes >> Unite

เพื่อให้กลีบดอกอยู่ด้วยกันก็ได้นะคะ

เสร็จแล้วตกแต่งเกสรตามถนัดเลย :-)

กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ