MEGAMOJI
1.0.0
http://zk-phi.github.io/megamoji
Bitte bewerben Sie es, wenn Sie neue Ideen oder einen neuen beschissenen Anime implementieren!
NPM Installation NPM Run Start
Der Server startet dann. Sie können es unter https: // localhost: 8080 überprüfen.
Es wird sofort reflektiert, wenn Sie an der Sauce basteln.
Dies könnte daran liegen, dass node-canvas -Paket ARM64 nicht unterstützt.
Versuchen Sie, einen Knoten wie x86_64 einzufügen.
Beispiel für die Installation mit asdf :
Arch -x86_64 ASDF Installieren Sie NodeJS <version>
NPM Run Build
./dist wird erstellt, wenn Sie es bauen. Sie können es als statische Site einsetzen, wie es ist.
NPM Run FINT
Erkennt automatisch Schütteln und andere Änderungen im Codierungsstil.
NPM Run Fix
Die meisten können automatisch korrigiert werden.
Es wird empfohlen, vor dem Versenden eines Pull-Rik-Sendens zu laufen.
Es ist so konzipiert, dass es automatisch mit GitHub -Aktionen erstellt und futtert.
Setzen Sie beim Erstellen in Github -Geheimnissen ROLLBAR_TOKEN oder GA4_TOKEN um die Fehlersammlung und die Benutzeranalyse zu ermöglichen.
src/animations/ … enthält individuelle Animationsimplementierungencomponents/ ... enthält UI -Teileconstants/ … enthält Konstanteneffects/ ... enthält die Implementierung von Effektenfilters/ ... enthält die Filterimplementierungfonts/ … Web -Schriftart enthaltenparts/ ... enthält Bilder von Teilen, die in "Aus Teilen wählen" verwendet werden.samples/ ... enthält Proben, die im Tutorial verwendet werdenshaders/ … enthält Fragment -Shader, die in WebGL -Effekten verwendet werden könnenutils/ … enthält nützliche Funktionenwebgleffects/ … enthält die Implementierung von WebGL -Effektenmegamoji.js … Einstiegspunkttypes.js … enthält Typdefinitionen wie Effektestatic/ … html usw. enthält Dinge, die so geliefert werden können, wie es ohne bestimmte Builds istresources/ ... Es gibt verschiedene Elemente, die nicht mit der App zusammenhängen, wie z. B. in Dokumenten verwendete Bilder. Die Liste finden Sie in src/constants/filters.js .
Die Filterentität ist eine Ein-Argument-Funktion.
HTMLImageElement wird übergeben, sodass die Bildverarbeitung nach Bedarf durchgeführt wird und das fertige Bild als Bloburl zurückgegeben wird.
Die Liste finden Sie in src/constants/effects.js .
Die Entität des Effekts ist eine 5-Argument-Funktion:
keyframectxcellWidthcellHeight Nachdem der Hintergrund gefüllt ist, werden ctx kurz vor drawImage bestanden. Stellen Sie daher die Transformation Ihrer Wahl ein, z. B. transform , filter und clip . Da mehrere Effekte in Verbindung verwendet werden sollen, vermeiden Sie aufgerufene Methoden, die die durch andere Effekte hinzugefügten Effekte wie setTransform überschreiben.
Stellen Sie außerdem sicher, dass Sie das Bild anpassen, das zumindest im ersten Frame ein aussagekräftiges Bild hat, damit die erstellten Emojis selbst in einer Umgebung, in der die Animation deaktiviert ist, bequem zu verwenden ist. Wenn Sie überprüfen möchten, wie das Display in einer Umgebung mit deaktiviertem Animations angezeigt wird, wählen Sie "First Frame beheben" unter "Effekt hinzufügen" unter "Crafter -Modus> Locking".
canvas , die sich überqueren, sind viermal größer (zweimal so groß wie Länge und Breite) dessen, was letztendlich als Emojis gerendert wird.
+---------+
| | <- Rand für CellHeight / 4 | + ----+ |
| | | | <- Zeichenbereich für CellHeight / 2 | | | | | Teil, der letztendlich in Emoji | verwendet wird + ----+ |
| | <-Ränder in CellHeight / 4+------------+
Wenn Sie beispielsweise Emojis ausrutschen möchten, ist es ausreichend, cellHeight / 2 (nicht cellHeight ) translate
Wenn Sie sehen möchten, wie Canvas vor dem Trimmen der Ränder aussieht, aktivieren Sie in "Craftsman -Modus> Entwicklermodus" unter "Effekte hinzufügen".
===
Spezifikationshintergrund:
Wenn Effekte wieびよんびよん(insbesondere Schrumpfung) und Rotation kombiniert werden können, können Sie sogar alle Ränder sehen, die außerhalb des Bereichs liegen, die ursprünglich als Emojis verwendet werden. Selbst in solchen Fällen wird die Animation außerhalb der Reichweite, die letztendlich für Emojis verwendet wird, und dann die Ränder später geschnitten werden, um die Animation schön aussehen zu lassen.
Es ist schwer zu verstehen, also hoffe ich, etwas dagegen zu unternehmen, aber ich habe nicht an einen guten Weg nachgedacht.
Die Liste finden Sie in src/constants/animations.js .
Animationseinheiten sind 5 Argumentfunktionen:
keyframeeffect_ )ctxeffect_ )imageoffsetHoffsetVwidthheightcellWidtheffect_ )cellHeighteffect_ ) Die Animation macht das image für die Leinwand, die mit ctx.drawImage oder ähnlichem durchlaufen wurden. Da der Benutzer-Seting-Erntebereich als offsetH, offsetV, width, height und so das Rendering für Leinwand gelten, ist normalerweise wie folgt (es ist möglich, dies nicht als Teil des Effekts zu tun):
ctx . drawImage ( image , offsetH , offsetV , width , height , ... ) ;Die Leinwand überging der Animation, genau wie die Effekte, viermal größer als die, die tatsächlich als Emojis ausgegeben wird.
+---------+
| | <- Rand für CellHeight / 4 | + ----+ |
| | | | <- Zeichenbereich für CellHeight / 2 | | | | | Teil, der letztendlich in Emoji | verwendet wird + ----+ |
| | <-Ränder in CellHeight / 4+------------+
Zum Beispiel würde eine Implementierung einer Nein-Nein-Animation (einfach Emojis in normaler Größe in der Mitte des Bildschirms zeichnen) so aus:
ctx . drawImage ( ... , cellWidth / 4 , cellHeight / 4 , cellWidth / 2 , cellHeight / 2 ) ;Im Vergleich zu Effekten ist die Rendering -Methode insofern flexibler, als Sie es Ihnen ermöglicht, Rendering -Methoden frei implementieren (z. B. können das Rendern von zwei Ebenen implementiert werden, um Effekte zu implementieren, die nicht mit einfachen Transformationen erreicht werden können). Es ist jedoch nicht mehr möglich, es mit anderen Animationen zu kombinieren. Überlegen Sie sich also mindestens einmal, ob Sie den gleichen Effekt wie einen Effekt nicht implementieren können.
Stellen Sie genau wie bei Effekten sicher, dass Sie die Emojis, die Sie selbst in Umgebungen, in denen die Animation deaktiviert ist, bequem erstellen können.
Die Liste finden Sie in src/constants/webgleffects.js .
Effekte, die nicht nur mit den grundlegenden Transformationsfunktionen von Leinwand implementiert werden können, können in WebGL implementiert werden.
Die WebGL-Effekt-Entitäten sind vier Argument-Funktionen:
keyframecellWidthcellHeightLaden Sie den Shader und geben Sie ihn mit den entsprechenden Parametern zurück.
// 例
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 ;
} Die Shader können in src/shaders gefunden werden (Sie können sie hinzufügen).
Wenn Sie es hinzufügen möchten, gibt es eine Wrapper -Funktion namens webglEffectShader . Werfen Sie also bitte den RAW -GLSL -Code hinein.
const myShader = webglEffectShader ( `
<GLSL code>
` ) ; Häufig verwendete Funktionen (z. B. Pseudo-Random-Zahlen) finden Sie in src/shaders/utils .
Wie üblich werden die Bilder in 4 -facher Größe gerendert.
Achten Sie auch darauf, dass die erstellten Emojis wie gewohnt auch in Umgebungen, in denen die Animation deaktiviert ist, bequem zu verwenden ist.
Seien Sie vorsichtig, da es langsam geladen wird.
Die folgenden Schriftarten sind nicht enthalten:
Bitte überprüfen Sie die Schriftlizenz sorgfältig (kann umverteilt werden? Kann sie geändert werden (WOFF)?) Und dann die Schriftart, die in src/fonts in WOFF verwandelt wurde, in WOFF verwandelt werden.
Im Prinzip verwenden Schriftarten, die unter der SIL Open -Schriftart Lizenz lizenziert wurden, keine Lizenzen, die "mit reserviertem Schriftnamen ..." enthalten (da es ein Problem ist, den Schriftnamen bei der Wäffung zu ändern).
Um WOFF zu machen, benutze ich dies: https://github.com/zk-phi/woff2sfnt-sfnt2woff.
Knoten sfnt2woff.js Hoge.ttf Hoge.woff
Sobald Sie die Schriftart hinzugefügt haben, aktualisieren Sie die beiden Dateien.
src/constants/fonts.tsLICENSE.markdownAnstatt den Namen des Autors beim Schreiben der Lizenz mitzunehmen, suchen Sie bitte nach dem offiziellen Namen und kopieren Sie ihn so weit wie möglich.
