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安装nodejs <版本>
NPM运行构建
./dist将在您构建时创建。您可以按原样将其部署为静态站点。
NPM运行棉绒
自动检测摇动和编码样式的其他变化。
NPM运行修复
大多数可以自动纠正。
建议在发送拉力之前运行。
它旨在使用github动作自动构建和棉绒。
构建时，将ROLLBAR_TOKEN或GA4_TOKEN设置在github秘密中，以允许收集错误和用户分析。
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>“宽松”下“添加效果”下选择“ First First Frafer”。
横穿的canvas是最终将其作为表情符号的绘制的四倍（长度和宽度的两倍）。
+-----------+
| | < - CellHeight / 4 |的边距+ -----+ |
| | | | < - CellHeight / 2的绘图区域| | | | |最终将在表情符号中使用的部分| + -----+ |
| | < - CellHeight / 4+-------------+
例如，如果您想向上滑动表情符号，只需translate cellHeight / 2 （不是cellHeight ）就足够了
如果您想在修剪边距之前查看帆布的外观，请在“添加效果”下以“工匠模式”>“开发人员模式”启用“不要削减边距”。
===
规范背景：
当びよんびよん（尤其是缩小）和旋转的效果可以组合在一起时，您甚至可以看到最初用作表情符号的范围之外的任何边缘。即使在这种情况下，为了使动画看起来很漂亮，动画也被渲染到最终用于表情符号的范围之外，然后稍后剪切边缘。
这很难理解，所以我希望对此做些事情，但是我没有想到一个好方法。
您可以在src/constants/animations.js中找到列表。
动画实体是5个参数函数：
keyframeeffect_ ）ctxeffect_ ）imageoffsetHoffsetVwidthheightcellWidtheffect_ ）cellHeighteffect_ ）动画实际上渲染了使用ctx.drawImage或类似的画布的图像image 。由于用户设定的农作物系列作为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的包装函数，因此请将RAW GLSL代码扔进其中。
const myShader = webglEffectShader ( `
<GLSL code>
` ) ;常用的功能（例如伪随机数字）可以在src/shaders/utils中找到。
像往常一样，图像的尺寸为4倍。
另外，像往常一样，请注意确保即使在禁用动画的环境中，创建的表情符号也可以使用。
小心，因为它会缓慢加载。
未包括以下字体：
请仔细检查字体许可证（可以重新分配吗？可以对其进行修改（WOFF）？），然后将已变成src/fonts Woff的字体放置。
原则上，根据SIL开放字体许可证许可的字体不使用任何包含“保留字体名称...”的许可证（因为在逐渐逐渐逐渐更改字体名称时是一个麻烦）。
要制作Woff，我使用此操作：https：//github.com/zk-phi/woff2sf2sfnt-sfnt2woff。
节点SFNT2WOFF.JS HOGE.TTF HOGE.WOFF
添加字体后，更新两个文件。
src/constants/fonts.tsLICENSE.markdown请搜索正式名称并尽可能多地复制作者的名字，而是在编写许可证时带上作者的名字。
