อนุบาลงาน ActionSctipt

[กากก่อเกรียนนู้บ]

  ผมไม่ผิดนะ เบิร์ด เค้าขอมา ผมก็จัดให้แค่นั้นเองนะ
เค้าไม่ผิดน้าว์ 

[ไอ้เบิร์ด]

ไม่คิดเลยอ.ก่อจะเป็นคนแบบนี้ 

ใจร้ายที่สุด มาเป๋จู่อนุบาลให้กลายเป็นมัธยม

งั้นเราก็แก้ด้วยการให้จอมพลังสักคนมาแตกหน่ออกไปเลยก็สิ้นเรื่องหนิครับ
เราจะมีตั้งแต่

เตรียมอนุบาล
อนุบาล
ประถม
มัธยมต้น
มัธยมปลาย
ฯลฯ

[กากก่อเกรียนนู้บ]

  โอ้ว ความคิดดีมากๆ ครับ เดี๋ยวให้จอมพลังมาจัดการให้ดีกั่ว

[Ah!]

เป็นอนุบาลที่ซีเรียสที่สุดในโลก 


อนุบาลหมีบัดซบ

[ไอ้เบิร์ด]

ถามอ.ก่อต่ออีกนิดครับ ไหนๆก็เป๋แล้ว

ผมมีmc ตัวนึงเอาทำเป็น hi light ปุ่ม 3 ปุ่ม

แต่ทั้งปุ่ม มีขนาดยาวไม่เท่ากัน เลยต้องการ ให้ตัวmc ที่เป็น hi light ปรับขนาดไปไปตามความยาวแกนx ด้วยอะครับ

b1.onRelease=function(){
 hilight_mc.onEnterFrame = function(){
   this._x += (-6.5-this._x)/8;
    if(Math.abs(this._x - 10) <= 0.5 && Math.abs(this._y - 300) <= 0.5){
    delete this.onEnterFrame;
 }
 };
b2.onRelease=function(){
hilight_mc.onEnterFrame = function(){
   this._x += (-6.5-this._x)/8;
    if(Math.abs(this._x - 10) <= 0.5 && Math.abs(this._y - 300) <= 0.5){
    delete this.onEnterFrame;
 }
 };
b3.onRelease=function(){
hilight_mc.onEnterFrame = function(){
   this._x += (20-this._x)/8;
    if(Math.abs(this._x - 10) <= 0.5 && Math.abs(this._y - 300) <= 0.5){
    delete this.onEnterFrame;
 }
 };

ปุ่ม b1  ยาว 44  
ปุ่ม b2  ยาว 61
ปุ่ม b3  ยาว 30

ตอนผมทำการเขียนให้มันวิ่งมาที่ปุ่มได้แล้ว แต่ยังปรับตัวขนาดmc ที่เป็นhi liight ไม่ได้

[iannnnn]

ใครก็ได้ ช่วยดูอันนี้ให้ทีครับ เผื่อมีประโยชน์สำหรับคนสนใจเรื่อง hitTest
(คือตูดูแล้วรู้สึกว่ามันน่าจะง่ายกว่าเช็กทีละจุดหลายๆ จุดน่ะครับ)

โอ้ว ขอบคุณมากๆ ครับ
เอามาทำเป็นเกมเกิมอะไรเล่นท่าจะสนุกนะ




อ้อ พอดีเคยเจอตัวอย่างในเว็บสอน hitTest เมื่อนานมาแล้วครับ (จำที่มาไม่ได้ละ)
เจอการเช็ก hitTest แบบเช็กตรงขอบของวัตถุด้วยล่ะ แถมเขียนโค้ดไม่ซับซ้อนด้วย
เลยลองทำดู พอเสร็จแล้วมันออกมาเป็นแบบนี้ (ต้องคลิกในแฟลชทีนึงก่อนถึงจะบังคับได้)

http://img3.f0nt.com/flash/d611f6883551e5c2911ca73a8ab1ca4d.swf

อันนี้คือเขียนโค้ดลงใน mc ตัว อ อ่างเลยครับ
รบกวนจานผู้ชำนาญการช่วยแปลงเป็นโค้ดใน Time Line
ให้เข้าใจง่ายๆ และสละสลวยกว่านี้หน่อยครับ
(พอดีตอนนั้นที่ทำก็แก้มั่วๆ เอาจนได้แบบนี้)


ต้นฉบับ CS3
   v
   v

[กากก่อเกรียนนู้บ]

เอาทีละคนเด่อ

ของเบิร์ด
ใช้ _width ครับ ค่อยๆ บวก _width ของตัว hilight จนเท่ากับ _width ของตัวปุ่มครับ 

โค้ด เลือกทั้งหมด ขยายเนื้อหา

this._width += (_root.b1._width-this._width)/8;

อารมณ์ประมาณนี้ครับ

-------------------------

ของพี่แอน..
เอ่อ เหมือนที่ผมแนะไว้ด้านบนเลยน่ะพี่ ผมก็ใช้ getBounds() อะครับ เพราะเช็คแค่ 4 จุดก็เหลือเฟือแล้ว
แล้วก็เอาทั้ง 4 จุดมา if else เช็คด้วย hitTest อีกทีนึงครับ

จากจุดนี้จะได้ if else 4 ครั้งต่อกัน (ที่ต้องทำ 4 ครั้งเพราะมันครอบคลุมกว่าอะครับ)
ค่อยๆ เช็คสลับกันไป แบบนี้ครับ

1. เช็ค xMin กับ yMin
2. เช็ค xMin กับ yMax
3. เช็ค xMax กับ yMin
4. เช็ค xMax กับ yMax

ของพี่แอน ผมว่าเจ๋งดีแฮะ มีหนืดๆ ด้วย 

[ไอ้เบิร์ด]

เอาทีละคนเด่อ

ของเบิร์ด
ใช้ _width ครับ ค่อยๆ บวก _width ของตัว hilight จนเท่ากับ _width ของตัวปุ่มครับ 

โค้ด เลือกทั้งหมด ขยายเนื้อหา

this._width += (_root.b1._width-this._width)/8;

อารมณ์ประมาณนี้ครับ

-------------------------

ทำได้แล้วครับ ขอบคุณอ.ก่อมากครับ 

[ej_sing]

จารย์ก่อ
getBounds() จริงๆแล้ว มันเช็คเป็นแบบ สี่เหลี่ยมใช่ไหมครับ

[iannnnn]

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

[กากก่อเกรียนนู้บ]

โค้ด เลือกทั้งหมด ขยายเนื้อหา

if (this.hitTest(getBounds(_root).xMax, _y, true)) {
_x -= 2;
}
if (this.hitTest(getBounds(_root).xMin, _y, true)) {
_x += 2;
}
if (this.hitTest(_x, getBounds(_root).yMax, true)) {
_y -= 2;
}
if (this.hitTest(_x, getBounds(_root).yMin, true)) {
_y += 2;
}

นี่แหละพี่ ที่เอาไว้เช็ค + ระบุพิกัดล่ะ..

เช็คเป็นสี่เหลี่ยมครับ แต่เป็นสี่เหลี่ยมที่ชิดกับรูปร่างมากที่สุด

[iannnnn]

จานก่อช่วยอธิบายโค้ดตรงนั้นให้หน่อยสิ
ว่ามันแปลว่าอะไร เช็กยังไง ไม่เข้าใจหลักการครับ

[กากก่อเกรียนนู้บ]

ก่อนอธิบายนะครับ ขอบอกนิดนึงว่า
โค้ดที่พี่แอนเขียน.. มีจุดที่ยังไม่ดีอยู่ครับ (คือมันไม่เหมาะสมน่ะครับ)

โค้ดเก่า

โค้ด เลือกทั้งหมด ขยายเนื้อหา

onClipEvent (enterFrame) {
with (_root.player) {
//
// บังคับ
if (Key.isDown(Key.DOWN)) {
_y += 3;
}
if (Key.isDown(Key.UP)) {
_y -= 3;
}
if (Key.isDown(Key.LEFT)) {
_x -= 3;
}
if (Key.isDown(Key.RIGHT)) {
_x += 3;
}
// 
// เช็กขอบ
trace(this._name);
if (this.hitTest(getBounds(_root).xMax, _y, true)) {
_x -= 2;
}
if (this.hitTest(getBounds(_root).xMin, _y, true)) {
_x += 2;
}
if (this.hitTest(_x, getBounds(_root).yMax, true)) {
_y -= 2;
}
if (this.hitTest(_x, getBounds(_root).yMin, true)) {
_y += 2;
}
}
}

ตรงไหน มาดูัโค้ดกันก่อนครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

if (this.hitTest(getBounds(_root).xMax, _y, true)) {
_x -= 2;
}

จากโค้ดเราจะได้ว่า
- this หมายถึงตัว "อ" และ
- คำสั่งที่ไม่ได้ขึ้นต้นด้วย this จะมหายถึง "ลูกบอล"

เพราะ มีการคร่อมด้วย

โค้ด เลือกทั้งหมด ขยายเนื้อหา

with(_root.player){
  //
}
ดังนั้น Property ที่อยู่ข้างใน with และไม่ได้ขึ้นด้วย this หรือ _root จะหมายถึง Property ของ player ทั้งหมด

ส่วนตรงโค้ด แปลเอาตรงๆ เลยนะครับ

ถ้า ตัว "อ" (this) ไปชนกับ
- พิกัด y ของลูกบอล และ พิกัดจุด xMax ของ ลูกบอล บนพิกัดของ _root (เลื่อนไปดูแผนภาพที่ผมทำไว้ก่อนหน้านี้ครับ ว่าพิกัดของ _root หรือ Stage เป็นยังไง)
- โดยดูรูปร่างของวัตถุด้วย (ลูกบอลเป็นวงกลม)
แล้ว.. ให้ลดพิกัด x ของลูกบอลลง 2

โดย xMax เนี่ยคืออะไร?

xMax คือขอบขวาของ ลูกบอล ครับ (ในกรณีนี้) แต่ปกติถ้าไม่ใส่ _root และลุกบอลอยู่ใต้ MovieClip อื่น
มันจะอ้างตำแหน่งจาก MovieClip ตัวนั้นแทนครับ
ดังนั้น ถ้าเราใส่ _root ลงไปด้วย ก็จะเป็นการบอกว่า ให้แปลงพิกัดของลูกบอล เป็นพิกัดที่วัดจาก 0,0 ของ _root ครับ
(ไปดูแผนภาพประกอบนะครับ)

(อันอื่นๆ ก็ใกล้เคียงกัน)

แต่!! (อีกที) เขียนแบบนี้ ไม่ดีครับ (ผมไม่ได้บอกว่า ผิด นะครับ) เพราะ
1. สิ่งที่ควรเขียนบนลูกบอล เอาไปใส่บน "อ"
- แบบนี้ถือว่าเป็นการเขียนสคริปต์ที่ "ผิดจุดประสงค์" ครับผม เพราะฉะนั้น ถ้าจะสั่งลูกบอล ก็ควรเขียนสคริปต์ที่ลูกบอลครับ
- เอาให้ลึกกว่านี้ เค้าจะเรียกว่า การ Delegate งานครับ หรือก็คือ การแจกแจงงานที่ถูกต้อง ให้คนที่รับงานที่ถูกต้อง หรือ The right job to the right man ประมาณนี้ครับ

2. ไม่ควรเขียน getBounds ซ้ำหลายรอบ
- เพราะอะไร? เพราะว่า ในทางทฤษฎีแล้ว ตัวโปรแกรม จะต้องทำการ getBounds ใหม่ทุกครั้งที่มีการเรียก ดังนั้นใน 1 รอบ enterFrame มันจะต้องทำคำสั่ง getBounds ถึง 4 รอบเลยทีเดียว!!
- คำนวณเอาง่ายๆ ครับ ถ้าเล่นสคริปต์นี้ไป 3 วินาที จะทำงาน getBounds ทั้งหมด
3 x 30 x 4 = 270 ครั้ง!!!
และถ้า getBounds 1 คำสั่ง ใช้เวลาทำงาน 10 มิลลิวินาที ก็จะหมายความว่า เราใช้เวลารันสคริปต์นี้
270 x 10 = 2700 มิลลิวินาที!! = 2.7 วินาที นี่นับเฉพาะ getBounds นะครับ ถ้ามีคำสั่งอื่นอีก ก็จะเกิดการ "หน่วง"
- แต่นี่เป็นการเทียบง่ายๆ ครับ จริงๆ อาจทำงานเร็วกว่านี้เยอะมากๆ
- เพราะฉะนั้น อะไรที่คงที่ ก็เรียกครั้งเดียวพอครับ
- ขั้นนี้เรียกว่าการ Optimize ครับ ปรับแต่งโค้ด อะไรที่คิดว่าทำให้โปรแกรมหน่วง ก็พยายามลดลงๆ เป็นต้น


หลังจากปรับโค้ดพี่แอนแล้ว จะได้แบบนี้ครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

onClipEvent(load){
//สั่งใช้ getBounds ที่เดียว ตอนที่โหลดโปรแกรมเสร็จ
var ballBounds = this.getBounds(_root);
}

onClipEvent (enterFrame) {
//
// บังคับ
if (Key.isDown(Key.DOWN)) {
_y += 3;
}
if (Key.isDown(Key.UP)) {
_y -= 3;
}
if (Key.isDown(Key.LEFT)) {
_x -= 3;
}
if (Key.isDown(Key.RIGHT)) {
_x += 3;
}
//   
// เช็กขอบ

//เช็คว่า่ "อ" ชนกับลูกยอบตรงไหน โดยเรียกผ่าน ballBounds วึ่ง ballBounds จะเก็บค่า xMin, xMax, yMin, yMax ทั้งหมด
//และในการเรียก ballBounds แต่ละรอบ จะไม่ได้มีการเรียก getBounds ใหม่ แต่จะเอาค่าที่เก็บไว้มาใช้ only
if (_root.อ.hitTest(ballBounds.xMax, _y, true)) {
trace("xMax");
_x -= 2;
}
if (_root.อ.hitTest(ballBounds.xMin, _y, true)) {
trace("xMin");
_x += 2;
}
if (_root.อ.hitTest(_x, ballBounds.yMax, true)) {
_y -= 2;
}
if (_root.อ.hitTest(_x, ballBounds.yMin, true)) {
_y += 2;
}
}

โค้ดนี้เอาไปใส่ที่ player ที่เดียว ส่วนตัว "อ" ก็ใส่ Instance Name ว่า อ ครับ

[iannnnn]

โอ้ว ละเอียดมาก ขอบคุณครับ
อันนี้คือใส่โค้ดลงใน mc ชื่อ player ใช่ไหมครับ
แล้วถ้าเราจะย้ายโค้ดทั้งหมดลงไปใน timeline ล่ะ

[iannnnn]

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


http://img3.f0nt.com/flash/1aa14702012ea90fe9fbcd948dde4db2.swf


เหมือนว่ามันไม่หนืดเลย


อันนี้อันเก่า

http://img3.f0nt.com/flash/d611f6883551e5c2911ca73a8ab1ca4d.swf