Kuandika Mwongozo wa Fonti za SDF

Kwa nini Utoaji wa Fonti Bado Ni Muhimu Zaidi Kuliko Unavyofikiri

Kila pikseli kwenye skrini yako husimulia hadithi, na hakuna mahali hilo linaonekana zaidi kuliko jinsi maandishi yanavyofanya kazi kwenye vifaa vyote, maazimio na viwango vya kukuza. Fonti za kitamaduni za bitmap zilitusaidia vyema katika enzi ya vichunguzi vyenye msongo-thabiti, lakini mlipuko wa maonyesho ya juu ya DPI, violesura vinavyoitikia, na programu za 3D za wakati halisi zimefichua vikwazo vyake vya kimsingi. Ingiza fonti za Uga wa Umbali Uliosainiwa (SDF) — mbinu ya uwasilishaji ambayo imebadilisha kimya kimya jinsi programu za kisasa zinavyoonyesha maandishi safi na yanayoweza kupanuka bila kumbukumbu iliyojaa au kughairi utendakazi.

Iwapo unaunda UI ya mchezo, dashibodi ya data, au jukwaa linalomlenga mteja ambalo linahitaji kuonekana kiwembe kwa kila kitu kuanzia saa mahiri hadi kifuatilizi cha 4K, kuelewa fonti za SDF hukupa makali ya kiufundi. Mwongozo huu unachambua dhana kutoka kwa kanuni za kwanza, unapitia njia ya uzalishaji, na unatoa ushauri wa vitendo wa kuunganisha fonti za SDF katika miradi yako mwenyewe.

Sehemu ya Umbali iliyosainiwa ni Gani Hasa?

Sehemu ya Umbali Uliotiwa Sahihi ni muundo wa pande mbili ambapo kila pikseli huhifadhi umbali kutoka sehemu hiyo hadi ukingo wa karibu wa muhtasari wa glyph. Sehemu "iliyotiwa saini" ni muhimu: saizi ndani ya mpaka wa glyph huhifadhi maadili chanya, wakati saizi zilizo nje huhifadhi maadili hasi (au kinyume chake, kulingana na mkusanyiko). Mpaka yenyewe hukaa kwenye kivuko cha sifuri. Uwakilishi huu rahisi wa hisabati husimba kiasi cha ajabu cha maelezo ya umbo katika taswira ya rangi ya kijivu iliyounganishwa.

Mbinu hii iliangaziwa na karatasi ya Valve ya SIGGRAPH ya 2007, ambapo Chris Green alionyesha kuwa maandishi ya SDF yenye ukubwa mdogo kama pikseli 64x64 yanaweza kutoa maandishi ambayo yalisalia kuwa makali katika ukuzaji uliokithiri - matokeo ambayo yangehitaji bitmap ya 4096x4096 ili kufikia kwa uboreshaji wa kawaida. Ufahamu muhimu ni kwamba ukalimani wa muundo wa ndani wa GPU, ambao hutoa matokeo yenye ukungu kwenye fonti za kawaida za bitmap, kwa hakika hutoa tafsiri laini na sahihi ya umbali kwenye miundo ya SDF.

Kwa vitendo, atlasi moja ya fonti ya SDF - kwa kawaida ni pikseli 512x512 au 1024x1024 - inaweza kuwa na seti nzima ya herufi ambayo inaonyesha kwa usafi katika takriban saizi yoyote. Linganisha hiyo na mbinu za fonti za bitmap, ambazo zinahitaji atlasi tofauti za unamu kwa kila saizi ya fonti (16px, 24px, 32px, 48px, na kadhalika), ikitumia kwa haraka megabaiti za kumbukumbu ya maandishi kwa chapa moja.

Jinsi Atlasi za Fonti za SDF Hutolewa

Uzalishaji wa bomba huanza na faili ya fonti ya vekta (TTF au OTF) na hutoa atlasi ya maandishi pamoja na faili ya metadata inayoelezea nafasi, saizi na vipimo vya kila glyfu. Zana kadhaa za programu huria hushughulikia mchakato huu, huku msdf-atlas-gen, Hiero (sehemu ya libGDX), na msdfgen zikiwa ndizo zinazotumika zaidi. Mchakato huo unahusisha kurahisisha kila glyfu katika mwonekano wa juu, kutayarisha uga wa umbali kwa kutumia algoriti kama vile ubadilishaji wa umbali wa Euclidean wa pointi 8 (8SEDT), na kisha kufunga matokeo katika muundo mmoja.

Kuna aina tatu kuu za SDF unapaswa kuelewa:

• SDF ya Kawaida (kituo kimoja): Huhifadhi thamani moja ya umbali kwa kila pikseli. Hutoa mikunjo laini lakini inapambana na kona kali, ambazo huwa na mwonekano wa chini kwa mwonekano wa chini. Bora zaidi kwa maandishi ya mwili na hali ambapo ulainishaji wa kona kidogo unakubalika.
• SDF ya vituo vingi (MSDF): Hutumia chaneli tatu za rangi (RGB) kusimba maelezo ya umbali kutoka sehemu tofauti za makali. Hii huhifadhi kona kali na maelezo mazuri bora zaidi kuliko SDF ya kituo kimoja, na kuifanya chaguo linalopendelewa kwa programu nyingi za kisasa. Iliyoundwa na Viktor Chlumský, MSDF imekuwa kiwango cha ukweli.
• Vituo vingi + SDF ya Kweli (MTSDF): Huongeza chaneli ya nne ya alfa iliyo na uga wa kweli wa umbali kando ya chaneli tatu za MSDF. Hii hutoa ulimwengu bora zaidi - pembe kali kutoka MSDF na maelezo sahihi ya umbali kwa athari kutoka kwa SDF halisi - kwa gharama ya maandishi makubwa zaidi.

Amri ya kawaida ya kizazi kwa kutumia msdf-atlas-gen inaweza kubainisha saizi ya fonti ya pikseli 42, masafa ya umbali wa pikseli 4 na ukubwa wa umbile wa 1024x1024. Kigezo cha masafa ya masafa hudhibiti ni umbali gani kutoka kwa ukingo wa glyph maelezo ya umbali yanaongezwa, ambayo huathiri moja kwa moja ubora wa juu zaidi wa muhtasari, vivuli, na athari za mwanga unayoweza kutumia wakati wa utekelezaji.

The Fragment Shader: Ambapo Uchawi Unatokea

Upande wa uwasilishaji wa fonti za SDF ni rahisi sana. Katika shader yako ya kipande, unachukua sampuli ya muundo wa SDF, linganisha thamani ya umbali dhidi ya kizingiti (kawaida 0.5 kwa ukingo wa glyph), na utumie chaguo la kukokotoa la kulainisha ili kuzuia mpito. Mantiki ya msingi katika GLSL inaonekana hivi: fanya mfano wa wastani wa chaneli tatu za MSDF, kusanya kipenyo cha umbali wa nafasi ya skrini ili kuzuia uwekaji alama ipasavyo, kisha tumia kitendakazi cha kukokotoa ili kutoa thamani ya mwisho ya alfa.

Nguvu halisi ya fonti za SDF haipo tu katika utatuzi wa uhuru, lakini katika gharama ndogo ya kuongeza athari. Muhtasari, vivuli vya kudondosha, mwangaza wa ndani, na hata beveli za 3D zote zinaweza kukokotwa katika kipitishio kimoja cha shader kwa kupima kwa urahisi dhidi ya vizingiti tofauti vya umbali - hakuna maumbo ya ziada, hakuna simu za ziada za kuchora, hakuna safu za athari zilizopikwa awali.

Kwa madoido ya msingi ya muhtasari, unajaribu vizingiti viwili: kimoja kwa ukingo wa nje wa muhtasari na kimoja cha ujazo wa ndani. Pixels zinazoanguka kati ya vizingiti hivi hupata rangi ya muhtasari; saizi ndani kupata rangi ya kujaza. Vivuli vya kudondosha hufanya kazi vivyo hivyo - rekebisha viwianishi vya unamu kabla ya kuchukua sampuli, weka safu pana ya kulainisha, na ujumuishe kivuli nyuma ya glyfu kuu. Operesheni hizi huongeza gharama ndogo ya GPU kwa sababu ni oparesheni za kihesabu kwenye thamani ya umbali ambayo tayari imetolewa sampuli.

Uzuiaji wa nafasi ya skrini unastahili kuangaliwa mahususi. Utekelezaji wa ujinga hutumia upana usiobadilika wa kulainisha, ambao hutoa maandishi ambayo yanaonekana vizuri kwa ukubwa mmoja lakini yakiwa na ukungu sana au yana mshituko sana kwa mengine. Mbinu sahihi hukokotoa upana wa kulainisha kutoka kwa viasili vya nafasi ya skrini ya uga wa umbali (kwa kutumia fwidth() katika GLSL au ddx/ddy katika HLSL). Hii hubadilisha kiotomatiki kizuia uasiliaji kwa saizi ya sasa ya uwasilishaji, na kutoa kingo nyororo bila kujali kiwango cha kukuza au umbali wa kutazama.

Mitego ya Kawaida na Jinsi ya Kuepuka

Licha ya umaridadi wao, fonti za SDF huja na gotcha ambazo zinaweza kuwavutia hata wasanidi wenye uzoefu. Suala la kawaida ni umbali usiotosha wakati wa kutengeneza atlasi. Ikiwa umbali ni finyu sana, madoido kama vile mihtasari minene au vivuli vikubwa vitapungua kwa ghafla kwenye ukingo wa masafa yaliyosimbwa. Kanuni nzuri ya kidole gumba ni kuweka umbali kuwa angalau mara mbili ya upeo wa upeo wa eneo la athari unalopanga kutumia, linalopimwa kwa pikseli za atlasi.

Tatizo lingine la mara kwa mara ni uchujaji wa maandishi. Miundo ya SDF lazima itumie uchujaji wa njia mbili — uchujaji wa jirani wa karibu zaidi huharibu ukalimani unaofanya mbinu hiyo kufanya kazi, kutoa maandishi yaliyozuiliwa, yaliyoachwa. Hata hivyo, unapaswa kuzima mipmapping kwa atlasi za SDF, kwa kuwa sehemu za umbali ambazo hazijapangwa hutoa matokeo yasiyo sahihi katika viwango vya chini vya mip ambapo kingo za glyph za mbali zinaweza kumwaga damu.

Mpangilio wa Kerning na maandishi pia ni maeneo ambayo wasanidi mara nyingi hukata pembe. Atlasi ya SDF hushughulikia utoaji, lakini uundaji sahihi wa maandishi - nafasi kati ya herufi, jozi za kerning, urefu wa mstari, na maandishi yanayoelekeza pande mbili - bado inahitaji injini ya mpangilio. Maktaba kama HarfBuzz au FreeType hushughulikia hili kwa usahihi. Kuruka uundaji sahihi wa maandishi ili kupendelea nafasi rahisi ya upana usiobadilika ndiyo njia moja ya haraka zaidi ya kufanya uwasilishaji wako wa maandishi uonekane wa ajabu, bila kujali jinsi utekelezaji wako wa SDF ulivyo safi.

1. Zalisha kwa ubora wa ukarimu. Huku fonti za SDF zikishuka kwa uzuri, kuanzia na saizi ya glyph ya angalau pikseli 32-48 kwenye atlasi huhifadhi maelezo mazuri katika glyfu changamano kama vile herufi za CJK au hati za mapambo.
2. Tumia MSDF kwenye SDF ya kituo kimoja isipokuwa kama una sababu maalum ya kutofanya hivyo. Uboreshaji wa usahihi wa pembeni ni wa kushangaza na wa juu usio na maana.
3. Jaribu kwa ukubwa uliokithiri. Toa maandishi yako kwa 8px na 200px wakati wa usanidi. Masuala yasiyoonekana kwa ukubwa wa kawaida huwa wazi katika hali ya kupita kiasi.
4. Kumbukumbu ya muundo wa wasifu. Atlasi moja ya 1024x1024 MSDF (RGB, 8-bit) hutumia kumbukumbu ya MB 3 ya GPU. Hiyo kwa kawaida ni chini ya saizi mbili za fonti za bitmap katika ubora unaolingana.
5. Kokota glyph quads mapema kwenye CPU. Bafa ya kipeo iliyo na glyph quads zilizowekwa hubadilika tu wakati maudhui ya maandishi yanabadilika, si kila fremu. Weka akiba kwa uchokozi.

Fonti za SDF katika Uzalishaji: Programu za Ulimwengu Halisi

Mitambo ya michezo iliongoza kupitishwa kwa fonti za SDF, lakini mbinu hiyo imeenea zaidi ya michezo ya kubahatisha. Ramani za Google hutumia lebo zinazotolewa na SDF kwa viwekeleo vyake vya ramani, na kuruhusu majina ya mahali kusalia kuhalalika kutoka kwa ukuzaji wa kiwango cha barabara hadi ukuzaji wa kiwango cha bara bila kubatilisha tena. Mapbox GL inategemea kabisa glyphs za SDF kwa ramani zake zinazotolewa na WebGL, zinazohudumia vigae vya atlasi vya SDF vilivyotengenezwa awali kutoka CDN yake. Katika hali zote mbili, uhuru wa azimio la fonti za SDF huondoa aina nzima ya hitilafu za uwasilishaji za kiwango cha zoom.

Maombi ya biashara yanafaidika kwa usawa. Jukwaa lolote linaloonyesha maandishi yanayobadilika katika turubai au muktadha wa WebGL - fikiria dashibodi, taswira ya data, ripoti shirikishi au ishara dijitali - hupata manufaa ya mara moja kutoka kwa uwasilishaji wa SDF. Huko Mewayz, ambapo biashara hudhibiti kila kitu kutoka kwa ankara hadi uchanganuzi katika moduli 207 zilizounganishwa, uwasilishaji wa maandishi thabiti na tendaji kwenye vifaa vyote si anasa - ni sharti. Mmiliki wa mgahawa anapoangalia dashibodi yake ya kuweka nafasi kwenye simu na mhasibu wake akakagua data sawa kwenye kifuatilizi cha inchi 32, maandishi yanahitaji kusahihishwa kwa usawa bila kusafirisha vipengee tofauti vya fonti kwa kila msongamano wa skrini.

Mfumo ikolojia wa WebGL umefanya fonti za SDF kufikiwa zaidi na wasanidi wa wavuti. Maktaba kama three-mesh-ui na troika-three-text hutoa uwasilishaji wa maandishi wa kunjuzi wa MSDF kwa matukio ya Three.js, wakati wasanidi wa kiwango cha chini wanaweza kutekeleza uwasilishaji maalum wa SDF kwa chini ya mistari 100 ya msimbo wa shader. Mbinu hii pia imepata njia yake katika ukuzaji wa simu asilia kupitia mifumo kama Flutter, ambayo hutumia uonyeshaji unaotegemea SDF kwa injini yake maalum ya maandishi.

Zaidi ya Maandishi: Mbinu za SDF Zinakoelekea

Dhana ya uga wa umbali inaenea zaidi ya uwasilishaji wa fonti. Wasanifu wa kiolesura wanatumia mbinu za SDF ili kuunda aikoni zisizo na msongo wa mawazo, maumbo ya kivekta yanayoweza kupanuka, na hata vipengele vya kiutaratibu vya UI kama vile mistatili iliyo na pembe zinazolingana na pikseli. Mbinu sawa ya atlas inayofanya fonti za SDF kuwa na kumbukumbu kwa ufanisi hutumika sawa kwa seti za aikoni - atlasi moja ya 512x512 SDF inaweza kuwa na mamia ya aikoni zinazoonyesha kikamilifu katika ukubwa wowote.

Kwenye mipaka ya utafiti, mbinu za msingi wa mtandao wa neva zinaibuka ambazo hujifunza kutoa sehemu za umbali moja kwa moja kutoka kwa muhtasari wa vekta, ambayo inaweza kutoa matokeo ya ubora wa juu kuliko mbinu za kitamaduni za algoriti. Wakati huo huo, uwasilishaji wa upana wa kiharusi kwa kutumia maumbo ya SDF unafungua uwezekano mpya wa madoido ya maandishi ya kalio na maandishi yaliyoandikwa kwa mkono ambayo hapo awali hayakuwa na manufaa katika programu za wakati halisi.

Kwa wasanidi programu wanaounda programu za kisasa, za mifumo mingi, fonti za SDF zinawakilisha mojawapo ya mbinu hizo adimu ambapo uwekezaji wa kujifunza hutoa faida katika takriban kila mradi. Ubora wa uwasilishaji hushindana na injini za maandishi asilia, alama ya kumbukumbu ni sehemu ya mbadala za bitmap, na mfumo wa madoido wa msingi wa shader hutoa unyumbufu wa ubunifu ambao mbinu za kuoka kabla haziwezi kulingana. Iwe unatoa lebo kwenye globu ya 3D au kuhakikisha kuwa data muhimu ya biashara inaonekana ipasavyo katika kila skrini katika maisha ya watumiaji wako, fonti za SDF ni zana inayostahili kufundishwa.

Maswali Yanayoulizwa Sana

Fonti za SDF ni nini na kwa nini wasanidi wanapaswa kuzijali?

Fonti za Sehemu ya Umbali Zilizotiwa sahihi huhifadhi thamani za umbali kutoka kwa kila pikseli hadi ukingo wa glyph ulio karibu zaidi, kuwezesha uwasilishaji wa maandishi usio na msongo wa mawazo. Tofauti na fonti za kitamaduni za bitmap ambazo huwa na ukungu zinapoongezwa, fonti za SDF husalia kuwa shwari katika saizi yoyote au kiwango cha kukuza. Hii inazifanya kuwa muhimu kwa violesura vya kisasa vinavyoitikia, UI ya mchezo, na programu yoyote inayolenga msongamano wa skrini nyingi - kutoka kwa vifaa vya mkononi hadi vifuatilizi vya 4K na zaidi.

Je, fonti za SDF zinalinganishwa vipi na uwasilishaji wa fonti wa kawaida wa bitmap na vekta?

Fonti za Bitmap zinahitaji maumbo tofauti kwa kila saizi, zikitumia kumbukumbu kubwa huku zikiendelea kutengeneza vizalia vya programu vinapopimwa. Fonti za Vekta hutoa ubora kamili lakini ni ghali kwa kukokotoa kusasisha kwa wakati halisi. Fonti za SDF hupata uwiano bora - muundo mmoja wa kompakt unaonyesha uzuri katika kipimo chochote na uendeshaji mdogo wa GPU, na kuzifanya ziwe chaguo linalopendelewa kwa programu za wakati halisi kama vile michezo na dashibodi wasilianifu.

Ni zana na maktaba gani zinazopatikana kwa ajili ya kutengeneza fonti za SDF?

Chaguo maarufu ni pamoja na msdfgen kwa kutengeneza idhaa nyingi za SDF, Hiero ya upakiaji wa fonti ya bitmap kwa usaidizi wa SDF, na huduma mbalimbali za mstari wa amri wa chanzo huria. Injini nyingi za mchezo kama vile Unity na Godot zinajumuisha usaidizi wa maandishi wa SDF uliojengewa ndani. Kwa biashara zinazounda programu maalum, mifumo kama Mewayz yenye mfumo wa uendeshaji wa biashara wa moduli 207 kuanzia $19/mo inaweza kujumuisha mbinu hizi za uwasilishaji kwenye matumizi ya kidijitali yenye chapa.

Je, fonti za SDF zinaweza kushughulikia madoido maalum kama vile muhtasari, vivuli, na maandishi yanayong'aa?

Hakika - hii ni mojawapo ya uwezo mkubwa wa fonti za SDF. Kwa sababu data ya uga wa umbali inapatikana katika shader, unaweza kuongeza muhtasari, dondosha vivuli, mwanga mwepesi, na hata athari za uhuishaji kwa kurekebisha tu viwango vya juu. Athari hizi hazigharimu chochote katika utendakazi kwa kuwa hazihitaji jiometri ya ziada au pasi za umbile, hivyo kuwapa wabunifu uhuru wa ajabu wa ubunifu bila kughairi viwango vya fremu.