A-AA+then

javascript กับหลักการสลับ surface (Layer)

2,051

ขอรบกวน คุณอา GORAGOD หน่อยฮ่ะ
เกี่ยวกับเรื่อง การใช้งาน Front surface และ Back surface

อธิบายก่อนว่าเปรียวต้องการอะไร
1.ตอนนี้เปรียวหาเรื่องใส่ตัวอยู่พอสมควร อยากเขียนเกมให้เล่นกันบนเว็บ โดยใช้ Javascript กับ PHP
2.ทำการวางระบบกลุ่มฟังชั่นการทำงานต่างๆ
3.ตรวจจับการกด Key และหน้าที่ของ Key ต่างๆ ในแต่ละฟังชั่น
4.การแสดงภาพโดยแบ่งเป็น Front surface และ Back surface ซึ่ง Back surface สามารถมีได้มากกว่า 1 surface

 

จับคำถาม
1.ทำยังไงเปรียวถึงจะมี Front surface และ Back surface ได้ มันสร้างยังไง
2.เขียนภาพ + ข้อความต่างๆ ลงใน surface ยังไง
3.นำ Front surface ขึ้นมาแสดงได้ยัง
4.ระหว่างที่แสดง Front surface จะเขียนภาพ + ข้อความต่างๆ ลงใน Back surface ในคราวเดียวเลยได้มั๊ย
5.เมื่อเขียนภาพ + ข้อความต่างๆ ลงใน Back surface แล้วจะสลับ Front surface ไปเป็น Back surface และ Back surfaceไปเป็น Front surface ได้ยังไง
6.หากมี 3 surface แต่ให้สลับการทำงานเฉพาะ surface ที่ 1 กับ 2 แล้ว surface ที่ 3 สั่งให้โหลดข้อมูลขนาดใหญ่รอไว้จนกว่าจะเรียกได้หรือไม่

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

4 ความคิดเห็น

ไม่รู้ว่าเข้าใจถูกหรือเปล่านะครับ หลักการคร่าวๆก็เหมือนกับการสร้างเกมบน application อื่นๆ

1.สามารถสร้าง layer เพื่อเก็บตัวละครแต่ละตัวเก็บไว้ได้ครับ โดยทั่วไปก็ควรต้องโหลดตัวละครรวมถึง Action ต่างๆเก็บไว้ก่อนแหละครับ เนื่องจากในขณะเล่นคงรอโหลดไม่ได้

หลักการก็ไม่มีอะไรครับ แค่สร้าง div หรืออะไรก็ได้แล้วโหลด รูปภาพตัวละครเก็บไว้ในนั้น มีกี่ตัวละครกี่ Action ก็ต้องโหลดเก็บไว้หมดแหละครับ

2.ถ้าโหลดมาหมดมันคงเห็นตัวละครเต็มไปหมด ก็ซ่อนมันซะด้วย disply หรือไม่ก็ย้ายมันออกไปนอกจอก็ได้
3. เวลาแสดงผลก็ย้ายมันมายังตำแหน่งที่ต้องการ แล้วทำให้มันมองเห็น
4. ส่วน Action ต่างๆ ก็ทำให้มันแสดง สลับกันไปทีละ layer เท่านั้น

ยุ่งยากพอดูครับ หากใช้ Javascript เนื่องจากเราต้องจัดการเองในทุกขั้นตอน ปกติแล้วเขาจะใช้ Javascrpt กับเกมส์ ที่ไม่ค่อยซับซ้อนเท่านั้นครับ เช่นพวกเกมหมากกระดาน หรือ พวก เกม Pet ที่มี Effect ไม่ค่อยมาก เกมประเภททีมีตัวละครที่ต้องออกท่าท่าง Javascript จะทำไดไม่ดีเลยครับ เนื่องจากมันจะซับซ้อน นิยมใช้ Flash มากกว่า เนื่องจาก Flash สามารถสร้างตัวละคร พร้อมทั้งจัดการ Action ต่างได้ทีละตัว โดยมองตัวละครเป็น Object แต่ถ้าเป็น Javascript ทำได้ก็จริง แต่คงยุ่งยากมากครับ
1

จาก :

1.สามารถสร้าง layer เพื่อเก็บตัวละครแต่ละตัวเก็บไว้ได้ครับ โดยทั่วไปก็ควรต้องโหลดตัวละครรวมถึง Action ต่างๆเก็บไว้ก่อนแหละครับ เนื่องจากในขณะเล่นคงรอโหลดไม่ได้                                                                                                                                                                 

กรณีที่มี 2 เลเยอร์
คงจะสลับกันมาแสดงทีละเลเยอร์

กรณีที่มีหลายเลเยอร์
แล้วแสดงเป็นชุดๆ ชุด 1 ของ Front surface ชุด 2 ของ Back surface

สมมุติว่า
ชุด 1 ของ Front surface มี 6 เลเยอร์

เลเยอร์ที่ 1 อยู่ล่างสุด เป็น background ระดับ 1
เลเยอร์ที่ 2 อยู่ถัดขึ้นมา เป็น background ระดับ 2
เลเยอร์ที่ 3 อยู่ถัดขึ้นมา เป็น ฉาก ระดับ 1
เลเยอร์ที่ 4 อยู่ถัดขึ้นมา เป็น ฉาก ระดับ 2
เลเยอร์ที่ 5 อยู่ถัดขึ้นมา เป็น เหล่ามอนสเตอร์
เลเยอร์ที่ 6 อยู่บนสุด เป็น ตัวละครที่เราบังคบ

เอา 6 เลเยอร์นี้มาวาดเพื่อแสดงออกทางหน้าจอพร้อมกันเป็นชุดที่ 1 แล้วสลับเอาชุดที่ 2 มาวาด จะเอามันไปรวมไว้ที่ไหน หรือจะจัดการทีละ 6 เลเยอร์ไปเลย

ชุด 2 ของ Back surface มี 6 เลเยอร์
เลเยอร์ที่ 7
อยู่ล่างสุด เป็น background ระดับ 1
เลเยอร์ที่ 8 อยู่ถัดขึ้นมา เป็น background ระดับ 2
เลเยอร์ที่ 9 อยู่ถัดขึ้นมา เป็น ฉาก ระดับ 1
เลเยอร์ที่ 10 อยู่ถัดขึ้นมา เป็น ฉาก ระดับ 2
เลเยอร์ที่ 11 อยู่ถัดขึ้นมา เป็น เหล่ามอนสเตอร์
เลเยอร์ที่ 12 อยู่บนสุด เป็น ตัวละครที่เราบังคบ

- ภาพ
- ฉาก
- Action
- Effect
-
(อาจจะมี)เสียง(ด้วย)

เปรียวว่าจะโหลดเก็บไว้ในตัวแปร เป็นอ็อปเจ็คท์ ในส่วน Header ก่อนที่จะนำมาใส่ในเลเยอร์ฮ่ะ จะได้เรียกใช้ได้ทันที (เปรียวเข้าใจถูกป๊ะ)

2

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

วิธ๊หนึ่งที่อาจจะทำให้งานของเราควบคุมง่ายขึ้น ก็คือการทำให้ ตัวละครแต่ละตัวเป็น object ครับ โดยมี object  หรือ property ของตัวเอง (เหมือน flash) เวลาเรียกใช้ก็จะง่ายกว่า แต่เวลาออกแบบก็จะยากสักนิดนึง
3

วิธ๊หนึ่งที่อาจจะทำให้งานของเราควบคุมง่ายขึ้น ก็คือการทำให้ ตัวละครแต่ละตัวเป็น object ครับ โดยมี object  หรือ property ของตัวเอง (เหมือน flash) เวลาเรียกใช้ก็จะง่ายกว่า แต่เวลาออกแบบก็จะยากสักนิดนึง

นี้แหล่ะฮ่ะที่ต้องการ
และกำลังพยามรวบรวมความเป็นไปได้ดูว่าจะทำยังไงให้โค้ดมันง่าย ลดความซับซ้อนที่ไม่จำเป็น และเป็นรูปแบบของ OOP
คนที่เขาทำเกมใหญ่ๆ นี่คงหัวฟูแย่เลยนะฮ่ะ


4
^