การใช้ฟังก์ชั่นหากินสำหรับสร้างเกมจากFlash hitTestObject, hitTestPoint และ realHitTest by

30
Apr
0

ฟังก๋ชั่น hitTestObject และ hitTestPoint เป็นฟังก์ชั่นที่ค่อยข้าต้องใช้บ่อยมากในการเขียนเกมด้วย Flex เนื่องจากทั้งสองฟังก์ชั่นจะทำการตรวจเช็คว่าอยู่ทับกันหรือไม่ จึงใช้ในการชนกันต่างๆหรือเช็คความถูกต้องของตำแหน่งต่างๆอีกด้วย

◘ ฟังก์ชั่น hitTestObject
เป็นฟังก์ชั่นที่ค่อนข้างใช้บ่อย เพราะใช้งานง่ายที่สุด ใช้ระหว่าง 2 DisplayObject โค้ดเป็นดังนี้

สมมุติ a และ b เป็น movieClip
a.hitTestObject(b); //ถ้า a กับ b ทับกันก็จะได้ true
work1

◘ ฟังก์ชั่น hitTestPoint
เป็นฟังก์ชั่นที่ใช้บ่อยเมื่อเช็ควัตถุกับเมาส์ เพราะใช้ระหว่าง Point (x,y) และ DisplayObject โค้ดเป็นดังนี้

สมมุติ a เป็น movieClip
a.hitTestPoint(mouseX,mouseY); //เช็คว่าเมาส์อยู่ทับวัตถุ a หรือไม่
work2

◘ *แถม* ฟังก์ชั่น realHitTest
เนื่องจากทั้งสองฟังก์ชั่นก่อนหน้านี้ จะเช็คโดยไม่คำนึงถึง alpha จึงต้องใช้ฟังก์ชั่นนี้ซึ่งหน้าตาเป็นดังนี้


public function realHitTest(object:DisplayObject, point:Point):Boolean{
if(object is BitmapData)
{
return (object as BitmapData).hitTest(new Point(0,0),0, object.globalToLocal(point));
}
else {
if(!object.hitTestPoint(point.x, point.y, true))
{
return false;
}
else {
var bmapData:BitmapData = new BitmapData(object.width, object.height, true, 0x00000000);
bmapData.draw(object, new Matrix());

var returnVal:Boolean = bmapData.hitTest(new Point(0,0), 0, object.globalToLocal(point));

bmapData.dispose();

return returnVal;
}
}
}

จากภาพกรอบสี่เหลี่ยมคือพื้นที่จริงของวัตถุ ฉะนั้นเมื่อใช้ 2 ฟังก์ชั่นแรกจะ return true; เพราะไม่สนใจ alpha แต่ถ้าใช้ realHitTest จะ return false มาให้ครับ

a.realHitTest(mouseX,mouseY) เป็น false ในขณะที่ฟังก์ชั่นอื่นเป็น true

จากภาพกรอบสี่เหลี่ยมคือพื้นที่จริงของวัตถุ ฉะนั้นเมื่อใช้ 2 ฟังก์ชั่นแรกจะ return true เพราะไม่สนใจ alpha แต่ถ้าใช้ realHitTest จะ return false มาให้ครับ

(English) ปรับบรัชว่องไว สไตล์นุ้งมิล(พาเพิลล์) by

30
Apr
0

วันนี้นุ้งมิลขอสอง มาต่อกันอีกเอนทรี่ จะมาสอนวิธีทำบรัชอย่างง่าย หลากหลาย อลังการหล่านแพร่ด

.

เริ่มจากวาดสิ่งที่อยากนำมาทำเป็นบรัชก่อน (ในที่นี้จะสอนทำต้นไม้อย่างง่ายนะคะ)

.

.

.

(สำหรับผู้ที่ใช้ CS5 อาจหาที่ปรับบรัชไม่เจอ ให้กด F5 นะจ๊ะ)

.

.

หลังจากที่วาดเสร็จแล้วให้กด Edit > Define Brush Preset แล้วจึงกดเซฟบรัช หลังจากนั้นกด F5 ขึ้นมาจะได้ดังรูป

.

.

.

.

กดติ๊กโหมด Scattering แล้วบรัชใบไม้จะกระจายแตกตัวออกมาให้ปรับตามใจชอบ

.

.

.

.

จากนั้นกดปุ่ม Transfer จะทำให้เกิดบรัชฟุ้ง ปรับตามใจชอบเช่นเคย

.

.

.

.

เพื่อความเป็นธรรมชาติ เราจึงปรับให้หัวบรัชกระจายไปทุกทิศทุกทางโดยติ๊กโหมด Shape Dynamics

หัวบรัชจะกระจายไปหลากหลายทาง ปรับตามใจชอบอเกนเป็นอันเสร็จ!!

.

.

.

.

ทำเสร็จอย่าลืมกดเซฟบรัชที่ปุ่มขวาล่างนะจ๊ะ ไม่งั้นหายไปล่ะเฮิทปรับใหม่นะเอ้อ ^_,^

.

.

หลังจากนั้นเราจะได้บรัชอย่างง่ายมาใช้แล้วจ้า ปาดแค่ 1 นาทีก็ได้รูปร่างของต้นไม้แล้ว

.

.

.

.

“อลั๊งคาร์นหล่านแพ้ด!!!!!” (อลังการล้านแปด)

.

.

นุ้งมิลพาเพลิน เม.ย. 55

.

.

.

.

(English) How to CG ฉบับดูดีและแสนเร่งด่วน by

30
Apr
0

วันนี้จะมาสอน CG แบบง่ายและดูดีให้เสร็จภายในเวลา 2 ชม.กันค่ะ (วันนี้ขอไม่ฮา หญิงแม่รี๊บรีบ)

ซึ่งจะรวมวิธีประยุกต์ใช้เทคนิคต่างๆที่เคยสอนตั้งแต่เอนทรี่เก่าๆมาไว้ด้วยกันแต่คราวนี้จะมาเริ่มตั้งแต่ร่างภาพกันเลย

.

.

.

.

โดยปกติอยากจะร่างด้วยอะไรก็ได้ แต่เจ้าของงานนิยมร่างเป็นเส้นบนคอมแล้วเอาไปดราฟในกระดาษอีกที

(เพราะสะอาด + แก้ไขง่าย + เช็คความผิดพลาดได้ง่าย)

.

.

.

ตัดเส้นเจ้าค่า ตัดเส้น

.

.

.

จากนั้นก็ลงสีพื้นให้เสร็จอย่างคร่าวๆ ซึ่งตรงนี้สำคัญ!!!!
แบ่งเลเยอร์สีอย่างชัดเจนนะจ๊ะ
เช่น เลเยอร์ผมก็มีแต่ผม เลเยอร์ส่วนเสื้อสีขาว ก็มีแต่สีขาว

.

ระบายให้พอดี อย่าเลย ตรงนั้นอาจจะหน่อยหน่อย แต่หลังจากนี้จะทำงานไวขึ้นมั่กๆ

*** ปอลิง .วิธีเคลียร์เส้นดินสอเพื่อนำมาใช้ทำเหมือนเอนทรี่เก่าขอรับ

.

– ที่สำึคัญคือ ทุกเลเยอร์ของเราจะเป็น Normal ทั้งหมด(ยกเว้นเลเยอร์แต่งน้ำหนักสีนะ)

ไม่ังั้นถ้าใช้ Multiply ทับไปเรื่อยๆ สีจะเละตุ้มเป๊ะ … และจบเห่ ชีวิตเมทัลไปในที่สุดจ้า

.

.

.

.

ให้เราสร้างเลเยอร์เปล่าๆขึ้นมาเหนือเลเยอร์สีเนื้อ แล้วกด  ” Ctrl+Alt+G ” พร้อมกันในทีเดียว
จะปรากฎลูกศรเล็กๆชี้ลงมาที่เลเยอร์ของสีเนื้อ (ดูตามในภาพ)

.

นั่นคือการที่เราทำให้ เลเยอร์ที่สร้างใหม่นั้น เป็นเลเยอร์ย่อยๆ ของเลเยอร์สีเนื้ออีกที

.

**คุณสมบัติของมันคือ ทำให้สามารถลงสีทับสีเนื้อต่อได้อย่างอิสระ โดยมันจะไม่เลยออกจากสีเนื้อเลเยอร์แรกที่เราระบาย **

.

เป็นวิธีจะทำให้ไวขึ้นอย่างมากเพราะไม่ต้องมาเสียเวลาลบสีที่เราระบายเลยออกไป

และสามารถทับเลเยอร์ย่อยๆเพิ่มได้อีกเรื่อยๆนะจ๊ะ *0* (ด้วยคำสั่ง Ctrl+Alt+G ) เหมือนเดิม

.

.

.

แนะนำ * วิธีการลงสีเฉพาะส่วนไม่ให้เลยไปชนกับช่องอื่น อันดับแรกทุกคนคงเข้าใจง่ายๆ ว่าเลเยอร์ที่อยู่ด้านบน

จะบังส่วนที่เราวาดทับเลเยอร์ล่างไป ง่ายๆก็คือ สมมติ เราระบายสีเนื้อไว้เลเยอร์ล่าง แล้วมันเลยกรอบหน้าไปถึงส่วนผมด้วย

แต่เลเยอร์บนเราระบายสีผมทับทั้งหมด มันจะบังส่วนสีเนื้อของเลเยอร์ล่างที่เลยออกมาไปด้วย

(เหมือนกับการเอาดินน้ำมันโปะดินน้ำมันอีกทีนั่นแหละ)

เพราะงั้นแนะนำให้เอาส่วนที่อยู่ด้านในสุด เป็นเลเยอร์ล่าง และไล่ขึ้นมาจนถึงส่วนที่อยู่นอกสุดคือเลเยอร์บนสุด

เพราะไม่งั้นจะต้องมานั่งลบหลายๆรอบ เสียเวลาที่สุดใน 3 โลก

.

.

.

.

เมื่อลงสีในเลเยอร์ย่อยเสร็จแล้ว วิธีกดรวมเลเยอร์คือ คลิกขวาที่เลเยอร์หลักจะมีำคำสั่ง ” Merge Clipping Mask ”

พอกดเสร็จก็รวมกันกลายเป็นเลเยอร์เดียว

ส่วนช่องกระโปรงที่เราเว้นเอาไว้เพราะจากท่าทางจะเป็นลายตาข่าย ซึ่งจริงๆแล้ววาดเองก็ได้

แต่อาจจะเบี้ยวสนิทหรือเรียงกันไม่งาม (แก้มากๆก็จะทำให้ช้า) เพราะงั้นเราก็ขอใช้วิธีชัวร์ๆแบบง่ายๆละกัน

.

.

.

.

.

ง่ายแสนง่าย อันดับแรก ไปหาภาพตาข่ายมาจากอากู๋ (กูเกิ้ล) ถ้ามันเล็กไป ก็ให้เอามาเรียงๆกันเองในโฟโตช้อป

ไม่ต้องเป๊ะก็ได้ แต่พยายามจัดๆให้รูตาข่ายมันเสมอๆกันก็พอ

.

.

.

.

จากนั้นก็แปะลงไปเล้ย!! (ใต้เลเยอร์กระโปรงแต่เหนือเลเยอร์ขานะ มันจะได้ไม่ไปบังผิดส่วน)
แต่เส้นตาข่ายบางจุดมันยังเป็นรอยประกบกันอยู่ เพราะงั้นก็จัดการซ่อมซะ ลบ + เพนท์ๆให้มันดูเป็นเส้นเดียวกันนั่นแหละ

.

.

.

.

เสร็จตาข่ายแบบง่ายๆขั้นที่ 1 !! แต่มันอาจจะยังดูแข็งๆไป อยากจะให้ดูซอฟๆท์ตากว่านี้หน่อยเราต้องจับมันเบลอซะ!

.

.

.

.

อันดับแรก ให้เราก๊อปปี้เลเยอร์ตาข่ายขึ้นมาเพิ่ม 1 อัน จากนั้นไปที่ Filter > Blur > Gussian Blur…

จะขึ้นคำสั่งแบบในภาพ คือมันเป็นคำสั่ง ทำเบลอซึ่งเราสามารถใส่เลขดูได้เลยว่าอยากได้เบลอมากเบลอน้อยขนาดไหนจัดไป

.

.

แนะนำ * เวลาจะเบลอ เราแนะนำให้มีเลเยอร์หลักก่อนตลอด  1 อัน แล้วก๊อปปี๊เลเยอร์เพิ่มขึ้นมา

ให้เราเบลอเลเยอร์ที่ 2 และปล่อยเลเยอร์แรกทิ้งไว้แบบนั้น ผลของเลเยอร์ 2 จะทำให้เลเยอร์แรก ดูฟุ้งๆนวลๆ ถ้างง

ไปลองทำดู จะเข้าใจโดยพลัน *w*

.

.

.

.

ปรับจนพอใจก็จะได้ตาข่ายนิ้งๆมา 1 อันแบบชิวๆ !

.

.

.

**ต่อไปเป็นวิธีทำผ้าใสๆ**

.

.

.

.

วิธีทำผ้าใสๆอย่างง่ายๆ อันดับแรก ระบายไปก่อนเลย ใส่แสงใส่เงาให้ครบ อย่าไปกลัวว่าจะเข้มหรือไม่เข้ม

.

.

.

.

สังเกตทางขวาของเลเยอร์ จะมีคำสั่ง Opacity กับ Flow อยู่ ถ้าให้อธิบายกันแบบง่ายๆคือ ความชัด 100%

ของเลเยอร์นั่นแหละ พอเราลดจาก 100% เป็นซักประมาณ 30 – 60 %

ผ้ามันก็จะบางแจ๋วเห็นข้างล่างเห็นเลเยอร์เนื้อที่เราเพนท์เอาไว้ด้วยนะซี่ !!

ต่อกันที่ลายลูกไม้ เพื่อความรวดเร็วว่องไวและดูดี เราต้องใช้ Texture !

.

.

.

.

เราหาลายลูกไม้ที่คิดว่าจะเหมาะมา (ขอโทษที่ไม่ได้เอามาโชว์เนื่องจากลบทิ้งไปแล้ว)

ซึ่งลายพวกนี้หาได้ไม่ยากเอาชื่อไปเซิจในกููเกิ้ลเลย หรือถ้าอยากได้ลายพื้นผิวต่างๆมาทำ ให้พิมพ์คำว่า ” Texture ”

แล้วจะมีพื้นผิวมากมายจาก 3 โลกมาให้คุณเลือกใช้

พอได้ลูกไม้ที่ชอบแล้วก็วางไว้ตำแหน่งเดียวกันกับผ้าใส แล้วใช้คำสั่ง Ctrl+Alt+G ลงไปเลย!

(มันก็จะไปกรอบอยู่ในเลเยอร์ผ้าใส โดยไม่เลยออกมา) แต่ว่า ลายมันอาจจะแข็งๆ สี่อาจจะไม่ใช่

ตรงนี้แหละที่จะต้องใช้ความมหัศจรรย์ของ โฟโตช็อปคือ วิธีปรับ ” Layer Style “

.

.

เห็นกันง่ายๆคือ เลเยอร์สามัญของมันคือ Normal ลองกดลงมาจะเห็นว่ามีให้เืลือกมากมายซึ่งโหมดต่างๆให้ผลต่างกัน

เราไม่มีโหมดของเลเยอร์ที่ตายตัว ปกติจะไล่จิ้มมั่วเอา อันไหนเหมาะก็เอาอันนี้ อาจจะมีการปรับสีให้เข้ากับพื้นวัตถุเพิ่ม

แล้วก็ปรับลด Opacity กับ Flow ให้เกิดความพอดี

.

.

.

.

จากนั้นก็ใช้วิธีนี้ลงแสงลงเงาทั้งภาพต่อไปจนเสร็จ!!

.

แนะนำ* บางทีทำไปเรื่อยๆจะเริ่มเห็นว่า เห้ย เราอยากลบเส้นจุดนู้นจุดนี้ วาดเบี้ยวมั่ง

ไม่อยากเอาแล้วมั่ง อะไรแล้วแต่ ให้สร้างเลเยอร์ไว้เหนือเลเยอร์ดินสอ แล้วแก้ทับไปเลย

(แนะันำว่าบางส่วนเท่านั้นนะ ถ้าทับมากไป มันจะกลายเป็นลงสีสไตล์ทับเ้ส้นแทน)

อยากเช่นเวลาเราเพิ่งมาเห็นว่าเราวาดตาเบี้ยว มงกุฎเฉไรงี้ เราก็ขึ้นเลเยอร์บนสุดแล้วแต้มทับบางจุดไปเลย

จะไวกว่ามานั่งลบเส้นดินสอแล้วเติมใหม่นะจ๊ะ

.

.

.

ตบท้ายที่การแต่งภาพ *.*

บางทีเราลงสีไปจนเสร็จแล้ว แต่เราอยากจะเปลี่ยนโทนสีหรืออยากคลุมสีให้อมม่วงมากขึ้น

ให้ทำการรวมเลเยอร์ทั้งหมดเป็นภาพเดียวก่อน แล้วกด Ctrl + B จะขึ้นคำสั่ง Color Balance ซึ่งพอเราลองปรับสีดู

ทั้งภาพจะเปลี่ยนไปตามโทนสีนั้นๆที่เราปรับ ซึ่งช่วยในการคลุมโทนสีได้ค่อนข้างดี

ตัวอย่างของภาพที่ทำการคลุมสีเป็นโทนม่วงด้วย Color Balance แล้ว

.

.

.

.

ใส่เงาที่พื้นเพิ่มเสียหน่อย เพื่อความกิ๊ปเก๋ยูเรก้า

.

.

.

.

จริงๆแล้วทั้งหมดก็เกือบจะเสร็จแต่เพียงเท่านี้ แต่เราอยากจะใส่ตัวหนังสือด้วย ต้องมานั่งใส่กันหน่อย >_<

(จะดูดี + เสร็จขึ้นอีก )

.

.

.

.

แนะนำแบบขั้นยิ่งยวด **** ขั้นตอนนี้สำคัญที่สุดใน 3 โลก (อีกแล้ว) การใส่ตัวหนังสือ ไม่ใช่่ว่าอยากจะใส่อะไรก็ใส่ เพราะมันอาจจะทำให้งานสวยๆของเราเละได้ในทันตา O_O

.

.

ยกตัวอย่างง่ายๆ เอาโลโก้ เมียงู ไปแปะบนการ์ตูน มารูโกะ … เชื่อว่าทุกคนไม่ทำอะไรอุบาทว์ขนาดนั้น แต่ที่ยกให้ฟังก็เพื่อความชัดเจนต่อการจินตนาการ…

.

.

ควรให้เวลากับการเลือกตัวหนังสือหน่อย ว่ามันเหมาะกับภาพเราหรือยัง ถ้าภาพน่ารัก ก็ควรใช้ตัวหนังสือกลมๆดูสนุกๆ ถ้าแนวทางการ ก็ควรใช้ตัวหนังสือที่มันดูเป็นระเบียบและแข็งแรง ตัวหนังสือพวกนี้ ทำให้งานเราสวยขึ้น แต่ในทางกลับกันก็เหมือนดาบ 2 คม ทำงานเราพังได้ทันตา ถ้าใช้ฟอนท์ที่ไม่เข้ากัน

.

.

พอใส่จนเสร็จก็ใช้มุขในเอนทรี่แรกที่เคยสอน! เบลอภาพเล็กน้อยเพื่อความดูดี !!

.

.

.

.

เสร็จแล้วจ้าาาาาาาาาาาาาาา!!!! *กางแขนรับชัยชนะ

สวยใสไร้ที่ติได้ใน 2 ชม. ไปลองดูกันนะจ๊ะ !

.

.

.

นุ้งมิลพาเพลิน เดือน เม.ย. 55

.

.

JSON Encode และ Decode ใน Flash Builder 4.6 by

30
Apr
0

สืบเนื่องจาก บทความนี้ ผมต้องการที่จะส่งข้อมูลจาก php มายัง flex ในรูปแบบ JSON แต่ว่าในกระทู้นี้จำเป็นต้องหาไฟล์ corelib.swc หรือ as3corelib.swc แล้ว import เข้ามาช่วยทำการ encode และ decode ข้อมูลที่ส่งมาจากไฟล์ php แต่สำหรับ Flash Builder 4.6 ที่ผมใช้อยู่นั้น ผมก็ได้ลองทำตามกระทู้นี้ทุกขั้นตอน แต่ก็ยังเกิด error message ตามนี้

1120: Access of undefined property JSON.

Can not resolve a multiname reference unambiguously. JSON (from C:\Program Files\Adobe\Adobe Flash Builder 4.6\sdks\4.6.0\frameworks\libs\player\11.1\playerglobal.swc(JSON, Walker)) and com.adobe.serialization.json:JSON (from C:\Users\shippo\Downloads\corelib.swc(com.adobe.serialization.json:JSON)) are available.

ทำให้ทราบว่า class JSON มันดันซ้ำกันระหว่างไฟล์ playerglobal.swc (ซึ่งมีมากับ Flash Builder 4.6) และ corelib.swc มันจึงรันไม่ได้ซักที ก็พยายามเสิร์ชหาใน Google จนได้ความว่าใน Flash Builder 4.6 นั้น การที่จะ Encode หรือ Decode ข้อมูลที่มาในรูปแบบ JSON สามารถทำเลยโดย

1. การ decode JSON

var aData:* = JSON.parse(e.result as String);

จากตัวอย่างข้างต้นเป็นการ decode JSON ใน Flash Builder 4.6 แทนการใช้ JSON.decode
2. การ encode JSON

var objStr:String = JSON.stringify( {name:”Todd Anderson”, company:”Infrared5″, phone:15558576309}, deflate );

จากตัวอย่างข้างต้นเป็นการ encode JSON ใน Flash Builder 4.6 แทนการใช้ JSON.encode
ซึ่งทั้ง JSON.parse และ JSON.stringify เป็นเมธอดที่มีอยู่แล้วในไฟล์ playerglobal.swc หากต้องการเพียงแค่ encode และ decode ข้อมูลรูปแบบ JSON เราไม่จำเป็นต้องใช้ corelib.swc หรือ as3corelib.swc ก็ได้

break และ continue ในลูป for by

30
Apr
0

วิธีการใช้เจ้าสองตัวเนี๊ยะ จะใช้ทีต้องไป google ที เฮ้อ ขอเอามาไว้ตรงนี้เลยละกัน เผื่อคนที่ยังไม่รู้ด้วยนะ


break กับ continue ใน for ได้ด้วยนะเธอว์ นอกจากที่เราเห็นใช้กันใน switch case แล้ว


มาดูกันว่าใช้งานยังไง


เริ่มต้นด้วยการใช้ break ในลูป for ก่อนเลย

for(var i:int=1; i<23; i+=4){
if(i==13){
break;
}
trace(i);
}

ค่า output ที่ออกมาจะเป็น 1 5 9 แล้วไม่มีอะไรออกมาอีกแล้ว
เนื่องจากการใช้ break จะทำให้เราหลุดออกจากลูป for นี้ไปเลย


อ่ะ มาดู continue ในลูป for กันบ้าง

for(var i:int=1; i<23; i+=4){
if(i==13){
continue;
}
trace(i);
}

ค่า output จะออกมาเป็น 1 5 9 17 21
เนื่องจากการใช้ continue จะทำให้ข้ามบรรทัด trace(i); กระโดดขึ้นไปวนลูป for อีกที

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