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

31
Dec
1

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

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

iso2-8

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

iso2-1

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

iso2-3

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

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

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

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

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

iso2-5

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

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

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

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

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

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

iso2-6

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

iso2-7

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

Enjoy this article?

Consider subscribing to our RSS feed!

1 ความเห็น

  1. jongruk
    04:45 on November 30th, 2015

    สุดยอดมาก
    แต่รูปภาพหายครับ

ใส่ความเห็น

RSS feed for comments on this post

 เราชนะรอบ 4 | ยืมเงิน 3000 ด่วน | แอพกู้เงิน | แอพเงินด่วน | สินเชื่อออนไลน์อนุมัติทันที | Site Map | กู้เงินก้อน | กระเป๋าตัง | thisshop และ ยืมเงินฉุกเฉิน 5000 ด่วน