많은 개체를 만들 때 kineticjs 속도가 느려짐

Question

저는 javascript와 kineticJs를 처음 사용했습니다. 그리고 애니메이션이 느려지는 많은 객체를 만들 때 약간의 문제가 있습니다. .destory()로 해당 객체를 제거했다고 생각했지만 프로젝트가 느려지 기 때문에 그렇게 생각하지 않습니다.

여기 내 코드입니다 :

var framesSegundo = 1000/20; //1000 seconds 20 frames 
var stage, fondo; 
var personaje; 
var intv; 
// calculate the time between one enemy and the oher one 
var SegEneCreado = 0 ; 
var layer = new Kinetic.Layer(); 
//Group with the chrachters 
var grupoPersonajes = new Kinetic.Group({}); 
var grupoEnemigos = new Kinetic.Group({}); 
// screen create 
var stage = new Kinetic.Stage({ 
     container: 'game', 
     width: 960, 
     height: 640 
     }); 

//Level Create 
function creaNivel(){ 
    //creamos un personaje 
    personaje = new Kinetic.Rect({ 
     width: 100, 
     height: 50, 
     x: 10, 
     y: stage.getHeight()/2, 
     fill: 'red'  
    }); 
    grupoPersonajes.add(personaje); 
    layer.add(grupoPersonajes);  
    stage.add(layer); 
} 

//Create the enemies 
function creaEnemigos(){ 
    // we left the time of one second to create enother enemy 
    if (SegEneCreado <= 0){  
     if (aleatorio(0,1000)>970){ 
     SegEneCreado = framesSegundo; 
     //create the enemies 
     var tipoEnemigo = parseInt(aleatorio(0,3)); 
     if (tipoEnemigo == 0){ 
      var enemigo = createEnemy(stage.getWidth() + 10, 0, 'green');    
     } 
     else if (tipoEnemigo == 1){ 
      var enemigo = createEnemy(stage.getWidth() + 10, 0, 'blue');       
     } 
     else if (tipoEnemigo == 2){ 
      var enemigo = createEnemy(stage.getWidth() + 10, 0, 'yellow');    
     } 
     else { 
      var enemigo = createEnemy(stage.getWidth() + 10, 0, 'C48BD9');    
     } 
     enemigo.setY(aleatorio(0,stage.getHeight() - enemigo.getHeight()));   
     grupoEnemigos.add(enemigo); 
     layer.add(grupoEnemigos);  
     stage.add(layer); 
     } 
    } 
    else{ 
     SegEneCreado--; 
    } 
} 

function MoverEnemigos(){ 
    for (i in grupoEnemigos.children){ 
     var asset = grupoEnemigos.children[i]; 
     asset.move(-5,0); 
     if (asset.getX() + asset.getWidth()<0){ 
     console.log(asset.getX() + asset.getWidth()<0); 
     asset.move(0,0);   
     asset.remove(); 
     } 
    } 

} 

//random value 
function aleatorio(inferior, superior){ 
    var posibilidades = superior - inferior; 
    var random = Math.random() * posibilidades; 
    random = Math.floor(random); 
    return inferior + random; 
} 

function createEnemy(x, y, color){ 
    var enemy = new Kinetic.Rect({ 
     width: 100, 
     height: 50, 
     x: x, 
     y:0, 
     fill: color  
    }); 
    return enemy 
} 

creaNivel(); 
intv = setInterval(frameLoop,framesSegundo); 

function frameLoop(){ 
    creaEnemigos(); 
    MoverEnemigos(); 
    stage.draw(); 
} 

내가 너무 포럼에 새로운 해요 ... 나는 천천히 추락에 대한 일을 찾았지만 나는이 다른 문제라고 생각합니다.

감사

Answer 1

asset.remove 캔버스 오프 적을 가지고 있지만, 적의 객체를 파괴하지 않습니다.

적 개체가 사용하는 리소스를 제거하려면 asset.destroy을 사용하십시오.

"재활용"네 원수가 아닌 새로운 적 재현하는 것이 더 효율적이 될 것이다 :이 비활성 상태입니다 나타냅니다 -100 X 속성의 설정 적이 무대 뒤에서 갈 때

을

function MoverEnemigos(){ 
    for (i in grupoEnemigos.children){ 
     var asset = grupoEnemigos.children[i]; 
     if(asset.x()==-100){ 
      // enemy is inactive, do nothing 
     }else{ 
      // enemy is active 
      asset.move(-5,0); 
      if (asset.getX() + asset.getWidth()<0){ 
       // enemy is offstage so make enemy inactive 
       asset.x(-100); 
     } 
    } 
} 

다음 새로운 적을 필요로 할 때 당신은 비활성 적을 발견 할 수 있습니다.

function createEnemy(x, y, color){ 

    // see if there is an inactive enemy to reuse 
    for (i in grupoEnemigos.children){ 
     var asset = grupoEnemigos.children[i]; 
     if(asset.x()==-100){ 
      // this enemy is inactive, reuse it 
      asset.x(x); 
      asset.y(0); 
      asset.fill(color); 

      // this enemy is already in groupoEnemigos so don't add it 
      // Don't add it again in creaEnemigos 
      return(asset); 
     } 
    } 

    // no available inactive enemy so create a new enemy 
    var enemy = new Kinetic.Rect({ 
     width: 100, 
     height: 50, 
     x: x, 
     y:0, 
     fill: color  
     }); 

    // this enemy is not in groupoEnemigos so add it 
    grupoEnemigos.add(enemy); 
    return enemy 
}