편도 편집기 개발 withPixiJS 회고

개요

편직물을 제작할 때 사용하는 편직도를 제공하는 서비스편도 편집기 Amimo를 제공할 수 있을까요?그 개발 과정에서 했던 일을 되돌아보다.평소처럼 유창하게 쓰려고 하는데 괜찮으면 차 몇 분만 같이 마셔주세요🍵 개발 과정에서 배운 것, 눈에 띄는 것은 조금만 되돌아보면 쉽게 잊혀지지 않는다.

이른바 편직도

몰라도 읽기에 지장이 없는 편직물 같은 레시피를 어떻게 엮어야 작품을 만들 수 있는지 간단히 설명한다.예를 들어 이쪽은어 잡채 레시피이라면 로고 같은 물건이나 개폐할 때 사용하는 아이콘 같은 도형이 바로 그것이다.

Input? Drag&Drop?

처음에 고민했던 것은 편집법이었다.예를 들어 패턴이 중복될 것으로 예측할 수 있는 원형이라면 1.원을 몇 바퀴 겹치다.어떤 편법을 3으로 만듭니까?input 입력으로 몇 번 반복해서 한꺼번에 도형 출력의 형식을 고려하고 있습니다.
다만 이 의외로 자동 설정이 어렵고 원형 이외에는 같은 방법을 사용하기 어려워 설치를 고려하는 단계에서는 어려울 수 있다.거기서 우연히 잡담을 하며 선배 겸 친구에게 이 말을 했다가 "끌고 가는 거 아니죠~"라는 댓글을 얻었는데, 아 그런 방법도 있구나!뭐가 열렸어?왜 머릿속에 떠오르지 않았을까? 지금 생각해보면 좀 신기한데, 혼자 하다 보면 편파적인 생각이 들 수도 있다.역시 자신 이외의 사람과 함께 개발하면 효율이 배나 높아 즐겁다.
그림을 작성하는 숫자가 흐리멍덩하기 때문에 하나하나 끌어다 놓으면 너무 번잡하지 않을까요? 중간 절차를 취한다(낮잠 63;)그림 소프트웨어처럼 그려진 곳에 뜨개질 기호를 배치하는 지금의 형식은 마음을 가라앉힌다.

Canvas? SVG? HTML?

다음으로 나는 그림의 바탕색을 무엇으로 만들까 고민했다.편성도에는 노력만 하면 손글씨로 SVG를 쓸 수 있는 기호가 많고 SVG 확대 등도 순조롭게 진행될 수 있어 일단 SVG로 설치를 시작했다.
격자 등의 그리기 자체가 SVG라면 매우 간단하지만 여러 가지 요소에서 다양한 활동을 얻거나 mousemove 등 활동에 따라 많은 도형을 다시 그려야 한다. 그 결과 처리가 JS로 보내는 것이 가장 좋으므로 SVG를 사용하지 말아야 한다.Canvas 기반 라이브러리를 사용하기로 결정했습니다.
한편, 뜨개질 기호를 선택한 버튼은 그림의 내용이 고정되고 내용도 복잡하지 않기 때문에 SVG로 준비했다.

PixiJS를 처음 쓰는 느낌.

이름은 흔한 인상을 주기 때문에 이미 널리 사용되었을 거라고 생각하지만 일본어의 정보는 생각보다 적다고 생각합니다.공식 참고서도 그렇게 언어설명이 풍부하다는 인상이 없기 때문에 공식 견본집을 덧붙여볼 수도 있다.
하지만 특수화된 그래픽이라 SVG를 직접 관철하기보다는 압도적으로 좋은 선택이라고 생각한다.예를 들어 다각형을 그리거나 타원을 그리거나 지정된 활동의 판단 구역, 로컬/전역 좌표 등 도형을 그릴 때 불리한 인터페이스를 많이 준비했다시각적 조작이 많은 것을 만들 때 이런 프로그램 라이브러리가 있으면 개발 체험에 큰 변화가 생길 수 있다.

PixiJS에 빠진 이벤트.

이벤트 매개 변수 대상의 인용을 자주 사용합니다.InteractionEvent 등 각 대상의 값을 일시적으로 저장하면 예를 들어 도형의 이동 적용 전과 적당한 후치의 변화가 0으로 바뀌어 아무 일도 일어나지 않는다디버그에 사용되는 콘솔입니다.log target이라도 null. 그런데 왠지 화면에 처리가 되어 가볍게 늪에 빠졌다.가치 자체를 처리하는 것이 좋다.

PixiJS에 빠진 pivot

pivt는 그림 등을 회전시키는 기준점입니다.기본값은 왼쪽 상단이지만 이번에는 중심 고정 형태로 회전하려고 하니 pivot 중심으로 변경할 필요가 있다.개념 자체가 어렵지 않기 때문에 여기서 시간이 걸릴 줄은 몰랐는데 도형이 이상한 위치로 이동할 줄이야.
다양한 결과와 손 옆에 있는 테스트 결과를 조사한 결과 pivt를 바꾸면 도형의 중심부는 원래 로컬 좌표(0,0)에 존재하는 왼쪽 윗부분으로 이동한 다음 회전한다.따라서 해결 방법으로 처음부터 로컬 좌표(0,0)에서 중심에 도형을 그렸는지, 아니면 처음부터 pivt를 중심으로 설정했는지도 그 위치를 고려했는지, 기준점을 고려한 후 회전 후 왼쪽 상단의 좌표를 계산해서 설정했는지 생각해 봤다.나는 후자를 선택했다.(아래 상세 설명)

재학습 행렬

편직도는 상당히 심오해서 그물에만 편직 기호를 놓으면 기본적으로 사용할 수 없다.두 번째 부분을 첫 번째 부분으로 정리한 편목은 반드시 중간에 있어야 한다. 사각형의 편직도라도 가장자리에 레이스 같은 장식을 더하면 직선 이외의 배치가 필요하다.
따라서 이동, 회전, 자유 변형 등 이른바 회화 도구의 포위함에 해당하는 기능이 필요하다.이동은 간단하지만 회전을 시작할 때부터 천천히 삼각함수 행렬이 필요하다.수학을 별로 좋아하지 않기 때문에 어디까지 해야 할까... 그런 느낌이 들었지만 어느 날 트위터 타임라인에서 만났다.
기적적으로 하고 싶은 일이고 설명이 쉽고 말투도 좋고 자기도 하고 싶어서 아까 쓴 것처럼 회전한 좌표를 계산해 짜임새를 배치하는 방식을 사용했다.

Canvas의 드로잉 모델

이것은 화포가 있는 것 같습니다. PixiJS의 getImage 에서 화포의 내용을 그림으로 출력할 때, 렌더링과 같은 활동에서 실행해야 합니다.

  getImage(){
    this.app.render(); // これがないと真っ黒になるよ
    const image = this.app.renderer.plugins.extract.base64(null,'image/jpeg');
    return image;
  }

이 Stackoverflow 정답.와 Canvas 그리기 프로세스 실행에는 상세한 설명이 있지만 캔버스는 기본적으로 두 개의 버퍼 메모리가 있는데 이를 교환함으로써 고속 묘사를 실현했다.따라서 블렌드할 때마다 드로잉 컨텐트가 지워지고 깜깜해지므로 드로잉 컨텐트를 얻으려면 렌더링과 동일한 범위로 불러야 합니다.

PixiJS에 빠진 컨테이너

초기의 실시는 기록이 없기 때문에 명확하게 설명할 수 없다. 최초에는 화포의 원천PIXI.Application(또는 아래stage)를 참조하여 제작PIXI.Container하고 격자를 그려 사건을 얻었다.이때 맥의 윈윈과 열정은 개발자 도구로 성능을 검사했는데 페이지만 열었는데 CPU가 50% 정도를 차지했다.
다양한 조사·개·하역 용기를 알아도 행동을 바꾸지 않고 CPU가 10% 내외로 안정될 것이라는 점에서 당분간PIXI.Container 하지 않기로 했다.이 직위 상관은 있지만 우선 시행하고 싶어 제대로 따라잡지 못했다.

총결산

게임 좌표인 만큼 기본적으로 그래픽 구성을 만드는 느낌, 애니메이션 라이브러리의 기본적인 아이디어 같은 것에 가깝게 다가갈 수 있어 픽시JS를 사용하니 정말 좋다.캔버스(WebGL)는 과거에는 좋은 추억이 없어 쉽게 경원할 수 있었지만, 이번 개발은 밋밋함에 가까워졌다는 인상을 주기 때문에 앞으로 필요에 따라 활용할 것이라는 예감이 든다.지금까지 시각적 효과를 만드는 데 수학적 요소를 별로 사용하지 않은 것도 좋은 경험이었기 때문이다.
마지막으로, 사실 나 자신은 훌륭한 편성도에 따라 편성했을 뿐, 스스로 편성도를 만드는 기술이 전혀 없다. 다른 사람을 도울 수 있다면 나는 매우 기쁠 것이다.솔직히 아직 못한 게 많은데 완전 베타 버전이라 시기를 봤는데 계속 했으면 좋겠다.