Yakha Futhi Yenza Ngokwezifiso I-avatar Yerobhothi Ye-SVG Eguqukayo Nge-Bloub

Yini i-Bloub?

I-Bloub iwukwenziwa kabusha nge-SVG kwe-avatar ye-bot ye-x.ai. Isebenzisa umumo womzimba owodwa omnyama ogcwele oguquka phakathi kwezimo ezingu-14, kanye nezimo zamehlo ezimbili ezimhlophe ezizimele, konke kuboniswa kungemuva elilula. I-animation yenziwe ngaphandle komtapo wolwazi we-animation.

Le phrojekthi ihlanganisa injini ye-animation engancikile ku-framework nesixhumi esibonakalayo se-Vue 3. Injini yayo futhi ayincikile ewashini: ukubiza engine.sample(t) kukhiqiza ifreyimu kusetshenziswa isikhathi esinikeziwe kuphela. Lokhu kwenza ukumisa isikhashana, ukusesha indawo ethile, ukubuka kuqala okumisiwe, nokuhlolwa okungenayo i-DOM kube nemiphumela engaguquki.

Izici Eziyinhloko

• Izimo eziyishumi nane ezilinganisiwe: I-avatar inezimo ezifana nokulinda, ukucwayiza iso, ukuzungeza nokuqhuma.
• Ukwenza i-avatar ngendlela oyifisayo: Khetha emimomweni yomzimba engu-8, emibaleni engu-12 nasezinkulumweni zokuphumula ezingu-16. Izinketho zigcinwa phakathi kokuvakasha.
• Umhleli womugqa wesikhathi: Hlela izimo, lungisa ukuthi isimo ngasinye sigcinwa isikhathi esingakanani, bese ugcina i-animation ewumphumela.
• Amafomethi amaningi okuthekelisa: Thekelisa i-avatar njenge-SVG, PNG, noma i-GIF enama-animation, noma thekelisa umugqa wesikhathi ophelele njenge-GIF noma i-MP4.
• Ukubhalwa kwevidiyo lapho kudingeka: I-encoder yevidiyo ilandwa kuphela lapho idingeka okokuqala.
• Izilimi ezintathu: Isixhumi esibonakalayo sisekela isiFulentshi, isiNgisi nesiShayina.
• Ukwenza izithombe ngendlela engaguquki: Isikhathi esithile sihlala sikhiqiza isithombe esifanayo, okusekela amafreyimu amisiwe anembile nokuhlolwa okuphindaphindekayo.

Okudingekayo

I-Bloub isebenzisa i-Vue 3, i-Vite, i-TypeScript, i-Tailwind CSS 4, ne-pnpm. Faka indawo ye-Node.js ne-pnpm ngaphambi kokuqhubeka.

Faka bese Usebenzisa i-Bloub

1. Clone noma landa i-repository bese uvula ifolda yayo ku-terminal.

2. Faka iz dependencies:

   pnpm install

3. Qalisa iseva yokuthuthukisa ye-Vite:

   pnpm dev

4. Vula http://localhost:5190 esipheqululini.

Qalisa Ukuhlolwa bese Wakha i-Production Build

Qalisa i-test suite ye-Vitest usebenzisa:

pnpm test

Hlola ikhodi ye-TypeScript bese wakha uhlelo usebenzisa:

pnpm build

Umyalo wokwakha usebenzisa i-vue-tsc --noEmit ngaphambi kwe-vite build. I-repository ayinakho ngamabomu ukucushwa kwe-ESLint noma i-Prettier, ngakho i-vue-tsc iyisango layo eliyinhloko lokuhlola ikhwalithi yekhodi. Qalisa i-pnpm build ngaphambi kokubheka ushintsho njengoluqediwe.

Hlola Uhlelo

Ibha engakwesokunxele ishintsha phakathi kokubukwa okuyinhloko okuthathu.

Yenza i-Avatar Ihambisane Nezidingo Zakho

Vula i-Customise ukuze ukhethe emimomweni yomzimba engu-8, emibaleni engu-12 nasezinkulumweni zokuphumula ezingu-16. Uhlelo lugcina lezi zinketho phakathi kokuvakasha.

Dala Umugqa Wesikhathi We-animation

Vula i-Animations ukuze uhlele izimo ze-avatar emugqeni wesikhathi. Setha ukuthi isimo ngasinye kufanele sigcinwe isikhathi esingakanani, buka kuqala ukulandelana, bese ukugcina. Ikhesa yokudlala ilandelela izindawo zomugqa wesikhathi hhayi amagama ezimo kuphela, okwenza isimo esifanayo sivele ngaphezu kokukodwa ekuhlanganisweni.

Shintsha Ulimi bese Ubuka Amakhredithi

Vula i-Settings ukuze ukhethe isiFulentshi, isiNgisi noma isiShayina futhi ubuke amakhredithi ephrojekthi.

Hlola Zonke Izimo Ezingu-14

Faka i-#planche ku-URL yasendaweni ukuze ubonise zonke izimo ezingu-14 zihambisana njengamafreyimu amisiwe:

http://localhost:5190/#planche

Lokhu kubuka kuyasiza ukuhlola ngokushesha ukuthi izinguquko azishintshanga yini isimo esithile ngokungalindelekile.

Ukuvula isimo esithile ukudlala kumisiwe, sebenzisa amapharamitha e-hash e-etat ne-stop. Isibonelo:

http://localhost:5190/#etat=orbit&stop

Sebenzisa I-component ye-BloubBot ye-Vue

I-component ye-BloubBot isekela ukudlala okulawulwayo namafreyimu amisiwe anembile. Isenzakalo esilawulwayo esiyisisekelo singaxhumanisa ibhulokhi yamanje yomugqa wesikhathi, isimo nesimo sokudlala:

<BloubBot
  v-model:block="block"
  v-model:state="state"
  v-model:playing="playing"
/>

Imodeli ye-block iyikhesa yokudlala. Lo mehluko ubalulekile ngoba umugqa wesikhathi ungaba nesimo esifanayo izikhathi eziningi. Inkomba yebhulokhi ikhomba indawo eqondile yomugqa wesikhathi, kanti i-state ilandela leyo khasa njengomphumela.

Bonisa Ifreyimu Emisiwe

Dlulisa isimo, usayizi, nenani le-frozen-at ukuze ubonise ifreyimu eyodwa enembile ngaphandle kokuqala iluphu ye-animation:

<BloubBot state="orbit" :size="120" :frozen-at="1.2" />

Ukubonisa okumisiwe yindlela i-Bloub eyenza ngayo izithonjana nebhodi lezimo eligcwele. Kuyasiza futhi uma udinga ukubuka kuqala okuzinzile noma ifreyimu ngesikhathi esiqondile.

Okokufaka Okutholakalayo Kwe-component

I-component iveza lawa ma-props:

• size
• shape
• color
• expression
• paper
• frozenAt
• cycle
• follow
• gaze

Amamodeli ayo yi-block, state, playing, ne-elapsed. Bheka i-BloubBot.vue ukuze uthole izinhlobo eziqondile nemininingwane ye-component.

Thekelisa Ama-avatar Nemigqa Yesikhathi

Noma yini eboniswa esikrinini ingathekeliswa. Ku-avatar eyodwa, khetha i-SVG, i-PNG, noma i-GIF enama-animation. Kuwo wonke umugqa wesikhathi, khetha i-GIF noma i-MP4.

Ukuthunyelwa kwe-SVG ne-PNG akudingi ilabhulali eyengeziwe. I-encoder yevidiyo edingekayo ekuphumeni okugqwayizayo ilayishwa kuphela okokuqala icelwa, ngakho ayidingi ukulandwa ngesikhathi sokuhlela okuvamile. Eminye imininingwane yokusetshenziswa iyatholakala kumadokhumenti okuthunyelwa.

Amasu Athuthukile

Sebenzisa Injini Emsulwa Ukuze Uthole Amafreyimu Anqunywe Ngokuqondile

Ikhodi engaphansi kwe-src/bot/ ayincikile ku-framework futhi ayincikile ewashini. Sebenzisa engine.sample(t) uma udinga isithombe sesikhathi esiqondile. Njengoba umphumela uncike esikhathini esinikeziwe kunewashi elisebenzayo, ukumisa isikhashana, ukuqhubeka, ukusesha isikhathi, ukuhlola, nokwakha izithombe-mfanekiso kuhlala kuhambisana.

Ungayenzi Lula Imibandela Elinganisiwe

Amanani amaningi angabonakala engahleliwe, kodwa alinganiswa ezithombeni eziyisethenjwa ezisikiwe ngamafreyimu angu-10 ngomzuzwana. Izithunzi zakhishwa kusetshenziswa i-ray casting engaphansi kwephikseli, amehlo alinganiswa njengama-capsule, kanti imibala nobubanzi bemigqa kwathathwa ngokuqondile.

Ukusondeza imibandela kumanani alula kunganciphisa ukufana okubonakalayo iphrojekthi eklanyelwe ukukugcina.

Gcina lezi zici ezilinganisiwe engqondweni lapho uguqula ukugqwayiza:

• Amehlo athambekela ohlangothini lwe-backslash, cishe ngama-degree angu-26 ukusuka mpo.
• Umzimba empeleni uyindilinga ephelele, ukuphambuka kwawo ngokweradiyasi kungaphansi kuka-0.7%, hhayi i-squircle.
• Izinguquko zisebenzisa ama-exponential ease-out, futhi umzimba awedluli endaweni yawo.
• Ngesikhathi somphumela wenkanyezi enomsila, ichashazi lihlala linganyakazi kuyilapho umsila ulizungeza.
• I-avatar ephumule ayintanti; umuzwa wayo wokuphila uvela ekunyakazeni kancane kokubuka nasekucwayizeni.

Bheka imibhalo yezilinganiso ngaphambi kokushintsha amaphrofayela noma ukwakha kabusha i-profiles.ts.

Buyekeza Ukwakheka Kohlelo Ngaphambi Kokunweba Injini

Imibhalo yephrojekthi ichaza injini, ukuguqulwa kwamaphrofayela erediyasi, kanye nokusetshenziswa kwezimo zamehlo njengezimbobo zamamaski. Funda umhlahlandlela wokwakheka kohlelo ngaphambi kokwengeza izimo noma ukushintsha indlela yokuguqulwa. I-interface, ukulandelana kokufika, kanye nongqimba lokwenziwa kwamazwe ngamazwe kubhalwe ngokuhlukile kumhlahlandlela we-interface, kumhlahlandlela wesingeniso, kanye kumhlahlandlela wokwenziwa kwamazwe ngamazwe.

Hlola Umlando Wokukhishwa Ngaphambi Kokulungisa Amaphutha

I-changelog iqukethe okufakiwe okukodwa kukho konke ukukhishwa. Yihlole ukuze unqume ukuthi ikhophi yakho yendawo iqukethe yini ukulungiswa okuthile.

Isiphetho

U-Bloub uhlinzeka nge-avatar ye-SVG elinganiswe ngokucophelela, i-interface yokwenza ngokwezifiso okubonakalayo, umhleli womugqa wesikhathi, ukusampula kwamafreyimu okunqunywe ngokuqondile, kanye namafomethi amaningana okuthunyelwa ngaphandle kokuncika elabhulali yokugqwayiza. Qala ngebhodi lezimo elakhelwe ngaphakathi nezibonelo zezingxenye, sebenzisa izivivinyo nokwakhiwa kokukhiqiza ngemva kwezinguquko, futhi ulondoloze imibandela elinganisiwe lapho unweba ukugqwayiza.

Ikhodi iyatholakala ngaphansi kwelayisensi ye-MIT. Iphrojekthi ayihlangene, ayisekelwe, futhi ayixhunyiwe ku-x.ai. Ilayisensi ihlanganisa ikhodi yesigcinalwazi, hhayi umklamo ewuphindaphindayo.