MEGAMOJI
1.0.0
http://zk-phi.github.io/MEGAMOJI
Please promote it if you implement new ideas or new shitty anime!
npm install npm run start
The server will then start up. You can check it at https://localhost:8080.
It will be reflected immediately when you tinker with the sauce.
This could be because node-canvas package does not support arm64.
Try inserting a node like x86_64.
Example of installing with asdf :
arch -x86_64 asdf install nodejs <version>
npm run build
./dist will be created when you build it. You can deploy it as a static site as is.
npm run lint
Automatically detects shaking and other changes in coding style.
npm run fix
Most can be automatically corrected.
It is recommended to run before sending a pull-rik.
It is designed to automatically build and lint using GitHub Actions.
When building, set ROLLBAR_TOKEN or GA4_TOKEN in GitHub Secrets to allow error collection and user analysis.
src/animations/ … Contains individual animation implementationscomponents/ ... Contains UI partsconstants/ … Contains constantseffects/ ...Contains effects implementationfilters/ ... Contains filter implementationfonts/ … web font includedparts/ ...Contains images of parts used in "Choose from parts"samples/ ... Contains samples used in the tutorialshaders/ … Contains fragment shaders to use in WebGL effectsutils/ … Contains useful functionswebgleffects/ … Contains implementation of WebGL effectsmegamoji.js … Entry pointtypes.js … Contains type definitions such as effectsstatic/ … html etc. contains things that can be delivered as is without any particular buildsresources/ ... There are miscellaneous items that are not related to the app, such as images used in documents. You can find the list in src/constants/filters.js .
The filter entity is a one-argument function.
HTMLImageElement will be passed, so image processing is performed as appropriate and the finished image is returned as a BlobURL.
You can find the list in src/constants/effects.js .
The effect's entity is a 5-argument function:
keyframectxcellWidthcellHeight After the background is filled, ctx just before drawImage will be passed, so set the transformation of your choice, such as transform , filter , and clip . Since multiple effects are intended to be used in conjunction, avoid calling methods that override the effects added by other effects, such as setTransform .
Also, make sure to adjust the image that has some meaningful image at least in the first frame so that the created emojis are comfortable to use even in an environment where animation is disabled. If you want to check how the display will be displayed in an environment with animation disabled, select "Fix first frame" under "Add effect" under "Crafter Mode>Easing".
canvas that cross over are four times larger (two times the length and width) of what will ultimately be rendered as emojis.
+---------+
| | <- Margin for cellHeight / 4 | +----+ |
| | | | <- Drawing area for cellHeight / 2| | | | | Part that will ultimately be used in emoji| +----+ |
| | <- Margins in cellHeight / 4+------------+
For example, if you want to slide out emojis up, just translate cellHeight / 2 (not cellHeight ) is enough
If you want to see what canvas looks like before trimming the margins, enable "Do not cut margins" in "Craftsman Mode>Developer Mode" under "Add Effects".
===
Specification background:
When effects such asびよんびよん(especially shrinking) and rotation may be combined, you may even be able to see any margins that are outside the range that are originally used as emojis. Even in such cases, to make the animation look beautiful, the animation is rendered outside the range that will ultimately be used for emojis, and then the margins are cut later.
It's difficult to understand, so I'm hoping to do something about it, but I haven't thought of a good way.
You can find the list in src/constants/animations.js .
Animation entities are 5 argument functions:
keyframeeffect_ )ctxeffect_ )imageoffsetHoffsetVwidthheightcellWidtheffect_ )cellHeighteffect_ ) Animation actually renders the image image for the canvas that have passed through using ctx.drawImage or similar. Since the user-setting crop range passes as offsetH, offsetV, width, height , and so the rendering for canvas is usually as follows (it is possible to dare not do so as part of the effect):
ctx . drawImage ( image , offsetH , offsetV , width , height , ... ) ;The canvas passed to the animation, just like the effects, is four times larger than the one that is actually output as emojis.
+---------+
| | <- Margin for cellHeight / 4 | +----+ |
| | | | <- Drawing area for cellHeight / 2| | | | | Part that will ultimately be used in emoji| +----+ |
| | <- Margins in cellHeight / 4+------------+
For example, an implementation of a no-no animation (just draw emojis at normal size in the center of the screen) would look like this:
ctx . drawImage ( ... , cellWidth / 4 , cellHeight / 4 , cellWidth / 2 , cellHeight / 2 ) ;Compared to effects, the rendering method is more flexible in that it allows you to freely implement rendering methods (e.g., rendering two layers can be implemented to implement effects that cannot be achieved with simple transformations). However, it will no longer be possible to combine it with other animations, so please consider at least once whether you cannot implement the same effect as an effect.
Also, just like with effects, make sure you can use the emojis you create comfortably even in environments where animation is disabled.
You can find the list in src/constants/webgleffects.js .
Effects that cannot be implemented using only the basic transformation functions of Canvas can be implemented in WebGL.
The WebGL effect entities are four-argument functions:
keyframecellWidthcellHeightLoad the shader and return it with the appropriate parameters.
// 例
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 ;
} The shaders can be found in src/shaders (you can add them).
If you want to add it, there is a wrapper function called webglEffectShader , so please throw raw GLSL code into it.
const myShader = webglEffectShader ( `
<GLSL code>
` ) ; Commonly used functions (such as pseudo-random numbers) can be found in src/shaders/utils .
As usual, the images are rendered in 4x size.
Also, as usual, please be careful to ensure that the created emojis are comfortable to use even in environments where animation is disabled.
Be careful as it will load slowly.
The following fonts are not included:
Please check the font license carefully (can be redistributed? Can it be modified (woff)?), and then place the font that has been turned into woff in src/fonts .
In principle, fonts licensed under the SIL Open Font License do not use any licenses that contain "with Reserved Font Name..." (as it is a hassle to change the font name when making it woff).
To make woff, I use this: https://github.com/zk-phi/woff2sfnt-sfnt2woff.
node sfnt2woff.js hoge.ttf hoge.woff
Once you have added the font, update the two files.
src/constants/fonts.tsLICENSE.markdownInstead of bringing the author's name when writing the license, please search for the official name and copy it as much as possible.
