MEGAMOJI
1.0.0
http://zk-phi.github.io/megamoji
Veuillez le promouvoir si vous implémentez de nouvelles idées ou un nouvel anime de merde!
Installation de NPM NPM Run Start
Le serveur démarrera ensuite. Vous pouvez le vérifier sur https: // localhost: 8080.
Il se reflétera immédiatement lorsque vous brillerez avec la sauce.
Cela pourrait être dû au fait que node-canvas ne prend pas en charge ARM64.
Essayez d'insérer un nœud comme x86_64.
Exemple d'installation avec asdf :
Arch -x86_64 Asdf Installer Nodejs <version>
NPM Run Build
./dist sera créé lorsque vous le construisez. Vous pouvez le déployer en tant que site statique tel quel.
NPM Run Lint
Détecte automatiquement les tremblements et autres modifications du style de codage.
NPM Run Fix
La plupart peuvent être automatiquement corrigés.
Il est recommandé de s'exécuter avant d'envoyer un traction.
Il est conçu pour construire et peluchez automatiquement en utilisant des actions GitHub.
Lors de la construction, définissez ROLLBAR_TOKEN ou GA4_TOKEN dans GitHub Secrets pour permettre la collecte d'erreurs et l'analyse des utilisateurs.
src/animations/ … contient des implémentations d'animation individuellescomponents/ ... contient des pièces d'interface utilisateurconstants/ … contient des constanteseffects/ ... Contient la mise en œuvre des effetsfilters/ ... contient une implémentation du filtrefonts/ … Font Web inclusparts/ ... contient des images de pièces utilisées dans "Choisir parmi les pièces"samples/ ... contient des échantillons utilisés dans le tutorielshaders/ … contient des shaders fragments à utiliser dans les effets Webglutils/ … contient des fonctions utileswebgleffects/ … contient l'implémentation d'effets Webglmegamoji.js … point d'entréetypes.js … contient des définitions de type telles que les effetsstatic/ … html etc. contient des choses qui peuvent être livrées telles quelles sans construction particulièreresources/ ... Il existe des éléments divers qui ne sont pas liés à l'application, tels que les images utilisées dans les documents. Vous pouvez trouver la liste dans src/constants/filters.js .
L'entité filtrante est une fonction à un argument.
HTMLImageElement sera passé, de sorte que le traitement d'image est effectué le cas échéant et l'image finie est renvoyée sous forme de bloburl.
Vous pouvez trouver la liste dans src/constants/effects.js .
L'entité de l'effet est une fonction de 5 arguments:
keyframectxcellWidthcellHeight Une fois l'arrière-plan rempli, ctx juste avant drawImage , réglez donc la transformation de votre choix, telles que transform , filter et clip . Étant donné que plusieurs effets sont destinés à être utilisés en conjonction, évitez d'appeler des méthodes qui remplacent les effets ajoutés par d'autres effets, tels que setTransform .
Assurez-vous également d'ajuster l'image qui a une image significative au moins dans la première image afin que les emojis créés soient à l'aise à utiliser même dans un environnement où l'animation est désactivée. Si vous souhaitez vérifier comment l'affichage sera affiché dans un environnement avec l'animation désactivée, sélectionnez "Fix First Frame" sous "Ajouter Effect" Sous "Mode Crafter> Soulagement".
canvas qui traverse est quatre fois plus grande (deux fois la longueur et la largeur) de ce qui sera finalement rendu comme des emojis.
+ --------- +
| | <- marge pour Cellheight / 4 | + ---- + |
| | | | <- Zone de dessin pour Cellheight / 2 | | | | | Partie qui sera finalement utilisée dans les emoji | + ---- + |
| | <- marges dans CellHeight / 4 + ------------ +
Par exemple, si vous souhaitez glisser les emojis, translate simplement cellHeight / 2 (pas cellHeight ) suffit
Si vous voulez voir à quoi ressemble la toile avant de couper les marges, activez "ne coupez pas les marges" en "Mode Craftsman> Mode développeur" sous "Ajouter des effets".
===
Contexte de spécification:
Lorsque des effets tels queびよんびよん(en particulier le rétrécissement) et la rotation peuvent être combinés, vous pouvez même voir toutes les marges qui sont en dehors de la plage qui sont initialement utilisées comme emojis. Même dans de tels cas, pour rendre l'animation belle, l'animation est rendue en dehors de la gamme qui sera finalement utilisée pour les emojis, puis les marges sont coupées plus tard.
C'est difficile à comprendre, donc j'espère faire quelque chose, mais je n'ai pas pensé à un bon moyen.
Vous pouvez trouver la liste dans src/constants/animations.js .
Les entités d'animation sont 5 fonctions d'argument:
keyframeeffect_ )ctxeffect_ )imageoffsetHoffsetVwidthheightcellWidtheffect_ )cellHeighteffect_ ) L'animation rend en fait l' image de l'image pour le canevas qui s'est passé par ctx.drawImage ou similaire. Étant donné que la gamme de cultures de mise en place de l'utilisateur passe comme offsetH, offsetV, width, height , et donc le rendu de toile est généralement le suivant (il est possible de ne pas le faire dans le cadre de l'effet):
ctx . drawImage ( image , offsetH , offsetV , width , height , ... ) ;La toile transmise à l'animation, tout comme les effets, est quatre fois plus grande que celle qui est réellement sortie en tant qu'emojis.
+ --------- +
| | <- marge pour Cellheight / 4 | + ---- + |
| | | | <- Zone de dessin pour Cellheight / 2 | | | | | Partie qui sera finalement utilisée dans les emoji | + ---- + |
| | <- marges dans CellHeight / 4 + ------------ +
Par exemple, une implémentation d'une animation non-non (dessiner simplement des emojis à une taille normale au centre de l'écran) ressemblerait à ceci:
ctx . drawImage ( ... , cellWidth / 4 , cellHeight / 4 , cellWidth / 2 , cellHeight / 2 ) ;Par rapport aux effets, la méthode de rendu est plus flexible en ce qu'elle vous permet de mettre en œuvre librement des méthodes de rendu (par exemple, le rendu de deux couches peut être implémenté pour implémenter des effets qui ne peuvent pas être obtenus avec des transformations simples). Cependant, il ne sera plus possible de le combiner avec d'autres animations, veuillez donc considérer au moins une fois que vous ne pouvez pas implémenter le même effet qu'un effet.
De plus, tout comme avec les effets, assurez-vous que vous pouvez utiliser les emojis que vous créez confortablement même dans des environnements où l'animation est désactivée.
Vous pouvez trouver la liste dans src/constants/webgleffects.js .
Les effets qui ne peuvent pas être implémentés en utilisant uniquement les fonctions de transformation de base de Canvas peuvent être implémentées dans WebGL.
Les entités Webgl Effect sont des fonctions à quatre arguments:
keyframecellWidthcellHeightChargez le shader et renvoyez-le avec les paramètres appropriés.
// 例
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 ;
} Les shaders peuvent être trouvés dans src/shaders (vous pouvez les ajouter).
Si vous souhaitez l'ajouter, il existe une fonction de wrapper appelée webglEffectShader , alors jetez un code GLSL brut.
const myShader = webglEffectShader ( `
<GLSL code>
` ) ; Des fonctions couramment utilisées (telles que les nombres pseudo-aléatoires) peuvent être trouvées dans src/shaders/utils .
Comme d'habitude, les images sont rendues en taille 4x.
De plus, comme d'habitude, veillez à vous assurer que les emojis créés sont à l'aise à utiliser même dans des environnements où l'animation est désactivée.
Soyez prudent car il se chargera lentement.
Les polices suivantes ne sont pas incluses:
Veuillez vérifier attentivement la licence de police (peut être redistribué? Peut-il être modifié (Woff)?), Puis placer la police qui a été transformée en Woff en src/fonts .
En principe, les polices autorisées sous la licence SIL Open de la police n'utilisent aucune licence contenant "avec le nom de police réservé ..." (car c'est un problème pour modifier le nom de la police lors de la création de Woff).
Pour faire Woff, j'utilise ceci: https://github.com/zk-phi/woff2sfnt-sfnt2woff.
nœud sfnt2woff.js hoge.ttf hoge.woff
Une fois que vous avez ajouté la police, mettez à jour les deux fichiers.
src/constants/fonts.tsLICENSE.markdownAu lieu d'apporter le nom de l'auteur lors de la rédaction de la licence, veuillez rechercher le nom officiel et le copier autant que possible.
