Opasarkisto: Visual Basic -opas: Osa 7 - VB:n grafiikkakomennot

Grafiikan piirtäminen on yksi kiinnostavimmista ohjelmoinnin alueista. Tämä opas kertoo Visual Basicin omista grafiikkakomennoista, joilla onnistuu helposti pisteiden, viivojen, ympyröiden ja muiden kuvioiden piirtäminen, tekstin tulostaminen näytölle sekä valmiiden kuvatiedostojen näyttäminen. Grafiikan piirtoon liittyvät ongelmat eivät myöskään jää huomiotta. Usein ratkaisuna ongelmaan on käyttää Visual Basicin ulkopuolista kirjastoa, joita on esitelty oppaan lopussa.

Piirtoasteikko

Visual Basicin tavallinen mittayksikkö on twip, jonka pituus on ¹/₅₆₇ eli noin 0,002 senttimetriä. Grafiikan piirtoon tämä mittayksikkö ei kuitenkaan sovellu hyvin, vaan on parempi käyttää pikseleitä. Yksi pikseli vastaa suoraan yhtä näytöllä näkyvää kuvapistettä. Mittayksikkö valitaan lomakkeen tai kuvakehyksen ScaleMode-ominaisuuden avulla, pikselin tunnusnumero on 3. Kaikissa tämän oppaan esimerkeissä mittayksiköksi on valittu pikseli.

Ominaisuudet ScaleLeft, ScaleTop, ScaleWidth ja ScaleHeight kertovat lomakkeen tai kuvakehyksen piirtoasteikon. Näiden ominaisuuksien arvo muuttuu automaattisesti ScaleMode-ominaisuuden vaihtuessa. Joskus voi kuitenkin olla kätevää määrittää piirtoasteikko itse.

Esimerkki: Lomakkeen leveys (Width) on 4800 ja korkeus (Height) on 3600. Aluksi ScaleWidth on 4680 ja ScaleHeight on 3195. Ero lomakkeen todelliseen kokoon johtuu siitä, että reunukset ja otsikkorivi vievät jonkin verran tilaa piirtoalueelta. Vaihdetaan ScaleModeksi 3, jolloin ScaleWidth on 312 ja ScaleHeight on 213. Tämä on piirtokomentojen käyttämä uusi asteikko.

Värit

Värit ilmoitetaan tavallisesti RGB-funktion avulla, jolloin parametrina on punaisen, vihreän ja sinisen värisävyn osuus asteikolla 0 – 255. Esimerkiksi punainen väri on RGB(255, 0, 0), tummansininen RGB(0, 0, 100) ja vaaleanharmaa RGB(200, 200, 200). Samat värit kokonaislukumuodossa ovat &H0000FF, &H640000 ja &HC8C8C8; jokainen värisävy mahtuu Long-tyyppiseen muuttujaan.

Väreihin liittyy kolme ominaisuutta: taustaväriin vaikuttava BackColor, piirtoväriin vaikuttava ForeColor ja täyttöväriin vaikuttava FillColor. Kaksi ensimmäistä ominaisuutta on lomakkeen ja kuvakehyksen lisäksi monilla muillakin ohjaimilla. Useimmissa piirtokomennoissa värin voi myös määrittää erikseen, jolloin se kumoaa lomakkeen tai kuvakehyksen valmiin määrityksen.

Piirtokomennot

Tärkeimmät lomakkeen ja kuvakehyksen piirtokomennot ovat:

Seuraavissa esimerkeissä piirtokomennot voi kirjoittaa esimerkiksi lomakkeen Activate-tapahtumaan.

• Piste piirretään PSet-komennolla, jonka parametrit ovat:

  PSet (x, y)[, väri]

  Punainen piste ohjelman vasempaan ylänurkkaan piirretään näin:

  Me.PSet (10, 10), RGB(255, 0, 0)

  Pisteen väri luetaan vastaavasti Point-komennolla:

  väri = Point(x, y)

  Tämä koodi näyttää äsken piirretyn pikselin värin heksamuodossa:

  MsgBox Hex(Me.Point(10, 10))

• Viiva piirretään Line-komennolla, jonka parametrit ovat:

  Line (x1, y1)-(x2, y2)[, väri]

  Ensimmäinen piste ilmaisee viivan aloituskohdan ja toinen piste lopetuskohdan. Seuraava esimerkki piirtää viivan kohdasta (5, 5) kohtaan (30, 20).

  Line (5, 5)-(30, 20), RGB(120, 120, 0)

• Suorakulmio piirretään myös Line-komennolla.

  Line (x1, y1)-(x2, y2), [väri], taytto

  Viimeinen parametri on erikoislaatuinen. Jos parametri on B, piirretään pelkästään suorakulmion reunat. Jos parametri on BF, suorakulmio myös täytetään. Seuraavassa esimerkissä piirretään kolme suorakulmiota, joista jokaisen reunuksen värin määrää ForeColor-ominaisuus.

  ' täyttämätön suorakulmio
  Me.FillStyle = 1
  Me.Line (5, 5)-(50, 50), , B
  
  ' ForeColor-värillä täytetty suorakulmio
  Me.Line (15, 15)-(65, 65), , BF
  
  ' FillColor-värillä täytetty suorakulmio
  Me.FillStyle = 0
  Me.FillColor = RGB(255, 0, 0)
  Me.Line (25, 25)-(75, 75), , B

• Ympyrä piirretään Circle-komennolla, jonka tärkeimmät parametrit ovat:

  Circle (x, y), säde[, väri]

  Tämä koodi piirtää kolme sisäkkäistä ympyrää, joilla on eri säde:

  Me.Circle (100, 100), 50, RGB(255, 0, 0)
  Me.Circle (100, 100), 30, RGB(0, 255, 0)
  Me.Circle (100, 100), 10, RGB(0, 0, 255)

  Myös ympyrän kaaren osien ja ellipsien piirtäminen on mahdollista Circle-komennolla. Lisätietoa asiasta on VB:n ohjeessa.

• Teksti tulostetaan Print-komennolla. Tekstin fonttiin vaikuttaa Font-ominaisuus, ja väri määräytyy ForeColorin perusteella niin kuin muissakin piirtokomennoissa. Tekstin loppuun tulee automaattisesti rivinvaihto. Seuraava esimerkki tulostaa kolme riviä tekstiä.

  ' oletusfontti
  Me.Print "Eka rivi"
  
  ' Arial-fontti
  Me.Font = "Arial"
  Me.Print "Toka rivi"
  
  ' edellinen kursivoituna
  Me.Font.Italic = True
  Me.Print "Kolmas rivi"

  Jos tekstin jälkeen tulee puolipiste, tulostus jatkuu seuraavalla kerralla samalta riviltä. Tulostuskohtaa voi muuttaa myös CurrentX- (x-koordinaatti) ja CurrentY-ominaisuuksien (y-koordinaatti) avulla. Lisäksi TextWidth-funktio palauttaa tekstin leveyden ja TextHeight palauttaa tekstin korkeuden valitulla fontilla.

Kuvat näytöllä ja muistissa

Jos lomakkeen tai kuvakehyksen AutoRedraw-ominaisuus on False (oletus), grafiikka piirretään ainoastaan näytölle. Mutta jos AutoRedraw on True, grafiikka tallennetaan myös muistiin, jolloin se ei esimerkiksi katoa, jos ikkunan päälle tulee välillä jonkin toisen ohjelman ikkuna. Tietyissä tapauksissa AutoRedraw myös vähentää vilkkumista, mutta se myös hidastaa grafiikan piirtämistä. Jos AutoRedraw on False, ikkunan päivityksestä täytyy huolehtia itse. Aina kun päivitys on tarpeen, siirrytään Paint-tapahtumaan. Väärin asetetulla AutoRedraw-ominaisuudella on taipumus aiheuttaa mystisiä grafiikkaongelmia ohjelmassa.

Ominaisuudet Picture ja Image ovat lähellä toisiaan. Jos lomakkeeseen, kuvakehykseen tai kuvaohjaimeen ladataan valmis kuva tiedostosta, käytetään Picture-ominaisuutta. Mahdollisia kuvamuotoja ovat muiden muassa BMP, GIF ja JPG, ja kuvan voi ladata joko suunnitteluvaiheessa ominaisuuslistan kautta tai koodissa LoadPicture-funktiolla. Jos parametrina antaa tyhjän merkkijonon, kuva katoaa. Kuvakehykseen ladataan kuva näin:

pKuva.Picture = LoadPicture("oma.bmp")

Ominaisuus Image sisältää ladatun kuvan lisäksi myös jälkeenpäin piirretyn grafiikan, jos AutoRedraw on True. Komennolla SavePicture näin piirretyn grafiikan voi myös tallentaa takaisin tiedostoon. Tallennusmuoto on aina BMP. Seuraava esimerkki tallentaa tiedostoon kuvakehykseen piirretyn grafiikan.

' tätä ilman tallennus ei onnistu
pKuva.AutoRedraw = True

' piirretään grafiikkaa
pKuva.Circle (30, 30), 20
pKuva.Line (30, 30)-(60, 60), , B

' tallennetaan kuva
SavePicture pKuva.Image, "tuotos.bmp"

Viiva- ja kuvio-ohjain

Viivoja ja yksinkertaisia kuvioita voi esittää myös viiva- ja kuvio-ohjainten avulla. Ohjaimet ovat siinä mielessä poikkeuksellisia, että niillä ei ole lainkaan tapahtumia eikä toimintoja. Tärkeimmät viivaohjaimen ominaisuudet ovat viivan paikan määrittävät X1, Y1, X2 ja Y2. Kuvio-ohjaimen paikka määritetään muiden ohjainten lailla, ja Shape-ominaisuus vaikuttaa näytettävään kuvioon (suorakulmio, neliö, ympyrä). Grafiikkakomentoihin verrattuna ohjainten etuna on se, että niitä voi liikuttaa helposti taustan sotkeutumatta. Todellisuudessa viiva- ja kuvio-ohjaimelle ei kuitenkaan ole kovin usein käyttöä.

Kun Visual Basic ei riitä...

Valmiiden grafiikkakomentojen käyttäminen on helppoa, mutta ne eivät usein ole riittävän nopeita esimerkiksi peleissä tarvittavaan grafiikkaan. Toisinaan riittää, että käyttää Windows APIn grafiikkafunktioita Visual Basicin omien sijasta, mikä ei vaadi suuria muutoksia ohjelmaan. Mutta parhaimmat pelit toteutetaan kuitenkin Direct3D:n (osa DirectX:ää), OpenGL:n tai jonkin muun varta vasten grafiikkaohjelmointiin tarkoitetun kirjaston avulla. Näiden kirjastojen käyttö pitää opetella erikseen, mutta lopputulos on vaivan arvoinen.

Jos olet kiinnostunut peliohjelmoinnista, nämä Ohjelmointiputkan oppaat ovat tutustumisen arvoisia:

• Sprite-ohjelmointi – käytetään WinAPI:n BitBlt-funktiota animaation tekemiseen
• 2D:tä DirectX:llä – helppotajuinen johdatus kaksiulotteiseen DirectX-grafiikkaan
• Peliohjelmointi – valottaa monia peliohjelmointiin liittyviä yksityiskohtia