Sprite and text effects
Varjo, ääriviiva, hehku ja sumennus 2D-spriteille ja tekstille, sekä se, mitä kukin maksaa, mitä se tekee liikkuvalle spritelle, ja käsin rakennettu resepti, jonka se korvaa.
Mitä tämä on varten#
Tähän asti 2D-sprite pystyi kantamaan sävyn ja kuvan, eikä mitään muuta. Hahmon irrottamiseksi taustastaan piti rakentaa efekti käsin: luoda toinen sprite, sävyttää se mustaksi, siirtää sitä, laittaa se taakse, ja pitää se tahdissa ensimmäisen kanssa joka ikisellä ruudulla. Se toimii. Se on myös neljä ylimääräistä riviä kirjanpitoa per hahmo, ja sinä päivänä, kun unohdat yhden niistä, varjo jää laahaamaan omistajansa perässä.
Neljä komentoa tekee sen puolestasi, spriteillä ja tekstillä:
hero = LoadSprite("hero.png")
SpritePosition(hero, 160, 120)
SpriteShadow(hero, 4, 4, 6, 128) ' offset x, offset y, softness, opacity
SpriteOutline(hero, 2, 255, 255, 255) ' thickness, colour
SpriteGlow(hero, 0, 240, 255, 8) ' colour, size
DO
Sync()
LOOP
Ei muuta ylläpidettävää. Siirrä spriteä, skaalaa se, käännä se, soita sen animaatio: efektit seuraavat mukana.
Neljä efektiä#
Varjo#
SpriteShadow(spriteID, offsetX, offsetY, softness, opacity)
SpriteShadowColor(spriteID, red, green, blue)
offsetX ja offsetY ovat omissa ruutuyksiköissäsi, laskettuna samalla
tavalla kuin SpritePosition: positiivinen Y on alaspäin. softness
levittää varjoa; opacity kulkee väliltä 0-255. Väri on musta, ellet sano
toisin.
SpriteShadow(hero, 3, 5, 4, 110)
SpriteShadowColor(hero, 20, 0, 40) ' kylmä varjo, ei harmaa
Varjo, jonka opacity on 0, ei ole varjo. Näin se kytketään pois päältä.
Ääriviiva#
SpriteOutline(spriteID, thickness, red, green, blue)
Ääriviiva seuraa spriten siluettia, ei sitä suorakulmiota, jossa se asuu: läpinäkyvä PNG saa ääriviivan piirroksen ympärille, ei tiedoston ympärille. Paksuus on ruutuyksiköissä, ja 1-3 on käyttökelpoinen alue. Sen yläpuolella kahdeksan suuntaa, joista ääriviiva rakennetaan, alkavat näkyä kahdeksana lohkona.
SpriteOutline(hero, 2, 255, 255, 255) ' millä tahansa taustalla luettava ääriviiva
SpriteOutline(hero, 0, 0, 0, 0) ' pois päältä
Hehku#
SpriteGlow(spriteID, red, green, blue, size)
Värillinen sädekehä, joka levittäytyy size-yksikköä siluetin taakse. Se istuu
spriten takana ja varjon edessä, ja juuri se antaa sinun käyttää molempia.
SpriteGlow(pickup, 255, 210, 0, 10) ' tämän luo kannattaa kävellä
Sumennus#
SpriteBlur(spriteID, radius)
Sumennus on se erilainen. Kolme muuta piirretään spriten ympärille; sumennus korvaa spriten oman kuvan sen sumennetulla kopiolla. Se tarkoittaa kahta asiaa, jotka kannattaa tietää:
- se ei maksa mitään per ruutu (sumennettu kuva lasketaan kerran), ja
- sumennus leikkautuu kuvan reunasta. Piirros, joka koskettaa PNG:nsä reunaa, menettää sen osan sädekehästään, joka putoaisi ulkopuolelle. Jätä tiedostoon muutama läpinäkyvä pikseli marginaalia, jos aiot sumentaa sen.
SpriteColor jatkaa toimimista sumennetulla spritellä.
Kaiken kytkeminen pois, ja takaisin#
SpriteEffects(spriteID, 0) ' kaikki neljä pois
SpriteEffects(spriteID, 1) ' kaikki neljä takaisin, tarkalleen entisellään
SpriteEffects ei pyyhi asetuksiasi. Se on kytkin, ei nollaus, joten hahmo voi
välähtää ilman, että joudut julistamaan sen varjon uudelleen jälkikäteen.
Samat neljä tekstillä#
score = CreateText("SCORE 0")
TextPositionSet(score, 10, 10)
TextSizeSet(score, 6)
TextOutline(score, 3, 0, 0, 0) ' luettava millä tahansa taustalla
TextShadow(score, 2, 2, 4, 160)
TextGlow(score, 255, 80, 0, 6)
TextBlur(score, 0)
TextEffects(score, 1)
Signatuurit täsmäävät spritejen kanssa tarkalleen, joten mitään uutta ei tarvitse opetella. Kaksi eroa käytöksessä:
- Hehku voittaa varjon pehmeyden. Molemmat piirretään samalla mekanismilla, ja hehku ilman pehmeyttä on näkymätön, kun taas varjo ilman pehmeyttä on yhä varjo. Kun pyydät molempia, hehku saa pehmeyden.
- Nämä koskevat vektoritekstiä, eivät bittikarttafontilla piirrettyä
tekstiä.
TextFontImage-komennolla piirretty teksti on kokoelma spritejä; komennot ohitetaan sillä hiljaa. Käytä siinä tapauksessa sprite-efektejä itse spriteillä.
Käytännön esimerkki: luettava millä tahansa#
Ongelma, jonka nämä komennot oikeasti ratkaisevat, on kontrasti, jota et hallitse. Valkoinen pistemäärä on näkymätön lumella; musta on näkymätön yöllä. Ääriviiva ratkaisee sen kerralla, jokaiselle taustalle, jonka tulet koskaan piirtämään.
CreateText(1, "SCORE 0")
TextPositionSet(1, 10, 10)
TextSizeSet(1, 8)
TextColorSet(1, 255, 255, 255, 255)
TextOutline(1, 3, 0, 0, 0)
hero = LoadSprite("hero.png")
SpriteName(hero, "hero")
SpriteShadow(hero, 4, 6, 5, 120)
SpriteOutline(hero, 2, 255, 255, 255)
points = 0
DO
points = points + 1
TextString(1, "SCORE " + Str(points))
Sync()
LOOP
Efektin lukeminen takaisin#
Jokaisella parametrilla, jonka kirjoitat, on lukija, samaan tapaan kuin
SpriteColorilla on SpriteColorRed. Se on murteen sääntö, ja nämä komennot
noudattavat sitä.
IF SpriteEffectsEnabled(hero) = 1
SpriteEffects(hero, 0)
ENDIF
alpha = SpriteShadowAlpha(hero) ' 0-255
size = SpriteGlowSize(hero) ' 0 tarkoittaa ei hehkua
Koko joukko, perheittäin: SpriteShadowOffsetX, SpriteShadowOffsetY,
SpriteShadowBlur, SpriteShadowAlpha, SpriteShadowColorRed,
SpriteShadowColorGreen, SpriteShadowColorBlue, SpriteGlowRed,
SpriteGlowGreen, SpriteGlowBlue, SpriteGlowSize,
SpriteOutlineThickness, SpriteOutlineRed, SpriteOutlineGreen,
SpriteOutlineBlue, SpriteBlurRadius, SpriteEffectsEnabled, sekä samat
seitsemäntoista Text-etuliitteellä.
Kaksi sääntöä, jotka kannattaa tietää:
- Sprite, jolle ei ole koskaan annettu efektiä, ilmoittaa itsensä PÄÄLLÄ olevaksi. Se on oletustila; 0:n vastaaminen kertoisi ohjelmalle, että sen efektit on katkaistu ennen kuin se on asettanut yhtäkään.
- Kysyminen spritestä, jota ei ole olemassa, vastaa 0:lla, se ei pysäytä
ohjelmaa. Näin murre kohtelee kysymyksiä kaikkialla:
SpriteHitvastaa 0:lla, kun mikään ei kosketa, ja ohjelmat lukevat sen 0:n testaamatta sitä.
Mitä se maksaa#
Varjo, ääriviiva ja hehku piirretään, joten ne maksavat piirtokutsuja: yksi varjolle (kolme kun se on pehmeä), neljä hehkulle, kahdeksan ääriviivalle. Ruutu, jossa on kaksisataa ääriviivoitettua spriteä, piirtää tuhatkahdeksansataa neliötä, ja se näkyy. Ne on tarkoitettu sille kourralliselle asioita, joita pelaajan on tarkoitus katsoa: hahmolle, poiminnalle, valitulle yksikölle.
Sumennus ei maksa mitään per ruutu.
Käytännön sääntö: efektit sille, mikä liikkuu ja merkitsee, ei mitään taustalle.
Mitä siirtyy vietyyn peliin#
| Kohde | Varjo, ääriviiva, hehku | Sumennus | Tekstiefektit |
|---|---|---|---|
| Editori | kyllä | kyllä | kyllä |
| HTML5-vienti | kyllä | kyllä | kyllä |
| Natiivi ja wasm (Bevy) | kyllä | ei | ei |
Varjo, ääriviiva ja hehku on rakennettu tavallisista spriteistä, joten ne kulkevat kaikkialle, minne spritetkin. Sumennus ja tekstiefektit tarvitsevat sillan, jota Bevy-kohteilla ei vielä ole: vientiraportti nimeää ne sen sijaan, että se pudottaisi ne hiljaa, joten build kertoo, mitä se ei pystynyt kuljettamaan mukanaan.
Missä efektejä ei ole#
Ei ole SpriteEffect(id, "glow", ...), joka ottaisi efektin nimen
merkkijonona. Jokainen efekti on oma komentonsa, jotta sen parametrit voidaan
nimetä, dokumentoida ja täydentää kirjoittaessa. Kaiken muun kuin näiden
neljän osalta kaksi muuta komentoa ottavat vastuun: SpriteBlendModes(id, src, dst) additiiviselle tai kerrotulle sekoitukselle (tuli, laser), ja
SpriteShader(id, shaderID) asettaakseen LoadSpriteShaderilla käännetyn
shaderin spritelle. Molemmat oli julistettu luettelossa pitkään ilman
toteutusta, ja niiden kutsuminen nosti virheen; nyt ne toimivat.