MEGAMOJI
1.0.0
http://zk-phi.github.io/megamoji
새로운 아이디어 나 새로운 시끄러운 애니메이션을 구현하면 홍보하십시오!
NPM 설치 NPM 실행 시작
서버가 시작됩니다. https : // localhost : 8080에서 확인할 수 있습니다.
소스를 땜질하면 즉시 반사됩니다.
node-canvas 패키지가 ARM64를 지원하지 않기 때문일 수 있습니다.
x86_64와 같은 노드를 삽입 해보십시오.
asdf 로 설치하는 예 :
아치 -x86_64 ASDF 설치 nodejs <버전>
NPM 실행 빌드
./dist 는 당신이 그것을 만들 때 만들어집니다. 그대로 정적 사이트로 배포 할 수 있습니다.
NPM 런 린트
코딩 스타일의 흔들림 및 기타 변화를 자동으로 감지합니다.
NPM 실행 수정
대부분은 자동으로 수정 될 수 있습니다.
풀 리크를 보내기 전에 실행하는 것이 좋습니다.
GitHub 동작을 사용하여 자동으로 빌드 및 보풀되도록 설계되었습니다.
구축 할 때 GitHub 비밀로 ROLLBAR_TOKEN 또는 GA4_TOKEN 설정하여 오류 수집 및 사용자 분석을 허용하십시오.
src/animations/ … 개별 애니메이션 구현이 포함되어 있습니다components/ ... UI 부품이 포함되어 있습니다constants/ … 상수가 포함됩니다effects/ ... 효과 구현이 포함되어 있습니다filters/ ... 필터 구현이 포함되어 있습니다fonts/ … 웹 글꼴 포함parts/ ... "파트에서 선택"에 사용 된 부품의 이미지가 포함되어 있습니다.samples/ ... 자습서에 사용 된 샘플이 포함되어 있습니다shaders/ … WebGL 효과에 사용할 조각 셰이더가 포함되어 있습니다.utils/ … 유용한 기능이 포함되어 있습니다webgleffects/ … WebGL 효과의 구현이 포함되어 있습니다megamoji.js … 진입 점types.js … 효과와 같은 유형 정의를 포함합니다static/ … HTML 등resources/ ... 문서에 사용 된 이미지와 같이 앱과 관련이없는 기타 항목이 있습니다. src/constants/filters.js 에서 목록을 찾을 수 있습니다.
필터 엔티티는 일회성 기능입니다.
HTMLImageElement 전달되므로 이미지 처리가 적절하게 수행되고 완성 된 이미지는 Bloburl로 반환됩니다.
src/constants/effects.js 에서 목록을 찾을 수 있습니다.
이펙트의 엔티티는 5 가지 기능입니다.
keyframectxcellWidthcellHeight 배경이 채워지면 drawImage 직전에 ctx 전달되므로 transform , filter 및 clip 과 같은 선택의 변환을 설정하십시오. 다중 효과는 함께 사용하기 위해 사용되므로 setTransform 과 같은 다른 효과에 의해 추가 된 효과를 무시하는 통화 방법을 피하십시오.
또한 최소한 첫 번째 프레임에 의미있는 이미지가있는 이미지를 조정하여 생성 된 이모티콘이 애니메이션이 비활성화 된 환경에서도 편안하게 사용할 수 있도록하십시오. 애니메이션 비활성화 된 환경에서 디스플레이가 어떻게 표시되는지 확인하려면 "Crafter Mode> Easing"에서 "Add Effect"에서 "First Frame"을 선택하십시오.
교차하는 canvas 궁극적으로 이모티콘으로 렌더링되는 것의 4 배 더 크고 (길이와 너비의 2 배)입니다.
+---------+
| | <- CellHeight의 여백 / 4 | + ----+ |
| | | | <- CellHeight의 드로잉 영역 / 2 | | | | | 궁극적으로 이모티콘에서 사용될 부분 + ----+ |
| | <-CellHeight / 4+의 여백 ------------+
예를 들어, 이모티콘을 끌어 내고 싶다면 cellHeight / 2 ( cellHeight 아님) translate 충분합니다.
마진을 다듬기 전에 캔버스가 어떻게 보이는지 보려면 "Add Effects"에서 "Craftsman Mode> Developer Mode"에서 "마진을 자르지 마십시오"를 활성화하십시오.
===
사양 배경 :
びよんびよん(특히 수축) 및 회전과 같은 효과가 결합 될 수 있으면 원래 이모티콘으로 사용되는 범위 외부의 여백을 볼 수도 있습니다. 그러한 경우에도 애니메이션을 아름답게 보이게하기 위해 애니메이션은 궁극적으로 이모티콘에 사용될 범위 밖에서 렌더링되고 나중에 여백이 잘립니다.
이해하기가 어렵 기 때문에 그것에 대해 뭔가를하기를 바라고 있지만 좋은 방법을 생각하지 않았습니다.
src/constants/animations.js 에서 목록을 찾을 수 있습니다.
애니메이션 엔티티는 5 개의 인수 기능입니다.
keyframeeffect_ 와 유사)ctxeffect_ 와 유사)imageoffsetHoffsetVwidthheightcellWidtheffect_ 와 유사)cellHeighteffect_ 와 유사) 애니메이션은 실제로 ctx.drawImage 또는 이와 유사한 캔버스의 이미지 image 렌더링합니다. 사용자 설정 작물 범위는 offsetH, offsetV, width, height 및 캔버스 렌더링은 일반적으로 다음과 같습니다 (효과의 일부로 감히 할 수 없음).
ctx . drawImage ( image , offsetH , offsetV , width , height , ... ) ;캔버스는 효과와 마찬가지로 애니메이션으로 전달 된 캔버스는 실제로 이모티콘으로 출력하는 것보다 4 배 더 큽니다.
+---------+
| | <- CellHeight의 여백 / 4 | + ----+ |
| | | | <- CellHeight의 드로잉 영역 / 2 | | | | | 궁극적으로 이모티콘에서 사용될 부분 + ----+ |
| | <-CellHeight / 4+의 여백 ------------+
예를 들어, No-No Animation (화면 중앙의 일반 크기로 이모티콘을 그리는 것만으로도)을 구현하는 것은 다음과 같습니다.
ctx . drawImage ( ... , cellWidth / 4 , cellHeight / 4 , cellWidth / 2 , cellHeight / 2 ) ;효과와 비교할 때 렌더링 방법은 렌더링 방법을 자유롭게 구현할 수 있다는 점에서 더 유연합니다 (예 : 렌더링 두 층을 구현하여 간단한 변환으로 달성 할 수없는 효과를 구현할 수 있습니다). 그러나 더 이상 다른 애니메이션과 결합 할 수 없으므로 효과와 동일한 효과를 구현할 수 없는지 최소 한 번 고려하십시오.
또한 효과와 마찬가지로 애니메이션이 비활성화 된 환경에서도 편안하게 만드는 이모티콘을 사용할 수 있는지 확인하십시오.
src/constants/webgleffects.js 에서 목록을 찾을 수 있습니다.
캔버스의 기본 변환 기능 만 사용하여 구현할 수없는 효과는 WebGL에서 구현 될 수 있습니다.
WebGL 효과 엔티티는 4 가지 반대 기능입니다.
keyframecellWidthcellHeight셰이더를로드하고 적절한 매개 변수로 반환하십시오.
// 例
import { webglLoadEffectShader , webglSetVec2 } from '../utils/webgl' ;
import fooShader from '../shaders/foo' ;
function webglZoom ( keyframe , _w , _h , args ) {
const program = webglLoadEffectShader ( fooShader ) ;
webglSetVec2 ( program , 'center' , keyframe , 0.5 ) ;
return program ;
} 셰이더는 src/shaders 에서 찾을 수 있습니다 (추가 할 수 있음).
추가하려면 webglEffectShader 라는 래퍼 함수가 있으므로 RAW GLSL 코드를 넣으십시오.
const myShader = webglEffectShader ( `
<GLSL code>
` ) ; 일반적으로 사용되는 기능 (예 : 의사 랜덤 번호)은 src/shaders/utils 에서 찾을 수 있습니다.
평소와 같이 이미지는 4 배 크기로 렌더링됩니다.
또한 평소와 같이, 생성 된 이모티콘이 애니메이션이 비활성화 된 환경에서도 편안하게 사용할 수 있도록주의하십시오.
천천히로드 할 때 조심하십시오.
다음 글꼴은 포함되지 않습니다.
글꼴 라이센스 src/fonts 주의 깊게 확인하십시오 (재분배 할 수 있습니까? 수정 할 수 있습니까? (Woff)).
원칙적으로, SIL Open Font 라이센스에 따라 라이센스가 부여 된 글꼴은 "예약 된 글꼴 이름 ..."(WOFF를 만들 때 글꼴 이름을 변경하는 번거 로움이기 때문에)를 포함하는 라이센스를 사용하지 않습니다.
Woff를 만들기 위해 나는 이것을 사용합니다 : https://github.com/zk-phi/woff2sfnt-sfnt2woff.
노드 sfnt2woff.js hoge.ttf hoge.woff
글꼴을 추가하면 두 파일을 업데이트하십시오.
src/constants/fonts.tsLICENSE.markdown라이센스를 작성할 때 저자의 이름을 가져 오는 대신 공식 이름을 검색하여 최대한 많이 복사하십시오.
