5. díl - Small Basic - Grafická okna

Ostatní jazyky SmallBasic 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:

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:

Barevné pozadí

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

 

  Aktivity (1)

Článek pro vás napsal Šimon Raichl
Avatar
Autor se věnuje tvorbě her v GM: Studio pro Android a v GM8 pro Windows a hraje si se Small Basicem

Jak se ti líbí článek?
Celkem (3 hlasů) :
4.666674.666674.666674.666674.66667


 


Miniatura
Všechny články v sekci
SmallBasic

 

 

Komentáře
Zobrazit starší komentáře (5)

Avatar
Nevo
Člen
Avatar
Nevo:

Mám tady nový problém a nevím si s ním rady, opět :)
Dávám zdroják:
change = Controls.AddBut­ton("Changelog", 15, 250)
Sub click3
last3 = Controls.LastClic­kedButton
If last3 = change Then
Goto chnglog
EndIf
EndSub
Problém je, jak jsem zjistil v řádku s "Goto". Po vypsání tohoto řádku mi editor vypíše toto: Chybný popisek v ILGenrator. Zajímavé je, že když toto tlačítko přidám do jiného programu, program bez problému pracuje. Ví někdo co s tím může být?

Odpovědět 22.5.2015 21:32
Všechno jde, pouze musíš být zapálenej pro danou věc, pak jde všechno.
Avatar
Jurajs
Člen
Avatar
Odpovídá na Nevo
Jurajs:

Tohle je celý kód?

 
Odpovědět 22.5.2015 21:45
Avatar
Jurajs
Člen
Avatar
Odpovídá na Nevo
Jurajs:

Tady to máš upravené, ale když kliknu na button tak to nic stejně nedělá :D

chnglog:
change=Controls.AddButton("Changelog", 15, 250)
click3()
Sub click3
  last3 = Controls.LastClickedButton
  If last3 = change Then
Goto chnglog
EndIf
EndSub
 
Odpovědět 22.5.2015 21:55
Avatar
Jurajs
Člen
Avatar
Odpovídá na Nevo
Jurajs:

Tak teď to vypisuje - Ahoj :D

chnglog:
change=Controls.AddButton("Changelog", 15, 250)
Controls.ButtonClicked = click3
Sub click3
  last3 = Controls.LastClickedButton
  If last3 = change Then
    GraphicsWindow.ShowMessage("Ahoj","Pozdrav")
    Goto chnglog

EndIf
EndSub
Editováno 22.5.2015 22:03
 
Odpovědět 22.5.2015 22:02
Avatar
Jurajs
Člen
Avatar
Jurajs:

SmallBasic má podporu 3D :D huráá :)
https://blogs.msdn.microsoft.com/…sualisation/

 
Odpovědět 19. června 14:41
Avatar
Filmun
Člen
Avatar
Filmun:

mám otázku jak udělat když zmáčknu např W aby se ěco stalo?

 
Odpovědět 6. prosince 19:34
Avatar
Filmun
Člen
Avatar
Filmun:

jo a proč tohle nefunguje:
x = 50
y = 50
GraphicsWindow­.Width = 500
GraphicsWindow­.Height = 500
GraphicsWindow­.BackgroundCo­lor = "Black"
GraphicsWindow­.PenColor = "Blue"
GraphicsWindow­.FillRectangle(x, y, 50, 50)
GraphicsWindow­.KeyDown = key_down
Sub key_down
last_key_down = GraphicsWindow­.LastKey
If last_key_down = "W" Then 'W
y = y - 20
EndIf
EndSub
GraphicsWindow­.Clear()
GraphicsWindow­.FillRectangle(x, y, 50, 50)

 
Odpovědět 6. prosince 19:36
Avatar
Odpovídá na Filmun
Michael Škrášek:

Na konci článku máš ukázanou reakci na "Escape" ... jen to přepiš na "W". ;-)

Odpovědět 6. prosince 19:37
Proč to dělat složitě, když to jde jednoduše.
Avatar
Odpovídá na Filmun
Michael Škrášek:

Po stisknutí musíš znovu vykreslovat čtverec:

Sub key_down
        last_key_down = GraphicsWindow.LastKey
        If last_key_down = "W" Then
                y = y - 20
                GraphicsWindow.Clear()
                GraphicsWindow.FillRectangle(x, y, 50, 50)
        EndIf
EndSub
Odpovědět  +1 6. prosince 19:39
Proč to dělat složitě, když to jde jednoduše.
Avatar
Filmun
Člen
Avatar
Filmun:

Mockrát dík

 
Odpovědět 6. prosince 20:50
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 15. Zobrazit vše