MEGAMOJI
1.0.0
http://zk-phi.github.io/megamoji
¡Promocelo si implementa nuevas ideas o un nuevo anime de mierda!
instalación de NPM NPM Run Start
El servidor se iniciará. Puede verificarlo en https: // localhost: 8080.
Se reflejará inmediatamente cuando juegue con la salsa.
Esto podría deberse a que node-canvas no es compatible con ARM64.
Intente insertar un nodo como x86_64.
Ejemplo de instalación con asdf :
Arch -X86_64 ASDF Instalar nodejs <Versión>
Build NPM Run Build
./dist se creará cuando lo construya. Puede implementarlo como un sitio estático tal como está.
Lint NPM Run
Detecta automáticamente el agitación y otros cambios en el estilo de codificación.
NPM Run Fix
La mayoría se puede corregir automáticamente.
Se recomienda ejecutar antes de enviar un Pull-Rik.
Está diseñado para construir automáticamente y pelear utilizando acciones de GitHub.
Al construir, configure ROLLBAR_TOKEN o GA4_TOKEN en secretos de GitHub para permitir la recopilación de errores y el análisis del usuario.
src/animations/ ... contiene implementaciones de animación individualescomponents/ ... contiene piezas de interfaz de usuarioconstants/ ... contiene constanteseffects/ ... contiene implementación de efectosfilters/ ... contiene implementación de filtrosfonts/ ... fuente web incluidaparts/ ... contiene imágenes de piezas utilizadas en "Elija entre piezas"samples/ ... contiene muestras utilizadas en el tutorialshaders/ ... contiene sombreadores de fragmentos para usar en los efectos de WebGLutils/ ... contiene funciones útileswebgleffects/ ... contiene la implementación de los efectos de WebGLmegamoji.js ... punto de entradatypes.js ... contiene definiciones de tipo como efectosstatic/ ... html etc. contiene cosas que se pueden entregar como es sin compilaciones en particularresources/ ... Hay elementos diversos que no están relacionados con la aplicación, como las imágenes utilizadas en los documentos. Puede encontrar la lista en src/constants/filters.js .
La entidad del filtro es una función de un argumento.
Se pasará HTMLImageElement , por lo que el procesamiento de imágenes se realiza según corresponda y la imagen terminada se devuelve como un bloburl.
Puede encontrar la lista en src/constants/effects.js .
La entidad del efecto es una función de 5 argumentos:
keyframectxcellWidthcellHeight Después de que se llena el fondo, ctx justo antes de que se pase drawImage , así que establezca la transformación de su elección, como transform , filter y clip . Dado que los efectos múltiples están destinados a usarse en conjunto, evite los métodos de llamadas que anulen los efectos agregados por otros efectos, como setTransform .
Además, asegúrese de ajustar la imagen que tiene una imagen significativa al menos en el primer cuadro para que los emojis creados sean cómodos de usar incluso en un entorno donde la animación está deshabilitada. Si desea verificar cómo se mostrará la pantalla en un entorno con animación deshabilitada, seleccione "Firmar First Frame" en "Agregar efecto" en "Modo Crafter> Finalización".
canvas que se cruzan son cuatro veces más grandes (dos veces la longitud y el ancho) de lo que finalmente se representará como emojis.
+---------++
| | <- Margen para CellHeight / 4 | + ----+ |
| | | | <- Área de dibujo para CellHeight / 2 | | | | | Parte que finalmente se utilizará en emoji | + ----+ |
| | <-márgenes en CellHeight / 4+------------+
Por ejemplo, si desea deslizar los emojis, simplemente translate cellHeight / 2 (no cellHeight ) es suficiente
Si desea ver cómo se ve el lienzo antes de recortar los márgenes, habilite "No corte los márgenes" en "Modo Craftsman> Modo de desarrollador" en "Agregar efectos".
===
Antecedentes de especificación:
Cuando se pueden combinar efectos comoびよんびよん(especialmente la reducción) y la rotación, incluso puede ver cualquier márgenes que estén fuera del rango que se usan originalmente como emojis. Incluso en tales casos, para que la animación se vea hermosa, la animación se representa fuera del rango que finalmente se utilizará para emojis, y luego los márgenes se cortan más tarde.
Es difícil de entender, así que espero hacer algo al respecto, pero no he pensado en una buena manera.
Puede encontrar la lista en src/constants/animations.js .
Las entidades de animación son 5 funciones de argumentos:
keyframeeffect_ )ctxeffect_ )imageoffsetHoffsetVwidthheightcellWidtheffect_ )cellHeighteffect_ ) La animación en realidad representa la image de la imagen para el lienzo que ha pasado usando ctx.drawImage o similar. Dado que el rango de cultivos que establece el usuario pasa como offsetH, offsetV, width, height y, por lo tanto, la representación para el lienzo suele ser la siguiente (es posible no atreverse como parte del efecto):
ctx . drawImage ( image , offsetH , offsetV , width , height , ... ) ;El lienzo pasó a la animación, al igual que los efectos, es cuatro veces más grande que el que realmente se produce como emojis.
+---------++
| | <- Margen para CellHeight / 4 | + ----+ |
| | | | <- Área de dibujo para CellHeight / 2 | | | | | Parte que finalmente se utilizará en emoji | + ----+ |
| | <-márgenes en CellHeight / 4+------------+
Por ejemplo, una implementación de una animación no-no (solo dibuja emojis al tamaño normal en el centro de la pantalla) se vería así:
ctx . drawImage ( ... , cellWidth / 4 , cellHeight / 4 , cellWidth / 2 , cellHeight / 2 ) ;En comparación con los efectos, el método de renderizado es más flexible en el sentido de que le permite implementar libremente métodos de renderizado (por ejemplo, se pueden implementar dos capas para implementar efectos que no se pueden lograr con transformaciones simples). Sin embargo, ya no será posible combinarlo con otras animaciones, así que considere al menos una vez si no puede implementar el mismo efecto que un efecto.
Además, al igual que con los efectos, asegúrese de que pueda usar los emojis que cree cómodamente incluso en entornos donde la animación está deshabilitada.
Puede encontrar la lista en src/constants/webgleffects.js .
Los efectos que no se pueden implementar utilizando solo las funciones de transformación básicas del lienzo se pueden implementar en WebGL.
Las entidades de efecto WebGL son funciones de cuatro argumentos:
keyframecellWidthcellHeightCargue el sombreador y devuélvelo con los parámetros apropiados.
// 例
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 ;
} Los sombreadores se pueden encontrar en src/shaders (puede agregarlos).
Si desea agregarlo, hay una función de envoltura llamada webglEffectShader , así que tire el código GLSL sin procesar.
const myShader = webglEffectShader ( `
<GLSL code>
` ) ; Las funciones comúnmente utilizadas (como los números pseudo-aleatorios) se pueden encontrar en src/shaders/utils .
Como de costumbre, las imágenes se renderizan en tamaño 4x.
Además, como de costumbre, tenga cuidado de asegurarse de que los emojis creados sean cómodos de usar incluso en entornos donde la animación está deshabilitada.
Tenga cuidado ya que se cargará lentamente.
Las siguientes fuentes no están incluidas:
Verifique cuidadosamente la licencia de fuente (se src/fonts redistribuir?
En principio, las fuentes con licencia bajo la licencia de fuente SIL Open no usan ninguna licencia que contenga "con nombre de fuente reservado ..." (ya que es una molestia cambiar el nombre de la fuente al hacer que se establezca).
Para hacer Woff, uso esto: https://github.com/zk-phi/woff2sfnt-sfnt2woff.
nodo sfnt2woff.js hoge.ttf hoge.woff
Una vez que haya agregado la fuente, actualice los dos archivos.
src/constants/fonts.tsLICENSE.markdownEn lugar de traer el nombre del autor al escribir la licencia, busque el nombre oficial y cópielo tanto como sea posible.
