Lekce 5 - Small Basic - Grafická okna

Minule jsme si popsali třídy TextWindow, Network a Math. Dnes se posuneme v seriálu dále a začneme tvořit mnohem zajímavější aplikace. Uvedeme si totiž práci s grafickými okny.

Úvod do grafických oken

Tak tedy začneme. S grafickými okny se dá ve Small Basicu dost slušně hrát a toto vás bude i bavit . Vždy je dobré si nastavit barvu pozadí, to uděláte takto:

GraphicsWindow.BackgroundColor = "Black"

A vaše okno by mělo vypadat takto:

Máte tedy první grafické okno! Možná by to chtělo vypsat třeba text. To není žádný problém, ale je třeba, abychom nastavili barvu na bílou, defaultní barva je bledě modrá.

GraphicsWindow.BrushColor = "White"
GraphicsWindow.DrawText(0, 0, "Ahoj!")

Na prvním řádku se změní barva štětce na bílou, tzn. text a výplně tvarů a na druhém je výpis textu na 0, 0. To jsou souřadnice x a y (levý horní roh okna). Asi vás zajímá, jak změnit barvu obrysu u tvarů. Můžeme si to vyzkoušet na elipse, stačí do kódu přidat:

GraphicsWindow.PenColor = "White"
GraphicsWindow.DrawEllipse(32, 32, 128, 128)

A i s tím textem by to mělo vypadat nějak takhle:

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Funguje a je to pěkné, ne?

Ale asi se vám nelíbí nadpis okna. To lze změnit jednoduše jako vše ostatní:

GraphicsWindow.Title = "Nadpis"

Tak máme nadpis. Nyní ještě nastavení šířky a výšky okna:

GraphicsWindow.Width = 800
GraphicsWindow.Height = 600

To nastaví šířku a výšku na 800x600. To je základní práce s okny a s těmi tvary se dá slušně hrát. Teď si naprogramujeme vlastní loading bar

Loading bar

Defaultní barva pozadí je bílá, tak tu necháme. Štětec (výplň) nastavíme na tmavě modrou a obrys na černou. Velikost okna na 240x32, jaký si dáte nadpis okna nechám na vás. Kód by mohl vypadat takto:

GraphicsWindow.Title = "Můj Loading Bar"
GraphicsWindow.Width = 240
GraphicsWindow.Height = 32
GraphicsWindow.PenColor = "Black"
GraphicsWindow.BrushColor = "DarkBlue"

Teď k samotnému postupnému vykreslování musíme vytvořit cyklus od jedné do 120. Bude se vykreslovat obrys obdélníku na souřadnicích 0, 0. Vaše proměnná v cyklu * 2, 32, a plný obdélník na stejných souřadnicích. Teď už chápete, proč je okno 240x32, co ? Ještě musíme vždy zpomalit kroky cyklu, aby se obdélník nevykreslil hned. Můžete nastavit třeba na 30 milisekund, to by cyklus proběhl za 3600 milisekund. Tak, kód by mohl vypadat takto:

For a = 1 To 120
        GraphicsWindow.DrawRectangle(0, 0, a * 2, 32)
        GraphicsWindow.FillRectangle(0, 0, a * 2, 32)
        Program.Delay(30)
EndFor

Obrázek:

Pěkné, ne? A ještě si to můžeme trochu vylepšit, umažte kód na nastavení vyplně na tmavě modrou. Dáme do cyklu nastavení barvy výplně na náhodně zvolenou, stačí jen přidat:

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()

Vidíte další operace ze třídy GraphicsWindow, při každém kroku zvolíme náhodnou barvu výplně.

Obdélníky

Zkusme si další příklad. Zcela jednoduchý kód, vykreslí čtvercové, barevné pozadí na okno 600x400px.

GraphicsWindow.Width = 600
GraphicsWindow.Height = 400
For y = 0 To GraphicsWindow.Height / 20
  For x = 0 To GraphicsWindow.Width / 20
    GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
    GraphicsWindow.FillRectangle(x * 20, y * 20, 20, 20)
  EndFor
EndFor

Výsledek:

Reakce na klávesy

Nakonec si ukažme, jak lze reagovat na stisk nějaké klávesy. Malou ochutnávku jsme měli již v předchozích dílech. Kód níže zaregistruje proceduru key_down na událost okna KeyDown, která se zavolá ve chvíli, kdy uživatel stiskne nějakou klávesu. Podmínkou zareagujeme na to, která klávesa byla stiknuta. Pokud to bylo Escape, ukončíme program.

GraphicsWindow.KeyDown = key_down
Sub key_down
  last_key_down = GraphicsWindow.LastKey
  If last_key_down = "Escape" Then 'ESC
    Program.End()
  EndIf
EndSub