어떻게 이미지를 다양하게 저장할 수 있습니까?

Question

HTML 5 게임을 만들고 있는데 스프라이트 시트 이미지가 있습니다.
캔버스를 사용하여 나중에 그릴 수 있도록 해당 이미지의 일부를 선택하여 변수에 저장할 수 있습니까?

Answer 1

당신이 할 수있는 일은 스프라이트 시트를 캔버스 배열로 '자르는 것'입니다. 이 배열의 i 번째 캔버스에는 스프라이트 시트의 i 번째 이미지가 포함되어 있습니다. 당신은 spritesheet 이미지 + 이미지 애니메이션의 수 getSheet 전화 포함하여 애니메이션 (또는 직접 애니메이션 개체)를 보유보다는 객체에서이 배열을 저장할 수있는이 시점에서

function getSheets(img, imgCount) { 
     var sheets = []; 
     var sheetWidth = img.width/imgCount, sheetHeight=img.height; 
     for (var i=0; i<imgCount; i++) { 
      var newSheet = document.createElement('canvas'); 
      newSheet.width=sheetWidth; newShit.height=sheetHeight; 
      var ctx = newSheet.getContext('2d'); 
      ctx.drawImage(img,i*sheetWidth,0,sheetWidth,sheetHeight,0,0,sheetWidth,sheetHeight); 
      sheets.push(newSheet); 
     } 
     return sheets; 
    } 

:

당신이이 변수에 복사 할 이유는 무엇

myObject.sheets = getSheets(animationImage, 6); 

는

context.drawImage(this.sheets[sheetIndex],x,y);