Unduh MEGAMOJI - Unduh Kode Sumber MEGAMOJI

MEGAMOJI

Data situs web

1.0.0

Unduh

http://zk-phi.github.io/megamoji

Untuk pengembang

Harap promosikan jika Anda menerapkan ide -ide baru atau anime menyebalkan baru!

Lingkungan pengembangan

server dev

 Instal NPM
NPM Run Start

Server kemudian akan memulai. Anda dapat memeriksanya di https: // localhost: 8080.

Ini akan segera tercermin saat Anda bermain -main dengan saus.

Jika Anda akan mendapatkan instalasi NPM di M1 Mac Anda

Ini bisa jadi karena paket node-canvas tidak mendukung ARM64.

Coba masukkan simpul seperti x86_64.

Contoh pemasangan dengan asdf :

 Arch -x86_64 ASDF Instal NodeJS <Version>

Membangun

 NPM Run Build

./dist akan dibuat saat Anda membangunnya. Anda dapat menggunakannya sebagai situs statis apa adanya.

serat

 NPM Run Lint

Secara otomatis mendeteksi guncangan dan perubahan lain dalam gaya pengkodean.

 NPM Run Fix

Sebagian besar dapat dikoreksi secara otomatis.

Dianjurkan untuk berjalan sebelum mengirim tarik-rik.

Alur kerja

Ini dirancang untuk secara otomatis membangun dan berbaris menggunakan tindakan GitHub.

serat… NPM jalankan serat saat mendorong master
Lint-Pr… Saat membuat permintaan tarik, putar Eslint dan Stylelint melalui ReviewDog
Bangun ... Saat saya mendorong master, NPM menjalankan serat dan mendorong ke halaman GH

Saat membangun, atur ROLLBAR_TOKEN atau GA4_TOKEN dalam rahasia github untuk memungkinkan pengumpulan kesalahan dan analisis pengguna.

Konfigurasi Direktori

src/
- animations/ ... berisi implementasi animasi individual
- components/ ... berisi bagian UI
- constants/ ... berisi konstanta
- effects/ ... Berisi Efek Implementasi
- filters/ ... berisi implementasi filter
- fonts/ … Web Font Termasuk
- parts/ ... berisi gambar bagian yang digunakan dalam "Pilih dari Bagian"
- samples/ ... berisi sampel yang digunakan dalam tutorial
- shaders/ ... berisi shader fragmen untuk digunakan dalam efek webgl
- utils/ … berisi fungsi yang berguna
- webgleffects/ ... berisi implementasi efek WebGL
- megamoji.js … titik masuk
- types.js … berisi definisi jenis seperti efek
static/ ... html dll. berisi hal -hal yang dapat disampaikan sebagaimana adanya tanpa bangunan tertentu
resources/ ... Ada item lain -lain yang tidak terkait dengan aplikasi, seperti gambar yang digunakan dalam dokumen.

Menambahkan filter

Anda dapat menemukan daftar di src/constants/filters.js .

Entitas filter adalah fungsi satu argumen.

HTMLImageElement akan dilewati, sehingga pemrosesan gambar dilakukan sesuai kebutuhan dan gambar yang sudah jadi dikembalikan sebagai bloburl.

Menambahkan efek

Anda dapat menemukan daftar di src/constants/effects.js .

Efeknya adalah fungsi 5-argumen:

keyframe: Bagaimana animasi berlangsung (angka mengambang antara 0,0 dan 1.0)
ctx: Objek di CanvasrenderingContext2D
cellWidth: Lebar kanvas
cellHeight: Tinggi kanvas

Setelah latar belakang diisi, ctx tepat sebelum drawImage akan dilewati, jadi atur transformasi pilihan Anda, seperti transform , filter , dan clip . Karena beberapa efek dimaksudkan untuk digunakan bersama, hindari metode panggilan yang mengesampingkan efek yang ditambahkan oleh efek lain, seperti setTransform .

Juga, pastikan untuk menyesuaikan gambar yang memiliki beberapa gambar bermakna setidaknya di bingkai pertama sehingga emoji yang dibuat nyaman digunakan bahkan di lingkungan di mana animasi dinonaktifkan. Jika Anda ingin memeriksa bagaimana tampilan akan ditampilkan di lingkungan dengan animasi dinonaktifkan, pilih "Fix First Frame" di bawah "Tambah Efek" di bawah "Mode Crafter> Easing".

canvas yang melintasi empat kali lebih besar (dua kali panjang dan lebar) dari apa yang akhirnya akan diterjemahkan sebagai emoji.

 +---------+
| | <- Margin untuk Cellheight / 4 | + ----+ |
| | | | <- Area menggambar untuk Cellheight / 2 | | | | | Bagian yang pada akhirnya akan digunakan dalam emoji | + ----+ |
| | <-Margin di CellHeight / 4+------------+

Misalnya, jika Anda ingin meluncur keluar emoji ke atas, cukup translate cellHeight / 2 (bukan cellHeight ) sudah cukup

Jika Anda ingin melihat seperti apa kanvas sebelum memotong margin, aktifkan "Jangan memotong margin" dalam "Mode Pengrajin> Mode Pengembang" di bawah "Tambah Efek".

===

Latar belakang spesifikasi:

Ketika efek sepertiびよんびよん(terutama menyusut) dan rotasi dapat digabungkan, Anda bahkan dapat melihat margin yang berada di luar kisaran yang awalnya digunakan sebagai emoji. Bahkan dalam kasus -kasus seperti itu, untuk membuat animasi terlihat indah, animasi diterjemahkan di luar kisaran yang pada akhirnya akan digunakan untuk emoji, dan kemudian margin dipotong nanti.

Sulit untuk dipahami, jadi saya berharap untuk melakukan sesuatu tentang hal itu, tetapi saya belum memikirkan cara yang baik.

Menambahkan animasi

Anda dapat menemukan daftar di src/constants/animations.js .

Entitas animasi adalah 5 fungsi argumen:

keyframe: (Mirip dengan effect_ )
ctx: (Mirip dengan effect_ )
image: Gambar Asli yang ingin Anda animasi
offsetH: Area yang ingin Anda gambar gambar asli (tepi kiri)
offsetV: Area gambar asli yang ingin Anda gambar (tepi atas)
width: Kisaran (lebar) dari gambar asli yang ingin Anda gambar
height: Kisaran (tinggi) gambar asli yang ingin Anda gambar
cellWidth: (Mirip dengan effect_ )
cellHeight: (Mirip dengan effect_ )

Animasi sebenarnya membuat image gambar untuk kanvas yang telah melewati menggunakan ctx.drawImage atau serupa. Karena rentang tanaman yang mengatur pengguna berlalu sebagai offsetH, offsetV, width, height , dan rendering untuk kanvas biasanya sebagai berikut (dimungkinkan untuk tidak berani melakukannya sebagai bagian dari efek):

 ctx . drawImage ( image , offsetH , offsetV , width , height , ... ) ;

Kanvas diteruskan ke animasi, seperti efeknya, empat kali lebih besar dari yang sebenarnya output sebagai emoji.

 +---------+
| | <- Margin untuk Cellheight / 4 | + ----+ |
| | | | <- Area menggambar untuk Cellheight / 2 | | | | | Bagian yang pada akhirnya akan digunakan dalam emoji | + ----+ |
| | <-Margin di CellHeight / 4+------------+

Misalnya, implementasi animasi no-no (cukup menggambar emoji pada ukuran normal di tengah layar) akan terlihat seperti ini:

 ctx . drawImage ( ... , cellWidth / 4 , cellHeight / 4 , cellWidth / 2 , cellHeight / 2 ) ;

Dibandingkan dengan efek, metode rendering lebih fleksibel karena memungkinkan Anda untuk mengimplementasikan metode rendering secara bebas (mis., Rendering dua lapisan dapat diimplementasikan untuk mengimplementasikan efek yang tidak dapat dicapai dengan transformasi sederhana). Namun, tidak akan lagi dimungkinkan untuk menggabungkannya dengan animasi lain, jadi harap pertimbangkan setidaknya sekali apakah Anda tidak dapat menerapkan efek yang sama dengan efek.

Juga, seperti halnya efek, pastikan Anda dapat menggunakan emoji yang Anda buat dengan nyaman bahkan di lingkungan di mana animasi dinonaktifkan.

Menambahkan efek WebGL

Anda dapat menemukan daftar di src/constants/webgleffects.js .

Efek yang tidak dapat diimplementasikan hanya menggunakan fungsi transformasi dasar kanvas dapat diimplementasikan di WebGL.

Entitas Efek WebGL adalah fungsi empat argumen:

keyframe
cellWidth
cellHeight

Muat shader dan kembalikan dengan parameter yang sesuai.

 // 例
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 ;
}

Shader dapat ditemukan di src/shaders (Anda dapat menambahkannya).

Jika Anda ingin menambahkannya, ada fungsi pembungkus yang disebut webglEffectShader , jadi silakan buang kode GLSL mentah ke dalamnya.

 const myShader = webglEffectShader ( `
  <GLSL code>
` ) ;

Fungsi yang umum digunakan (seperti bilangan pseudo-acak) dapat ditemukan di src/shaders/utils .

Seperti biasa, gambar diterjemahkan dalam ukuran 4x.

Juga, seperti biasa, berhati -hatilah untuk memastikan bahwa emoji yang dibuat nyaman digunakan bahkan di lingkungan di mana animasi dinonaktifkan.

Menambahkan font

Hati -hati karena akan memuat secara perlahan.

Font berikut tidak termasuk:

Itu tidak dapat dibaca saat dikurangi menjadi ukuran ikon
Ada beberapa kanji yang direkam
Situasi yang ingin Anda gunakan tumpang tindih dengan font lain

Silakan periksa lisensi font dengan cermat (dapat didistribusikan kembali? Bisakah dimodifikasi (WOFF)?), Dan kemudian tempatkan font yang telah diubah menjadi Woff di src/fonts .

Pada prinsipnya, font yang dilisensikan di bawah lisensi font terbuka SIL tidak menggunakan lisensi apa pun yang berisi "dengan nama font yang dipesan ..." (karena merupakan kerumitan untuk mengubah nama font saat membuatnya woff).

Untuk membuat Woff, saya menggunakan ini: https://github.com/zk-phi/woff2sfnt-sfnt2woff.