고바야시 씨의 메이드 드래곤의 이야기 수 표시 생성기를 만들었습니다.

Web(JavaScript)판 할 수 있었습니다!!

배경

고바야시 산치의 메이드 드래곤 재미 있군요.

fhána의 MV에 매료되어보기 시작했지만 곧 빠졌습니다.

애니메이션 속에서 특히 내가 좋아하는 장면 중 하나가 이야기 수 표시입니다.

흔들흔들 흔들린 토르가 불길을 토해 제목을 표시시킨다는 아이디어와 느슨함에 무심코 감동해 버렸습니다.

이것은 뭔가 GIF가 나올 것이라고 생각했지만 기다릴 수 없기 때문에 만들었습니다.

사용법

이 스크립트는 imagemagick이 필요합니다. 내 환경은 우분투이므로 들어 있었지만 들어 있지 않은 분은 적절히 설치하십시오.

GitHub 의 프로젝트를 clone 합니다.

이런 1280 x 720 로 배경이 #9dc26d な(↓) 이미지를 만들고 프로젝트 루트에 source.png 로 놓습니다. 김프 등에서는 프레임의 끝 ( frames/043.png )을 레이어로 열면 위치 조정이 쉽습니다.

./convert.sh 를 실행하고 잠시 후 maidragon.gif 가 있다고 생각합니다.

해설

먼저 대량의 이미지를 처리하는 임시 폴더를 만듭니다.

이 기사 을 원 팩 참고로 했습니다.

모든 프레임은 토르와 로고 이외의 부분이 (대략)투명하게 되어 있으므로, source.png 위에 거듭하면 좋은 느낌이 됩니다. … ①

예: 마지막 프레임



이렇게 하여 모든 프레임을 겹쳐 마지막으로 gif로 변환하고 있는 것입니다. … ②

코드로 하면 이렇게 됩니다.

for f in $(ls frames); do
  echo "converting ${f}..."
  convert ./source.png "./frames/${f}" -composite "${tempDir}/${f}" # ①
done

echo "building gif file..."
convert -layers optimize -delay 10 "${tempDir}/*.png" $output # ②

조속히 LGTM을 만들어 보았습니다.