วิธีการลดความกระตุกของภาพเมื่อมีการ render iso จำนวนมาก by

30
Jun
0

โดยปกติแล้วเวลาที่เรามีการปรับเปลี่ยนตำแหน่งของ object (ในที่นี้คือ isoSprite) ใน isoScene ของเรา เราก็ต้องทำการ สั่ง render() isoScene นั้นใหม่เพิ่อที่จะจัดเรียง z index หรือความลึกตื้นของ object ว่าชิ้นไหนควรอยู่หน้าหลัง แต่เมื่อเราได้ทำแผนที่ขนาดใหญ่ซึ่งมีจำนวน object ปริมาณมากๆ สิ่งที่ตามมาคือ Frame per sec ของเราจะตกลงอย่างมาก (หรือง่ายๆคือเกมกระตุกมากนั่นเอง) ซึ่งวันนี้จะมาเสนอวิธีแก้ไขปัญหาดังกล่าว

วิธีแก้ที่ทำแล้วใช้ได้ผลคือ จำกัด object แค่เฉพาะส่วนที่ต้องการแสดงผลมาเพื่อไว้ใช้ในการ render เท่านั้น ปกติแล้วเราจะใช้ฟังก์ชั่น render() ที่ isoScene ของเราเลยเพื่อ render แต่เราจะย้ายมาใช้ฟังก์ชั่นที่มีการปรับเปลี่ยน object ใน scene ก่อน โดยโค็ดที่เขียนเป็นตัวอย่างจากเกมที่มีตัวละครที่ต้องเดินไปเรื่อยๆ ซึ่งระหว่างเดินตัวละครจะผ่านช่องต่างๆที่มี object เรียงราย ทำให้เราต้อง render เรื่อยๆ ตอนที่ตัวละครขยับ มีหน้าตาฟังก์ชั่นดังนี้


public function limitedIsoRender(scene:IsoScene,limit:int=10):void{ //รับ isoScene ที่จะจำกัด object(เขียนไว้เผื่ออนาคตมีการ render หลายๆ scene) และ limit คือระยะของช่องการมองเห็นของผู้ใช้
for(var i:int=0;i<aObjectData.length;i++){
for(var j:int=0;j<aObjectData[i].length;j++){ //วนลูปตามจำนวนช่องทั้งหมดเพื่อนำมาเช็คในบรรทัดถัดไป
if(aIsoMap[i][j]!=null){
if(aIsoMap[i][j].sprite!=null){
if(scene.contains(aIsoMap[i][j].sprite)){
scene.removeChild(aIsoMap[i][j].sprite); //ถ้าอยู่นอกระยะการมองเห็นเราก็จะนำมันออกจาก scene ก่อนเพื่อลดอาการกระตุกในการ render
}
}
}
}
else{
if(aIsoMap[i][j]!=null){
if(aIsoMap[i][j].sprite!=null){
if(!scene.contains(aIsoMap[i][j].sprite)){
aIsoMap[i][j].sprite.moveTo(CELL_SIZE*(i), CELL_SIZE*(j),0);
aIsoMap[i][j].sprite.setSize(CELL_SIZE,CELL_SIZE,CELL_SIZE);
scene.addChild(aIsoMap[i][j].sprite); //ถ้าอยู่ในระยะการมองเห็นก็จับมาใส่ใน scene เพื่อรอ render
}
}
}
}
}
}
scene.render(); //เมื่อครบลูปแล้วค่อยทำการ render ครับ
}

ซึ่งผลลัพธ์เห็นผลได้อย่างชัดเจนมากครับ

ถ้าเรา render ปกติก็ต้อง render object จำนวนมหาศาลตามรูป ซึ่งกระตุกสุดๆครับ

ถ้าเรา render ปกติก็ต้อง render object จำนวนมหาศาลตามรูป ซึ่งกระตุกสุดๆครับ

(กดเพื่อดูรูปใหญ่) ภาพของเกมที่ใช้การ render ปกติซึ่งกรอบการมองเห็นที่จริงแล้วเป็นเพียงซ้ายบนจอตามกรอบ UI เท่านั้น มี object จำนวนมากที่เกินขอบการมองเห็นแต่ยังมีอยู่เพื่อ render

(กดเพื่อดูรูปใหญ่) ภาพของเกมที่ใช้การ render ปกติซึ่งกรอบการมองเห็นที่จริงแล้วเป็นเพียงซ้ายบนจอตามกรอบ UI เท่านั้น มี object จำนวนมากที่เกินขอบการมองเห็นแต่ยังมีอยู่เพื่อ render

พอผ่านฟังก์ชั่น limitedRender ที่จำกัดการมองเห็นไว้ที่ 10 รอบๆตัวละคร object ใน scene ก็เหลืเพียงร้อยกว่าตัวเท่านั้น ซึ่ง render ได้สบายๆ

พอผ่านฟังก์ชั่น limitedRender ที่จำกัดการมองเห็นไว้ที่ 10 รอบๆตัวละคร object ใน scene ก็เหลืเพียงร้อยกว่าตัวเท่านั้น ซึ่ง render ได้สบายๆ

(กดเพื่อดูรูปใหญ่) จะเห็นได้ว่าเมื่อผ่านฟังก์ชั่นแล้วปริมาณจะไม่มากแล้ว

(กดเพื่อดูรูปใหญ่) จะเห็นได้ว่าเมื่อผ่านฟังก์ชั่นแล้วปริมาณจะไม่มากแล้ว

Enjoy this article?

Consider subscribing to our RSS feed!

ไม่มีความเห็น

ยังไม่มีความเห็น

ใส่ความเห็น

RSS feed for comments on this post

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