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請搜索正式名稱並儘可能多地複製作者的名字，而是在編寫許可證時帶上作者的名字。
