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: SpriteHit vastaa 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#

KohdeVarjo, ääriviiva, hehkuSumennusTekstiefektit
Editorikylläkylläkyllä
HTML5-vientikylläkylläkyllä
Natiivi ja wasm (Bevy)kylläeiei

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.