텍스트에서 GIF 애니메이션으로 - React Pet Project Devlog

간단한 텍스트로 스토리보드를 만들면 멋있을 것 같은 생각이 든다.

사용자가 장면을 설명하고 그림을 출력으로 가져오기
본고에서 저는 이 프로젝트에 대한 저의 생각과 구축 과정을 여러분과 공유할 것입니다.
물론, 마지막 결과를 알려줄게!

Spoiler: it didn't end as planned. tl;dr final result

0. 생각

나는 이 생각을 상상하는 것부터 시작한다.먼저 종이와 펜, 그리고 draw.io (위의 첫 번째 개념 중 하나를 볼 수 있습니다) 개요를 쓰십시오.

User defines scenes using simple English:

Scene
Ann as woman to the right
Frame
Ann says "Hello!"

Scene definitions describe actors (decorations) and frames
Actors use preset sprites like tree, man, woman
Frames define actions that the actors perform

Users will be able to share their stories and "like" and modify other's.

생각과 언어가 많든 적든 확실해지면서 발전 계획을 세울 때가 되었다.

Set up - 프로젝트 준비

JSON to images - 필요에 따라 이미지를 만들 수 있는지 테스트합니다.

Images to GIF - 클라이언트에서 GIF를 생성하고 LIB를 시도할 수 있도록 합니다.

Text to JSON - 이 언어를 위한 해상도를 만들어야 합니다.

Backend - 로그인/저장/공유 스트림 필요

Publication

주의: 간결하게 말하자면, 나는 막다른 골목이나 어리석은 실수를 많이 언급하지 않을 것이다. 그러므로 만약 네가 모든 것이 너무 순조롭다고 생각한다면, 그것은 단지 편집 때문일 뿐이다.그 밖에 나는 대량의 코드를 잘라내고 위조 코드 스타일을 사용하여 원본 코드를 단축할 것이다.만약 당신에게 어떤 문제가 있다면, 망설이지 마세요!
가자!

1. 설정

나는 개발 과정을 조직하기 위해git 저장소가 필요하고, 그것을 가속화하기 위한 프레임워크가 필요하다.사용create-react-app 및git init:

npx create-react-app my-app
cd my-app
# [skipped TypeScript adding process]
git init -y
git commit -m "initial"
npm start

중요한 사상: 우리는 우리의 생각을 신속하게 테스트해야 한다!어떤 언어, 프레임워크, 벤처 투자를 사용하는지 만족하고 효과가 있다면, 그것은 사실상 중요하지 않다.

2. JSON - 이미지

이 구조를 기반으로 이미지를 렌더링할 수 있는지 테스트하기 위해 간단한 JSON을 정의합니다.
JSON은 다음과 같이 설명해야 합니다.

sprites - 배우와 장신구의 이미지 URL

scenes - 배우와 장식품을 포함하고 포지셔닝해야 한다

및 frames - "왼쪽으로 이동"과 같은 동작을 포함해야 합니다.

({
  sprites: { name: 'http://sprite.url' },
  scenes:
    // scene descriptions
    { scene_ONE:
        { entries:
            /* entries with their sprites and position */
            { Ann: { sprite: 'woman'
                   , position: { /* ... */ }
                   }
            }
        },
    },
  frames:
    [ { scene_name: 'scene_ONE'
      , actions: [
          { target: 'Ann'
          , action: 'move'
          , value: {x, y}
          }
        ]
      }
    , // ...other frames
    ]
})

배우에 대해 나는 세 가지 예비 정령을 정의했다. tree, woman, man, 그리고 관련 이미지를 프로젝트에 추가했다.
-
이제 모든 프레임에 대해 모든 동작을 수행합니다(이동과 대화).

// for each frame
const computedFrames = frames.map(frame => {
  // clone entries
  const entries = _.merge({}, frame.scene.entries);
  // perform actions on the target entry
  frame.actions.forEach(action => {
    const entry = entries[action.target];

    if (action.type == 'talk') {
      entry.says = action.value;
    }

    if (action.type == 'move') {
      entry.position = action.value;
    }
  });

  return { entries };
});

-
입문 정령을 그리는 데 우리는 반드시 사용할 것이다canvas:

// draw the entries
const images = computedFrames.map(frame => {
  const canvas = document.create('canvas');
  const ctx = canvas.getContext('2d');
  frame.entries.forEach(entry => {
    ctx.drawImage(entry.sprite); // for sprites
    ctx.fillText(entry.says);    // for speech
  });
  // return rendered frame URL
  return URL.createObjectURL(canvas.toBlob());
})

Canvas는 내용을 dataURL 또는 a blob 로 내보낼 수 있습니다. 생성할 필요가 있습니다.gif 잠시만요!
^ 실제로 코드는 약간 비동기적이다. toBlob 비동기적이다. 모든 이미지는 ctx.drawImage 전에 다운로드해야 한다. 나는 Promise 체인을 사용하여 이 문제를 처리한다.
이 점에서 이미지를 예상대로 렌더링할 수 있음을 증명했습니다.

첫 번째 렌더링!만세!🙌
그래서 우리는 계속할 수 있다.

3. GIF 이미지

이것은 사용 가능한 도서관에 대해 약간의 연구를 진행해야 한다.나는 마침내 gif.js를 얻었다.에이, 그것은 이미 약 1년 동안 갱신되지 않았지만, 그것은 아주 잘했다(demo.
생성.gif 파일 - 모든 이미지를 gif.js 생성기에 전송한 다음 render() 호출해야 합니다.

const gif = new GIF({ /* GIF settings */ });

images.forEach(imgUrl => {
  const img = new Image();
  img.src = imgUrl;
  gif.addFrame(img, { delay: 1000 });
});

gif.on('finished', blob => {
  // Display the blob
  updateGifURL(URL.createObjectURL(blob));
});

gif.render();

대단합니다. 지금 우리는 생성하고 다운로드할 수 있습니다.gif:

A와 행동!

4. JSON 텍스트

나는 사용자가 간단한 영어로 명령을 입력하기를 바란다.이것은 나에게 매우 어렵다. 왜냐하면 나는 심지어 어디서부터 시작해야 할지 모르기 때문이다.

나만의 해상도를 만듭니까?

input.split(/\n/) 그리고 정규 표현식을 사용합니까?

영어 문법 분석기를 사용합니까?

다행히도 사방을 수색한 후에 나는 페그를 아는 것을 소개하는 이 글을 발견했다.js(
감사합니다.
PEG.js는 사용하기 쉬운 해상도 생성기입니다.

정규 표현식과 유사한 규칙 정의 언어 사용

개인fresh new 해상도

를 사용하여 .js 파일을 생성합니다

이 해상도를 삽입하고 텍스트를 실행합니다

예를 들어, 다음은 내 규칙의 발췌문입니다. 해석 Scenes:

이러한 규칙은 이 텍스트를 확인합니다.

Scene
with Tree as tree at { y: 160 scale: 1.5 }

이 JSON의 경우:

{
    "type": "scene",
    "values": [
      {
        "type": "object",
        "objectName": "Tree",
        "sprite": "tree",
        "state": {
            "y": 160,
            "scale": 1.5
        }
      }
    ]
}

몇 시간 후에 페그와 놀아라.jsonline version 저는 최종적으로 언어와 출력 구조를 얻었습니다. 저는 그것을 잘 사용할 수 있습니다.
응용 프로그램에 삽입한 후 다음과 같은 정보를 얻었습니다.

봐라, 그들이 말하는 것과 듣는 것
방주1: 이 점에서 저는 모호한 포지셔닝Ann to the right을 포기하고 PEG를 업데이트했습니다.js는 js와 유사한 대상 표현법을 정의합니다: Ann at { x: 100 y: 100 }.
참고 2: 또한 텍스트가 업데이트될 때마다 GIF를 다시 생성할 수 없습니다.그것은 너무 무겁다.키를 누를 때마다 100ms UI 스레드가 막힙니다.
RxJS 회사😍 구원하러 왔다!debounce 입력 텍스트 업데이트 및 간단한 timer, 프레임 전환imgRef.current.src = next_frame에 매핑하여 애니메이션을 시뮬레이션합니다.
리얼사용자가'다운로드'단추를 눌렀을 때만gif를 생성합니다!

5, 백엔드

이 애완동물 프로젝트는 주말의 개발 시간을 썼기 때문에 나는 백엔드와 관련된 모든 임무를 포기하고 당분간 정적 웹 응용 프로그램을 계속 사용해야 한다.

6. 출판

나는 GitHub Pages 특성을 사용하여 이 프로젝트를 배치하고 공유한다.
GitHub 페이지는 도메인 http://username.github.io/repository 에서 웹 사이트에 서비스를 제공합니다.나중에 백엔드를 추가할 수 있기 때문에 - 현재 공유하고 있는 모든 링크가 앞으로도 유효하도록 도메인을 구매해야 합니다.
이름을 고르는 것은 나에게 늘 어렵다.한 시간의 발버둥 끝에 나는 마침내 얻었다.

가봐framd.cc!🙂

오트로

줄거리 전환: 프로젝트를 배치하고 친구와 공유한 후에 나는 정령이 부족하다는 것을 발견했다!사람들은 남자, 여자, 나무의 이미지만으로 많은 이야기를 할 수 없다는 사실이 증명되었다.그래서 이모티콘을 요정으로 하기로 했어요.👻 . 지금 너 이런 거 많아.🌳👩‍🚀🌍 네!

너의 이야기를 정확하게 이야기하다 끝내다

그렇습니다!읽어주셔서 감사합니다!🙏
무슨 문제 있어요?그것들을 평론 구역에 붙여라, 나는 기꺼이 대답할 것이다.
만약 당신이 읽는 것을 좋아한다면, 이 문장과 이 트윗을 고려해 보세요❤️

Kos Palchyk 회사
@kddsky 회사

"텍스트에서 GIF 애니메이션까지-React Pet Project Devlog"구상부터 제작까지 단 4일 6분
18:2020년 6월 17일 오후 8시
일.
일.
이것은 매우 도움이 된다!
감사합니다.
P, S: 몇 가지 gif 예:
dev.to/kosich/text-to…