MEGAMOJI
1.0.0
http://zk-phi.github.io/megamoji
Пожалуйста, продвигайте его, если вы реализуете новые идеи или новое дерьмовое аниме!
NPM Установка NPM запустить начало
Затем сервер запустится. Вы можете проверить это по адресу https: // localhost: 8080.
Это будет отражено сразу же, когда вы разбираетесь с соусом.
Это может быть связано с тем, что пакет node-canvas не поддерживает ARM64.
Попробуйте вставить узел, такой как x86_64.
Пример установки с asdf :
Arch -x86_64 asdf install nodejs <версия>
NPM Run Build
./dist будет создан, когда вы его создаете. Вы можете развернуть его как статический сайт как есть.
NPM запустить Lint
Автоматически обнаруживает дрожание и другие изменения в стиле кодирования.
NPM запустить исправление
Большинство из них может быть автоматически исправлено.
Рекомендуется запустить перед отправкой Rul-Rik.
Он предназначен для автоматического построения и проки с использованием действий GitHub.
При строительстве установите ROLLBAR_TOKEN или GA4_TOKEN в секретах GitHub, чтобы разрешить сбор ошибок и анализ пользователей.
src/animations/ … содержит индивидуальные реализации анимацииcomponents/ ... содержит детали пользовательского интерфейсаconstants/ … содержит константыeffects/ ... содержит реализацию эффектовfilters/ ... содержит реализацию фильтраfonts/ … веб -шрифт включеныparts/ ... содержит изображения деталей, используемых в «Выберите из частей»samples/ ... содержит образцы, используемые в учебном пособииshaders/ … содержит фрагментные шейдеры для использования в эффектах webglutils/ … содержит полезные функцииwebgleffects/ … Содержит реализацию эффектов WebGLmegamoji.js … точка входаtypes.js … содержит определения типов, такие как эффектыstatic/ … HTML и т. Д. Содержит вещи, которые могут быть доставлены, как есть без каких -либо конкретных сборокresources/ ... Существуют разные элементы, которые не связаны с приложением, такие как изображения, используемые в документах. Вы можете найти список в src/constants/filters.js .
Фильтерная сущность-это функция одного аргумента.
HTMLImageElement будет проходить, поэтому обработка изображений выполняется по мере необходимости, а готовое изображение возвращается в виде Bloburl.
Вы можете найти список в src/constants/effects.js .
Сущность эффекта представляет собой функцию 5-аргумента:
keyframectxcellWidthcellHeight После того, как фон заполняется, ctx незадолго до того, как будет пройден drawImage , поэтому установите преобразование по вашему выбору, например, transform , filter и clip . Поскольку множественные эффекты предназначены для использования в сочетании, избегайте вызова методов, которые переопределяют эффекты, добавленные другими эффектами, такие как setTransform .
Кроме того, обязательно настройте изображение, которое имеет какое -то значимое изображение, по крайней мере, в первом кадре, чтобы созданные смайлики удобны для использования даже в среде, где анимация отключена. Если вы хотите проверить, как будет отображаться дисплей в среде с отключенной анимацией, выберите «Исправить первый кадр» в разделе «Добавить эффект» в «Режим ремонта> смягчения».
canvas , который пересекается, в четыре раза больше (в два раза превышают длину и ширину) того, что в конечном итоге будет сделано как смайлики.
+---------+
| | <- Маржа для CellHeight / 4 | + ----+ |
| | | | <- Область рисования для CellHeight / 2 | | | | | Часть, которая в конечном итоге будет использоваться в смайликах | + ----+ |
| | <-поля в CellHeight / 4+------------+
Например, если вы хотите выдвинуть смайлики, просто translate cellHeight / 2 (не cellHeight ).
Если вы хотите увидеть, как выглядит Canvas, прежде чем обрезать поля, включите «не вырезать маржу» в «Режим ремесленника> Режим разработчика» под «добавить эффекты».
===
Спецификация фон:
Когда такие эффекты, какびよんびよん(особенно сокращение) и вращение, могут быть объединены, вы можете даже увидеть любую маржу, которые находятся за пределами диапазона, которые первоначально используются в качестве смайликов. Даже в таких случаях, чтобы анимация выглядела красивой, анимация визуализируется за пределами диапазона, который в конечном итоге будет использоваться для смайликов, а затем поля вырезаются позже.
Это трудно понять, поэтому я надеюсь что -то с этим сделать, но я не думал о хорошем пути.
Вы можете найти список в src/constants/animations.js .
Анимационные сущности - это 5 аргументных функций:
keyframeeffect_ )ctxeffect_ )imageoffsetHoffsetVwidthheightcellWidtheffect_ )cellHeighteffect_ ) Анимация фактически отдает image изображения для холста, которое прошло через использование ctx.drawImage или аналогичного. Поскольку диапазон урожая, установленные пользователем, проходит в виде offsetH, offsetV, width, height и, следовательно, рендеринга для холста обычно следующим образом (можно смело не делать этого как часть эффекта):
ctx . drawImage ( image , offsetH , offsetV , width , height , ... ) ;Холст, переданный в анимацию, точно так же, как и эффекты, в четыре раза больше, чем тот, который на самом деле выводится как смайлики.
+---------+
| | <- Маржа для CellHeight / 4 | + ----+ |
| | | | <- Область рисования для CellHeight / 2 | | | | | Часть, которая в конечном итоге будет использоваться в смайликах | + ----+ |
| | <-поля в CellHeight / 4+------------+
Например, реализация анимации «нет-нет» (просто нарисуйте смайлики при нормальном размере в центре экрана) будет выглядеть так:
ctx . drawImage ( ... , cellWidth / 4 , cellHeight / 4 , cellWidth / 2 , cellHeight / 2 ) ;По сравнению с эффектами метод рендеринга более гибкий в том смысле, что он позволяет вам свободно реализовать методы рендеринга (например, рендеринг двух слоев может быть реализован для реализации эффектов, которые не могут быть достигнуты с помощью простых преобразований). Тем не менее, больше не будет возможно объединить его с другими анимациями, поэтому, пожалуйста, рассмотрите хотя бы один раз, не можете ли вы реализовать тот же эффект, что и эффект.
Кроме того, как и в случае с эффектами, убедитесь, что вы можете использовать смайлики, которые вы создаете комфортно даже в средах, где анимация отключена.
Вы можете найти список в src/constants/webgleffects.js .
Эффекты, которые не могут быть реализованы с использованием только основных функций преобразования холста, могут быть реализованы в WebGL.
Эффекты Webgl-это функции с четырьмя аргументами:
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 , поэтому, пожалуйста, добавьте в нее необработанный код GLSL.
const myShader = webglEffectShader ( `
<GLSL code>
` ) ; Обычно используемые функции (такие как псевдолупильные числа) можно найти в src/shaders/utils .
Как обычно, изображения отображаются в размере 4x.
Кроме того, как обычно, будьте осторожны, чтобы убедиться, что созданные смайлики удобны для использования даже в средах, где анимация отключена.
Будьте осторожны, так как он будет загружаться медленно.
Следующие шрифты не включены:
Пожалуйста, проверьте лицензию шрифта тщательно (можно перераспределить? Можно ли ее изменить (WOFF)?), А затем поместите шрифт, который был превращен в WOFF в src/fonts .
В принципе, шрифты, лицензированные по лицензии SIL Open Font, не используют никаких лицензий, которые содержат «с зарезервированным именем шрифта ...» (поскольку это хлопот, чтобы изменить имя шрифта при создании его WOFF).
Чтобы сделать WOFF, я использую это: https://github.com/zk-phi/woff2sfnt-sfnt2woff.
Node sfnt2woff.js goge.ttf goge.woff
Как только вы добавили шрифт, обновите два файла.
src/constants/fonts.tsLICENSE.markdownВместо того, чтобы приносить имя автора при написании лицензии, пожалуйста, найдите официальное имя и скопируйте его как можно больше.
