MEGAMOJI
1.0.0
http://zk-phi.github.io/megamoji
Por favor, promova se você implementar novas idéias ou novo anime de merda!
NPM Instale NPM RUN START
O servidor será iniciado. Você pode verificar em https: // localhost: 8080.
Será refletido imediatamente quando você mexer com o molho.
Isso pode ocorrer porque node-canvas não suporta o ARM64.
Tente inserir um nó como x86_64.
Exemplo de instalação com asdf :
arch -x86_64 ASDF Instale NodeJS <versão>
NPM Run Build
./dist será criado quando você o construir. Você pode implantá -lo como um site estático como está.
NPM Run fiapos
Detecta automaticamente o tremor e outras mudanças no estilo de codificação.
NPM Run Fix
A maioria pode ser corrigida automaticamente.
Recomenda-se executar antes de enviar um Pull-Rik.
Ele foi projetado para criar e fiapos automaticamente usando ações do GitHub.
Ao criar, defina ROLLBAR_TOKEN ou GA4_TOKEN nos segredos do GitHub para permitir a coleta de erros e a análise do usuário.
src/animations/ … contém implementações individuais de animaçãocomponents/ ... contém peças da interface do usuárioconstants/ … contém constanteseffects/ ... contém a implementação de efeitosfilters/ ... contém a implementação do filtrofonts/ … fonte da web incluídaparts/ ... contém imagens de peças usadas em "Escolha de peças"samples/ ... contém amostras usadas no tutorialshaders/ … contém shaders de fragmentos para usar em efeitos webglutils/ … contém funções úteiswebgleffects/ … contém a implementação de efeitos webglmegamoji.js … ponto de entradatypes.js … contém definições de tipo, como efeitosstatic/ … html etc. contém coisas que podem ser entregues como está sem nenhuma construção em particularresources/ ... Existem itens diversos que não estão relacionados ao aplicativo, como imagens usadas em documentos. Você pode encontrar a lista em src/constants/filters.js .
A entidade do filtro é uma função de um argumento.
HTMLImageElement será passado, para que o processamento da imagem seja executado conforme apropriado e a imagem final é retornada como um bloburl.
Você pode encontrar a lista em src/constants/effects.js .
A entidade do efeito é uma função de 5 argumentos:
keyframectxcellWidthcellHeight Depois que o plano de fundo é preenchido, ctx pouco antes drawImage será passado, então defina a transformação de sua escolha, como transform , filter e clip . Como vários efeitos pretendem ser usados em conjunto, evite os métodos de chamada que substituem os efeitos adicionados por outros efeitos, como setTransform .
Além disso, certifique -se de ajustar a imagem que possui uma imagem significativa, pelo menos no primeiro quadro, para que os emojis criados se sintam confortáveis de usar mesmo em um ambiente em que a animação seja desativada. Se você deseja verificar como a exibição será exibida em um ambiente com animação desativada, selecione "Fix First Frame" em "Adicionar efeito" em "Modo Crafter> Faciling".
canvas que atravessa é quatro vezes maior (duas vezes o comprimento e a largura) do que acabará sendo renderizado como emojis.
+---------+
| | <- margem para o peso celular / 4 | + ----+ |
| | | | <- Área de desenho para CellHeight / 2 | | | | | Parte que será usada em emoji | + ----+ |
| | <-margens no peso celular / 4+------------+
Por exemplo, se você deseja deslizar para fora emojis para cima, basta translate cellHeight / 2 (não cellHeight ) é o suficiente
Se você quiser ver como é a aparência da tela antes de aparar as margens, ative "não corte as margens" no "modo de artesão> Modo de desenvolvedor" em "Adicionar efeitos".
===
Antecedentes de especificação:
Quando efeitos comoびよんびよん(especialmente diminuindo) e rotação podem ser combinados, você pode até ver as margens que estão fora do alcance que são originalmente usadas como emojis. Mesmo nesses casos, para fazer com que a animação pareça bonita, a animação é renderizada fora do alcance que será usada para emojis e, em seguida, as margens serão cortadas mais tarde.
É difícil de entender, então espero fazer algo a respeito, mas não pensei em uma boa maneira.
Você pode encontrar a lista em src/constants/animations.js .
As entidades de animação são 5 funções de argumento:
keyframeeffect_ )ctxeffect_ )imageoffsetHoffsetVwidthheightcellWidtheffect_ )cellHeighteffect_ ) A animação realmente renderiza a image da imagem para a tela que passou usando ctx.drawImage ou similar. Como a faixa de colheita de definição do usuário passa como offsetH, offsetV, width, height e, portanto, a renderização da tela é geralmente a seguinte (é possível ousar não fazê-lo como parte do efeito):
ctx . drawImage ( image , offsetH , offsetV , width , height , ... ) ;A tela passou para a animação, assim como os efeitos, é quatro vezes maior que a que é realmente emitida como emojis.
+---------+
| | <- margem para o peso celular / 4 | + ----+ |
| | | | <- Área de desenho para CellHeight / 2 | | | | | Parte que será usada em emoji | + ----+ |
| | <-margens no peso celular / 4+------------+
Por exemplo, uma implementação de uma animação não-não (basta desenhar emojis no tamanho normal no centro da tela) ficaria assim:
ctx . drawImage ( ... , cellWidth / 4 , cellHeight / 4 , cellWidth / 2 , cellHeight / 2 ) ;Comparado aos efeitos, o método de renderização é mais flexível, pois permite implementar livremente os métodos de renderização (por exemplo, a renderização de duas camadas pode ser implementada para implementar efeitos que não podem ser alcançados com transformações simples). No entanto, não será mais possível combiná -lo com outras animações; portanto, considere pelo menos uma vez se você não pode implementar o mesmo efeito que um efeito.
Além disso, assim como nos efeitos, verifique se você pode usar os emojis que você cria confortavelmente, mesmo em ambientes onde a animação está desativada.
Você pode encontrar a lista em src/constants/webgleffects.js .
Efeitos que não podem ser implementados usando apenas as funções básicas de transformação da tela podem ser implementadas no WebGL.
As entidades do efeito webgl são funções de quatro argumentos:
keyframecellWidthcellHeightCarregue o shader e retorne -o com os parâmetros apropriados.
// 例
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 ;
} Os shaders podem ser encontrados no src/shaders (você pode adicioná -los).
Se você deseja adicioná -lo, existe uma função de invólucro chamada webglEffectShader , então, por favor, jogue o código GLSL bruto nele.
const myShader = webglEffectShader ( `
<GLSL code>
` ) ; Funções comumente usadas (como números pseudo-aleatórias) podem ser encontradas em src/shaders/utils .
Como sempre, as imagens são renderizadas em tamanho 4x.
Além disso, como sempre, tenha cuidado para garantir que os emojis criados se sintam confortáveis de usar, mesmo em ambientes onde a animação está desativada.
Tenha cuidado, pois ele carregará lentamente.
As fontes a seguir não estão incluídas:
Verifique a licença da fonte com cuidado (pode ser redistribuído? Pode ser modificado (woff)?) E depois colocar a fonte que foi transformada em Woff em src/fonts .
Em princípio, as fontes licenciadas sob a licença de fonte SIL Open não usam nenhuma licença que contenha "com o nome da fonte reservada ..." (pois é um aborrecimento alterar o nome da fonte ao fazê -lo woff).
Para fazer Woff, eu uso isso: https://github.com/zk-phi/woff2sfnt-sfnt2woff.
nó sfnt2woff.js hoge.ttf hoge.woff
Depois de adicionar a fonte, atualize os dois arquivos.
src/constants/fonts.tsLICENSE.markdownEm vez de trazer o nome do autor ao escrever a licença, procure o nome oficial e copie o máximo possível.
