Javascript/Canvas - 기존 이미지에서 새 이미지를 만드시겠습니까?

Question

기존 이미지를 가져 와서 "스택"하여 Javascript에서 단일 애셋을 만드는 방법이 있는지 궁금합니다.

http://imgur.com/a/ajkBh

위의 이미지 앨범

는 내가하고 싶은 것을 보여줍니다.

기본적으로 내가 만들고있는 게임의 경우 다른 신체 부위의 수영장에서 드로잉하여 적 NPC 등을 절차 적으로 생성하고 싶습니다. 각 신체 부위에는 통계와 스프라이트 시트가 첨부되어 있으므로 캐릭터가 무작위로 생성 될 때 필요한 모든 이미지를 하나의 애셋에 모두 쌓아서 사용할 수 있습니다.

이렇게 할 방법이 있습니까?

Answer 1

캔버스는 몇 가지 기본 도형, 선 및 칠을 그릴 수있는 매우 기본적인 그리기 API입니다. 배경색으로 채우기 및/또는 전체 캔버스를 지우는 것 외에 기본 캔버스 API 만 사용하여 "스프라이트"나 다른 모든 개체를 겹쳐서 장면을 애니메이션으로 만들 수있는 방법이 없습니다. 이미지를 복사하는 것은 가능하지만 모든 프레임을 지우고 교체해야합니다. 애니메이션을 적용하려면 많은 코드 오버 헤드가 필요합니다.

http://createjs.com 또는 비슷한 "스크린 그래프"유형 프레임 워크를 살펴보아야합니다.이 프레임 워크는 캔버스 위에 위치하여 스프라이트 시트를 쉽게로드하고 이동시킬 수 있습니다. 캔버스의 드로잉, 클리어링, 회전, 애니메이션 등을 수행합니다 (기본적으로 플래시와 비슷합니다).

캔버스에서 단순히 쌓거나 그리는 측면에서 볼 때 context2d.drawImage 메서드를 사용하여 이미지를 가져 와서 캔버스로 직접 복사 할 수는 있지만 원하는 효과를 얻지 못할 수도 있습니다.

Answer 2

기본 쟁점이 기본 그림을 구성하고 그림을 다른 그림과 일치하도록 생각하는 경우 기존 부분에서 애니메이션을 만들 수 있습니다. 당신이 원하는 유휴 (1 호선), 도보 (2 호선), 실행 (라인 3) 프레임의 일정한 번호가 각 행에 을 또한 5

말을 말 :

의 말합시다 당신의 부분은 : 다리, 몸, 팔, 머리.

그런 다음 당신은 그 이미지를 적층하여, 직접 이미지를 구축해야 :

function buildAnimation(legs, body, arms, head) { 
    var resImg = document.createElement('canvas'); 
    resImg.width = legs.width; resImg.height = legs.height; 
    var resCtx = resImg.getContext('2d'); 
    resCtx.drawImage(legs,0,0); 
    resCtx.drawImage(body,0,0); 
    resCtx.drawImage(arms,0,0); 
    resCtx.drawImage(head,0,0); 
    return resImg; 
} 

그때 당신은 애니메이션에 사용되는 이미지와 게임 프레임 워크를 급지 할 수 있습니다.

이 방법의 단점은 매번 같은 부분에 모든 부분의 모든 애니메이션을 그려야한다는 것입니다. 문제 : 1) 예를 들어 머리 부분에 애니메이션을 적용하지 않을 수 있습니다.
2) 다른 문자에 대해 다른 높이가 필요할 수 있습니다. 3) 많은 작업이 필요합니다!

관례에 따라 부품을 어디에서 그려야하는지 알 수 있고 이미지에서 준비 할 부분은 이지만 더 복잡한 방법으로 만들 수 있습니다. 간단한 예 : 이미지 파트의 파일 이름이 높이로 끝나기 때문에 쉽게 을 검색 할 수 있습니다. (bodyMonster48.png, bodyHead12.png, ...

Writing everything would be too much work here, but just a short example : 

)

우리가 animWidth는, 각 ANIM의 크기, 3 anims의 각 다섯 개 프레임을 animHeight이 있다고. 이제 우리는 단지 우리가 모든 곳에서 복사 할 하나의 머리를 가지고 : 당신이 신중하게 모든 것을 사용하여 파일 이름 지정 및 위치 규칙, 변수화 할 것이다,

function buildAnimation(animWidth, animHeight, legs, body, arms, head) { 
    var resImg = document.createElement('canvas'); 
    resImg.width = legs.width; resImg.height = legs.height; 
    var resCtx = resImg.getContext('2d'); 
    resCtx.drawImage(legs,0,0); 
    resCtx.drawImage(body,0,0); 
    resCtx.drawImage(arms,0,0); 
    // copy the head in all frames of all anims 
    for (var animLine=0; animLine<3; animLine++) { // iterate in idle, walk, run 
     for (var animFrame= 0; animFrame<5; animFrame++) { // iterate in images of the animation 
      resCtx.drawImage(head, animFrame*animWidth, animLine*animHeight); 
     } 
    } 
    return resImg; 
} 

변수 높이 조합을 구축 할 수 있도록하고 모든 조합에서 길을 잃지 않도록 도우미 클래스 전체가 필요합니다.