วิธีการลดความกระตุกของภาพเมื่อมีการ render iso จำนวนมาก by Ziah
Jun0
โดยปกติแล้วเวลาที่เรามีการปรับเปลี่ยนตำแหน่งของ 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 ครับ
}
ซึ่งผลลัพธ์เห็นผลได้อย่างชัดเจนมากครับ
Enjoy this article?
Consider subscribing to our RSS feed!
ไม่มีความเห็น
ยังไม่มีความเห็น