Powrót do szkoły
Inauguracja nowego roku szkolnego za nami! Zapewne
stęskniliście się za kolegami i koleżankami, więc mamy
nadzieję, że z przyjemnością wróciliście do klas. Życzymy
powodzenia, jak najlepszych ocen, fantastycznych przygód
i zdobywania nowej wiedzy. Mamy nadzieję, że aktualne
wydanie PJr pomoże Wam w niektórych zajęciach oraz spo-
woduje, że nie raz zaskoczycie nauczycieli, rodziców, opieku-
nów oraz znajomych! A co znajdziecie w nowym numerze?
😉
Zapnijcie pasy i przygotujcie się na niezwykłą jazdę .
Tematem numeru są bazy danych. Jak pewnie wiecie,
jednym z najważniejszych zadań komputera jest zapisywa-
nie i przechowywanie różnego rodzaju danych. Z artykułu
okładkowego dowiecie się, czym są i do czego służą bazy
danych, jakiego narzędzia można użyć do ich utworzenia,
a także jak tworzyć tabele oraz dodawać, usuwać i mody-
fikować w nich dane przy pomocy języka SQL. Serdecznie
polecamy, bo działanie na bazach danych to nie tylko fajna
zabawa, ale i wiedza, która na pewno się Wam przyda.
Czy słyszeliście kiedyś o fraktalach? Jeżeli nie, to warto
sprawdzić, czym są te obiekty o tajemniczo brzmiącej na-
zwie oraz dlaczego fascynują matematyków, fizyków, przy-
rodników, ale też artystów, grafików komputerowych czy
programistów na całym świecie. Przekonacie się, że mate-
matyka w połączeniu ze Scratchem… może być po prostu
piękna!
Wiemy, że większość z Was uwielbia gry komputerowe.
Nic dziwnego, my też jesteśmy ich fanami. Gry w odpowied-
niej dawce mogą być nie tylko rozrywką, ale i wartościo-
wym narzędziem do nauki i poznawania świata. A wiecie,
co jest jeszcze lepsze niż granie? Tworzenie własnych gier
i niezwykłych światów! Z artykułu o tworzeniu gry RPG
w środowisku Unity dowiecie się, w jaki sposób wykorzy-
stać zebrane surowce do wytwarzania broni, które pomogą
nam stawić czoła przeciwnikom najeżdżającym naszą wio-
skę. Z kolejnej części serii poświęconej kreowaniu własnej
gry przygodowej Enigma dowiecie się natomiast, jak two-
rzyć funkcje oraz jak wyświetlać grafiki w Pythonie. Będzie
to kolejny krok do zostania mistrzem tego popularnego ję-
zyka programowania oraz do napisania świetnej gry, którą
będziecie mogli pochwalić się znajomym. Na sam koniec
zostawiliśmy małą perełkę: tworzenie własnego sklepu w
Robloxie!
Czy zastanawialiście się kiedyś, jakie czynności w przy-
szłości będą wykonywać za nas roboty oraz w czym będą
nas zastępować? Kto je zbuduje i zaprogramuje? W artyku-
le o LEGO Mindstorms odpowiemy na niektóre z tych pytań
oraz pokażemy Wam… jak zaprojektować własny joystick!
Większość z Was ma już zapewne swój własny smart-
fon. Te małe urządzenia oferują dziś nie tylko komunikację
ze znajomymi, robienie zdjęć czy przeglądanie Internetu,
ale także coraz bardziej rozbudowane aplikacje i gry. Przy-
gotowaliśmy dla Was naprawdę ciekawy artykuł, z którego
dowiecie się, jak stworzyć aplikację na Androida, w której
pościgamy się samochodami!
Temat prywatności podczas korzystania z Internetu po-
jawia się coraz częściej jako przedmiot dyskusji zarówno
w koleżeńskich rozmowach dzieci, jak również w świecie
dorosłych. Pewnie znane są już Wam takie nazwy jak VPN
czy TOR w kontekście rozwiązań pozwalających na ukry-
wanie tożsamości w Internecie. Dziś wyjaśnimy, czym jest
VPN, do czego można go zastosować oraz przed jakimi za-
grożeniami nas nie ochroni.
Ponadto w numerze kolejna porcja ciekawych zagadek
matematycznych oraz wyzwań w programowaniu. Gorąco
zachęcamy do główkowania nad zadaniami zaproponowa-
nymi przez autorów!
Na koniec mamy dla Was coś nowego: ciekawe przygo-
dy niezwykłego robota Scottiego w formie komiksu. Jeste-
śmy przekonani, że historyjki wciągną Was równie mocno
jak nas. A dodatkowo nauczycie się nowych sztuczek w pro-
gramowaniu.
Redakcja PJr
Ps. Dla nauczycieli mamy kolejny ciekawy scenariusz, dzięki
któremu nauczycie dzieci, jak stworzyć algorytm sprawdzający
w językach Scratch i Python.
PS. 2. Kolejna część serii „Wstęp do języka Python” ukaże się
w następnym numerze.
 Wprowadziliśmy nowe oznaczenia do artykułów: kolor oraz wiek czytelnika. Zielony oznacza poziom łatwy, żółty poziom średni,
a czerwony oznacza, że treść artykułu przeznaczona jest dla zaawansowanych Czytelników.

10+ 12+ 14+

Artykuł dla prawie każdego, nie musisz Musisz posiadać jakąś wiedzę w temacie, Poziom dla zaawansowanych! Ale spoko-
posiadać specjalnych wiadomości, by choć z lekką pomocą Internetu (może kolegów jnie, czytając magazyn, na pewno dojdziesz
zrozumieć treść. Poziom łatwy. i koleżanek?) dasz radę! Poziom średni. i do tego poziomu. Poziom trudny.

PODSTAWY PROGRAMOWANIA BEZPIECZEŃSTWO

Bazy danych. Czyli jak programy przechowują informacje 6 Czym jest VPN? 66
Wojciech Sura Łukasz Basa

JĘZYKI PROGRAMOWANIA PROGRAMISTYCZNE WYZWANIA

Czy matematyka może być piękna? O fraktalach słów kilka 14 Programistyczne wyzwania 70
Justyna Klimczyk Konrad Jagaciak

PROGRAMOWANIE GIER 3.14159

Średniowieczna przygoda – gra RPG w środowisku Unity. Zagadki matematyczne dla dzieci w wieku 11+ 72
Ostatnie starcie 22
Michał Kremzer
Tomasz Błaszczyk

Gra przygodowa „Enigma – Polacy, którzy uratowali świat”. WYDARZENIA I EDUKACJA

Tworzymy pierwsze okno z tłem 32
Adam Jurkiewicz, Katarzyna Wasilkowska Lubisz programować? Dołącz do codeweekowej społeczności! 76
Aleksandra Zacharska
Budowniczy Robloxa: sklep z przepustkami 38
Przemysław Folholc
KOMIKS

PROJEKTY Scottie Go! 74

Programowanie zdalnego sterowania

SCENARIUSZE ZAJĘĆ DLA NAUCZYCIELI
w LEGO MINDSTORMS ROBOT INVENTOR 50
Natalia Trzaska
Rok przestępny, czyli jak stworzyć algorytm sprawdzający
Wyścigi formuły jeden – animacje na Androidzie 56 w Scratchu i Pythonie? 80
Urszula Piechota Justyna Klimczyk

Dwumiesięcznik Programista Junior wydawany jest przez Dom Wydawniczy Anna Adamczyk Nota prawna
Wydawca: Adres wydawcy: Redakcja zastrzega sobie prawo do skrótów
Anna Adamczyk Dereniowa 4/47, i opracowań tekstów oraz do zmiany planów
(annaadamczyk@programistajr.pl) 02-776 Warszawa wydawniczych, tj. zmian w zapowiadanych tematach
Redaktor naczelny: Strona internetowa: artykułów i terminach publikacji, a także nakładzie
Łukasz Łopuszański www.programistajr.pl i objętości czasopisma.
(llopuszanski@programistajr.pl) Druk: O ile nie zaznaczono inaczej, wszelkie prawa do
Redaktor prowadzący: http://www.edit.net.pl/ materiałów i znaków towarowych/firmowych
Mariusz "maryush" Witkowski Nakład: 5000 egz. zamieszczanych na łamach magazynu Programista
Korekta: Projekt okładki: Junior są zastrzeżone. Kopiowanie i rozpowszechnianie
Tomasz Łopuszański, Katarzyna Włodarczyk Maciek Empro ich bez zezwolenia jest Zabronione.
Skład: Współpraca:
Redakcja magazynu Programista Junior nie
Krzysztof Kopciowski Gynvael Coldwind, Rafał Kocisz, Wojciech Biały,
ponosi odpowiedzialności za szkody bezpośrednie
Dział reklamy: foxtrot_charlie , Paweł "KrzaQ" Zakrzewski,
i pośrednie, jak również za inne straty i wydatki
reklama@programistajr.pl Michał "Kafej" Zbyl, Sławomir Zborowski,
poniesione w związku z wykorzystaniem informacji
tel.: +48 663 220 102, Maciek Empro (fb/everybodywantstobeempro),
prezentowanych na łamach magazynu Programista
Prenumerata: Alicja Puszakowska
Junior.
prenumerata@programistajr.pl
PODSTAWY PROGRAMOWANIA

Wojciech Sura

Bazy danych
Czyli jak programy przechowują informacje
Jednym z najważniejszych zastosowań komputerów jest przechowywanie i przetwarzanie
danych. Czasami dane te są pojedyncze – jak na przykład zdjęcia z wakacji: każde z nich
znajduje się w osobnym pliku. Zdarza się jednak, że informacje są ze sobą w jakiś sposób
powiązane, a my wiedzę o tych powiązaniach chcemy zachować.

10+

Dowiesz się Potrzebna wiedza

օ Czym są i do czego służą relacyjne bazy danych. օ Umiejętność sprawnego poruszania się w Interne-
cie i podstawowa obsługa systemu operacyjnego.
օ Jakiego narzędzia można użyć do utworzenia
bazy danych.

օ Jak utworzyć tabelę, a potem wprowadzić, mody-

fikować i usuwać z niej dane.

BIBLIOTEKA KSIĄŻKI UŻYTKOWNICY GATUNKI AUTORZY

Przypuśćmy, że chcemy napisać program do obsługi Przygody Wojtek Kryminał Arthur C.
biblioteki. Jego zadaniem będzie przede wszystkim prze- Sherlocka Doyle
Holmesa
chowywanie katalogu książek, które można wypożyczyć,
Księga urwi- Basia Przygodo- Edmund
a także listy osób, które są do tego uprawnione. Zależy
sów wa Niziurski
nam również na prowadzeniu rejestru wypożyczeń –
Awantura w Natalia Fantasy Kornel Ma-
musimy bowiem wiedzieć, kto przechowuje pożyczone Niekłaju kuszyński
książki i w jakim terminie powinny one zostać zwrócone.
Szatan z VIII Łukasz Terry Prat-
Przydatną opcją będzie również wyszukiwanie dostęp- klasy chett
nych książek według nazwy, autora oraz gatunku. Zbrojni Tomek
Nie trzeba być doświadczonym programistą, by domy-
śleć się, że podstawowymi strukturami danych, z których
skorzystamy, będzie po prostu szereg list. W pierwszej Zwróćmy uwagę, że pomiędzy elementami tych list za-
z nich zawrzemy wszystkie książki będące własnością chodzą pewne szczególne zależności. Przede wszystkim
biblioteki, druga zawierać będzie użytkowników, trzecia każda książka ma swojego autora (przyjmijmy tak dla
gatunki, wreszcie czwarta – autorów książek. Listy te uproszczenia, czasami zdarzają się bowiem książki, któ-
mogą wyglądać następująco: re mają wielu autorów) oraz jeden lub więcej gatunków.

6 [ 4 - 202 1 ]
 Bazy danych

Poza tym każda z książek może być wypożyczona przez
jednego z użytkowników (ale tylko przez jednego naraz).
Zależności te są bardzo ważne, ponieważ niosą ze
sobą istotne informacje. Jeżeli bowiem przypiszemy
w odpowiedni sposób książki do gatunków, możemy
pomóc komuś, komu spodobał się „Sherlock Holmes”
i szuka kolejnego kryminału (niezależnie od autora i ty-
tułu). Analogicznie, jeżeli zapamiętamy powiązania po-
między książkami i autorami, komuś, komu spodobała
się „Awantura w Niekłaju” autorstwa Edmunda Niziur-
skiego, będziemy mogli polecić „Księgę Urwisów”.
W projektach programistycznych bardzo często
spotykamy się z sytuacją, w której zależy nam na zapa-
miętaniu informacji o zależnościach pomiędzy różnymi
danymi. W związku z tym powstały specjalne narzędzia,
które pozwalają przechowywać tego typu informacje.
Ponieważ wspomniane wcześniej zależności w facho-
wym języku nazywane są relacjami, narzędzia te okre-
ślane są mianem relacyjnych baz danych. I o nich wła-
śnie chciałbym opowiedzieć w tym artykule.
SQLITE
Bazy danych nie są wbrew pozorom zagadnieniem
bardzo skomplikowanym, ale najłatwiej jest nauczyć
się ich obsługi, po prostu samodzielnie eksperymentu-
jąc. Na rynku dostępna jest bardzo duża liczba silników
bazodanowych, czyli programów, które pomagają użyt-
kownikom (ale również i innym programom) przecho-
o nazwie SQLite Studio. Jest on napisany w taki sposób,
że nie trzeba go nawet instalować w systemie – wystar-
czy pobrać odpowiedni plik, rozpakować go i już można
z tego programu korzystać.
Aby to zrobić:
1. Przejdź pod adres https://sqlitestudio.pl.
2. Odnajdź u góry link o nazwie „Download” i przejdź tam.
3. Przewiń stronę nieco w dół, by odnaleźć link do po-
brania programu (w czasie pisania tego artykułu naj-
nowszą wersją SQLite Studio była wersja 3.3.3, zaś
plik nazywał się SQLiteStudio-3.3.3.zip).
4. Pobierz plik i rozpakuj go do dowolnego katalogu.
SQLite Studio jest gotowe do pracy – wystarczy uru-
chomić program SQLiteStudio.exe.
TABELA
Zanim zaczniemy używać SQLite Studio, musimy do-
wiedzieć się trochę, w jaki sposób bazy danych przecho-
wują nasze informacje.
Jednym z najważniejszych pojęć w bazach danych
jest tabela. Jej zadaniem jest przechowywanie informacji
dotyczących jednego, konkretnego rodzaju danych. Po-
niżej możemy zobaczyć przykładową tabelę przechowu-
jącą informacje o książkach.
BOOKS
ID TITLE ORIGINALTI- PUBLISHY- PRINTEDBY
TLE EAR

wywać i wyszukiwać dane. Do najpopularniejszych nale- 1 Przygody The Adventu- 1892 Oficyna
żą między innymi Microsoft SQL Server, Oracle, MySQL Sherlocka res of Sher- Wydawni-
Holmesa lock Holmes cza RYTM
MariaDB czy PostgreSQL.
Instalacja i skonfigurowanie większości z nich zajmu- 2 Księga 1954 Greg
urwisów
je sporo czasu i wymaga trochę informatycznej wiedzy.
3 Awantura 1962 Greg
Serwery te są też często bardzo duże (zwykle zajmu-
w Niekłaju
ją kilkaset megabajtów), a do tego pracują cały czas w
4 Szatan z 1937 Nasza Księ-
tle, pochłaniając zasoby komputera. Wreszcie część z
VII klasy garnia
nich dostępna jest tylko odpłatnie, więc nie są one zbyt
5 Zbrojni Men at Arms 1993 Prószyński
atrakcyjne do nauki. Istnieje jednak silnik, który został
i S-ka
stworzony po to, by zajmować bardzo mało miejsca i ob-
6 Zbrojni Men at Arms 1993 Prószyński
sługiwać niewielkie bazy danych mieszczące się w jed-
i S-ka
nym pliku, który świetnie nada się do naszych potrzeb, a
nazywa się on SQLite.
Jeżeli macie ochotę przećwiczyć ze mną projekto- W środowisku baz danych każda tabela musi mieć swoją
wanie baz, a następnie wyszukiwanie w nich różnych unikalną nazwę – abyśmy mogli odróżnić jedną od dru-
danych, zachęcam do pobrania niewielkiego programu giej. Ponieważ w projektach programistycznych przyjęło

[ PROGR AMI STAJR . PL ] 7

PODSTAWY PROGRAMOWANIA
się korzystać z angielskiego nazewnictwa, tabelę prze-
chowującą informację o książkach nazwałem Books.
Tabele w bazach danych składają się z wierszy
i kolumn.
Każdy wiersz reprezentuje pojedynczy element prze-
chowywany w tabeli: w naszym przypadku będą to in-
formacje o pojedynczej książce. Warto wiedzieć, że
w literaturze poświęconej bazom danych możecie spo-
tkać się również z innymi określeniami wiersza, takimi
jak rekord, encja albo (rzadziej) krotka.
W listach, które wstępnie przygotowaliśmy na po-
czątku, przechowywaliśmy bardzo mało informacji. Na
przykład na liście książek znajdowały się tylko ich tytuły.
Bazodanowa tabela pozwala jednak przechować w każ-
dym wierszu znacznie więcej informacji, a ich liczbę i ro-
dzaj określamy, definiując dla tabeli kolumny.
Każda z kolumn opisuje pojedynczy aspekt, cechę
elementu tabeli. W naszej przykładowej tabeli prze-
chowujemy pięć informacji o każdej książce. Jej unikal-
ny identyfikator (o którym za chwilę), tytuł (Title), tytuł
oryginału w przypadku książek obcojęzycznych (Origi-
nalTitle), rok pierwszej publikacji (PublishYear) oraz wy-
dawnictwo (PrintedBy).
Decyzję o tym, ile kolumn (i jakiego typu) będzie mia-
ła tabela, podejmuje programista podczas projektowania
bazy danych. Kieruje on się zwykle informacjami o tym,
ile danych użytkownicy aplikacji będą w stanie dostar-
czyć, a także które z nich są tak naprawdę warte prze-
chowania. W naszym przypadku moglibyśmy w tabeli
książek przechowywać również informacje o prawach
autorskich, nazwisku ilustratora, adresie wydawnictwa,
liczbie rozdziałów i tak dalej – jednak tego typu informa-
cje w bibliotece są zwykle mało użyteczne.
KOLUMNY
Bazy danych przewidują, że niektóre pola w wierszach
mogą pozostać niewypełnione. Dla przykładu kolum-
na OriginalTitle w przypadku tytułów polskojęzycznych
nie ma większego sensu – możemy więc zrezygnować
z wprowadzania do niej wartości. Podczas projektowania
tabeli trzeba jednak jasno zaznaczyć, czy zgadzamy się
na to, żeby pole mogło być puste, czy też nie.
Większość tabel powinna zawierać kolumnę, która
jednoznacznie identyfikuje dany wiersz (to znaczy: nie
istnieją dwa różne wiersze, które mają tę samą wartość).
8 [ 4 - 202 1
Zwróć uwagę, że w naszej tabeli „Zbrojni” autorstwa
Terry’ego Pratchetta występują dwukrotnie – ponieważ
w naszej bibliotece mamy dwa egzemplarze tej książki.
Oczywiście wszystkie dotyczące ich informacje są do-
kładnie takie same, więc bez takiej specjalnej kolumny
nie bylibyśmy w stanie odróżnić jednej od drugiej. Ko-
lumna ta nosi bardzo ważną nazwę klucz główny.
W naszym przypadku rolę klucza głównego pełni
kolumna Id. Jest to bardzo popularna nazwa dla kluczy
głównych, a pochodzi od skrótu – w różnych wersjach
– od Index (indeks), Identifier – (identyfikator) lub Iden-
tification Data (dane identyfikacyjne). Klucz główny nie
musi być koniecznie liczbą, jednak rozwiązanie takie jest
dosyć wygodne, ponieważ bazy danych zawierają szereg
mechanizmów pomagających w obsłudze tej kolumny.
Dbanie o prawidłową wartość kolumny Id stanowi
pewien problem. Dane w bazie zmieniają się – są wsta-
wiane i usuwane, co powoduje, że numeracja przestaje
być ciągła. Bez przejrzenia całej zawartości tabeli trudne
może być ustalenie takiej wartości nowego wiersza, któ-
ra nie pokryje się z już istniejącą. Dlatego też bazy da-
nych oferują mechanizm autoinkrementacji, który ko-
lumnie Id nadaje pierwszą wolną, prawidłową wartość.
Na koniec wreszcie każda kolumna powinna mieć
zdefiniowany jednoznacznie typ. Baza danych musi wie-
dzieć, czy wartość zapisywana w danej kolumnie będzie
tekstem, liczbą całkowitą, zmiennoprzecinkową, warto-
ścią typu bool (prawda/fałsz) czy datą lub czasem. Po-
zwala to na optymalizowanie sposobu, w który zapisy-
wane są dane, a także otwiera drogę do wykonywania
na danych różnych operacji (na przykład obliczania sum,
średnich i tak dalej).
Ciekawostka
Klucz główny nie musi być pojedynczą kolumną. W niektó-
rych, rzadkich przypadkach klucz główny składa się z kilku
kolumn. W takiej sytuacji wszystkie wiersze muszą różnić
się wartością przynajmniej jednej z nich. Gdyby na przykład
klucz główny stanowiła para kolumn: Imię i Nazwisko, w
tabeli mogłyby znajdować się jednocześnie wpisy: Adam
Kowalski, Michał Kowalski oraz Michał Nowak. Niedopusz-
czalne byłoby jednak istnienie dwóch Adamów Kowalskich.
]
 Bazy danych

SQL
Gdy wymieniałem popularne serwery bazodanowe,
zwróciliście pewnie uwagę na to, że w większości z nich
zawarty jest skrót SQL. Rozwija się on do angielskiej na-
zwy: Structured Query Language, który przetłumaczy-
my jako język strukturalnych zapytań. Język ten został
zaprojektowany specjalnie do komunikacji z bazami da-
nych i przeważająca większość silników bazodanowych
(a już na pewno te z „SQL” w nazwie) potrafi go prawi-
dłowo zinterpretować.
Dobra wiadomość jest taka, że język SQL jest bardzo
czytelny. Polecenia pisane w tym języku przypominają
zdania napisane po angielsku – łatwo jest więc się go na-
uczyć. W dalszej części artykułu postaram się pokazać
kilka podstawowych poleceń, które pomogą nam utwo-
rzyć odpowiednie tabele, manipulować rekordami, a na- Ilustracja 2. Konfigurujemy nową bazę

stępnie wykonać kilka zapytań.

Dodana baza pojawi się na liście dostępnych baz z lewej
DO DZIEŁA! strony. Wystarczy ją teraz dwukrotnie kliknąć, by nawią-
Dosyć teorii – spróbujmy przygotować nową bazę zać z nią połączenie – teraz będziemy mogli wykonywać
danych i wypełnić ją informacjami. na niej zapytania (Ilustracja 3).
Aby utworzyć nową bazę, uruchamiamy SQLite Stu-
dio, a następnie wybieramy opcję Bazy Danych | Dodaj
bazę danych (Ilustracja 1).

Ilustracja 3. Dodana baza w „SQLite Studio”

Ilustracja 1. Dodawanie nowej bazy danych

W następnym kroku musimy poinformować SQLite Stu-
dio, że chcemy utworzyć nową bazę. Klikamy więc zielo-
ny plusik i wybieramy, gdzie będziemy chcieli ją zapisać.
SQLite Studio wypełni pozostałe pola za nas (Ilustracja 2).
Warto wiedzieć
Programiści mają tendencję nadawania trudnych terminów
dla prostych czynności. Inkrementacja oznacza po prostu
zwiększenie pewnej wartości o 1 – autoinkrementacja jest
więc automatycznym zwiększaniem o 1. Jeżeli ostatni wiersz
w naszej tabeli ma Id równe 10, następny otrzyma wartość
11, kolejny – 12 i tak dalej.

[ PROGR AMI STAJR . PL ] 9

PODSTAWY PROGRAMOWANIA
Na koniec otwórzmy edytor SQL. Możemy zrobić
to poprzez wciśnięcie skrótu klawiaturowego Alt+E lub
klikając na ikonkę skryptu (Ilustracja 4). Edytor SQL jest
podstawowym narzędziem, z którego będziemy korzy-
stać najwięcej – warto więc się z nim zaznajomić.
Ilustracja 4. Otwieramy edytor SQL
TWORZYMY TABELĘ
Aby utworzyć nową tabelę, musimy wykonać odpo-
wiednie zapytanie. Zobaczmy najpierw, jak ono wygląda,
a zaraz dowiemy się, z jakich elementów się ono składa.
Listing 1. Tworzymy nową tabelę
CREATE TABLE Books (
Id INTEGER PRIMARY KEY AUTOINCREMENT,
Title TEXT NOT NULL,
OriginalTitle TEXT DEFAULT NULL,
PublishYear INTEGER NOT NULL,
PrintedBy TEXT NOT NULL);
Osoby, które znają choć trochę język angielski, po-
winny bez większego problemu przeczytać powyższe
polecenie – SQL jest naprawdę bardzo czytelnym języ-
kiem. Przyjrzyjmy się jednak powyższej komendzie i roz-
bierzmy ją na czynniki pierwsze.
Przede wszystkim zwróć uwagę na to, że część słów
jest pogrubiona i napisana wersalikami (TO ZNACZY W
TAKI SPOSÓB), a część nie. Są to tak zwane słowa klu-
czowe SQL, czyli takie, które mają specjalne znaczenie.
Nie ma konieczności pisania ich wielkimi literami, ale
10 [ 4 - 202 1
programiści często mają taki właśnie nawyk, bo dzięki
temu zapytania czyta się nieco łatwiej. SQLite Studio tak
czy inaczej zawsze pogrubi je, co ułatwi ich odnalezienie.
CREATE TABLE jest wyrażeniem, które oznacza, że
chcemy utworzyć nową tabelę. Zaraz za nim musimy
podać jej nazwę, a potem – w nawiasach – listę kolumn
oddzielonych przecinkami.
Każda z kolumn musi mieć minimalną postać Nazwa
Typ. Nazwa jest oczywiście nazwą kolumny, zaś Typ okre-
śla rodzaj danych, które chcemy w niej przechowywać.
Oprócz tego możemy również dołączyć dodatkowe in-
formacje, które bardziej szczegółowo opisują kolumnę.
Pierwsza kolumna o nazwie Id będzie przechowywać
liczby całkowite – INTEGER. Powiadamiamy też SQLite
Studio, że ma to być klucz główny (PRIMARY KEY) tej ta-
beli oraz że ma tam działać mechanizm autoinkremen-
tacji (AUTOINCREMENT). Dzięki temu podczas dodawania
nowych wierszy nie będziemy musieli zaprzątać sobie
głowy wprowadzeniem kolejnego unikalnego identyfi-
katora – baza danych zrobi to za nas.
Kolejną kolumną jest Title, która przechowywać
będzie tekst (jak pamiętamy, ma być to tytuł książki).
Kolumna ta jest obowiązkowa: wiersz chyba razem się
pisze nazwy książki nie ma dla nas żadnego sensu. Pi-
sząc więc po niej NOT NULL, wymuszamy, by w każdym
wierszu w tej kolumnie pojawiła się jakaś wartość. Bazy
danych są środowiskiem, w którym do spójności danych
przykładana jest naprawdę duża waga. W efekcie, jeże-
li oznaczymy kolumnę jako NOT NULL, nie ma żadnych
szans, żeby udało się wstawić wiersz łamiący tę zasadę.
Kolejne definicje kolumn możecie rozszyfrować sami.
Pojawia się tam tylko jedna nieznana nam jeszcze kon-
strukcja: DEFAULT NULL. Informuje ona SQLite Studio,
że wartość tej kolumny może być pusta (nieustawiona)
i mało tego – domyślnie będzie właśnie taka. Oznacza
to, że podczas wprowadzania danych do tabeli można ją
pominąć – SQLite automatycznie ustawi ją na NULL (czyli
na „brak wartości”).
Polecenia SQL kończymy średnikiem. Nie jest to
konieczne, ale stanowi dobry zwyczaj i jest pomocne
szczególnie wówczas, gdy chcemy wykonać kilka pole-
ceń naraz.
Po wywołaniu komendy zauważymy, że nowa tabela
pojawiła się na liście tabel w naszej bazie (Ilustracja 5).
]
 Bazy danych

1993,
"Prószyński i S-ka"),
("Zbrojni",
"Men at Arms",
1993,
"Prószyński i S-ka");

Polecenie wstawienia danych zaczyna się od słów klu-

czowych INSERT INTO, po których następuje nazwa tabeli,
do której chcemy wstawić dane. Następnie wymieniamy
w nawiasach nazwy wszystkich kolumn, dla których chce-
my podać wartości. Powinniśmy wymienić tam wszystkie
Ilustracja 5. Dodaliśmy tabelę do bazy!
obowiązkowe kolumny (to jest takie, które nie mają war-
tości domyślnej lub nie są autoinkrementowane), bo ina-
WPROWADZAMY DANE czej SQLite nie pozwoli wprowadzić nam takich wierszy.
Spróbujmy teraz wprowadzić pierwsze wpisy do naszej Po liście kolumn występuje słowo VALUES oznacza-
tabeli. Skorzystajmy z danych, które pojawiły się w przy- jące, że chcemy teraz wprowadzić konkretne wiersze.
kładowej, przedstawionej wcześniej tabeli. Każdy z nich zamykamy w nawiasach, a wartości oddzie-
lamy przecinkami; kolejne wiersze również oddzielamy
Listing 2. Wprowadzamy dane do tabeli przecinkami. Musimy pamiętać, by wartości w nawiasach
INSERT INTO Books podać w takiej kolejności, w jakiej podaliśmy wcześniej
(Title, kolumny. Pierwsza wartość trafi bowiem do pierwszej
OriginalTitle, kolumny, druga – do drugiej i tak dalej.
PublishYear, Zauważmy, że nie podaliśmy wśród kolumn Id. Właśnie
PrintedBy) tu korzystamy z mechanizmu autoinkrementacji, który
VALUES przyporządkuje identyfikatory wierszom automatycznie.
("Przygody Sherlocka Holmesa", Jeżeli nie popełniliśmy nigdzie błędu, SQLite powia-
"The Adventures of Sherlock Holmes", domi nas, że operacja się powiodła. W okienku statusu
1892, znajdziemy informację:
"Oficyna Wydawnicza RYTM"),
Listing 3. Powiadomienie o sukcesie
("Księga urwisów",
NULL, [19:32:52] Zapytanie ukończone w 0.012 sekund(y).
1954, Liczba przetworzonych wierszy: 6
"Greg"),
("Awantura w Niekłaju", Oznacza to, że dane zostały prawidłowo wstawione
NULL, do bazy; dostajemy też informację, ile wierszy zostało
1962, zmienionych (czyli w naszym przypadku – dodanych): 6.
"Greg"),
("Szatan z VII klasy", POBIERANIE DANYCH
NULL, Nasza tabela zawiera już informacje, ale trochę nie za
1937, bardzo to widać. SQLite zapamiętało dla nas 6 książek,
"Nasza Księgarnia"), ale miło byłoby się przekonać, że dane faktycznie zostały
("Zbrojni", prawidłowo zapisane.
"Men at Arms", Do pobierania danych z bazy służy komenda SELECT.
Jest to chyba najbardziej rozbudowane polecenie SQLa po-

[ PROGR AMI STAJR . PL ] 11

PODSTAWY PROGRAMOWANIA
zwalające pobrać dane z bazy na setki sposobów, łączyć ze
sobą tabele, filtrować i sortować dane i przetwarzać je na
całą masę sposobów. Możemy jednak skorzystać z jego naj-
prostszej postaci, która po prostu prosi o pobranie wszyst-
kich danych z tabeli. Komenda ta wygląda tak:
Listing 4. Pobieramy dane z naszej tabeli
SELECT * FROM Books;
Nareszcie! Teraz faktycznie możemy zobaczyć nasze
dane (Ilustracja 6).
Zapytanie SELECT jest bardzo krótkie i raczej dosyć
czytelne. Warto tylko wspomnieć, że symbol gwiazdki
oznacza, że interesują nas wszystkie kolumny z tej tabe-
li. Gdybyśmy chcieli pobrać na przykład tylko identyfi-
kator i tytuł, moglibyśmy napisać tak:
Listing 5. Pobieramy tylko niektóre kolumny
z tabeli
SELECT Id, Title FROM Books;
MODYFIKACJA I USUWANIE
Wprowadźmy nowy wiersz do naszej tabeli.
Listing 6. Dodajemy kolejną książkę
INSERT INTO Books
(Title,
OriginalTitle,
PublishYear,
PrintedBy)
VALUES
("Winnetou",
NULL,
1993,
"Wydawnictwo Przez Lądy i Morza");
O kurczak, pomyliliśmy się! Winnetou został wyda-
ny w 1893 roku, a nie 1993. Poza tym polską nazwą jest
wprawdzie „Winnetou”, ale jest to książka w oryginale
obcojęzyczna, więc powinniśmy też wypełnić kolumnę
OriginalTitle.
Na szczęście SQL przewiduje możliwość zmienia-
nia istniejących już rekordów, a służy do tego specjal-
na instrukcja UPDATE. Dzieli się ona na dwie części: w
pierwszej określamy, jakie zmiany chcemy wprowadzić
12 [ 4 - 202 1
do wierszy, zaś w drugiej – które wiersze chcemy w ten
sposób zmodyfikować.
W naszym przypadku będziemy chcieli zmienić tylko
pojedynczy wiersz zawierający informacje o książce „Win-
netou”. W takiej sytuacji najwygodniej będzie sprawdzić
wcześniej, jaka jest jej wartość kolumny Id (klucza głów-
nego naszej tabeli). Przy małej liczbie książek możemy po-
brać znów całą tabelę – okazuje się, że wartością tą jest 7.
Możemy teraz napisać polecenie, które poprawi
błędny wpis.
Listing 7. Poprawiamy błędny wpis
UPDATE Books
SET OriginalTitle = "Winnetou", PublishYear = 1893
WHERE Id = 7;
Polecenie UPDATE rozpoczynamy, wskazując, którą ta-
belę chcemy zmodyfikować – w naszym przypadku jest
to oczywiście tabela Books. Następnie – po słowie klu-
czowym SET (oznaczającym „ustaw”) – wprowadzamy
listę zmian, które chcemy przeprowadzić: pole Orig-
inalTitle ustawić na „Winnetou”, zaś PublishYear na
1893. Wreszcie przy pomocy słowa kluczowego WHERE
wskazujemy, które konkretnie wiersze chcemy zmienić.
W naszym przypadku wymagamy, by wartość Id zmie-
nianego rekordu była równa 7, co w efekcie zmieni tylko
pojedynczy wiersz.
Warto wiedzieć, że przy pomocy polecenia UPDATE
możemy wprowadzać hurtowe zmiany, czyli modyfi-
kować wiele wierszy naraz. W takim przypadku należy
jednak bardzo uważnie opisać wiersze, które chcemy
zmienić, bo możemy przypadkowo wprowadzić zmiany
w innym miejscu niż zamierzaliśmy.
Załóżmy teraz, że ostatni czytelnik wypożyczoną
książkę (właśnie „Winnetou”) przyniósł w opłakanym
stanie. Nie ma strony tytułowej, w książce brakuje stron,
sama książka zaś rozlatuje się. Po analizie dochodzi-
my do wniosku, że książka ta jest już stara i zniszczo-
na w stopniu, który powoduje, że nie ma sensu jej dalej
wypożyczać. Decydujemy się więc usunąć ją z rejestru
książek dostępnych do wypożyczenia, a w jej miejsce za
jakiś czas kupić nową.
Usuwanie rekordów z bazy odbywa się poprzez za-
stosowanie polecenia DELETE. W naszym przypadku bę-
dzie ono wyglądało następująco:
]

Ilustracja 6. Pobraliśmy dane z bazy!
Listing 8. Usuwamy wpis z bazy
DELETE FROM Books
WHERE Id = 7;
Składnia jest chyba bardzo czytelna – musimy najpierw
wskazać, z której tabeli chcemy usunąć rekordy, a potem
wskazać, które konkretnie z nich są nam już niepotrzeb-
ne. Użycie klucza głównego – jak w powyższym przy-
padku – zawęzi wynik do jednego konkretnego wiersza.
Wykonanie zapytania z Listingu 4 powinno potwierdzić,
że wiersz został prawidłowo usunięty.
CIĄG DALSZY NASTĄPI…
Relacyjne bazy danych są bardzo wygodnym narzę-
dziem pozwalającym na przechowywanie dużych ilości
danych oraz – co ważne – zależności pomiędzy nimi. Mo-
żemy operować na nich w stosunkowo łatwy sposób przy
!
Zapamiętaj
օ Pobierz i zainstaluj lub rozpakuj program SQLite
Studio.
օ Użyj SQLite Studio, by zbudować opisaną w arty-
kule bazę danych.
օ Spróbuj przy pomocy tego programu wstawić do
bazy dane.
[ PPROGR
ROGR AMI STAJR . PL
Bazy danych
pomocy bardzo wygodnego języka o nazwie SQL. Pisane
w nim zapytania przypominają zdania pisane w języku an-
gielskim, co jeszcze bardziej upraszcza proces nauki.
W następnej części dowiemy się, jak powiązać ze
sobą kilka tabel oraz jak wyciągać z nich potrzebne nam
informacje.
Wojciech Sura
Programuje od 25 lat, z czego 10 komercyjnie; ma
na koncie aplikacje desktopowe, webowe, mobilne
i wbudowane – pisane w C#, C++, Javie, Delphi, PHP,
JavaScript i w jeszcze kilku innych językach. Obecnie
pracuje w firmie WSCAD, rozwijającej oprogramowa-
nie nowej generacji CAD dla elektrotechników.
WOJCIECHSURA@GMAIL.COM
Ćwicz w domu
օ . Programy komputerowe często przechowują
informacje w bazach danych.
օ Bazy danych pozwalają nie tylko na przechowywa-
nie dużych ilości informacji, ale również zależno-
ści pomiędzy nimi.
օ Do komunikacji z bazami danych wykorzystuje się
język SQL.
] 13
JĘZYKI PROGRAMOWANIA

Justyna Klimczyk

Czy matematyka może być piękna?

O fraktalach słów kilka
Fascynują matematyków, fizyków, przyrodników, ale też artystów, grafików komputero-
wych czy programistów. Do tej pory nie stworzono ich jednoznacznej definicji, gdyż ich
ilość i różnorodność na to nie pozwala. O czym mowa? Rzecz jasna chodzi o fraktale.

12+

Dowiesz się Potrzebna wiedza

օ Czym są fraktale. օ Podstawowa znajomość środowiska Scratch.
օ Jak tworzyć w Scratchu skrypty rysujące różne օ Znajomość pojęcia rekurencji.
fraktale.

Ilustracja 1. Fraktal Mandelbrota

(źródło: https://pixabay.com/pl/illustrations/zbi%c3%b3r-mandelbrota-fraktal-6385080/)

14 [ 4 - 202 1 ]
 Czy matematyka może być piękna? O fraktalach słów kilka

W dużym uproszczeniu fraktal jest figurą, której część

jest podobna do całości, czyli samopodobną. Dla
ułatwienia matematycy stworzyli listę cech, którymi fi-
Każde rozgałęzienie składa się z dwóch elementów, o po-
łowę krótszych niż poprzednie. Między nimi jest kąt 90°.
Zobaczmy, jak wygląda przykładowy skrypt, w wyni-
gura powinna się odznaczać, by móc być określona mia- ku działania którego powstało drzewo.
nem fraktala.
Fraktalność można odnaleźć w strukturze chmur,
płatków śniegu, kalafiora, aloesu, paproci czy szyszki,
ale też w strukturze fiordów, naczyniach krwionośnych,
błyskawicach czy systemie rzek. Przykładów jest wiele.
Spróbujmy przyjrzeć się bliżej budowie niektórych zna-
nych fraktali, a później stworzymy w Scratchu skrypty
tworzące te fraktale, a kto wie – może nawet zaprojek-
tujemy własny.

ZACZNIJMY OD CZEGOŚ PROSTEGO

Przyjrzyjmy się prostej konstrukcji fraktalnej i zasta-
nówmy się, jak powstała. Zwróćmy uwagę na samopo-
dobieństwo dowolnego fragmentu drzewa do całości.

Ilustracja 4. Fragment skryptu zawierający procedurę

rekurencyjną „drzewo(konar)”

Czy zwróciliście uwagę na to, że w procedurze wywoły-

Ilustracja 2. Przykład prostego fraktala wygenerowany
w Scratchu wana jest ona sama? Taką sytuację nazywamy rekurencją.

Ilustracja 3. Przykłady występowania fraktali w przyrodzie. Od lewej aloes, szyszka, brokuł (źródła: https://pixa-
bay.com/pl/photos/aloes-soczysty-aloes-polyphylla-510113/ https://pixabay.com/pl/photos/szyszki-szyszka-jesie-
%c5%84-las-3026691/ https://pixabay.com/pl/photos/romanescu-romanesco-warzywo-3297134/)

[ PROGR AMI STAJR . PL ] 15

JĘZYKI PROGRAMOWANIA

Ciekawostka
Pojęcie fraktala zostało wprowadzone do matematyki przez
Benoît Mandelbrota w latach 70. ubiegłego wieku. Odkryty
przez niego zbiór Mandelbrota nie był jednak pierwszym
przykładem fraktala.
Szczególnymi fraktalami – jeszcze zanim zostały tak
nazwane – zajmowało się wielu matematyków, w tym Polak
Wacław Sierpiński (o tym później). Mandelbrot, używając
komputera do wizualizacji, uczynił z fraktali przedmiot in-
tensywnych badań. O ważności tego zagadnienia zadecydo-
wały zastosowania w różnych dziedzinach, zwłaszcza poza
matematyką.
Źródło: Wikipedia
Pod linkiem: https://math.hws.edu/eck/js/mandelbrot/
MB.html znajdziecie generator online fraktala Mandelbrota.
Umożliwia on wybór między innymi palety kolorów, mak-
Ilustracja 5. Fragment skryptu zawierający wywołanie
symalnej liczby iteracji oraz powiększenie dowolnej jego
procedury „drzewo(konar)”
części.
Cały skrypt można znaleźć pod adresem:
» https://scratch.mit.edu/projects/556219010

Pod linkiem https://www.visnos.com/demos/fractal znaj-

dziecie generator online powyższego fraktala. Możecie
modyfikować kilka zmiennych i obserwować, jak zmienia
Ilustracja A. Okno generatora fraktala Mandelbrota się jego postać. Finalnie obraz można zapisać w pliku.

W zależności od parametru (konar) powyższa proce-

dura narysuje drzewo o określonej wielkości. Przy para-
metrze 180 powstanie sześciostopniowe rozgałęzienie,
zaś przy parametrze 100 – pięciostopniowe. Ogranicza
nas jednak wielkość scratchowej sceny.
Pamiętajmy, że aby taka procedura zadziałała, musi
zostać wywołana. Powinniśmy zadbać również o usta-
wienie duszka (pozycja, kierunek, widoczność), który
będzie rysował drzewo, a także odpowiednie ustawienia
pisaka (kolor, grubość). Pamietajmy, że aby móc wyko-
rzystać pisak, musimy w Scratchu dodać rozszerzenie Ilustracja 6. Okno generatora
„Pióro”.

16 [ 4 - 202 1 ]

FRAKTALNOŚĆ LIŚCI PAPROCI
Ilustracja 7. Orlica pospolita
(źródło: https://pixabay.com/pl/photos/orlica-ro-
%c5%9bliny-charakter-li%c5%9b%c4%87-3701765/)
Jednym z wielu – choć niezwykle ciekawym – przykła-
dem fraktalności w przyrodzie jest liść paproci.
Zobaczmy, jak mógłby wyglądać przykładowy skrypt
rysujący paproć.
Ilustracja 8. Procedura „Paproć(długość)”
Parametr procedury paproć określa początkową dłu-
gość łodygi, jest też punktem wyjścia do wyznaczania
długości poszczególnych odgałęzień, które za sprawą
[ PROGR AMI STAJR . PL
Czy matematyka może być piękna? O fraktalach słów kilka
rekurencji stają się coraz krótsze. Zwróćcie uwagę na
fakt, że procedura Paproć(długość) wywołuje samą
siebie trzykrotnie. Spowoduje to znaczne wydłużenie
działania skryptu i przynajmniej kilkunastosekundowe
oczekiwanie na efekt końcowy jej działania. By od razu
zobaczyć wynik procedury, należy uruchomić w Scrat-
chu tryb turbo (patrz „Ciekawostka").
Ilustracja 9. Przykład działania skryptu
Oczywiście, podobnie jak w poprzednim projekcie, po-
winniśmy zadbać o ustawienia duszka oraz pisaka, aby
element graficzny zmieścił się na scratchowej scenie i był
dobrze widoczny. Powyższy efekt uzyskamy, dwukrot-
nie wywołując procedurę. Zanim wywołana zostanie
drugi raz, należy zmienić położenie duszka i kolor pi-
saka. Zachęcam do tworzenia własnych paprociowych
kompozycji.
Kompletny projekt jest dostępny pod linkiem:
» https://scratch.mit.edu/projects/559890950
KRZYWA KOCHA
Dość znanym przykładem fraktalności jest krzywa
Kocha. Połączenie trzech krzywych tworzy element
przypominający płatek śniegu i nazywany jest płatkiem
Kocha (od nazwiska szwedzkiego matematyka Nielsa Fa-
biana Helge von Kocha).
] 17
JĘZYKI PROGRAMOWANIA

Krzywa powstaje z odcinka, który dzielimy na 3 rów-
ne części i zastępujemy środkowy dwoma odcinkami
o tej samej długości, które wraz z usuniętą częścią two-
rzą trójkąt równoboczny. Czynność tą możemy powta-
rzać w nieskończoność, uzyskując coraz bardziej skom-
plikowany obraz.
Warto wiedzieć
Dywan Sierpińskiego – fraktal otrzymany z kwadratu za
pomocą podzielenia go na dziewięć (3x3) mniejszych kwa-
dratów, usunięcia środkowego kwadratu i ponownego reku-
rencyjnego zastosowania tej samej procedury do każdego
z pozostałych ośmiu kwadratów. Jego konstrukcja została
podana przez polskiego matematyka Wacława Sierpińskiego
w 1915 roku.

Ilustracja 10. Etapy tworzenia krzywej Kocha

Spróbujmy teraz stworzyć procedurę w Scratchu, któ-

ry pozwoli generować kolejne iteracje krzywej Kocha.
W tym celu naszą procedurę wyposażymy w dwa para-
metry: ile i długość. Pierwszy z nich pozwoli tworzyć
dowolne iteracje krzywej, drugi natomiast określa dłu-
gość odcinka, który będzie poddawany podziałowi. Dla
parametru ile = 1 krzywa przyjmie postać odcinka;
Ilustracja B. Dywan Sierpińskiego (czwarta iteracja)
zwiększanie jego wartości będzie oznaczać kolejne jego
przekształcenia. Wygenerowany na:
» https://codinglab.huostravelblog.com/math/fractal-
-generator/index.php

Trójwymiarowy odpowiednik dywanu Sierpińskiego na-

zywamy kostką Mengera lub gąbką Mengera. Konstrukcja
kostki została podana przez austriackiego matematyka
Karla Mengera w roku 1927.

Ilustracja C. Kostka Mangera (źródło: https://com-

mons.wikimedia.org/wiki/File:Menger-Schwamm.png)

Źródło: Wikipedia

Ilustracja 11. Przykład procedury rysującej krzywą Kocha

18 [ 4 - 202 1 ]
 Czy matematyka może być piękna? O fraktalach słów kilka

By krzywa mogła się zamienić w płatek, procedura

powinna być wywołana trzykrotnie wraz ze zmianą po-
łożenia duszka o kąt 120°.

Ilustracja 12. Fragment skryptu odpowiedzialny za ryso-

wanie płatka Kocha

Całość znajdziecie pod linkiem:

» https://scratch.mit.edu/projects/556241227.
Ilustracja 14. Procedura rysująca dowolną iterację trój-
kąta Sierpińskiego

Kompletny skrypt dostępny jest pod linkiem:

» https://scratch.mit.edu/projects/556687182

TRÓJKĄT SIERPIŃSKIEGO
Fraktalami zajmował się również polski matematyk
Wacław Sierpiński. Przyjrzymy się z bliska jednemu z tych
fraktali i stwórzmy procedurę, która rysuje dowolną jego
iterację.
Trójkąt Sierpińskiego – bo o nim mowa – powstaje
w wyniku podziału trójkąta równobocznego na cztery
mniejsze trójkąty w wyniku łączenia środków boków
tego pierwszego. Następnie usuwany jest trójkąt środ-
kowy, a operacja podziału powtarzana jest na pozosta-
łych trzech trójkątach.
STWÓRZMY WŁASNY FRAKTAL
Omówiliśmy kilka przykładów popularnych fraktali,
czas spróbować stworzyć własny!
Wykorzystajmy duszka w postaci trójkąta (możecie
go stworzyć samodzielnie w zintegrowanym edytorze
grafiki). W kolejnych krokach procedury tworzone są
coraz mniejsze trójkąty, a każdy z nich jest przesunięty
i odwrócony o kąt. Sześciokrotne wywołanie procedury,
połączone z przesunięciem o kąt, spowoduje powstanie
poniższego obiektu. Czy coś wam to przypomina?

Ilustracja 13. Kolejne etapy powstawania trójkąta Sier-

pińskiego

Procedura trójkąt ma dwa parametry. Pierwszy z nich

określa stopień podziału trójkąta na mniejsze, drugi zaś
długość boku. Zwróćmy uwagę na to, że zgodnie z zasa-
dą bok dzielony jest na połowy, a czynność ta powtarza-
na jest aż do chwili, gdy zmienna ile osiągnie wartość
mniejszą od 1. Ilustracja 15. Efekt wywołania procedury „mój_fraktal”

[ PROGR AMI STAJR . PL ] 19

JĘZYKI PROGRAMOWANIA

cedura. Pamiętajcie jednak, aby nie zmieniać wszystkich

wartości jednocześnie. Róbcie to kolejno i obserwujcie
różnice.
Link do projektu:
» https://scratch.mit.edu/projects/555200610

INNE POPULARNE PRZYKŁADY FRAKTALI

Ilustracja 16. Procedura rysująca pojedynczy element

kolorystyczny

Ilustracja 18. Zbiór Julii (Źródło: https://commons.wiki-

media.org/wiki/File:Julia-Menge_-0.4%2B0.6i.png)

Nazwa tego fraktala nie pochodzi - jakby się wydawało

- od imienia Julia, ale od nazwiska francuskiego mate-
matyka. Gaston Maurice Julia miał znaczący wpływ na
współczesną teorię fraktali.

Ilustracja17. Fragment skryptu, w którym wywołana zo-

staje procedura „mój_fraktal”

Zachęcam do eksperymentowania i modyfikowania tego Ilustracja 19. Drzewo pitagorejskie

projektu. Spróbujcie zmienić w procedurze rozmiar po-
czątkowy, ilość kroków przesunięcia pojedynczego trój- Wygenerowane na:
kąta i jego kąt obrotu. Zmian możecie dokonywać także » https://codinglab.huostravelblog.com/math/frac-
we fragmencie skryptu, w którym wywoływana jest pro- tal-generator/index.php

20 [ 4 - 202 1 ]
 Czy matematyka może być piękna? O fraktalach słów kilka

Nietrudno zauważyć, że fraktal zbudowany jest z kwa-
dratów. Na każdym etapie jego konstrukcji wymaga ry-
sowania dwóch kwadratów opartych na odpowiednich
bokach trójkąta prostokątnego (w tym przypadku trójką-
ta prostokątnego równoramiennego), których własności
ilustrują twierdzenia Pitagorasa - stąd jego nazwa.
Ciekawostka
W sytuacji, kiedy chcemy przyspieszyć wykonywanie rozbu-
dowanego skryptu, warto włączyć w Scratchu tryb „Turbo”.
Efekt działania będzie natychmiast widoczny na scenie.
Tryb „Turbo” włączymy, klikając zieloną chorągiewkę przy
wciśniętym klawiszu Shift. Powtórzenie tej czynności przy-
wraca normalny tryb działania.

Ilustracja D. Włączony tryb „Tryb turbo”

zafascynowała wielu ludzi. W świecie fraktali inspiracji

szukali i nadal szukają artyści, architekci, a także – co
ciekawe - ekonomiści czy kompozytorzy. Można więc
powiedzieć, że to, co Mandelbrot nazwał geometrią frak-
talną, nie opisuje tylko określonych kształtów, ale jest też
Ilustracja 20. Krzywa smoka (Smok Heighwaya)
punktem wyjścia do obliczeń, analiz w wielu dziedzinach.
Wygenerowany na:
» https://codinglab.huostravelblog.com/math/frac- Justyna Klimczyk
tal-generator/index.php
Nauczycielka informatyki i matematyki w Szkole
Podstawowej im. Janusza Korczaka w Kleszczowie.
Fraktale to ciekawe i często bardzo piękne obiekty gra- Autorka bloga „TIKowy Belfer”, należy do grupy
ficzne. Możemy je dostrzec wokół nas, gdyż wiele tworów Superbelfrzy RP. Zagorzała zwolenniczka wykorzy-
fraktalnych występuje w przyrodzie. O kilku takich przy- stywania TIK w codziennej pracy z uczniem.
kładach wspomniałam, ale to tylko nieliczne przypadki z
niemal niekończącej się listy. Oryginalność tych obrazów KLIMCZYK.JUSTYNA@GMAIL.COM

!
Zapamiętaj Ćwicz w domu
օ Fraktal – w dużym uproszczeniu figura, której օ Spróbuj zmodyfikować ostatni skrypt według wła-
część jest podobna do całości, inaczej figura snego pomysłu, tak aby powstająca w wyniku jej
samopodobna. wywołania figura zmieniła swój kształt.

օ Rekurencja – sytuacja, w której procedura wywo- օ Zastanów się, jak wykorzystać rekurencję
łuje samą siebie ze zmienionymi danymi. w ostatniej procedurze.

օ Stwórz własny skrypt rysujący figurę będącą

fraktalem. Zainspiruj się przykładami fraktalności
w przyrodzie.

օ Poszukaj w Internecie informacji na temat innych

fraktali.

օ Dowiedz się, czym jest sztuka fraktalna.

[ PPROGR
ROGR AMI STAJR . PL ] 21
PROGRAMOWANIE GIER

Tomasz Błaszczyk

Średniowieczna przygoda
– gra RPG w środowisku Unity
Ostatnie starcie
Poprzednie części artykułu pozwoliły nam zapoznać się z wieloma aspektami tworzenia
gier w Unity. Przebrnęliśmy zarówno przez podstawowe kwestie wizualne, jak i logiczne,
jednak nadal jest to tylko kropla w morzu możliwości, jakie oferuje nam silnik. Idąc o krok
dalej, w ostatniej już części tej serii damy graczowi możliwość wykorzystania zebranych
surowców do wytworzenia broni, które mogą okazać się przydatne w walce z przeciwnika-
mi najeżdżającymi naszą wioskę. Zapraszam!

12+

Dowiesz się Potrzebna wiedza

օ Jak obsłużyć wiele kamer na scenie. օ Znajomość kluczowych zasad pisania kodu
w języku C#.
օ Jak działają przyciski oraz w jaki sposób wykryć
i obsłużyć zdarzenie kliknięcia. օ Zainteresowanie grami oraz odrobina kreatywno-
ści i zapału do pracy.
օ Jak „nagrywać” animacje w Unity.
օ Znajomość poprzednich artykułów tej serii.
օ Jak skutecznie łączyć ze sobą funkcjonalności
wielu skryptów.

INTERFEJS
Komu udało się odwzorować utworzone ostatnim
razem funkcjonalności, ten z pewnością ma już pełny
ekwipunek zdobytych surowców. Chcąc nie chcąc, zmu-
szeni byliśmy do ich magazynowania z powodu braku ja-
kiegokolwiek kupca w okolicy... Lecz bez obaw, młodzi
wojownicy, gdyż otrzymałem właśnie ważną wiadomość
od wędrownego rzemieślnika, który postanowił osiąść
na dłuższy czas w naszej wiosce w celu wytworzenia
broni dla wszystkich mieszkańców. Mówi się, że dostar-
czając odrobinę drewna i żelaza, jesteśmy w stanie uzy-
skać bardzo ciekawy oręż. Pomóżmy kowalowi rozłożyć
wszystkie potrzebne rzeczy! Zaczniemy od stworzenia
prostego interfejsu kuźni. Postępując analogicznie do
utworzonego już ekwipunku, dodajemy nowy Canvas
i zmieniamy jego nazwę w panelu hierarchii na przy-
kład na SmithCanvas (smith to po angielsku kowal). Jak
poprzednio, warto zwrócić uwagę na odpowiednie ska-
lowanie naszego płótna, stąd też pamiętajmy o dosto-
sowaniu komponentu Canvas Scaler do rozdzielczości
bazowej Full HD, czyli 1920x1080 pikseli. Tak przygoto-
wane płótno możemy uzupełnić o kolejne elementy, ja-
kimi będą obiekty typu Text (napisy) oraz Image (obraz-
ki). Wiemy już, jak z nich korzystać, więc zaproponuję
tylko mój przykładowy układ (Ilustracja 1).

22 [ 4 - 202 1 ]

Ilustracja 1. Przykładowy interfejs lokalnej kuźni
Zaczynamy od dodania podstawowego panelu rozcią-
gniętego na całą szerokość ekranu. Możemy umieścić
w nim grafikę przedstawiającą kuźnię. Następnie niepeł-
ny, półprzezroczysty panel stanowiący tło dla przedmio-
tów oferowanych przez kowala. W celu ich stworzenia
najlepiej będzie dodać sobie jeden obiekt nadrzędny za-
wierający trzy obrazki z ikonami: miecza, drewna i żelaza
oraz dwa napisy oznaczające cenę wytworzenia danej
broni. Tak przygotowany element możemy teraz zdu-
plikować, przesunąć względem pierwszego oraz pod-
mienić wyświetlane wartości. Wszystkie potrzebne
ikony zamieszczam w sekcji Do pobrania na stronie
internetowej PJr. Przedstawiony układ jest oczywiście
tylko propozycją, dlatego jeśli przyszedł ci do głowy ja-
kiś lepszy pomysł na zbudowanie interfejsu dla naszego
kowala, to gorąco zachęcam do spróbowania swoich sił
w tym aspekcie. Pamiętaj jednak o zachowaniu porząd-
ku w projekcie poprzez intuicyjne nazywanie obiektów
w panelu hierarchii! Teraz, kiedy część wizualna została
już przygotowana, możemy zająć się interakcją oraz samą
logiką. Po pierwsze, za pośrednictwem naszych ikon
z mieczami będziemy chcieli dokonywać konkretnych
transakcji. W skrócie: muszą one stać się przyciskami,
których kliknięcie spowoduje wywołanie odpowiedniej
funkcji zakupu dla wybranego rodzaju broni. W tym celu
zaznaczamy je w panelu hierarchii, następnie z poziomu
panelu inspektora wybieramy przycisk Add Component,
gdzie dodajemy komponent Button (z ang. przycisk),
wyszukując go odpowiednią frazą.
W ramach przypomnienia, możliwość wyrywkowego
zaznaczenia wielu obiektów jednocześnie uzyskujemy,
wybierając je z przytrzymanym klawiszem Ctrl. Kiedy
wszystkie ikony stały się już interaktywne, warto było-
[ PROGR AMI STAJR . PL
Średniowieczna przygoda – gra RPG w środowisku Unity
by pokrótce przybliżyć rolę poszczególnych składowych
nowego komponentu (Ilustracja 2).
Ilustracja 2. Panel inspektora – komponent „Button”
Idąc od góry, widzimy opcję Interactable, czyli proste
pole typu prawda/fałsz, mówiące o tym, czy możliwa
jest interakcja z danym przyciskiem. Jeżeli zostanie wy-
łączone, przycisk staje się niewrażliwy na kliknięcia, co
przy domyślnych ustawieniach da się również zauważyć
od strony wizualnej. Transition z kolei określa, w jaki
sposób przycisk będzie reagował na działania ze stro-
ny gracza. Do wyboru są cztery stany: None, Color Tint
(domyślny), Sprite Swap oraz Animation. W pierwszym
przypadku przycisk pozbawiony jest wszelkich efektów.
Akcja zostanie wywołana w momencie kliknięcia, lecz
nastąpi to bez żadnego efektu wizualnego. Przy wyborze
opcji drugiej (przy której pozostaniemy) komponent roz-
budowuje się o kilka opcji przedstawionych na ilustracji
z komponentem.
» Target Graphic to komponent graficzny przycisku
(na przykład jego tło). Konieczne jest jego podłącze-
nie, gdyż środowisko musi wiedzieć, czego kolor ma
ulec zmianie wraz z zaistniałą akcją.
» Normal Color to kolor przycisku w chwili, gdy nie
zachodzi z nim żadna interakcja.
» Highlighted Color to kolor występujący w momen-
cie najechania na powierzchnię przycisku kursorem
myszy.
» Pressed Color określa kolor, jaki przybiera wciśnięty
przycisk.
] 23
PROGRAMOWANIE GIER
» Selected Color to barwa przycisku, który został
kliknięty. Utrzymuje się aż do momentu wywołania
interakcji z innym obiektem, na przykład kliknięcie
innego przycisku lub obszaru poza nim (tła).
» Disabled Color to barwa przycisku nieaktywnego
(z niezaznaczoną opcją Interactable).
Każdy z przedstawionych kolorów możemy dostosować
według własnych preferencji, klikając na rubrykę z kolo-
rem i wybierając nowy z wyświetlonej palety. Czas trwa-
nia przejścia z jednego stanu do drugiego (w sekundach)
możemy określić przy pomocy opcji Fade Duration. Za-
łóżmy na przykład, że wartość ta ustalona jest na 5, wów-
czas najeżdżając kursorem myszy na przycisk, zmianę
jego barwy odnotowalibyśmy dopiero po pięciu sekun-
dach. Tyle jeśli chodzi o kwestie wizualne. Najistotniejsza
w przycisku jest jednak obsługa zdarzeń. U dołu kompo-
nentu znajdziemy przeznaczoną temu sekcję On Click().
Domyślnie przycisk jest bezczynny, stąd też jego lista
zdarzeń będzie początkowo pusta. Aby dodać nową pozy-
cję, klikamy przycisk +, jednak w tym momencie musimy
już wiedzieć, co konkretnie nasz przycisk miałby robić,
gdyż konieczne będzie wskazanie obiektu z przypisanym
skryptem, którego jedna z metod będzie wykonywana
w chwili jego naciśnięcia. Do tego zagadnienia jednak po-
wrócimy w chwili, gdy gotowy będzie nasz skrypt.
INTERAKCJA
Zanim jednak go utworzymy, warto byłoby wyposa-
żyć naszą kuźnię o trigger, który wykrywając obecność
gracza, wyświetli na ekranie przygotowany wcześniej
interfejs. W tym celu analogicznie do triggerów z po-
przedniej części użyjemy obiektu z colliderem podsta-
wowej geometrii. W moim przypadku będzie to Sphere
Collider umiejscowiony jak na Ilustracji 3.
Pamiętajmy o zaznaczeniu najistotniejszego pola
Is Trigger w panelu inspektora, gdyż jak pamiętamy,
to właśnie ono aktywuje naszą detekcję. Jeśli wszystko
udało się pomyślnie odwzorować, możemy przejść do
skryptowania. W tym celu w katalogu Scripts tworzymy
nowy plik języka C# i nazywamy go na przykład Smith­
Trigger. Skrypt ten wedle założeń obsłuży wyświetlanie
ofert z przedmiotami. Po pierwsze, tworzymy publicz-
ne odwołanie typu GameObject. Za jego pośrednictwem
chcemy odwoływać się do nowo utworzonego Canvasa
24 [ 4 - 202 1
Ilustracja 3. Komponent „Sphere Collider” jako miejsce
interakcji z kowalem
z widokiem kuźni, stąd też nazywamy je na przykład
smithCanvas. Następnie potrzebujemy odpowiednio
wykorzystać utworzoną detekcję. Kiedy gracz podejdzie
do kowala (wejdzie w obszar triggera) – obiekt smith­
Canvas zostanie aktywowany. Analogicznie, kiedy odej-
dzie, interfejs zostanie wyłączony. Dobrze byłoby także
dezaktywować go na początku, gdyż w momencie roz-
poczęcia rozgrywki nie będziemy znajdować się przy
kuźni. W tym celu w metodzie Start ustalamy status
aktywności obiektu na false. Podobną funkcjonalność
tworzyliśmy już ostatnio, lecz w ramach przypomnienia
opisane kroki prezentuję w Listingu 1.
Listing 1. Logika początkowej interakcji z kowa-
lem
public class SmithTrigger : MonoBehaviour
{
public GameObject smithCanvas;
void Start()
{
smithCanvas.SetActive(false);
}
private void OnTriggerEnter(Collider other)
{
if (other.tag == "Player")
{
smithCanvas.SetActive(true);
}
}
]

private void OnTriggerExit(Collider other)
{
if (other.tag == "Player")
{
smithCanvas.SetActive(false);
}
}
}
Gotowy skrypt dołączamy do obiektu z triggerem, a na-
stępnie przeciągamy obiekt naszego płótna w pustą ru-
brykę publicznego odwołania.
Świetnie! Jedna pozycja z naszej listy odhaczona. Mo-
żemy iść dalej!
NAUKA WŁADANIA MIECZEM
Kolejnym krokiem logicznym jest możliwość dokona-
nia zakupu którejś z przedstawionych broni. Dobrze by-
łoby jednak najpierw je przygotować, aby dobrze leżały
w „dłoni” gracza oraz miały swoje animacje.
W paczce dołączonej do pierwszej części artykułu
znalazł się katalog o nazwie Cartoon Heroes, którego
zawartość między innymi stanowiły ciekawe, animowa-
ne postaci. Rozmieściliśmy je wówczas w różnych miej-
scach wioski, przez co zyskała ona swoich mieszkańców.
Tym razem jednak interesują nas zawarte w paczce bro-
nie, które znajdziemy w podkatalogu Weapons. Ku miłe-
mu zaskoczeniu autor przygotował ich aż cztery.
Wybierając którąś z nich, przechodzimy do folde-
ru 3D, a następnie przeciągamy oteksturowany model
miecza do obiektu kamery należącej do postaci gracza
w panelu hierarchii. Dlaczego do kamery, a nie do sa-
mego obiektu Player? Powodem jest to, że nasza postać
ma możliwość obracania kamery przy pomocy myszy.
Chcemy, aby broń była ułożona poprawnie niezależ-
nie od tego, czy gracz patrzy w górę, czy przed siebie.
Umieszczając ją w kamerze, zyskujemy jej rotację wraz
z obiektem nadrzędnym.
W kolejnym kroku przechodzimy do panelu inspek-
tora, gdzie zerujemy położenie na wszystkich osiach, co
pozwoli nam ustawić model wewnątrz postaci. Z tego
miejsca w łatwy sposób możemy doszukać się najlepsze-
go ułożenia, modyfikując wartości komponentu Trans­
form wedle własnego uznania. W moim przypadku bę-
dzie to ręka prawa jak na Ilustracji 4.
[ PROGR AMI STAJR . PL
Średniowieczna przygoda – gra RPG w środowisku Unity
Ilustracja 4. Symulacja „trzymania” broni przez postać
gracza
Skoro trzymamy już miecz, dobrze byłoby nauczyć się
wykonywać jakiś prosty atak. W drugiej części serii
o średniowiecznej przygodzie animowaliśmy wysuwany
panel ekwipunku. Tym razem czeka nas nieco większe
wyzwanie, gdyż chcemy stworzyć coś na wzór szybkie-
go pchnięcia poprzedzonego lekkim wycofaniem ostrza.
W tym celu zaznaczając obiekt miecza, przechodzimy
do panelu Animation i analogicznie jak poprzednim ra-
zem tworzymy animację bezczynnego miecza (Idle) wraz
z kontrolerem.
Kiedy pomocniczy stan bezczynności jest już gotowy,
możemy przejść do części właściwej, jaką jest animacja
ataku. Tworzymy nowy klip i wymyślamy mu intuicyjną
nazwę. W moim przypadku będzie to SwordAttackAni­
mation (sword to z ang. miecz).
Omawiając temat animacji, powiedzieliśmy sobie,
że w pierwszej kolejności należy dodać do klipu odpo-
wiednie właściwości, takie jak na przykład pozycja czy
rotacja animowanego obiektu. Następnie za ich pośred-
nictwem jesteśmy w stanie ustalić konkretne wartości
dla poszczególnych osi w czasie trwania animacji. Jest
to oczywiście dobry sposób, lecz nie jedyny. W zakładce
Animation znajdziemy bowiem pewien ciekawy przy-
cisk oznaczony czerwoną kropką. Symuluje on niejako
„nagrywanie” animacji. Jak z tego skorzystać? Po doda-
niu interesujących nas właściwości tworzymy punkty na
osi czasu i najeżdżamy na nie wskaźnikiem. Teraz klika-
my czerwony przycisk nagrywania, a następnie ręcznie
przesuwamy lub obracamy obiekt na scenie przy po-
mocy poznanych już narzędzi. Warto zwrócić uwagę, że
podczas „nagrywania” animacji elementy osi czasu oraz
tło przycisku stają się czerwone, co nie pozwoli nam
] 25
PROGRAMOWANIE GIER
przeoczyć, czy proces już się zakończył, czy animacja
nadal sczytuje nowe wartości (Ilustracja 5).
Ilustracja 5. Wizualne zmiany towarzyszące nagrywanej
animacji
Dodajmy teraz kilka nowych punktów na osi czasu i przy
pomocy narzędzia do nagrywania odwzorujmy mniej lub
bardziej realistyczny cios naszego ostrza. Każdorazowo
przy ukończeniu modyfikacji obiektu w czasie pamiętaj-
my o dezaktywacji czerwonego przycisku, aby uniknąć
przypadkowych, niepożądanych zmian w edytowanym
elemencie. Finalnie powinniśmy uzyskać coś na wzór
zamachu, szybkiego cięcia lub pchnięcia i powrotu do
pozycji początkowej. Nie przejmujmy się, jeżeli nie wyj-
dzie nam za pierwszym razem, gdyż wymaga to nieco
wyobraźni i wprawy. W tym przypadku dobrze jest dojść
do perfekcji metodą prób i błędów, badając przebieg ani-
macji i modyfikując ustalone wartości.
Jeśli wszystko jest gotowe, to możemy przejść do za-
kładki Animator, w której nadamy klipom konkretne re-
lacje. Domyślnie na wejściu powinniśmy znaleźć animację
bezczynności, gdyż będzie to nasz stan początkowy. Klika-
jąc ją prawym przyciskiem myszy, wybieramy opcję Make
Transition i prowadzimy utworzoną strzałkę do animacji
ataku. Analogicznie w drugą stronę, dzięki czemu uzyska-
my obustronną możliwość przejścia, jak na Ilustracji 6.
Ilustracja 6. Odpowiednio połączone klipy animacyjne
26 [ 4 - 202 1
Pora na utworzenie parametru wyzwalającego nasz
atak. W przypadku panelu ekwipunku używaliśmy typu
Bool, który poprzez swoje logiczne stany informował
animatora, która animacja ma zostać odtworzona. Tym
razem skorzystamy z Triggera. Hmm… Gdzieś padło już
to słowo! W tym przypadku nie będzie to jednak trigger
działający w oparciu o collider, a specjalny wyzwalacz
animacyjny, powodujący przejście do konkretnego blo-
ku. Aby go dodać, wybieramy zakładkę Parameters, na-
stępnie + i Trigger. Nazwijmy go na przykład Attack. Te-
raz, by wszystko działało jak należy, wybieramy strzałkę
prowadzącą do animacji ataku i z prawej strony w sekcji
Conditions wybieramy z listy nazwę nowo utworzone-
go triggera. Jeśli chodzi o strzałkę powrotu, to pozostaje
ona bez przypisanego triggera, ponieważ każdorazowo
po wykonaniu ataku mieczem chcemy, by przeszedł on
w stan bezczynności. W panelu animatora to w zasadzie
tyle. Teraz musimy jeszcze tylko wyłączyć zapętlenie
użytych animacji, odnajdując je w jednym z folderów pa-
nelu projektowego i odznaczając pole Loop Time w pa-
nelu inspektora. W porządku! Pora przejść do kolejnego
etapu, jakim będzie zaimplementowanie utworzonych
funkcjonalności w kodzie.
W tym celu tworzymy nowy skrypt języka C# i na-
zywamy go na przykład SwordController. Na ten mo-
ment posłuży nam on jedynie do odtwarzania animacji
ataku, która wywoływana będzie z każdym naciśnięciem
wybranego przycisku. Po pierwsze, definiujemy w kla-
sie prywatne pole typu Animator, następnie pobiera-
my jego odwołanie funkcją GetComponent w domyślnej
metodzie Start. Możemy to zrobić, ponieważ skrypt ten
podpięty będzie do tego samego obiektu co komponent
animatora. Następnie w metodzie Update z każdą klat-
ką sprawdzamy, czy kliknięty został lewy przycisk myszy
(Mouse0). Jeżeli tak, wówczas na rzecz animatora wy-
wołujemy funkcję SetTrigger i w cudzysłowie podajemy
nazwę utworzonego przed chwilą parametru. Całość
prezentuje się jak w Listingu 2.
Listing 2. Ciało klasy „SwordController”
public class SwordController : MonoBehaviour
{
private Animator animator;
void Start()
]
 Średniowieczna przygoda – gra RPG w środowisku Unity

{ Jeśli udało nam się w ten sposób utworzyć kilka poten-

animator = GetComponent<Animator>(); cjalnie różnych obiektów, możemy przetestować całość.
} Aby wszystkie bronie nie były widoczne naraz, zosta-
void Update() wiamy jedną, a resztę dezaktywujemy, odznaczając pole
{ znajdujące się na samej górze panelu inspektora, tuż
if(Input.GetKeyDown(KeyCode.Mouse0)) obok nazwy danego obiektu. Co istotne, stan aktywności
{ możemy zmieniać również w czasie trwania rozgrywki.
animator.SetTrigger("Attack");
} PRZENIKANIE MIECZA
} Testując nasze nowe bronie, napotkałem jeden wi-
} zualny problem. Mianowicie, gdy zbliżamy się do ścia-
ny jakiegoś budynku lub innego obiektu, ostrze niejako
Zapisujemy i wracamy do Unity. Tak przygotowany przenika przez napotkaną przeszkodę, co nie wygląda
skrypt przeciągamy teraz z panelu projektowego do in- zbyt zachęcająco (Ilustracja 8).
spektora naszego miecza, czyli obiektu z animatorem.
Rozpoczynamy rozgrywkę i testujemy. Jeśli wszystko
działa jak należy, możemy spróbować dodać kolejne bro-
nie z oferty kowala. Ponowne odwzorowywanie wszyst-
kich poprzednich kroków byłoby jednak troszkę cza-
sochłonne, dlatego pójdziemy na skróty i skorzystamy
z przygotowanych elementów, podmieniając wyświe-
tlany model danego miecza. Zaznaczamy jego obiekt
w panelu hierarchii i wciskamy kombinację klawiszy
Ctrl + D (duplikowanie). Wybieramy nowy, zduplikowany
element i odszukujemy w jego panelu inspektora kom-
ponent Mesh Filter. Z listy przy rubryce Mesh wybie-
Ilustracja 8. Przenikanie miecza przez inne obiekty
ramy inny model miecza (najlepiej ten z kolejnej ikony u
kowala). Teraz kierujemy wzrok poniżej do komponentu Problem ten możemy naprawić na kilka sposobów. Cie-
Mesh Renderer i w miejsce oznaczone jako Element 0 kawym rozwiązaniem jest zastosowanie drugiej kamery,
wybieramy pasujący materiał (Ilustracja 7). której zadaniem będzie osobne renderowanie samego
obiektu miecza. Klikając prawym przyciskiem myszy na
już istniejącą kamerę w obiekcie Player, wybieramy po-
zycję Camera. Została ona dodana jako kolejny podobiekt
głównej kamery razem ze wszystkimi mieczami. Teraz
musimy pobawić się warstwami. Warstwy, tak samo jak
tagi, są kolejnym, bardzo wygodnym sposobem grupo-
wania obiektów. W przypadku kamery okazuje się to dla
nas o tyle przydatne, że możemy zadecydować o tym,
które warstwy mają być renderowane, a które nie.
W pierwszej kolejności tworzymy nową warstwę na ta-
kiej samej zasadzie jak tworzyliśmy tagi. W moim przy-
padku nadana została nazwa Item. Następnie zaznacza-
my obiekty naszych broni i oznaczamy je odpowiednią
Ilustracja 7. Podmiana siatki i materiału w zduplikowa-
pozycją z rozwijanej listy Layer. Kolejnym krokiem bę-
nym obiekcie miecza
dzie edycja kamery głównej. W jej komponencie Camera

[ PROGR AMI STAJR . PL ] 27

PROGRAMOWANIE GIER

dla pozycji Culling Mask odznaczamy naszą nowo utwo- Listing 3. Ciało klasy „ItemsController”
rzoną warstwę, co spowoduje ukrycie jej przedstawicieli public class ItemsController : MonoBehaviour
z obrazu kamery. Teraz przechodzimy do drugiej, po- {
mocniczej kamery i postępujemy dokładnie odwrotnie, public List<SwordController> swords;
czyli zaznaczamy naszą warstwę, a odznaczamy wszyst- private InventoryController inventoryController;
kie inne. Pojawia się jednak pytanie, której kamery ob-
void Start()
raz będzie brany pod uwagę jako pierwszy? Do określe-
{
nia ich priorytetu służy tak zwana głębia (ang. depth).
inventoryController = FindObjectOfType
W naszym przypadku pierwsza będzie renderowała
<InventoryController>();
kamera Main, stąd też w jej inspektorze pozostawiamy
}
domyślną wartość głębi (0), a kamera druga (podrzędna),
zgodnie z przyjętą regułą, dostanie wartość Depth rów- private void Update()
ną 1. Ostatnim krokiem będzie zmiana opcji Clear Flags {
na Depth only w kamerze pomocniczej, co spowoduje if (Input.GetKeyDown(KeyCode.Alpha1))
renderowanie z głębi w niewypełnionych obrazem miej- {
scach. Efekt widoczny jest na Ilustracji 9. ActiveSword(0);
}

if (Input.GetKeyDown(KeyCode.Alpha2))
{
ActiveSword(1);
}

if (Input.GetKeyDown(KeyCode.Alpha3))
{
ActiveSword(2);
}
}

Ilustracja 9. Naprawienie przenikania miecza przy uży- public void ActiveSword(int id)
ciu drugiej kamery {
for (int i = 0; i < swords.Count; i++)
Celowo zrzut ekranu został wykonany w tym samym {
miejscu co Ilustracja 8, aby dobrze zaobserwować po- swords[i].gameObject.SetActive
wstałą różnicę. (i == id && swords[i].isPurchased &&
!swords[i].gameObject.activeInHierarchy);
ZAKUP BRONI }
Kiedy wszystkie aspekty wizualne mamy już przygo- }
towane, możemy dezaktywować wszystkie obiekty bro-
public void BuySword(int id)
ni i przejść do napisania najważniejszego skryptu łączą-
{
cego wszystkie powyższe elementy w spójną, logiczną
int woodCost = 0;
całość. Tworzymy nowy plik języka C#, który nazywamy
int ironCost = 0;
na przykład ItemsController. Za jego pomocą zgodnie
z wcześniejszym planem będziemy chcieli móc dokonać switch (id)
zakupu wybranego miecza oraz obsłużyć jego aktywo- {
wanie w ręce gracza. Cały skrypt przedstawiony został case 0:
w Listingu 3. woodCost = 4;

28 [ 4 - 202 1 ]

ironCost = 6;
break;
case 1:
woodCost = 5;
ironCost = 8;
break;
case 2:
woodCost = 8;
ironCost = 10;
break;
} do obiektu miecza o określonym ID na liście, ustalamy
if (inventoryController.Wood >= woodCost
&& inventoryController.Iron >= ironCost)
{ Skoro faktycznie możemy coś już kupić, przydałoby
inventoryController.Wood -= woodCost;
inventoryController.Iron -= ironCost;
inventoryController.UpdateItemsCount();
swords[id].isPurchased = true;
}
}
}
W pierwszej kolejności tworzymy potrzebne odwołania.
W tym przypadku przyda nam się publiczna lista mieczy,
które zdefiniujemy za pośrednictwem panelu inspektora,
a także napisany ostatnim razem InventoryController,
przechowujący informacje o aktualnie posiadanych przez
gracza surowcach. To odwołanie będzie z kolei prywatne,
gdyż wyszukujemy i przypisujemy ów skrypt w ciele do-
myślnej metody Start.
Idąc dalej, potrzebujemy metody, która przypisana
do konkretnego przycisku na interfejsie kuźni, pozwoli
nam kupić wybraną broń. Myślę, że dobrą nazwą będzie
tutaj BuySword. Metoda ta przyjmowała będzie para-
metr typu int, określający identyfikator danego miecza.
Jak pamiętamy z Ilustracji 1, każdy oręż miał swoją ściśle
określoną cenę przedstawioną w surowcach. Musimy
w takim razie zdefiniować sobie pomocnicze zmienne
liczbowe przechowujące te wartości. Dla drewna będzie
to woodCost, natomiast dla żelaza ironCost. Początko-
wo obie otrzymają wartość 0 w celu zainicjalizowania
zmiennych lokalnych. Następnie tworzymy instrukcję
Switch, która w zależności od wybranego miecza (do-
starczonego ID) ustali ceną zgodnie z cennikiem w kuźni.
[ PROGR AMI STAJR . PL
Średniowieczna przygoda – gra RPG w środowisku Unity
Pod spodem warunek: Jeżeli liczba aktualnie posiadane-
go drewna i żelaza jest większa lub równa wymaganej
> Zabierz je z mojego ekwipunku i zaktualizuj wyświetla-
ne na widoku dane.
Na koniec dobrze byłoby wiedzieć, który miecz został
już kupiony, a który jeszcze nie. W tym celu na moment
przejdziemy do skryptu SwordController i dodamy mu
publiczne pole typu bool o nazwie isPurchased. Za jego
pomocą oznaczymy sobie obiekty już kupione. Zapisuje-
my i wracamy do ItemsController. Teraz odwołując się
wartość isPurchased na true, co jasno informuje nas,
że miecz ten został właśnie zakupiony.
się pokazać to na widoku. Do tego posłuży nam metoda
ActiveSword, której działanie również opiera się o do-
starczony w parametrze identyfikator. Przechodzimy
pętlą po wszystkich broniach, a następnie aktywowany
zostanie ten miecz, którego ID zgadza się z tym dostar-
czonym, który ma status zakupionego oraz nie jest aktu-
alnie aktywny w hierarchii.
Ostatnia część warunku zapewni nam niejako dzia-
łanie obustronne, ponieważ gdy miecz będzie aktualnie
trzymany przez postać, zostanie on schowany. Teraz
funkcję tę wywołujemy w domyślnej metodzie Update.
W zależności od klikniętego na klawiaturze przycisku
numerycznego (1, 2 lub 3) funkcja ta otrzyma inny para-
metr z identyfikatorem miecza. Tyle!
Wracamy do Unity i podpinamy całość. Nasz skrypt
ItemsController dobrze byłoby podłączyć do obiektu,
którego status aktywności nie ulega zmianie, gdyż sta-
le potrzebujemy dostępu do jego funkcjonalności. Ja dla
przykładu umieściłem go w obiekcie SmithTrigger. Roz-
wijamy teraz publiczne odwołanie do listy mieczy, poda-
jemy ich ilość, a następnie przeciągamy każdy z nich do
osobnej rubryki jak na Ilustracji 10.
Ilustracja 10. Zdefiniowanie listy mieczy w komponencie
] 29
PROGRAMOWANIE GIER
Na koniec, kiedy nasz skrypt jest już gotowy, cofnie-
my się do początku, gdzie wspominaliśmy o obsłudze
zdarzeń klikniętych przycisków. Musimy teraz odszukać
na Canvasie kuźni wszystkie nasze przyciski. W sekcji
OnClick jako odwołanie przeciągamy obiekt ze skryp-
tem ItemsController, następnie rozwijamy listę z pra-
wej strony, wybieramy ItemsController > BuySword. Po
wyborze metoda ta odsłoniła poniżej dodatkową rubry-
kę na wpisanie jej przyjmowanego parametru z identyfi-
katorem broni. W programowaniu indeksujemy od zera,
stąd też przycisk pierwszy zyska wartość 0, drugi 1,
a trzeci 2. Jeżeli wszystko udało się pomyślnie podpiąć,
możesz nazbierać trochę surowców i przejść do testów.
Kowal z pewnością nie może doczekać się pierwszego
klienta!
PODSUMOWANIE
Na zakończenie pozostaje mi podziękować za tę
wspólną przygodę, która, mam nadzieję, potwierdziła
słowa, że w tworzeniu gier ogranicza nas jedynie nasza
wyobraźnia. Temat, którego podjąłem się w serii swo-
ich artykułów, jest na tyle wszechstronny, że można
by rozbudowywać go jeszcze przez kolejne kilkanaście
Zapamiętaj
օ Przy pracy z wieloma kamerami ich priorytet ren-
derowania określa tak zwana głębia (Depth).
օ Zdarzenie kliknięcia przycisku może zostać ob-
służone poprzez podłączenie obiektu ze skryptem
i wybranie konkretnej jego metody.
օ Animacje możemy tworzyć, wpisując konkretne
wartości lub „nagrywając” je.
օ Przytrzymując klawisz „Ctrl” lub „Shift”, jesteśmy
w stanie zaznaczyć w panelu hierarchii więcej
obiektów naraz. Przetestuj oba, by zobaczyć
różnicę.
30 [ 4 - 202 1
numerów, lecz w tym miejscu zostawiam was, młodzi
wojownicy i wojowniczki. Pamiętajcie, że średniowiecz-
na przygoda nadal może trwać dzięki wam. Dlatego też
w materiałach na stronie internetowej PJr dorzucam
ciekawą niespodziankę. Znajdziecie tam przygotowany
przeze mnie prefab mrocznego rycerza, będącego na-
jeźdźcą naszej wioski. Rozstawiając jego obiekty w świe-
cie gry, wioska nie będzie już taka spokojna. Dodałem
też skrypt AttackController, który pozwoli nam podjąć
walkę i pokonać rycerza przy pomocy wytworzonego
miecza. Uwaga! Konieczne jest podłączenie go w inspek-
torze naszej postaci… Inaczej nie zadziała. Powodzenia!
Tomasz Błaszczyk
Autor książki „Tworzenie gier dla początkujących”,
na co dzień programista gier w katowickim studiu.
Po godzinach korepetytor, pasjonat elektronicznej
rozrywki oraz fan dobrej książki. Ceni sobie kre-
atywność, solidnie wykonaną pracę i pasję.
HTTPS://TOMASZBLASZCZYK.GITHUB.IO/PORTFOLIO/
TOMASZBLASZCZYK1998@GMAIL.COM
Ćwicz w domu
օ Zapoznaj się z treścią dołączonych dodatkowo
skryptów i spróbuj stworzyć mechanizm, który po
uderzeniu nas przez przeciwnika wyświetli pół-
przezroczyste czerwone płótno na ekranie, które
będzie znikać w momencie kliknięcia (zjedzenia)
owocu w panelu ekwipunku.
]
PROGRAMOWANIE GIER

Adam Jurkiewicz, Katarzyna Wasilkowska

Gra przygodowa „Enigma

– Polacy, którzy uratowali świat”
Tworzymy pierwsze okno z tłem
W poprzednim artykule nauczyliście się, w jaki sposób używać programowania obiek-
towego oraz jak korzystać z różnych dodatków w Pythonie. Dzisiaj zaczniecie zabawę
z obrazem, czyli w oknie na naszej platformie (https://kodujwpythonie.pl/pl/enigma) bę-
dziecie wyświetlać różne tła. W kolejnych rozdziałach na tle pojawi się bohater, a także
dodatkowe elementy.

12+

Dowiesz się Potrzebna wiedza

օ Jak tworzymy funkcje. օ Definiowanie funkcji w języku Python.
օ Jak możemy wyświetlać pliki graficzne w języku օ Typy zmiennych i obiektów w języku Python.
Python.
օ Znajomość poprzednich artykułów tej serii.
օ Jak wywoływać metody wbudowane w języku
Python.

FORMATY GRAFICZNE PLIKÓW Zdefiniujcie funkcję, która będzie miała następujące

Na pewno wiecie, że istnieją różne formaty graficzne,
jak na przykład JPG, PNG, GIF, TGA, WMF, BMP.
W grze będziecie wykorzystywać dwa rodzaje plików:
» JPG – dla wyświetlania tła naszej gry.
» PNG – dla wyświetlania różnych elementów, jak na
przykład postaci czy teleportów (które będą poma-
gały bohaterowi przenosić się w przestrzeni).
Tło w plikach PNG może być przezroczyste i tak jest
właśnie u nas. Wyświetlone obiekty nie będą zatem
prostokątami.
W poprzedniej części artykułu nauczyliście się stero-
wać rozmiarem okna i jego tytułem, czas więc wykorzy-
stać tę wiedzę.
właściwości:
» jako parametry będzie przyjmować napis, który po-
jawi się w tytule, oraz nazwę pliku graficznego, który
będziemy chcieli wyświetlić,
» sprawdzi, czy podaliśmy jakiekolwiek dane, aby móc
działać,
» nie będzie weryfikować, czy plik graficzny istnieje
(założymy, że pliki istnieją, ale jeśli ktoś jest chętny,
zawsze może spróbować napisać odpowiedni kod
weryfikujący istnienie pliku),
» wyświetli zawartość obrazka z pliku na ekranie.
Rzućmy okiem na kod funkcji i zastanówmy się, jak on
działa:

32 [ 4 - 202 1 ]
 Gra przygodowa „Enigma – Polacy, którzy uratowali świat”

Ilustracja 1. Obraz ekranu startowego gry (autor ilustracji: Ignacy Trojanowicz)

# definiujemy funkcję, która wyświetli obrazek

# tła podany jako parametr
def game_window(title, background):
if not title or not background:
return None
file = (
"./sandbox/images/background/"
+ background
) nic się nie wykona.
# ustalimy tytuł okna, aby móc sprawdzać,
# czy odpowiednie pliki są wyświetlane
pygame.display.set_caption(title + " - " +
str(window_size) + " | " + background)
# wczytujemy plik tła
background_picture = pygame.image.load(file)
# wyświetlamy plik tła
window.blit(background_picture, (0, 0))
# aktualizujemy wyświetlane okno
pygame.display.update()
Zauważcie, że pierwszym elementem tej funkcji jest
instrukcja warunkowa, która bada, czy podano jakąkol-
wiek wartość dla obiektu title lub background. W języ-
ku Python, jeśli wartość obiektu wynosi 0, None jest ko-
lekcją bez żadnego elementu lub jest pustym łańcuchem
znaków "", wyrażenie not obiekt ma wartość True. Za-
tem: jeśli nie będzie żadnej wartości dla title lub back-
ground, wówczas funkcja kończy swoje działanie, czyli
A co będzie, jeśli nie podamy w ogóle żadnych parame-
trów? Wtedy nasze środowisko zgłosi błąd. Na przykład:
TypeError: game_window() takes exactly 2 arguments
(0 given) on line 36
Właściwie nie ma potrzeby nic tu wyjaśniać – wystarczy
przeczytać komunikat. Oczywiście musimy sobie radzić
z językiem angielskim, ale jak powiedzieliśmy już sobie
wcześniej – jeśli chcemy programować, musimy go znać.

[ PROGR AMI STAJR . PL ] 33

PROGRAMOWANIE GIER
Żeby nasz program działał bez błędów, w kodzie na
naszej platformie www.kodujwpythonie.pl wstawmy znak
komentarza na początku linii 36 (gdzie znajduje się kod
„game_window()”) w skrypcie z Rozdziału 04.
Dla chętnych – możemy też zmienić definicję funkcji,
aby nasze parametry przyjmowały jakieś domyślne war-
tości. W takim przypadku nawet wywołanie bez argu-
mentów da poprawny efekt. Jeśli chcemy tak zdefinio-
wać funkcję, używamy składni:
def nazwa_funkcji(parametr_1 = "wartość domyślna",
parametr_2 = 10):
# ekranie. W ten sposób będziemy mogli zaobserwować
# blok kodu funkcji
Ważna jest metoda pygame.image.load(file). Tworzy
ona specyficzny obiekt, który zawiera obraz z wczyta-
nego pliku. Używamy go potem w poleceniu window.
blit(background_picture, (0, 0)).
Skąd jednak wiemy, że możemy skorzystać z win-
dow_size oraz window dla metody blit()? Musimy
opowiedzieć tu o koncepcji „przestrzeni nazw” w języku
Python. Możemy ją (przynajmniej na wczesnym etapie
nauki programowania w języku Python) połączyć z klasą,
metodą lub funkcją. To nie są wszystkie możliwości, ale
na początek będą w sam raz. W naszym przypadku mu-
simy zapamiętać pewną bardzo ważną zasadę.
Otóż jeśli utworzymy obiekt w globalnej przestrzeni
nazw programu (czyli umieścimy kod tworzący go poza
funkcjami, czy też bez żadnych wcięć), możemy odwołać
się do niego z każdej funkcji tego programu, jeśli funkcję
wywołamy po inicjalizacji takiego obiektu.
Dzięki takiej możliwości wewnątrz naszej funkcji
mamy dostęp do obiektu window czy też do window_size.
Tu krótka zapowiedź tematu, któremu przyjrzymy
się dokładniej w następnych artykułach, a mianowicie:
obiekty rodzaju mutable (z ang. zmienne) oraz obiek-
ty rodzaju immutable (z ang. niezmienne). W tej chwili
przyjmijcie tylko fakt, że obiekt window (jako obiekt zde-
finiowanej klasy) jest rodzaju mutable, a obiekt window_
size (jako typ tuple) jest rodzaju immutable. O tych
rodzajach obiektów opowiemy w następnym numerze.
Na końcu naszej funkcji wykonujemy bardzo ważne
polecenie: pygame.display.update().
34 [ 4 - 202 1
Aktualizuje ono ekran, czyli powoduje „wyświetlenie
fizyczne na ekranie” wszystkich elementów, które usta-
liliśmy wcześniej. Musimy zwracać baczną uwagę na to,
gdzie i ile razy wykonujemy tę funkcję w naszym pro-
gramie, ponieważ bardzo absorbuje pracę przeglądarki.
Jeśli będziemy wywoływać ją zbyt często, możemy spra-
wić, że nasza przeglądarka w komputerze się „zawiesi”,
a wtedy będziemy musieli ją zrestartować.
Wróćmy do głównego programu. Wywołajmy naszą
zdefiniowaną funkcję game_window() z różnymi warto-
ściami parametrów, a następnie każdorazowo funkcję
sleep(), aby przez kilka sekund zatrzymać obraz na
zmiany w obrazie.
Sprawdźmy, jak może wyglądać nasz przykładowy kod:
# tworzymy pierwsze okno z tłem
#
import pygame
from time import sleep
# definiujemy funkcję, która wyświetli obraz tła
# podany jako parametr
def game_window(title, background):
if not title or not background:
return none
file = (
"./sandbox/images/background/"
+ background
)
# ustalimy tytuł okna, aby móc sprawdzać,
# czy odpowiednie pliki są wyświetlane
pygame.display.set_caption(
title
+ " - "
+ str(window_size)
+ " | "
+ background
)
# wczytujemy plik tła
background_picture = pygame.image.load(file)
# wyświetlamy plik tła
window.blit(background_picture, (0, 0))
]
 Gra przygodowa „Enigma – Polacy, którzy uratowali świat”

Ilustracja 2. Obraz ekranu gry (autor ilustracji: Ignacy Trojanowicz)

# aktualizujemy wyświetlane window title2 = "Aktualna lokalizacja : "

pygame.display.update() window_title = title1 + title2

pygame.init() # wywołujemy funkcję z naszymi wartościami

WIDTH = 870 # parametrów
HEIGHT = 435 win_title = window_title + "Lwów"
# zmienna window_size jest typu `tuple` game_window(
window_size = (WIDTH, HEIGHT) win_title, "rooms-poland-lwow-sknilow-02.jpg"
# tworzymy obiekt okna tylko 1 raz na początku )
window = pygame.display.set_mode(window_size) sleep(3)

# ustalamy tytuł okna # koniec aplikacji, zamykamy środowisko

title1 = ( pygame.quit()
"Polacy w Biurze Szyfrów - tajemnica Enigmy"
+ "\n"
)

[ PROGR AMI STAJR . PL ] 35

PROGRAMOWANIE GIER
Eksperymentujmy – sprawdźmy różne nazwy plików.
Do dyspozycji mamy między innymi:
» rooms-england-bletchley-park-01.jpg
» rooms-england-bletchley-park-02.jpg
» rooms-england-bletchley-park-03.jpg
» rooms-france-paris-01.jpg
» rooms-france-paris-02.jpg
» rooms-france-paris-03.jpg
» rooms-german-uboot-01.jpg
» rooms-german-uboot-02.jpg
» rooms-poland-lwow-sknilow-01.jpg
» rooms-poland-lwow-sknilow-02.jpg
» rooms-poland-warsaw-cipher-bureau-01.jpg
» rooms-poland-warsaw-cipher-bureau-02.jpg
» rooms-poland-warsaw-cipher-bureau-03.jpg
» rooms-poland-warsaw-cipher-bureau-04.jpg
Zapamiętaj
օ Pliki graficzne mają różne formaty.
օ W języku Python występują przestrzenie nazw.
օ Jeśli utworzymy obiekt w głównej przestrzeni
nazw, mamy do niego dostęp z każdej przestrzeni,
na przykład z wnętrza funkcji.
օ W języku Python pewne obiekty są rodzaju „muta-
ble”, a pewne „immutable”.
օ Parametry funkcji mogą w definicji przyjmować
wartości domyślne.
օ Metoda „pygame.display.update()” aktualizuje
fizyczny obraz gry w przeglądarce.
36 [ 4 - 202 1
Adam Jurkiewicz
Haker edukacji, członek nieformalnej grupy „Su-
perbelfrzyRP”. Absolwent kursów Massachusetts
Institute of Technology oraz IBM Professional Data
Science z języka programowania Python. Trener
języka programowania Python, robotyki. Programi-
sta, administrator systemów UNIX/Linux, twórca
remiksu edukacyjnego FREE_Desktop.
ADAM@ABIXEDUKACJA.EU
K a t a r z y n a W a s i l k o w s ka
Autorka licznych powieści i opowiadań dla dzieci
i młodzieży, odpowiedzialna za opiekę literacką pro-
jektów Fundacji Rozwoju Edukacji Cyfrowej, między
innymi książki „Koduj w Pythonie – tworzymy grę
przygodową”.
KATARZYNA.WASILKOWSKA@GMAIL.COM
Ćwicz w domu
օ Spróbuj tak zmodyfikować kod, aby wyświetlić po
kolei wszystkie pliki graficzne na ekranie. Jeśli
ktoś chce, może spróbować zrobić to w maksy-
malnie 10 linijkach kodu (poza definicją funkcji
„game_window()”).
]
PROGRAMOWANIE GIER

Przemysław Folholc

Budowniczy Robloxa: sklep z przepustkami

Roblox jest jedną z najpopularniejszych platform do tworzenia gier komputerowych. Cykl
„Budowniczy Robloxa” to seria artykułów, dzięki którym krok po kroku wspólnie zapro-
gramujemy projekty gier, poznamy dostępne funkcje platformy i podstawy języka Lua.
Przed nami projekt „Gamepass Shop”. Do dzieła!

10+

Dowiesz się Potrzebna wiedza

օ Jak stworzyć sklep w Robloxie.
օ Jak dodać narzędzia do projektu.
օ Jak stworzyć przepustkę.
օ Odkryjesz jedną z tajemnic „Budowniczego
Robloxa”.
օ Podstawowa wiedza o Robloxie.
օ Podstawowa umiejętność pisania kodów w Lua.
օ Umiejętność poruszania się po środowisku „Roblox
Studio”.

P rzepustki, inaczej nazywane „Passes”, zapewniają gra-

czom specjalne przywileje i umiejętności w grach, na
przykład super skok czy zwiększona szybkość porusza-
nia. Przepustki te można tworzyć bezpłatnie i sprzeda-
wać za określoną ilość robuxów w danej grze. Jest to je-
den ze sposobów na zarobienie tej cennej waluty.
TWORZENIE NOWEGO PROJEKTU
„GAMEPASS SHOP”
Uruchamiamy Roblox Studio i zaczynamy od wybra-
nia szablonu Baseplate.
Kiedy już projekt zostanie stworzony, pierwszą czyn-
nością, którą należy wykonać, jest publikacja projektu.

Ilustracja 1. Główne menu z szablonami do tworzenia gier w „Roblox Studio”

38 [ 4 - 202 1 ]
 Budowniczy Robloxa: sklep z przepustkami

Klikamy przycisk FILE, który znajduje się w lewym Następnie przechodzimy do kategorii Security i włą-
górnym rogu ekranu, kolejno wybieramy z listy Publish czamy opcję Allow Third Party Sales. Pozwoli nam to
to Roblox. przeprowadzić test zakupu na uruchomionym lokalnie
serwerze. Po sprawdzeniu możesz wyłączyć tę opcję.

Ilustracja 4. Ustawienia gry – kategoria bezpieczeń-

stwo
Ilustracja 2. Publikacja projektu w „Roblox Studio”

Nazwa projektu jest dowolna, można go nazwać na przy- Zaczynamy budowanie sklepu od dodania ScreenGui do
kład Gamepass Shop. StarterGui, które znajduje się w Explorerze.
Po uruchomieniu projektu przechodzimy do usta-
wień gry. Przycisk Game Settings znajdziesz w kategorii
HOME. Do tych ustawień można również dostać się za
pomocą przycisku FILE. Ilustracja 5. Dodany „ScreenGui”

Następnie zmieniamy nazwę ScreenGui na Shop i doda-

jemy do niego TextButton – Ilustracja 6.
Ilustracja 3. Przycisk ustawień gry

Ilustracja 6. Dodanie i modyfikacja właściwości elementu „TextButton”

[ PROGR AMI STAJR . PL ] 39

PROGRAMOWANIE GIER

Kolejno modyfikujemy właściwości w TextButton: TWORZENIE NAPISU „GAMEPASS SHOP”

» BackgroundColor3: [42, 120, 214] ORAZ PRZYCISKU DO ZAMYKANIA SKLEPU
» BorderColor3: [42, 120, 214] Aby to osiągnąć, należy dodać TextButton oraz Text­
» BorderSizePixel: 5 Label do Frame, następnie zmieniamy nazwę TextBut­
» Position: {0.03,0},{0.35,0} ton na ExitButton.
» Size: {0.1,0},{0.1,0}
» SizeConstraint: RelativeXX
» Font: FredokaOne
» Text: GAMEPASS SHOP
» TextColor3: [255, 255, 255]
» TextScaled: Zaznaczony
Ilustracja 8. Dodany „TextButton” oraz „TextLabel” do
„Frame”
Kolejnym krokiem jest dodanie Frame do Shop oraz do-
datkowo zmieniamy nazwę TextButton na OpenButton.
Następnie modyfikujemy właściwości we Frame:
» AnchorPoint: 0.5, 0.5
» BackgroundColor3: [180, 180, 180]
» BorderColor3: [42, 120, 214]
» BorderMode: Inset Ilustracja 9. Element „TextButton” po zmianie nazwy na
„ExitButton”
» BorderSizePixel: 4
» Position: {0.5, 0},{0.5, 0} Następnie zmieniamy właściwości:
» Size: {0.3, 0},{0.2, 0}
» SizeConstraint: RelativeXX EXITBUTTON: TEXTLABEL:
› BackgroundColor3: [255, › BackgroundColor3: [42,
0, 0] 120, 214]
› BorderColor3: [42, 120, 214] › BorderColor3: [42, 120, 214]
› BorderMode: Inset › BorderMode: Inset
› BorderSizePixel: 4 › BorderSizePixel: 4
› Position: {0.8, 0},{0, 0} › Position: {0, 0},{0, 0}
› Size: {0.2, 0},{0.2, 0} › Size: {0.8, 0},{0.2, 0}
› SizeConstraint: RelativeXX › SizeConstraint: RelativeXX
› Font: FredokaOne › Font: FredokaOne
› Text: X › Text: GAMEPASS SHOP
› TextColor3: [255, 255, 255] › TextColor3: [255, 255, 255]
› TextScaled: Zaznaczony › TextScaled: Zaznaczony

Ilustracja 7. Dodanie i modyfikacja „Frame”

Ciekawostka
Zmiana punktu zakotwiczenia „AnchorPoint” pozwala na
łatwiejsze wycentrowanie elementu GUI.

Ilustracja 10. Dodany tekst „GAMEPASS SHOP” oraz

zamykanie sklepu

40 [ 4 - 202 1 ]
 Budowniczy Robloxa: sklep z przepustkami

W sklepie nie ma jeszcze żadnych przycisków do Zaznaczenie jej pozwoli na rozciągnięcie elementu gra-
przepustek. Aby to zmienić, dodaj dwa ImageButton do ficznego na pełny ekran.
Frame.

Wskazówka!

Budujesz interfejs graficzny, ale przeszkadza ci on w

pracy, gdy chcesz coś dodać do swojej gry? Wystarczy, że
klikniesz na przycisk z oczkiem znajdujący się w prawym
górnym rogu nad ekranem sceny.

Ilustracja 11. Dodanie dwóch „ImageButton” do „Frame”

Ilustracja 14. Ilustracja 15.

Kliknięcie na
Widoczny inter- Niewidoczny in-
przycisk
fejs graficzny terfejs graficzny

Sklep już jakoś wygląda, ale nie jest jeszcze funkcjonalny.

Ilustracja 12. Zmiana nazwy dwóch „ImageButton”
Kolejno zmieniamy właściwości:
GRAVITYCOILBUTTON:
› BackgroundTranspar-
ency: 1
› Position: {0.05, 0},{0.35, 0}
› Size: {0.4, 0},{0.4, 0}
› SizeConstraint: RelativeXX
› Image: rbxassetid://6208999878
SPEEDCOILBUTTON:
› BackgroundTranspar-
ency: 1
› Position: {0.55, 0},{0.35, 0}
› Size: {0.4, 0},{0.4, 0}
› SizeConstraint: RelativeXX
› Image: rbxassetid://6350449886
Możesz się o tym przekonać, wchodząc do gry.
Zaczniemy od stworzenia programów do otwierania
i zamykania sklepu.
Zanim do tego przystąpimy, należy wyłączyć widocz-
ność sklepu. Aby to zrobić, wystarczy zmienić w obiek-
cie Frame właściwość Visible na odznaczoną.
Następnie dodajemy LocalScript do OpenButton oraz
ExitButton

W momencie kiedy już wprowadzisz wszystkie zmiany,

sklep powinien wyglądać jak na Ilustracji 13.

Ilustracja 16. Umiejscowienie dwóch programów typu

„LocalScript”

Ilustracja 13. Skończona warstwa wizualna sklepu

TAJEMNICA BUDOWNICZEGO ROBLOXA
Chcesz, aby twój sklep był na pełnym ekranie, ale
ograniczają cię systemowe guziki? Jest na to rada!
W ScreenGui znajduje się właściwość IgnoreGuiInset.
Warto wiedzieć
Chcesz mieć inny obrazek do przepustek? Możesz dodać
swój własny obrazek do „Images” w „Asset Manager” lub
znaleźć go w „Toolbox” w kategorii „Images”.

[ PROGR AMI STAJR . PL ] 41

PROGRAMOWANIE GIER

Program do otwierania sklepu za pomocą przycisku:

Listing 1. Kod programu „LocalScript”

w „OpenButton” Ilustracja 17. Przycisk „Toolbox”

function Open()
-- zmień we Frame Dodanie danego elementu z Toolboxa polega na kliknię-
-- właściwość Visible na true ciu na niego lewym przyciskiem myszy.
script.Parent.Parent.Frame.Visible = true
end

-- kiedy lewy przycisk kliknięty,

-- połącz się z funkcją Open
script.Parent.MouseButton1Click:Connect(Open)

Program do zamykania sklepu za pomocą przycisku:

Listing 2. Kod programu „LocalScript” w „ExitButton”

function Exit()
-- zmień we Frame
-- właściwość Visible na false Ilustracja 18. Dodanie „GravityCoil”

script.Parent.Parent.Visible = false
end

-- kiedy lewy przycisk kliknięty,

-- połącz się z funkcją Exit
script.Parent.MouseButton1Click:Connect(Exit)

-- odwołanie do serwisu UserInputService

local uIS = game:GetService("UserInputService")
-- kiedy jest żądanie skoku,
-- połącz się z funkcją Exit
uIS.JumpRequest:Connect(Exit)
Ilustracja 19. Dodanie „SpeedCoil”

Po napisaniu kodu można uruchomić grę i sprawdzić,
w jaki sposób działa otwieranie i zamykanie sklepu za
pomocą przycisków. Jak możesz zauważyć, w powyż-
szym kodzie znajduje się również opcja zamykania skle-
pu podczas skoku. Może się to przydać, kiedy gra zosta-
nie uruchomiona na telefonie.
Kiedy wybierzemy narzędzie, zostaniemy zapytani o to,
czy umieścić narzędzie w starter pack. Zgadzamy się,
ponieważ należy je przetestować przed dodaniem go do
przepustki. Nie chcemy przecież, żeby ktoś zapłacił ro-
buxami za niedziałające dodatkowe narzędzie.

DODANIE NARZĘDZI GRAVITYCOIL ORAZ

SPEEDCOIL
GravityCoil to sprężynka, która pozwala na wyższe ska-
kanie. SpeedCoil pozwala na przyspieszenie poruszania.
Ilustracja 20. Dodanie narzędzie do „starter pack”
Na początku należy dodać dodatkowe narzędzia do
gry. W tym celu przechodzimy do Toolbox, a następnie Uruchamiamy grę i wybieramy dane narzędzie poprzez
wyszukujemy i dodajemy SpeedCoil oraz GravityCoil. wciśnięcie klawisza 1 lub 2 na klawiaturze. Można je

42 [ 4 - 202 1 ]
 Budowniczy Robloxa: sklep z przepustkami

również wybrać za pomocą kliknięcia myszką w dany

Ważne!
obrazek.
Sprawdź, czy nazwy narzędzi są takie same jak na ilu-
stracjach! Wielkość liter również ma znaczenie. Pamię-
taj także, aby nie stawiać spacji pomiędzy wyrazami
– w przeciwnym razie kod programu nie zadziała.

TWORZENIE PRZEPUSTEK
Przechodzimy do strony Robloxa pod adres WWW:
https://www.roblox.com/home i klikamy Create lub
wykorzystujemy bezpośredni link: https://www.roblox.
com/develop. Przechodzimy do My Creations.
Ilustracja 21. Test „GravityCoil” Przy aktualnie tworzonym projekcie klikamy zębatkę,
a następnie wybieramy z listy Create Pass.
Jeżeli jakieś narzędzie nie działa, spróbuj poszukać inne-
go. Często zdarza się, że obiekty z Toolboxa nie działają
tak jak powinny.

Ilustracja 25. Tworzenie przepustki dla danego projektu

Ilustracja 22. Test „SpeedCoil” Wskazówka!

Jeżeli wyświetliła się inna strona, pamiętaj, żeby zalogo-

Po udanych testach przenosimy GravityCoil oraz Spe­ wać się oraz kliknąć „Manage my experiences”.
edCoil do ReplicatedStorage. Jest to potrzebne, ponie-
waż będziemy dawać te narzędzia osobom, które wyku-
pią odpowiednią przepustkę.

Ilustracja 23. Przenosimy do Ilustracja 24.

Narzędzia „Replicated­ Narzędzia prze-
w „StarterPack” Storage” niesione do „Re-
plicatedStorage”

Ilustracja 26. Inna strona

[ PROGR AMI STAJR . PL ] 43

PROGRAMOWANIE GIER

Kiedy już jesteś na tym etapie, należy wybrać obrazek

z komputera (zalecany jest rozmiar 512x512 pikseli) oraz
format .jpg , .gif , .png , .tga lub .bmp. Następnie trzeba
nazwać przepustkę oraz stworzyć krótki opis. Na końcu
klikamy Preview.

Wskazówka!

Ponieważ grafika zostanie przycięta do postaci okrągłego

obrazu, nie należy umieszczać ważnych szczegółów na jej
obrzeżach.

Ilustracja 29. Pomyślne utworzenie przepustki oraz

przejście do konfiguracji

W kategorii General można zmienić nazwę przepustki,

obrazek oraz opis. Przechodzimy do kategorii Sales.

Ilustracja 27. Dodanie grafiki, nazwy oraz opisu prze-

pustki

Przed udostępnieniem przepustki sprawdzamy, czy wszyst-

ko wpisaliśmy poprawnie. Jeżeli wszystko jest w porząd-
ku, klikamy Verify Upload.

Ilustracja 30. Miejsce konfiguracyjne przepustki

Aby inni gracze mogli kupić naszą przepustkę, musimy ją

udostępnić do sprzedaży. W tym celu klikamy na przełącz-
nik, aby wyświetliła się możliwość wpisania ceny. W tym
przypadku została ustawiona na 10 robuxów. Na sam ko-
niec klikamy Save i powinna pojawić się informacja Suc­
cessfully updated.

Ilustracja 28. Weryfikacja przepustki

Po udanym wgraniu przepustki na serwer Robloxa po-

winna ukazać się informacja „Pass successfully created!”.
Następnie klikamy w zębatkę i przechodzimy do konfi- Ilustracja 31. Miejsce konfiguracyjne przepustki
guracji poprzez kliknięcie przycisku Configure.

44 [ 4 - 202 1 ]
 Budowniczy Robloxa: sklep z przepustkami

Listing 3. Kod programu do „AddTools”

Ciekawostka -- odwołanie do MarketplaceService

local mS = game:GetService("MarketplaceService")
Jak możesz zauważyć, 70% zarobionej kwoty przeznaczona
jest dla twórcy, pozostała część idzie do właścicieli Robloxa. -- odwołanie do ReplicatedStorage
local rS = game.ReplicatedStorage

-- id przepustki Gravity Coil

Ważne!
Do tworzonych programów będzie potrzebne id danej
przepustki. Znajdziesz go w adresie strony (zaznaczone
kolorem żółtym): https://www.roblox.com/game-pass/
configure?id=16547057#!/sales. Dostęp do tego miejsca
ma tylko twórca danej przepustki.
local idGC = 16547057
-- id przepustki Speed Coil
local idSC = 16548602
-- odwołanie do zdarzenia AddGravityCoil
addGC = rS:WaitForChild("AddGravityCoil")
-- odwołanie do zdarzenia AddSpeedCoil
addSC = rS:WaitForChild("AddSpeedCoil")

-- odwołanie do narzędzia GravityCoil

Tą samą czynność wykonujemy dla drugiej przepustki. gC = rS:WaitForChild("GravityCoil")
-- odwołanie do narzędzia SpeedCoil
DODANIE ZDARZEŃ sC = rS:WaitForChild("SpeedCoil")
Aby gracz mógł dostać narzędzie za odpowiednią
-- funkcja dodawania narzędzia
przepustkę, potrzebujemy dodać do Replicated Storage
function AddToolGravityCoil(player)
dwa RemoteEvent. Następnie zmieniamy im nazwę na
-- sklonuj narzędzie
AddGravityCoil oraz AddSpeedCoil.
local cloneGC = gC:Clone()
-- przypisz narzędzie do plecaka gracza
cloneGC.Parent = player.Backpack
end

function AddToolSpeedCoil(player)
local cloneSC = sC:Clone()
Ilustracja 32. Zmieniamy nazwę Ilustracja 33. cloneSC.Parent = player.Backpack
Dodanie dwóch na „AddGravity- Elementy po end
„RemoteEvent” Coil” oraz „Add- zmianie nazwy
do „Replicated SpeedCoil” -- kiedy gracz zostanie dodany
Storage”
game.Players.PlayerAdded:Connect(function(player)
Kolejnym krokiem jest utworzenie odpowiedniego pro- -- oraz dodany Character
gramu serwerowego. Tworzymy więc nowy skrypt do player.CharacterAdded:Connect(function()
ServerScriptService i nazywamy go AddTools.
-- ustaw zmienne logiczne na false
local hasPassGC = false
local hasPassSC = false

-- sprawdzenie, czy dany gracz

Ilustracja 34. Zmieniamy nazwę Ilustracja 35.
Skrypt dodany skryptu na Skrypt po zmia- -- posiada daną przepustkę
do „Server- „AddTools” nie nazwy hasPassGC = mS:UserOwnsGamePassAsync(
ScriptService”
player.UserId, idGC)
hasPassSC = mS:UserOwnsGamePassAsync(

[ PROGR AMI STAJR . PL ] 45

PROGRAMOWANIE GIER
player.UserId, idSC)
-- jeżeli gracz posiada daną przepustkę
if hasPassGC == true then
-- użyj funkcji dodawania narzędzia
AddToolGravityCoil(player)
end
if hasPassSC == true then
AddToolSpeedCoil(player)
end
end)
end)
-- jeżeli zostało wywołane zdarzenie na serwerze
addGC.OnServerEvent:Connect(function(player)
-- użyj funkcji dodawania narzędzia
AddToolGravityCoil(player)
end)
addSC.OnServerEvent:Connect(function(player)
AddToolSpeedCoil(player)
end)
-- jeżeli zakup przepustki został zakończony
mS.PromptGamePassPurchaseFinished:Connect(
function(player,id,purchased)
-- z powodzeniem i o danym id
if purchased and id == idGC then
-- użyj funkcji dodawania narzędzia
AddToolGravityCoil(player)
elseif purchased and id == idSC then
AddToolSpeedCoil(player)
end
end)
Kolejnym krokiem jest dodanie LocalScript do Gravity­
CoilButton oraz SpeedCoilButton.
Ilustracja 36. Dodanie dwóch „LocalScript”
46
Listing 4. Kod programu do „LocalScript”
w „GravityCoilButton”
-- odwołanie do przycisku
button = script.Parent
-- odwołanie do MarketplaceService
mS = game:GetService("MarketplaceService")
-- id przepustki GravityCoil
idGravityCoil = 16547057
-- odwołanie do lokalnego gracza
player = game.Players.LocalPlayer
-- kiedy przycisk zostanie kliknięty
button.MouseButton1Click:Connect(function()
-- zmień przezroczystość na 0.5
button.ImageTransparency = 0.5
-- czekaj jedną dziesiątą sekundy
wait(0.1)
-- zmień przezroczystość na 0
button.ImageTransparency = 0
-- wywołaj zakup przepustki
mS:PromptGamePassPurchase(player, idGravityCoil)
end)
Listing 5. Kod programu do „LocalScript”
w „SpeedCoilButton”
button = script.Parent
mS = game:GetService("MarketplaceService")
-- id przepustki SpeedCoil
idSpeedCoil = 16548602
player = game.Players.LocalPlayer
button.MouseButton1Click:Connect(function()
button.ImageTransparency = 0.5
wait(0.1)
button.ImageTransparency = 0
mS:PromptGamePassPurchase(player, idSpeedCoil)
end)
CZAS NA TESTY!
Odpalamy grę, naciskając przycisk Play. W ten spo-
sób możemy sprawdzić, czy gracz, który zakupił prze-
pustkę, dostanie oczekiwany przedmiot. Nie musimy
kupować przepustek do tworzonego projektu, ponieważ
właściciel posiada wszystkie przepustki tej gry.
[ 4 - 202 1 ]
 Budowniczy Robloxa: sklep z przepustkami

Ilustracja 37. Pierwsze testy

Dlatego podczas próby zakupu zostanie wyświetlony
komunikat, że już posiadasz ten przedmiot.
Ilustracja 40. Testowy zakup na lokalnym serwerze
Po kliknięciu przycisku z ikoną robuxa powinna ukazać
się informacja, że zakup GravityCoil zakończył się suk-
cesem. Następnie klikamy OK.

Ilustracja 38. Komunikat o posiadaniu danego przedmiotu

Kolejnym sposobem na sprawdzenie przepustek jest test
na serwerze. Polega on na utworzeniu lokalnego ser-
wera i sprawdzeniu zakupu. Przycisk Start znajdziemy
w karcie TEST.
Ilustracja 41. Udany zakup na lokalnym serwerze
Na koniec powinniśmy otrzymać nasz zakup. Można te-
raz przetestować, czy możemy wysoko skakać.

Ilustracja 39. Miejsce uruchomienia lokalnego serwera

Po uruchomieniu lokalnego serwera można przetesto-

wać zakup na jednym z wybranych graczy – w tym przy-
padku jest ich dwóch. Podczas zakupu pojawi się rów-
nież informacja, że jest to testowy zakup i twoje konto Ilustracja 42. Przetestowanie narzędzia na lokalnym
nie zostanie obciążone. serwerze

[ PROGR AMI STAJR . PL ] 47

PROGRAMOWANIE GIER

Ostatni test jest już za prawdziwe robuxy, więc w tym

przypadku konto zostaje już obciążone. Test został wy-
konany za pomocą innego konta, aby sprawdzić działa-
nie sklepu z przepustkami.

Ilustracja 43. Zakup przepustki za prawdziwe robuxy

Ilustracja 46. Udany zakup!

Dotarliśmy już do końca artykułu. Do zobaczenia w ko-

lejnych projektach z cyklu „Budowniczy Robloxa”, w któ-
rych poznacie jego kolejne tajemnice i dowiecie się, jak
Ilustracja 44. Udany zakup za prawdziwe robuxy stworzyć następny niesamowity projekt w Robloxie!

Przemysław Folholc
Programista oraz pasjonat tworzenia gier. Trener
w Gigantach Programowania. Produkcje, nad
którymi pracuje, można zobaczyć na jego profilu
w Robloxie pod nickiem PrzemekV5 i grupie „Dewe-
loperzy Robloxa” oraz na fanpage’u FoloGames na
Facebooku: https://www.facebook.com/fologames.

PFOLHOLC@GMAIL.COM
Ilustracja 45. Gracz otrzymał narzędzie

Zapamiętaj Ćwicz w domu

օ Przepustki pozwalają na zarabianie robuxów. օ Wypróbuj różne narzędzia z Toolboxa.
օ Do „StarterGui” dodajemy interfejsy graficzne. օ Spróbuj wykonać więcej przepustek.
օ Identyfikator danej przepustki znajdziesz w adre- օ Stwórz bardziej rozbudowany sklep.
sie strony przy jego konfiguracji.

48 [ 4 - 202 1 ]
PROJEKTY

Natalia Trzaska

Programowanie zdalnego sterowania

w LEGO MINDSTORMS ROBOT INVENTOR
Większość z nas myśląc o nowych technologiach i przyszłości, zastanawia się, jakie czyn-
ności będą wykonywane przez roboty i w czym będą one nas zastępować. A czy zastana-
wiałeś/aś się kiedyś, kto je zbuduje i zaprogramuje?

8+

Dowiesz się Potrzebna wiedza

օ Jak zaprojektować własny joystick. օ Podstawy budowania robotów LEGO.
օ W jaki sposób zaprogramować robota.
օ Dlaczego do jazdy w tył potrzebna jest ujemna
prędkość.

B udowaniem robotów zazwyczaj zajmują się wyspe-

cjalizowani inżynierowie, którzy nie tylko je projek-
tują, ale też programują tak, aby urządzenie wykonywało
Zanim zaczniemy, powinniśmy zbudować naszą kon-
strukcję tak, aby tworzące ją klocki nigdy nie krępowały
ruchu robota. Na przykład koła nie mogą trzeć o kloc-
czynności, do których zostało zaprojektowane. ki, ponieważ wtedy mogą mieć problem ze skręcaniem
Zazwyczaj prace nad nową technologią trwają kilka, i rozwijaniem prędkości.
a nawet kilkanaście lat i potrzeba do tego wielu inżynie-
rów. Skąd oni się biorą? Tak naprawdę to każdy z was
może w przyszłości zostać inżynierem, a żeby poczuć
się jak młody specjalista, możesz budować i programo-
wać roboty, które służą do nauki i zabawy. Jednym z ta-
kich zestawów (najnowszym) jest LEGO MINDSTORMS
ROBOT INVENTOR. Z tego artykułu dowiesz się, w jaki
sposób można programować roboty tego typu.

CIEKAWOSTKA
Dzisiaj joystick kojarzony jest z padem, dzięki któremu
można grać na konsoli. Jednak został on opatentowany już
w 1926 roku i dopiero w latach 60. zaczął służyć graczom do
gry. Wcześniej był używany w lotnictwie i kosmonautyce.
Ilustracja 1. Przykładowy robot

50 [ 4 - 202 1 ]
 Programowanie zdalnego sterowania

Ilustracja 2. Interfejs aplikacji

Ilustracja 3. Zajęte porty

[ PROGR AMI STAJR . PL ] 51

PROJEKTY

Robot będzie napędzany dwoma silnikami, do sterowa-

nia którymi wykorzystamy aplikację oraz specjalny joy-
stick, który sami zaprojektujemy i zaprogramujemy.
Programowanie wymaga od nas użycia specjalistycz-
nego języka. W tym przypadku możemy użyć najłatwiej-
szego języka Scratch, przeznaczonego dla dzieci, lub
bardziej skomplikowanego Pythona. Dziś będziemy pi-
sać kod w tej łatwiejszej wersji.
Na początku powinieneś/powinnaś sprawdzić nazwy
portów, do których podpiąłeś/podpięłaś silniki i ewen-
tualne czujniki. Aby to zrobić, podłącz robota do kom-
putera/tabletu (za pomocą bluetooth lub kabla). Można
to sprawdzić w prawym górnym rogu aplikacji. Informa-
Ilustracja 6. Panel projektowania joysticku
cja ta będzie potrzebna do programowania.
Czas zacząć programowanie! Aby nasz robot zaczął jeź- Przykładowa konsola została pokazana na Rysunku 7.
dzić, powinieneś/powinnaś zadeklarować silniki, to znaczy
powiedzieć robotowi, które silniki będą odpowiedzialne
za ruch. Z różowej zakładki „RUCH” przeciągamy blo-
czek „ustaw silniki ruchu na” (tak jak na Ilustracji 4). Je-
śli robot podczas testów będzie jechać do tyłu, a nie do
przodu, wystarczy porty silników zamienić stronami, na
przykład A+B na B+A.

Ilustracja 4. Bloczki deklaracji silników

Gdy masz ustalone silniki ruchu, to czas zaprojektować

nasz joystick. Po prawej stronie aplikacji znajdziesz ikon-
kę, która przypomina pada (Ilustracja 5). Daje ona możli-
wość programowania pada, wystarczy kliknąć w ikonkę,
a wyświetli ci się panel. Klikając plus, przejdziesz do try-
bu projektowania
Ilustracja 5. Ikona otwierająca pada
Ilustracja 7. Przykładowa konsola
Kiedy dodamy wszystkie przyciski, po lewej stronie po-
jawi się zakładka „Zdalne sterowanie” i to właśnie z niej
będziesz korzystać. Na początku powinieneś/powinnaś
zastanowić się, co tak naprawdę chcesz uzyskać, to zna-
czy: po naciśnięciu którego przycisku twój robot ma je-
chać do przodu, kiedy ma zmieniać prędkość i tak dalej.
W tym przypadku robot będzie mógł sterować kie-
runkiem za pomocą modułu, który został nazwany
kierunki.
Po zadeklarowaniu silników można przejść do pro-

Warto wiedzieć
Programując joystick, można dodać przyciski zmieniające
prędkość. Wówczas będziesz mieć nie tylko kontrolę nad
kierunkiem jazdy, ale też prędkością.
gramowania joystickow. W przykładzie robot będzie ru-
szał się zgodnie ze strzałkami, które zostaną naciśnięte.
Z zakładki „Zdalne sterowanie” przeciągnij bloczek
(Ilustracja 8).

52 [ 4 - 202 1 ]
 Programowanie zdalnego sterowania

Ilustracja 8. Bloczek dający możliwość programowania

przycisków

W tym bloczku można zmieniać kierunek, który na-

ciśniesz. Aby to zrobić, powinieneś/powinnaś kliknąć
okno „góra” – wtedy rozwija się pasek z możliwością
wyboru. Ilustracja 9. Funkcje bloczku joysticka

Ilustracja 10. Wszystkie potrzebne bloczki z zakładki „Zdalne sterowanie”

Ilustracja 11. Zbudowany program

[ PROGR AMI STAJR . PL ] 53

PROJEKTY

Następnie utwórz pięć bloczków z wszystkimi wyżej

pokazanymi opcjami.
To, co będzie się działo po kliknięciu danego przyci-
sku, możesz zaprogramować różowymi bloczkami, które
odpowiedzialne są za ruch – skręty w prawo, ruch prosto
i na samym końcu zatrzymanie. Dodatkowo można dodać
wyświetlanie animacji bądź dźwięk z innych zakładek Ilustracja 12. Program umożliwiający jazdę w tył

Ilustracja 13. Ostateczny program

Najtrudniejszym elementem jest jazda do tyłu, ponie-
waż powinieneś/powinnaś ustawić „Rozpocznij ruch w
tył”, lecz nie ma takiego bloku.
Do rozwiązania tego problemu użyj ujemnej prędko-
ści, to znaczy zamiast 100% ustawiamy –100%. Wtedy
twój robot będzie poruszał się do tyłu.
Należy pamiętać o późniejszej zmianie ujemnej pręd-
kości. W przykładzie prędkość zmienia się za każdym ra-
zem, gdy nie naciskamy żadnego przycisku.
Ostateczny program powinien wyglądać tak jak na
Ilustracji 13.
Natalia Trzaska
Instruktorka robotyki w „Planecie Robotów”, stu-
dentka Politechniki Warszawskiej oraz pasjonatka
konstruowania i programowania robotów
TRZASKA.NATALIA01@GMAIL.COM

!
Zapamiętaj Ćwicz w domu
օ Stwórz dodatkowy suwak zmieniający prędkość. օ Przy pomocy robotów do nauki nauczysz się kon-
struować i programować roboty.
օ Do programu dodaj bloczki zajmujące się światłem
i dźwiękiem. օ Budowanie i programowanie robotów rozwija
nasze inżynierskie umiejętności i wyobraźnię
przestrzenną.

54 [ 4 - 202 1 ]
PROJEKTY

Urszula Piechota

Wyścigi formuły jeden – animacje na Androida

Marzyliście kiedyś o tym, żeby stworzyć aplikację na telefon, która robiłaby dokładnie to,
co chcecie? Zastanawialiście się, jak to zrobić, żeby nie tylko pokazać obrazek na ekranie,
ale też sprawić, by poruszał się w określony sposób? Wydaje się, że to bardzo trudne, ale
wcale takie nie jest. Wystarczy odrobina wyobraźni i kilka prostych fragmentów kodu,
które poznacie już za chwilę. A przy okazji stworzymy razem prostą aplikację, w której
będziemy animować ścigające się samochody.

10+

Dowiesz się Potrzebna wiedza

օ Jak stworzyć prostą aplikację na Androida. օ Co to jest obiekt.
օ Jak zaprogramować prostą animację obiektu օ Jak przenieść pliki z komputera na telefon za
w Androidzie. pomocą kabla USB.

ANDROID STUDIO – PROGRAM,
W KTÓRYM PRACUJĄ PROFESJONALIŚCI
Pewnie wiele razy zastanawialiście się, jak powstają
aplikacje na smartfony. Co jest do tego potrzebne? Je-
śli myślicie, że smartfon, to macie trochę racji – w koń-
cu na czymś trzeba testować tworzoną aplikację – ale
bez smartfona również da się programować. Trudno to
natomiast zrobić bez środowiska programistycznego.
Takim środowiskiem dla Androida jest Android Studio.
Można je bez problemu pobrać ze strony https://deve-
loper.android.com/studio/index.html. Jego instalacja
jest bardzo prosta, wystarczy podążać za poleceniami
instalatora. Aplikacja jest w języku angielskim, ale jak
wiesz, programista musi znać dobrze ten język. Na wy-
padek, gdyby pojawily się problemy, instrukcję instalacji
w języku polskim, krok po kroku, znajdziecie na stronie
https://istis.pl/polonistka-programuje/przygotowuje-
my-piaskownice/ i kolejnych, widocznych po kliknięciu
przycisku „Następna lekcja” na dole każdego artykułu.
Jeśli udało ci się już zainstalować Android Studio,

Warto wiedzieć
Piaskownicą (ang. sandbox) informatycy nazywają wy-
dzielone środowisko, w którym uruchamiane są programy.
Program uruchomiony w takiej piaskownicy ma dostęp tylko
do tego, do czego mu pozwolimy. Dzięki temu aplikacja nie
popsuje nam nic na komputerze. Takich piaskownic używa
się głównie do uruchamiania programów, którym nie ufamy.
możemy zacząć pracę nad naszą aplikacją. Kiedy uru-
chomisz środowisko po raz pierwszy, pojawi się okien-
ko pozwalające zdecydować, co chcesz zrobić. Wybierz
pozycję „Start a New Android Studio Project”. Kiedy bę-
dziesz uruchamiać Android Studio po raz kolejny, takie-
go okienka już nie będzie – wtedy żeby stworzyć nowy
projekt, trzeba wybrać File→ New → New Project…

56 [ 4 - 202 1 ]

AKTYWNOŚCI I FRAGMENTY – CZYLI JAK
ZBUDOWANA JEST APLIKACJA
Z listy możliwych aktywności (Activity) wybierzemy
EmptyActivity. Aktywność to taki podstawowy element
aplikacji na Androida. Drugim podstawowym elementem
są fragmenty (Fragment). Aktywność to coś w rodzaju
mistrza odpowiadającego za całą zawartość aplikacji lub
za określoną jej część. Fragmenty to uczniowie – frag-
ment zawsze musi być powiązany z jakąś aktywnością.
Aktywność odpowiada za najważniejsze elementy apli-
kacji, takie, które są używane w wielu fragmentach –
jak na przykład menu. Dzięki temu przy przechodzeniu
między ekranami zawsze możemy mieć do tych elemen-
tów dostęp.
Na kolejnym ekranie (Ilustracja 1) nadaj nazwę swo-
jemu projektowi, wpisując ją w pole Name. Pamiętaj – to
Ilustracja 1. Ekran tworzenia aplikacji w „Android Studio”
[ PROGR AMI STAJR . PL
Wyścigi formuły jeden – animacje na Androida
Ciekawostka
Android nie jest nazwą języka programowania, tylko syste-
mem operacyjnym. Dlatego mówimy, że piszemy aplikację
na Androida, a nie w Androidzie. Do pisania programów na
Androida można używać jednego z dwóch głównych języ-
ków – Java i Kotlin. Obecnie bardziej popularny jest Kotlin,
ale Java jest językiem bardziej uniwersalnym, bo używa się
jej również do pisania aplikacji na inne systemy, na przykład
Windows.
jest nazwa projektu, a nie nazwa aplikacji, dlatego nie
wolno w niej używać polskich liter ani spacji. Ja swój
projekt nazwałam „Samochodziki”. Pole Package name
zostawimy tym razem bez zmian. W Save location usta-
wiamy miejsce na dysku, gdzie zapisze się nasz projekt.
] 57
PROJEKTY
Wybierz takie, żeby później móc go łatwo znaleźć! Do-
myślnie jest to \users\USER\AndroidStudioProjects.
Ostatnim polem, które ustawimy, będzie Language –
wybierz w nim wartość Java. To pole pozwala wybrać ję-
zyk programowania, którego będziemy używać podczas
pisania kodu.
Jak zapewne zauważyliście, na tym ekranie mamy
jeszcze jedno ciekawe pole: Minimum SDK. Mówi nam
ono, na jakiej najniższej wersji systemu Android aplika-
cja będzie działać. Zostawimy je ustawione domyślnie –
obecnie niewiele jest urządzeń mających niższą wersję
systemu niż Lollipop. Jeśli jednak twój telefon ma starszy
system, ustaw sobie w tym polu swoją wersję systemu
i kliknij Finish.
ZACZYNAMY PISAĆ KOD
Android Studio stworzyło dla nas bardzo prostą ak-
tywność, która na razie jeszcze nic nie robi. Kod, który
powstał, wygląda tak:
Listing 1. Klasa „MainActivity”
package com.example.samochodziki;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity
extends AppCompatActivity {
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Plik, w którym znajduje się nasz kod, nazywamy klasą. Takie
pliki mają rozszerzenie .java, a w przypadku Kotlina – .kt.
Linijka public class MainActivity extends App­
CompatActivity mówi nam, że klasa nazywa się Main-
Activity (tak domyślnie nazywa się zwykle główną
aktywność aplikacji – dosłownie znaczy to właśnie
„główna aktywność”). Nie będziemy teraz omawiać ca-
łości kodu, zrozumiesz go z czasem, skupimy się tylko na
tym najważniejszym dla nas fragmencie, czyli na meto-
dzie onCreate(Bundle savedInstanceState). Metoda
58 [ 4 - 202 1
to taki wydzielony kawałek kodu, który ma za zadanie
robić jakąś konkretną rzecz. Metoda onCreate(Bundle
savedInstanceState) jest metodą androidową, czyli
taką, która zawsze musi być uruchomiona. Takich metod
jest kilka, ta jest najważniejsza, ponieważ uruchamia się
na samym początku.
» super.onCreate(savedInstanceState); – mówi sys-
temowi, że ma zrobić wszystko to, co domyślnie robi
się przy uruchamianiu każdej aplikacji. Dzięki temu
będziemy mogli na przykład zrobić coś wcześniej
(wtedy piszemy kod przed tą linijką) albo nie robić
tego wcale, kiedy na przykład mamy zamiar sami po-
wiedzieć aplikacji, co ma robić na początku.
» setContentView(R.layout.activity_main); – mówi,
że wygląd pierwszego ekranu ma być taki, jak w pliku
activity_main.xml.
Przyjrzyj się teraz kolumnie widocznej po lewej stronie
kodu. Masz tam pokazaną hierarchię plików w aplika-
cji – czyli pliki i ich położenie, podobnie jak możesz to
zobaczyć w komputerze w Eksploratorze plików. Andro-
id Studio pokazuje nam od razu położenie naszej klasy
MainActivity, tak jak widać na Ilustracji 2. Jeśli w polu
na górze nie masz ustawionej wartości Project, tylko
inną, np. Android – przełącz ją na Project.
Jak widzisz, Android Studio stworzyło nam sporo
różnych katalogów i plików. Wszystkie one są ważne, ale
nie musimy się nimi teraz zajmować. Interesuje nas te-
raz, oprócz klasy MainActivity, którą już obejrzeliśmy,
layout activity_main.xml. Znajdziesz go w katalogu res/
layout (Ilustracja 2). Otwórz go, klikając dwa razy myszką.
Warto wiedzieć
Nazwy kolejnych wersji systemu Android są angielskimi
nazwami różnych słodyczy, zaczynającymi się od kolejnych
liter alfabetu. Lollipop, czyli Android 5.0, oznacza lizaka.
Kolejne wersje to Marshmallow, Nougat, Oreo, Pie (z angiel-
skiego ciasto). Niestety później Google przestał nadawać
kolejnym wersjom słodkie nazwy. Obecnie najnowsza wersja
Androida to 11.
]

Ilustracja 2. Hierarchia plików w „Android Studio”
Zobaczysz edytor graficzny, który pozwala na zbudo-
wanie layoutu. Layout oznacza po polsku „układ”. Jest to
plik, w którym decydujemy o tym, jak ma wyglądać kon-
kretny ekran naszej aplikacji. Nasz na razie jest pusty.
Można go zmieniać za pomocą tego edytora graficzne-
go, który widzisz, ale żeby zrobić coś bardziej skompli-
kowanego, będzie nam potrzebny widok kodu. Dlatego
popatrz teraz na prawą stronę ekranu – znajdziesz tam
takie trzy przyciski, jak na Ilustracji 3.
Ilustracja 3. Przyciski do zmiany widoku
Zaznaczony przycisk Design pozwala widzieć edytor
graficzny. Przycisk Code pokazuje sam kod, a przycisk
Split – kod i edytor graficzny jednocześnie. Jest to naj-
wygodniejsza metoda pracy z layoutami, dlatego kliknij
teraz przycisk Split.
Na środkowej części ekranu zobaczysz taki mniej
więcej kod:
[ PROGR AMI STAJR . PL
Wyścigi formuły jeden – animacje na Androida
Listing 2. Plik „activity_main.xml”
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget
.ConstraintLayout
xmlns:android=
"http://schemas.android.com/apk/res/android"
xmlns:app=
"http://schemas.android.com/apk/res-auto"
xmlns:tools=
"http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf=
"parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget
.ConstraintLayout>
Ten kod nie jest napisany w Javie, a w XML– to specjal-
ny język, używany do tworzenia dokumentów w sie-
ci WWW, który w Androidzie wykorzystywany jest do
łatwego tworzenia grafiki. Każdy element ma wygląd
<Typ> </Typ> – nazywamy to znacznikami. Pomiędzy
symbolami < i > możemy wstawić informacje o tym, jak
ma wyglądać dany element, a między <Typ> i </Typ>
możemy wstawić inne elementy, które mają się znaleźć
w środku tego pierwszego. W naszym layoucie mamy już
wstawiony element typu ConstraintLayout, a wewnątrz
niego element TextView. O pozostałych polach wpisa-
nych w elementy będziemy jeszcze mówić później. Teraz
wystarczy nam wiedza, że odpowiadają one za to, gdzie
ma się element znaleźć i jak ma wyglądać. TextView to
pole, w które można wpisać tekst. Wpisujemy go, dodając
wewnątrz pola atrybut android:text="Hello World!".
Każde z tych pól zaczynających się od „android” lub
„app” nazywamy atrybutem.
] 59
PROJEKTY
URUCHAMIAMY APLIKACJĘ
Teraz przyszła pora, żeby uruchomić naszą aplikację,
która na razie nie robi nic poza wyświetleniem napisu
„Hello World!”. Jeśli masz telefon z Androidem, możesz
uruchomić ją na swoim telefonie. Jeśli nie, użyjesz emu-
latora – to taki wirtualny telefon, który pojawi się po
prostu na ekranie komputera.
Uruchamianie na telefonie
Uruchomienie aplikacji na telefonie wymaga włącze-
nia w nim najpierw Opcji programistycznych. Na więk-
szości telefonów wystarczy w tym celu kilkakrotnie
dotknąć pola z numerem kompilacji (poszukaj tej opcji
w ustawieniach), pojawi się wtedy informacja, że jesteś
programistą. W przypadku niektórych starszych urzą-
dzeń robi się to inaczej – w razie problemów poszukaj
w instrukcji do swojego telefonu lub w google, jak to zro-
bić. Kiedy już włączysz opcje programistyczne, podłącz
telefon kablem USB do komputera i jeśli zostaniesz po-
proszony o zainstalowanie sterowników, zrób to. Potem
wejdź w telefonie w opcje programistyczne i znajdź tam
pozycję „Debugowanie USB” – włącz ją. Odczekaj chwilę
– komputer może cię znów poprosić o instalację sterow-
ników, a telefon może pytać o zgodę na połączenie – za-
znacz „Zawsze zezwalaj z tego komputera” i potwierdź.
Jeśli nic się nie stanie, upewnij się, że debugowanie USB
jest włączone, odłącz kabel USB i po chwili podłącz po-
nownie. Pamiętaj, że kabel musi pozwalać na przesyła-
nie plików – taki służący tylko do ładowania urządzenia
nie wystarczy. Możesz również spróbować zrestartować
komputer.
Teraz popatrz na górę ekranu. Zobaczysz tam okien-
ko takie jak na Ilustracji 4.
Ilustracja 4. Okno uruchamiania aplikacji
W okienku z rysunkiem zielonego robocika powinno
pojawić się app – to nazwa modułu w naszej aplikacji
(o modułach powiemy sobie innym razem). W okien-
ku z rysunkiem szarego telefonu powinieneś/powin-
naś zobaczyć nazwę swojego telefonu. Żeby uruchomić
aplikację, należy kliknąć zielony trójkącik, który znajdu-
je się obok. Jeśli nie widzisz nazwy telefonu, to się nie
60 [ 4 - 202 1
przejmuj – niektóre telefony sprawiają dużo problemów
z podłączeniem. W takim wypadku użyj emulatora.
Uruchamianie na emulatorze
Żeby uruchomić aplikację na emulatorze, musimy
najpierw sobie ten emulator stworzyć.
Znajdź w górnym pasku Android Studio ikonki, które
widzisz na Ilustracji 5.
Ilustracja 5. Ikonki „Android Studio”
Naciśnij środkową z nich. Otworzy się okienko, w któ-
rym będzie przycisk „Create Virtual Device” – kliknij go.
Pojawi się ekran z opcjami wyboru, jaki telefon będzie
użyty jako emulator. Wybierz jaki chcesz, ale nie prze-
stawiaj pola Category, które widzisz po lewej – na razie
chcemy, żeby nasz emulator był telefonem, a nie telewi-
zorem czy zegarkiem. Kliknij Next. Zobaczysz taki ekran,
jak na Ilustracji 6.
Kliknij Download przy systemie Q i poczekaj, aż się
ściągnie. Potem kliknij Next, a na kolejnym ekranie Fi-
nish. Zamknij okienko tworzenia emulatora krzyżykiem,
po czym wybierz nowy emulator w okienku z Ilustracji 4,
jeśli sam się tam nie ustawił. Następnie kliknij zieloną
strzałkę – uruchomisz w ten sposób emulator z wirtu-
alnym telefonem.
Po uruchomieniu aplikacji
Po kliknięciu zielonej strzałki będzie trzeba dłuższą
chwilę poczekać, szczególnie jeśli wybrałeś/aś urucho-
mienie na emulatorze. Bądź cierpliwy/a. Na emulatorze
możesz przez dłuższy czas widzieć symbol google albo
ikonki na pulpicie emulowanego telefonu. Niczego nie
naciskaj i cierpliwie czekaj. W końcu zobaczysz okienko
takie jak na Ilustracji 7 albo taki sam obraz na telefonie.
Nie zamykaj emulatora, wtedy przy kolejnym uruchomie-
niu aplikacji nie będzie trzeba tyle czekać. A będziemy ją
uruchamiać często, żeby zobaczyć efekt naszych działań.
TWORZYMY SAMOCHODZIKI
Teraz nareszcie możemy zacząć tworzyć nasze sa-
mochodziki. Na początku będziesz potrzebować dwóch
]
 Wyścigi formuły jeden – animacje na Androida

Ilustracja 6. Ekran wyboru systemu dla symulatora

obrazków png z rysunkiem samochodu. Możesz je nary-

sować sam albo ściągnąć z Internetu, postaraj się jednak,
żeby rysunki nie były zbyt duże.
Spójrzmy znów na plik activity_main.xml. Skasuje-
my teraz wszystko, co jest w tym pliku i zamiast tego
napiszemy:

Listing 3. Plik „activity_main.xml”

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android=
"http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>

Jak widzisz, pierwsza linijka niczym się nie różni od

tej, która była tam poprzednio. Ona zawsze musi być
na początku pliku layout. Reszta kodu tworzy nam tło
aplikacji. Atrybut android:layout_width określa, jaka
ma być szerokość tego pola – "match_parent" ozna-
cza, że ma ono rozciągnąć się na całą szerokość ekra-
nu. Atrybut android:layout_height wskazuje, jaka ma
być wysokość pola – również na całą szerokość ekranu. Ilustracja 7. Emulator z uruchomioną aplikacją

[ PROGR AMI STAJR . PL ] 61

PROJEKTY
LinearLayout oznacza, że to, co tam umieścimy, będzie
się samo układało w rządku, tak jak zaraz zobaczysz.
Teraz wstawimy sobie do środka samochodziki.
Znajdź swoją aplikację w Eksploratorze Windows – bę-
dzie w tym katalogu, który podałeś/aś przy instalacji
Android Studio. U mnie jest to C:\AndroidAplikacje\Sa-
mochodziki\, tak jak widać na Ilustracji 1. Teraz wejdź
do katalogu app\src\main\res\drawable\ i tu wklej
obrazki samochodów. Nazwij je auto1.png i auto2.png.
Teraz wróć do kodu. Wstawimy do niego element
ImageView, który służy do wyświetlania obrazków. Nasz
kod będzie teraz wyglądać tak:
Listing 3. Plik „activity_main.xml” z jednym samo-
chodzikiem
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas
.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
> android:layout_height="match_parent"
<ImageView
android:id="@+id/auto1"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/auto1"
/>
</LinearLayout>
Ciekawostka
Skrót „dp” lub „dip” oznacza jednostkę gęstości ekranu, nie-
zależną od fizycznej wielkości ekranu. Zamiast tego można
użyć też skrótu px (piksele), in (cale), mm (milimetry), pt
(punkty – jeden punkt to 1/72 cala). W przypadku czcionek
używa się skrótu „sp” (skala), który oznacza prawie to samo
co „dp”, ale jest dostosowany do fontu. Najczęściej używa
się skrótu „dp” – dzięki temu obraz na różnych ekranach
wygląda podobnie.
62 [ 4 - 202 1
Jak widzisz, ImageView ma te same atrybuty
android:layout_width i android:layout_height, co Lin-
earLayout. Każdy element musi je mieć. Tym razem nada-
jemy obrazkowi konkretny rozmiar – 80 dp na wysokość
i 80 dp na szerokość. Za pomocą atrybutu android:src
ustawiamy w polu obrazek. Atrybut android:id pozwa-
la na nadanie nazwy elementowi, żeby potem móc się
do niej odnieść w kodzie. Nazwa zawsze musi się zaczy-
nać od @+id/ i nie może się powtarzać – każdy element
musi mieć inną nazwę.
Po prawej stronie możesz zobaczyć, jak teraz wy-
gląda nasz ekran – pojawił się nasz samochodzik! Teraz
wstawimy drugi, dokładnie tak samo.
Listing 4. Plik „activity_main.xml” z dwoma samo-
chodzikami
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=
"http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
>
<ImageView
android:id="@+id/auto1"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/auto1"
/>
<ImageView
android:id="@+id/auto2"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/auto2"
/>
</LinearLayout>
Na ekranie mamy już dwa samochodziki, ale są usta-
wione jeden za drugim, a my chcemy, żeby były jeden
pod drugim – inaczej nie mogłyby się ze sobą ścigać.
Dlatego dodamy teraz do LinearLayout atrybut, któ-
ry powie systemowi, że ma układać elementy pionowo:
android:orientation="vertical". Nagłówek Linear-
Layout powinien teraz wyglądać tak:
]

Listing 5. Plik „activity_main.xml” – ustawianie
orientacji layoutu
<LinearLayout xmlns:android=
"http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
> ImageView auto2 = findViewById(R.id.auto2);
Uruchom teraz swoją aplikację, klikając zieloną strzałkę.
Mamy już na ekranie dwa samochodziki, tak jak na Ilu-
stracji 8.
Ilustracja 8. Widok ekranu z dwoma samochodzikami
A TERAZ JAZDA!
Sprawmy teraz, żeby nasze samochodziki zaczęły
się ruszać. W tym celu wrócimy do naszej klasy Main­
Activity. Aby zrobić cokolwiek z samochodzikami, mu-
simy je najpierw znaleźć, dlatego dopiszemy w naszej
metodzie onCreate dwie linijki:
[ PROGR AMI STAJR . PL
Wyścigi formuły jeden – animacje na Androida
Listing 6. Metoda „onCreate” w klasie „MainActivity”
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView auto1 = findViewById(R.id.auto1);
}
Jeśli fraza ImageView wyświetla się na czerwono, kliknij
na nią myszką, a potem naciśnij na klawiaturze jednocze-
śnie lewy Alt i Enter – czerwone podświetlenie powinno
zniknąć. Za pomocą tego skrótu dodajemy importy, któ-
re pojawiają się na górze klasy. Mówią one systemowi,
gdzie szukać w budowanych klasach definicji podanych
elementów.
Na początku piszemy rodzaj pola, w którym w pliku
xml jest nasz samochodzik, czyli ImageView, po czym
nadajemy mu jakąś nazwę – najlepiej taką samą, jaką
podaliśmy w xml w atrybucie android:id. Później sta-
wiamy znak =, który mówi nam, że dalej podamy to, co
będziemy mieć na myśli, zawsze kiedy wpiszemy słowo
auto1 albo auto2. Słowa findViewById znaczą po angiel-
sku „znajdź widok po identyfikatorze” (widzisz? angiel-
ski się przydaje). W nawiasie podajemy nazwę pola wzię-
tą z xml. Na jej początku piszemy R.id. – dzięki temu
system wie, że chodzi nam o pole, a nie o obrazek czy
inny element.
Teraz, kiedy mamy już nasze dwa samochodziki, mo-
żemy im dodać animację. Dlatego dodamy teraz taki kod:
Listing 7. Animacja samochodzika
ObjectAnimator animation1 = ObjectAnimator
.ofFloat(auto1, "translationX", 1000f);
animation1.setDuration(2000);
animation1.start();
Dodaj go zaraz za tym kodem, który pisaliśmy przed
chwilą, ale przed znakiem }.
Pierwsza linijka służy do utworzenia animacji. Mó-
wimy: uruchamiamy metodę ofFloat na obiekcie Ob-
jectAnimator z parametrami auto1, "translationX"
i 1000f. Wiem, brzmi strasznie trudno – jednak gdy się
przyjrzysz, to zobaczysz, że w kodzie to bardzo proste.
] 63
PROJEKTY
Teraz ważne są parametry. Parametr auto1 mówi, do
czego będziemy dodawać animację – do naszego pierw-
szego samochodzika. Parametr "translationX" ozna-
cza, że będziemy przesuwać samochodzik w poziomie,
czyli wzdłuż osi X. Ostatni parametr, 1000f, mówi, jak
daleko samochodzik ma się przesunąć.
Kolejna linijka, animation1.setDuration(2000);
oznacza czas trwania naszej animacji. A ostatnia linijka,
animation1.start();, jak pewnie się już domyślasz,
uruchamia animację.
Uruchom teraz aplikację. Pierwszy samochodzik je-
dzie do przodu i wyjeżdża poza ekran. Poeksperymentuj
chwilę, zmieniając wartość 1000f na jakąś inną, mniej-
szą lub większą (zawsze na końcu musi być literka f –
oznacza ona, że wartość, którą podajemy, jest typu float,
a więc zmiennoprzecinkowa). Pozmieniaj też wartość
w nawiasie przy setDuration. Obserwuj, co się dzieje
z samochodzikiem.
Teraz dodamy animację do drugiego samochodzika.
Może spróbujesz sam? Dla każdego z samochodzików
możesz ustawić różne wartości. Na przykład jeden może
jechać w tempie 2000, a drugi 1000, każdy może przeje-
chać inną odległość.
Mój kod po dodaniu animacji drugiego samochodzika
wygląda tak:
Listing 8. Klasa „MainActivity”
package com.example.samochodziki;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends
AppCompatActivity {
!
Zapamiętaj
օ Obrazki przechowujemy w obiekcie „ImageView”.
Animujemy je za pomocą obiektu „ObjectAnima-
tor”. Parametr „translationX” przesuwa obrazek
w poziomie, a „translationY” w pionie.
64 [ 4 - 202 1
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView auto1 = findViewById(R.id.auto1);
ImageView auto2 = findViewById(R.id.auto2);
ObjectAnimator animation1 = ObjectAnimator
.ofFloat(auto1, "translationX", 1000f);
animation1.setDuration(2000);
animation1.start();
ObjectAnimator animation2 = ObjectAnimator
.ofFloat(auto2, "translationX", 1000f);
animation2.setDuration(3000);
animation2.start();
}
}
SPRÓBUJ SAM
Pobaw się jeszcze tym kodem. Jeśli chcesz, żeby obrazek
poruszał się w pionie, możesz wpisać "translationY"
zamiast "translationX". A może zamienisz obrazki
samochodzików na inne i zmienisz ich wielkość? Albo
spróbujesz dodać jednocześnie animację pionową i po-
ziomą do tego samego samochodzika?
Urszula Piechota
Programistka Androida w firmie Lekseek Polska.
Oprócz Informatyki skończyła też Polonistykę (hu-
manista też może programować!). Prywatnie intere-
suje się teatrem, uwielbia czytać książki i bawić się
z psami – bo na programowaniu życie się nie kończy.
URSZULA.PIECHOTA@OP.PL
Ćwicz w domu
օ Spraw, żeby samochodzik poruszał się w pionie.
օ Dodaj trzeci samochodzik.
օ Zmień wielkość samochodzika.
]
BEZPIECZEŃSTWO

Łukasz Basa

Czym jest VPN?

Temat prywatności podczas korzystania z Internetu pojawia się coraz częściej jako przed-
miot dyskusji zarówno na poziomie koleżeńskich rozmów, jak również świata dorosłych.
Być może znane są ci takie pojęcia jak VPN czy TOR w kontekście rozwiązań pozwalają-
cych na ukrywanie naszej tożsamości w Internecie. W poniższym artykule postaram się
wytłumaczyć, czym jest VPN, do czego możesz go zastosować oraz przed jakimi zagroże-
niami cię nie ochroni.

12+

Dowiesz się Potrzebna wiedza

օ Co to jest VPN. օ Podstawowa wiedza na temat działania Internetu.
օ Jak wykorzystać VPN do zwiększenia poziomu
prywatności w sieci.

օ Przed czym VPN cię nie ochroni.

ŚWIAT „WODNEGO INTERNETU”
Ważna informacja
Zanim przeczytasz: poniżej znajdziesz obrazowy opis
działania rozwiązań VPN. Nie jest to tekst techniczny
i przyjmuje on poziom dużego uproszczenia.
Wyobraź sobie, że Internet to wielki i nieskończony oce-
an, na którym znajdują się różne wyspy. Wyspy te budu-
ją najczęściej dostawcy Internetu (tak aby mógł na nich
zamieszkać ktoś taki jak ty), ale robią to także twórcy
stron internetowych. Mieszkańcy tych wysp nazywa-
ją się „internautami”. Tak więc kupując Internet domo-
wy od firmy UPC, zostajesz mieszkańcem „wyspy UPC”,
a kupując do swojego smartfona kartę SIM firmy Orange
(wraz z pakietem Internetu) – zostajesz mieszkańcem
„wyspy Orange”. Każdy z mieszkańców danej wyspy do-
staje piękny dom z adresem nazywanym „adresem IP”.
Czyli jeden z sąsiadów mieszka na wyspie UPC pod ad-
resem 1.2.3.4, a drugi mieszka pod adresem 5.6.7.8. Może
też zdarzyć się, że wiele osób mieszka pod jednym ad-
resem (na przykład w hotelu czy biurowcu danej firmy).
Mieszkańcy świata „wodnego Internetu” za każdym
razem, gdy chcą przeczytać artykuł na stronie inter-
netowej bezpieczny.blog, muszą wybrać się w podróż
przez ocean Internetu na wyspę bezpieczny.blog. Jest
to długa i czasem niebezpieczna wyprawa. Każdy z nich
płynie własną łódką w kierunku swojej docelowej wyspy.
Świat Internetu jest tak skonstruowany, że na każdej ło-
dzi wywieszona jest wielka flaga z adresem IP, z którego
wyruszamy, oraz adresem wyspy, na którą płyniemy. Po
drodze ci bardziej spostrzegawczy widzą innych inter-
nautów płynących w tym samym lub innym kierunku.
Widzą, jak są ubrani, skąd wracają, dokąd płyną. Potrafią
nawet podpłynąć na tyle blisko, żeby podsłuchać, o czym
rozmawiają z innymi internautami.

66 [ 4 - 202 1 ]
 Czym jest VPN?

Ilustracja 1. Przykład połączenia internetowego ze stroną

http://bezpieczny.blog z wykorzystaniem protokołu HTTP

Tak właśnie (w bardzo dużym uproszczeniu) wyglą-
da Internet. Inni ludzie, będący w tej samej sieci, mogą
obserwować twoją łódź lub śledzić twoje wyprawy
(przy braku szyfrowania, o czym później), a serwer, któ-
ry odwiedzasz, zna twój adres IP i wie dokładnie, skąd
„przypływasz”.
BUDUJEMY MOSTY!
Z uwagi na zagrożenie dla poufności danych, które
z nami płyną, wiele wysp (takich jak na przykład banki,
sklepy internetowe czy nawet strona, na której jesteście)
zdecydowało się na zbudowanie mostów bezpośrednio
z twojego domu, aż na wyspę docelową. Każdy internau-
ta ma swój most, oddzielny na każdą wyspę, i nikt inny
nie jest w stanie zobaczyć, co się na tym moście dzie-
je. Takie „mosty” nazywamy szyfrowaniem SSL (Secure
Socket Layer) lub TLS (Transport Layer Security). Wy-
stępują wtedy, gdy widzicie zamkniętą kłódkę na pasku
adresu w przeglądarce internetowej. Warto zapamiętać,
że taki most jest szybko budowany, gdy internauta za-
pragnie odwiedzić jakąś wyspę, która wspiera szyfrowa-
nie, a po zakończeniu wizyty jest bezpowrotnie niszczo-
ny (czyli technicznie połączenie jest zakończone). Dzięki
tym mostom właściciel wyspy docelowej nadal zna adres
internauty, ale nikt poza nimi dwoma nie wie, co w ra-
mach mostu jest przenoszone i o czym internauta roz-
mawia z drugą stroną.
SCHODZIMY POD WODĘ!
Aby zapewnić jeszcze większy poziom poufności, zbu-
dowane zostały wyspy o nazwie VPN ( Virtual Private Ne-
twork – Wirtualna Sieć Prywatna). Usługa ta działa w ten
sposób, że gdy internauta zapragnie odwiedzić jakąś
stronę internetową i jest aktualnie podłączony do VPN-a,

Ilustracja 2. Przykład połączenia internetowego ze stroną

https://bezpieczny.blog z wykorzystaniem protokołu HTTPS
(połączenie szyfrowane)

[ PROGR AMI STAJR . PL ] 67

BEZPIECZEŃSTWO
Ilustracja 3. Przykład połączenia internetowego ze stroną http://bezpieczny.blog z wykorzystaniem pośredniczące-
go serwera VPN
to wsiada w swoim domu do specjalnej, przeznaczonej
tylko dla niego, szybkiej łodzi podwodnej, która trans-
portuje go po kryjomu na wyspę VPN. Nikt po drodze
nie jest w stanie dowiedzieć się o tym, kto znajdował się
w tej łodzi. Na wyspie VPN internauta wsiada w specjalną
łódkę (lub buduje szyfrowany most) i płynie już w zwykły
sposób na docelową wyspę bezpieczny.blog. Magią tego
całego rozwiązania jest to, że flaga na łódce nie zawiera
już jego adresu domowego 1.2.3.4, a zamiast tego – adres
serwera VPN (z którego mogą korzystać tysiące innych
użytkowników, w naszym przykładzie 9.9.8.8). Dzięki
temu można zobaczyć, że ktoś płynie w kierunku naszej
wyspy docelowej, lecz nie wiadomo, kim ta osoba jest
i skąd tak naprawdę przypłynęła. Nie będą o tym wie-
dzieć ani osoby postronne, które nasz bohater spotka po
drodze, ani też administrator serwera bezpieczny.blog.
CZY WARTO KORZYSTAĆ Z USŁUGI VPN?
Na to pytanie każdy musi odpowiedzieć sobie sam. Pa-
miętajmy, bazując na powyższym przykładzie, że sam VPN
nie zapewnia bezpiecznego i bezpośredniego szyfrowania
od twojego urządzenia do serwera docelowego. Szyfro-
wanie mamy zapewnione jedynie do serwera VPN, a dalej
poruszamy się standardową drogą. Osoba (lub firma) za-
rządzająca serwerem VPN posiada informacje na temat
naszego adresu IP oraz adresów, z którymi się łączymy.
Warto jest używać serwerów VPN, jeżeli znajdujemy
się w niezaufanej sieci bezprzewodowej (na przykład ho-
tel, restauracja czy nawet firmowa sieć Wi-Fi dla gości).
W zależności od zabezpieczeń tej sieci może się zdarzyć,
że ktoś będzie w stanie podsłuchać naszą komunikację.
W takim przypadku bezpiecznie przepłyniemy z wyspy
„hotel” do naszej bezpiecznej przystani VPN, gdzie już
dalej wypłyniemy na głębokie wody Internetu.
68 [ 4 - 202 1
DO CZEGO MOŻE SŁUŻYĆ VPN?
Poza wykorzystaniem połączeń VPN do zachowania
poufności komunikacji firmy bardzo często wykorzystują
go do zapewnienia swoim pracownikom zdalnego dostę-
pu do infrastruktury wewnętrznej organizacji. Od strony
technicznej odbywa się to najczęściej tak, że brama VPN
udostępniana jest w sieci Internet i jest swoistym łączni-
kiem świata zewnętrznego z siecią lokalną firmy. Dzięki
niej pracownik uwierzytelniając się w odpowiedni sposób
(na przykład za pomocą haseł lub specjalnych certyfika-
tów kryptograficznych), może z dowolnego miejsca na
kuli ziemskiej utworzyć bezpieczny, szyfrowany tunel po-
między swoim komputerem a serwerami firmowymi (lub
nawet urządzeniami takimi jak telefon VoIP czy drukarka).
Dzięki temu może korzystać z zasobów firmy w podobny
sposób, jakby to robił, będąc w biurze. W okresie pan-
demii wiele firm zdecydowało się w taki właśnie sposób
umożliwić pracę zdalną swoim pracownikom.
Innym powodem, dla którego może być stosowany
VPN, jest chęć ominięcia blokad, które mogą być usta-
wione dla danego kraju. Wyobraźmy sobie, że pewien
serwis udostępniający materiały video oferuje swoją
usługę wyłącznie mieszkańcom USA. Stosując pośredni-
czący w naszej komunikacji serwer VPN zlokalizowany
w Stanach Zjednoczonych, nasze połączenie przyjdzie
z adresu IP wskazującego na USA. Powinno to pozwolić
na ominięcie zastosowanego ograniczenia. Należy jed-
nak zaznaczyć w tym miejscu, że omijanie takich blokad
jest niezgodne z prawem i nie powinno się tego robić.
Ponadto warto zauważyć, że dostawcy treści, którzy
zdecydowali się na wprowadzenie tego typu ograniczeń,
często znają najpopularniejsze zakresy adresów IP sto-
sowane przez komercyjne serwery VPN i są w stanie
skutecznie taki ruch blokować.
]

SKĄD WZIĄĆ VPN-A?
Jeżeli mamy odpowiednie umiejętności, serwer VPN
najlepiej skonfigurować samodzielnie, wykorzystując do
tego na przykład zasoby chmury Google Cloud Platform,
Amazon AWS czy Microsoft Azure. Jeżeli takich umiejęt-
ności nie mamy, pozostaje nam skorzystać z usługi firmy
trzeciej, która za pewną opłatą udostępnia swoje serwe-
ry. Na rynku istnieje bardzo wielu dostawców tego typu
usług – istnieją zarówno darmowe, jak i płatne wersje.
Przestrzegam jednak przed korzystaniem z darmowych
sieci VPN, w myśl zasady, że wszędzie tam, gdzie nie
płacisz, to ty jesteś towarem. Tak więc, jeżeli potrzebu-
jesz tego typu rozwiązania, to warto przeznaczyć pewną
sumę pieniędzy, aby mieć pewność, że nasza komunika-
cja nie jest podsłuchiwana, a informacje o tym, kiedy łą-
czyliśmy się z serwerem VPN i jak wyglądała nasza dalsza
aktywność, nie są przechowywane i sprzedawane dalej.
Firmy oferujące usługi serwerów VPN wyrastają jak
grzyby po deszczu i prześcigają się w zapewnieniach, jak
bardzo dbają o naszą prywatność. Bardzo często są one
zarejestrowane w egzotycznych miejscach oraz przeko-
nują, że ich polityką jest brak logowania działań użyt-
kownika (tak zwane „no logs policy”). Warto wiedzieć,
że historia już niejednokrotnie pokazała drugą stronę
medalu: w przypadku podejrzenia popełnienia prze-
stępstwa i zwrócenia się przez organy ścigania firmy te
udostępniają jednak wiele informacji na temat swoich
klientów. Oznacza to, że często „no logs policy” to jedy-
nie chwyt marketingowy.
Nie będziemy tu polecać żadnego konkretnego do-
stawcy. Jeżeli jesteś zainteresowany/a skorzystaniem
z takiej usługi, to z pewnością znajdziesz ich całą listę,
korzystając z wyszukiwarki. Pamiętaj tylko, że usługi wy-
!
Zapamiętaj
օ VPN pozwala na nawiązanie zdalnego, szyfrowane-
go połączenia z drugim komputerem.
օ VPN nie zapewnia anonimowości w Internecie.
օ Nie korzystaj z darmowych serwerów VPN, bo mogą
okazać się bardziej niebezpieczne niż ich brak.
[ PPROGR
ROGR AMI STAJR . PL
Czym jest VPN?
kupić może jedynie osoba pełnoletnia, więc uzgodnij to
najpierw ze swoimi rodzicami lub opiekunami.
CZY VPN OD FIRMY TRZECIEJ TO JEDYNA
MOŻLIWOŚĆ?
Oczywiście, że nie. Usługę VPN można także skon-
figurować samemu, jeżeli posiadamy wykupiony serwer
typu VPS (Virtual Private Server) lub inny, u dostawcy
takiego jak OVH, Google Cloud czy też Amazon. Wyma-
ga to już jednak większej wiedzy technicznej. Osobom
zainteresowanym pragnę polecić skrypt automatyzujący
cały proces, który jest dostępny w ramach repozytorium
Github (https://github.com/trailof bits/algo). Świetnie
sprawdza się w tym, aby w szybki i prosty sposób po-
stawić serwer IPSec na posiadanym przez nas hostin-
gu, a nawet wygenerować gotowe pliki konfiguracyjne
dla naszych urządzeń. W moim przypadku doskonale
sprawdza się w połączeniu z usługą Amazon Lightsail.
NA KONIEC…
Korzystanie z VPN nie zwalnia nikogo z obowiązku
przestrzegania prawa. Jeżeli jedyną motywacją do uży-
cia VPN jest ukrycie swojej tożsamości w celu wykonania
niedozwolonej czynności (na przykład użytkowania po-
branej z Internetu nielegalnej kopii oprogramowania), to
nie warto tego robić.
Łukasz Basa
Bezpiecznik, entuzjasta technologii, miłośnik alter-
natywnych metod parzenia kawy.
KONTAKT@BEZPIECZNY.BLOG
HTTPS://BEZPIECZNY.BLOG
Ćwicz w domu
օ Poszukaj w Internecie informacji o usłu-
gach VPN. Porównaj je i zobacz, czym się one
charakteryzują.
օ Sprawdź, jak zmienił się twój adres IP po połą-
czeniu z VPN.
] 69
PROGRAMISTYCZNE WYZWANIA

Konrad Jagaciak

Programistyczne wyzwania
Kolejna odsłona programistycznych wyzwań to nowe zadania „z haczykiem”, które można
rozwiązać na różne sposoby. Mają one zainspirować do samodzielnej pracy, ale też udzie-
lić wskazówek, które mogą ci w tym pomóc. Przeczytaj zadania i spróbuj je samodzielnie
rozwiązać, a dopiero potem przeczytaj do nich wskazówki.

SCRATCH: JAK LOSOWAĆ WYRAZY? ze słowami, spośród których jedno ma zostać wylosowa-
W programie Scratch znajdziemy bloczek pozwa- ne. Tworząc nową listę, możesz jej nadać nazwę Słowa.
lający na wygenerowanie liczby z podanego przez nas
zakresu. Bloczek losuj liczbę od 0 do 10 znajdziemy w
kategorii Wyrażenia.

Ilustracja 1. Bloczek do generowania liczb

Nie sposób jednak znaleźć bloku pozwalającego na wy-

losowanie wyrazu z podanej przez nas puli wyrazów.
Taki mechanizm musielibyśmy zbudować sami. Jest na
to kilka sposobów, a jednym z nich jest wykorzystanie
Ilustracja 3. Tworzenie nowej listy
list. W środowisku Scratch są one nieco ukryte. By z
nich skorzystać, należy wejść do kategorii Zmienne i Gdy w naszym projekcie jest utworzona lista, mamy do-
użyć przycisku Stwórz listę. stęp do nowych bloczków! Poprzez wykorzystywanie
bloczku dodaj obiekt do Słowa możemy dodawać nowe
słowa do listy, wpisując je w pole obiekt.

Ilustracja 4. Dodawania elementów do listy

Jednym z dostępnych bloczków dotyczących listy jest

element 1 z Słowa, który zwraca jedno ze słów znajdują-
cych się na liście.

Ilustracja 2. Kategoria „Zmienne”

Ilustracja 5. Bloczek zwracający element listy

Przykłady list z pewnością znasz z życia codziennego –

może to być lista obecności w szkole czy też lista zaku- Które słowo zostanie zwrócone? To zależy od tego, jaki
pów, sporządzana przed wyjściem do sklepu i zawierają- numer wpiszemy w miejscu 1. Elementy listy są ponu-
ca produkty, jakie chcemy kupić. My potrzebujemy listy merowane. Jeśli numer elementu listy, który ma zwrócić

70 [ 4 - 202 1 ]

bloczek, będzie wylosowany – będziemy mieć mecha-
nizm zwracający wylosowane słowo.
Ilustracja 6. Zwracanie losowego elementu listy
Podając zakres losowania liczb. należy pamiętać o tym,
by nie był on większy niż liczba elementów dodanych do
listy. Jeśli dodaliśmy do listy 5 słów – losujemy liczby od
1 do 5.
SCRATCH: JAK ZABLOKOWAĆ
OSZUKIWANIE W GRACH
W wielu grach stworzonych w programie Scratch
pojawia się motyw przejścia z jednego miejsca na sce-
nie do innego – tak by unikać przeszkód. W tego typu
grach często łatwo jest oszukiwać – przeciągając duszka
myszką w inne miejsce. Tak mogłoby być w przypadku
gry w min-igolfa, gdzie należy piłką trafić do dołka w jak
najmniejszej liczbie uderzeń.
Ilustracja 7. Gra mini-golf stworzona w programie
Scratch
Istnieje jednak możliwość zablokowania użytkowniko-
wi ręcznego przesuwania zarówno piłki, jak i dołka. Jeśli
chcesz, by duszka nie dało się przesunąć, przeciągając
go w inne miejsce, użyj bloczku ustaw tryb przeciągania
[ PROGR AMI STAJR . PL
Programistyczne wyzwania
na... znajdującego się w kategorii Czujniki. Trybem, jaki
należy wybrać na bloczku, jest bez przeciągania.
Ilustracja 8. Bloczek zmiany trybu przeciągania
Co ważne, duszka nie będzie można przeciągać tylko
w trybie gry pełnoekranowej – przy testowaniu gry w
zmniejszonym oknie nadal będzie można go przeciągać
ręcznie.
Wyzwanie – wskazówka:
Jak dodawać do siebie bardzo duże liczby?
W wielu językach programowania tworząc zmienne do
przechowywania liczb, określamy ich typ. Ma on wpływ
na to, co może znaleźć się w zmiennej. I nie jest to tylko
wskazanie, że w zmiennej ma znaleźć się liczba całkowi-
ta, tekst czy też ułamek – bardzo często wskazujemy też
na maksymalny zakres liczb, jakie mogą zmieścić się w
zmiennej. Python jest językiem dynamicznie typowa-
nym. To oznacza, że sam dopasowuje typ zmiennej, gdy
przypisujemy do niej wartość, a my sami nie musimy tego
typu wskazywać. Co więcej – nie musimy się też przejmo-
wać rozmiarem liczb przechowywanych w zmiennych.
Nic nie stoi na przeszkodzie, abyśmy w zmiennej zapisali
liczbę składającą się z setek cyfr! Chcesz dodać do siebie
dwie liczby pięciuset-cyfrowe? Żaden problem, skorzystaj
z Pythona! Na bardzo dużych liczbach możemy wykonywać
też inne matematyczne działania, nie tylko dodawanie.
Ilustracja 9. Dodawanie pięciuset-cyfrowych liczb
w języku Python
] 71
3.14159

Michał Kremzer

Zagadki matematyczne dla dzieci w wieku 11+

1. Kupujemy n sztuk towaru w sklepie. Jaką cechę powin-

no spełniać n, byśmy mieli pewność, że w sumie zapła-
cimy całkowitą liczbę złotych, nawet jeśli nie znamy
ceny jednej sztuki towaru?

2. Liczba n jest ustaloną liczbą parzystą większą od 2. Po-

daj przykład liczb a, b, c, d, które są parami różne oraz
różne od 0 i z których dokładnie jedna jest liczbą cał-
kowitą, dokładnie jedna jest liczbą dodatnią oraz liczba
(a + b)(c + d) jest liczbą całkowitą i większą od n.

3. Podaj przykład liczby naturalnej o różnych cyfrach, któ-

ra jest większa od 100, ma wszystkie cyfry większe od 1
oraz dzieli się przez kwadrat każdej ze swoich cyfr.

4. O ile procent należy zmniejszyć liczbę dodatnią, aby

otrzymać liczbę do niej przeciwną?

5. Wyznacz najmniejszą liczbę naturalną n taką, że po

zmniejszeniu liczby dodatniej o n procent otrzymamy
liczbę ujemną.

72 [ 4 - 202 1 ]
 Liczbę trzycyfrową zmniejszono o n% i otrzy-

6. mano liczbę jednocyfrową. Liczba n jest liczbą

naturalną dodatnią. Ile co najmniej może wy-
nosić n?

7. Liczby m i n są ustalonymi liczbami naturalnymi dodatnimi. Resz-

ta z dzielenia liczby m przez liczbę n jest równa 4. Ile wynosi
reszta z dzielenia liczby m + 1 przez liczbę n?

Podaj przykład liczb naturalnych dodatnich m i n, tak aby

8. reszta z dzielenia liczby m przez liczbę n była równa 1,

a reszta z dzielenia liczby m przez liczbę n + 1 była równ
a 18.

9. Wyznacz najmniejszą liczbę stucyfrową, która przy dziele-

niu przez 9 daje resztę 6.

10. Liczby a i b są liczbami naturalnymi dodatnimi. Liczba 2a

+ 4b dzieli się przez 7.Wyznacz resztę z dzielenia liczby
5a + 3b + 25 przez 7.

Rozwiązania:
10. 4.
9. 100...5 (98 zer między jedynką i piątką).
8. m = 37, n = 18.
7. 0 lub 5.
6. 91.
5. 101.
4. 200.
3. 432.
2. a = -0,25; b = -1,75; c = -0,5n – 1; d = 0,5.
1. n = 100m, m jest liczbą całkowitą nieujemną.

[ PROGR AMI STAJR . PL ] 73

WYDARZENIA I EDUKACJA

Aleksandra Zacharska

Lubisz programować?
Dołącz do codeweekowej społeczności!
Rozpoczynamy odliczanie – już niebawem rusza największe w Europie święto programo-
wania. Jak co roku dziesiątki tysięcy uczniów, rodzin, a nawet całych szkół ze wszystkich
stron świata przez dwa tygodnie będą programować w ramach CodeWeek. Warto do nich
dołączyć!

Z apamiętaj termin tegorocznego CodeWeek: to już

9–24 października 2021 r., a najlepiej od razu wpisz
te daty do kalendarza.
Nie ma wymogów dotyczących liczby uczestników
ani programu wydarzenia – chodzi o to, żeby wspólnie
programować i dobrze się bawić.

ŚWIĘTO PROGRAMOWANIA SUKCES 2020

Czym jest CodeWeek? Europejski Tydzień Kodowa-
nia to inicjatywa, w trakcie której – wspólnie z innymi
krajami Unii Europejskiej (i nie tylko!) – celebrujemy
kreatyw­ność i współpracę oraz udowadniamy, że pro-
gramowanie jest dla wszystkich. W tym roku odbywa się
już dziewiąta edycja CodeWeek.
Europejski Tydzień Kodowania upowszechnia na-
ukę programowania. Zadaniem uczestniczących w akcji
państw jest zorganizowanie możliwie największej liczby
wydarzeń związanych z promocją korzystania z nowych
technologii.
Idea jest prosta – każdy, kto chce się włączyć, może
zorganizować własne wydarzenie i zarejestrować je na
stronie codeweek.eu/add. Organizatorzy, poza świetną
przygodą, otrzymają także specjalny certyfikat.
Jakie wydarzenia można zgłosić? Ogranicza cię tyl-
ko własna wyobraźnia, co więcej – w CodeWeek nie ma
złych pomysłów! Chodzi o inicjatywy, które pozwolą ra-
W Europejskim Tygodniu Kodowania jest też nieco…
zdrowej konkurencji. Wszystkie państwa ścigają się ze
sobą o to, które z nich zorganizuje najwięcej wydarzeń.
CodeWeek to dziesiątki tysięcy inicjatyw, w których bie-
rze udział kilka milionów osób z całego świata – w tym
przeważająca część to szkoły i uczęszczający do nich
uczniowie oraz ich rodzice.
Podczas #CodeWeek2020 po raz pierwszy w ośmio-
letniej historii Europejskiego Tygodnia Kodowania
Polska nie tylko znalazła się na podium, ale też zajęła
pierwsze miejsce w tej rywalizacji! Programowali profe-
sjonaliści i amatorzy, uczniowie, pracownicy firm, grupy
znajomych, rodzice, przedstawiciele organizacji pozarzą-
dowych, a nawet przedszkolaki.

zem programować, ale też ćwiczyć logiczne myślenie,
rozwiązywać zagadki, organizować wirtualne zajęcia czy
gry.
Takim wydarzeniem może być wspólny klasowy (albo
koleżeński) projekt w Scratch, minhackathon, turniej ła-
migłówek logicznych, lekcja informatyki, na której opo-
wiesz swoim kolegom o CodeWeek, a nawet konkurs
plastyczny związany z programowaniem i wiele innych…
Ciekawostka
Europejski Tydzień Kodowania to jedyny taki tydzień w roku,
który trwa… dwa tygodnie! W tym roku CodeWeek świętuje-
my w dniach 9–24 października. Swoje wydarzenia możesz
jednak zgłaszać cały rok. Koniecznie poszukaj ich na mapie
CodeWeek!

76 [ 4 - 202 1 ]
WYDARZENIA I EDUKACJA
Polska od kilku lat konsekwentnie zwiększa liczbę
zorganizowanych inicjatyw związanych z nauką pro-
gramowania. Ubiegłoroczny wynik przeszedł nasze naj-
śmielsze oczekiwania! Zajrzyj na gov.pl/koduj/codeweek
i obejrzyj filmowe podsumowanie „Polska zwycięzcą
CodeWeek 2020”.
Czy twoja szkoła też jest częścią CodeWeek? Jeśli nie,
koniecznie zeskanuj kod QR i sprawdź, jak możesz do-
łączyć do inicjatywy, a potem zaproś do zabawy swoich
nauczycieli i rodziców.
ZAINSPIRUJ SIĘ
Jak zaangażować się w #CodeWeek2021? Nie ma tutaj
ograniczeń wiekowych, terytorialnych czy jakichkolwiek
innych. CodeWeek może być początkiem fantastycznej
przygody, a nawet nowej pasji – dla wszystkich!
Jak powinno wyglądać takie wydarzenie? Wszystko
zależy od twojego pomysłu. Ważne, aby rozwijało umie-
jętności związane z programowaniem i logicznym my-
śleniem oraz wykorzystaniem narzędzi cyfrowych. Do
CodeWeek można też zgłosić lekcje informatyki, które
odbywają się w twojej szkole.
Jeśli pierwszy raz słyszysz o Europejskim Tygo-
dniu Kodowania, koniecznie zajrzyj na oficjalną stronę
codeweek.eu oraz na naszą – koduj.gov.pl. Dowiesz się
tam więcej o polskiej edycji i znajdziesz szereg inspi-
racji. Zawsze możesz też napisać do biura CodeWeek:
programowanie@mc.gov.pl.
Szczególnie polecamy udział w kursach programo-
wania w Scratch na platformie OSE IT Szkoła, w których
uczestniczy już kilka tysięcy osób! Wystarczy wejść na
it-szkola.edu.pl i wyszukać:
78 [ 4 - 202 1
» kurs „Programowanie w Scratch Junior z Klubem
Młodego Programisty” – skierowany do tych wszyst-
kich, którzy nie mieli jeszcze okazji spróbować swo-
ich sił w kodowaniu;
» kurs „Programowanie w Scratch 3.0 z Klubem Mło-
dego Programisty” – na ten kurs zapraszamy przede
wszystkim starszych uczniów szkół podstawowych
i tych, którzy czują, że w Scratchu Juniorze progra-
mować mogą nawet z zamkniętymi oczami. 😉
W ciągu ośmiu spotkań nauczysz się tworzyć – najpierw
mniej, a później już nieco bardziej złożone – programy,
a wszystko poprzez przygotowywanie krótkich animacji
i gier. Musisz tego spróbować! Na uważnych i wytrwa-
łych uczestników czeka ponadto certyfikat. Kto wie,
może okaże się przydatny w dalszym rozwoju?
Co to ma jednak wspólnego z CodeWeek? Jeśli zachę-
cisz do udziału w kursie swoich kolegów i koleżanki (a może
też nauczyciela informatyki albo matematyki?), a następnie
zarejestrujesz tę inicjatywę na codeweek.eu/add – stajesz
się częścią codeweekowej społeczności!
DO DZIEŁA!
Jeżeli masz jakiekolwiek pytania lub wątpliwości do-
tyczące Europejskiego Tygodnia Kodowania, jesteśmy
do twojej dyspozycji: programowanie@mc.gov.pl. Zrobi-
my wszystko, by pomóc.
Zaczynamy więc wielkie odliczanie i wkrótce widzimy
się na Europejskim Tygodniu Kodowania. Bądź z nami!
Aleksandra Zacharska
NASK, ambasadorka CodeWeek w Polsce
]
 Rok przestępny, czyli jak stworzyć algorytm
sprawdzający w Scratchu i Pythonie?
uczniowie klas 90 min
VII-VIII

Justyna Klimczyk

ODNIESIENIE DO PODSTAWY PROGRAMOWEJ

Informatyka – klasy VII-VIII
I. Rozumienie, analizowanie i rozwiązywanie problemów. Uczeń:
4) rozwija znajomość algorytmów i wykonuje eksperymenty z algorytmami, korzystając z pomocy dy-
daktycznych lub dostępnego oprogramowania do demonstracji działania algorytmów;
5) prezentuje przykłady zastosowań informatyki w innych dziedzinach, w zakresie pojęć, obiektów
oraz algorytmów.
II. Programowanie i rozwiązywanie problemów z wykorzystaniem komputera i innych urządzeń cyfrow-
ych. Uczeń:
1) projektuje, tworzy i testuje programy w procesie rozwiązywania problemów. W programach sto-
suje: instrukcje wejścia/wyjścia, wyrażenia arytmetyczne i logiczne, instrukcje warunkowe, instrukcje
iteracyjne, funkcje oraz zmienne i tablice.

CELE ZAJĘĆ -- UCZEŃ MATERIAŁY

■ Potrafi określić, który rok jest rokiem przestępnym. ■ Karta pracy dla ucznia.
■ Dostrzega możliwość wykorzystania środowiska ■ https://programistajr.pl/karty-pracy-dla-nauczycieli/
programistycznego do rozwiązywania problemów
z innych dziedzin.
■ Tworzy w Scratchu skrypt służący do sprawdzania,
FORMY PRACY
czy dany rok jest rokiem przestępnym.
■ Wykład, dyskusja.
■ Tworzy w Pythonie program jako analogię skryptu
■ Instruktaż nauczyciela.
opracowanego w Scratchu.
■ Praca własna ucznia.
■ Potrafi wskazać inne problemy, w których omawiany
algorytm może być wykorzystany.
■ Rozbudowuje i udoskonala algorytmy omówione
podczas zajęć.

SCENARIUSZE ZAJĘĆ DLA NAUCZYCIELI

 PRZEBIEG ZAJĘĆ
1. Czynności organizacyjne i przedstawienie uczniom celów lekcji (10 min).
Zajęcia powinniśmy rozpocząć od zadania uczniom kilku pytań:
■ Jaki rok nazywamy przestępnym?
■ Czy bieżący rok jest rokiem przestępnym?
■ Jak sprawdzić, czy dany rok był lub będzie przestępny?
2. Omówienie założeń projektu (10 min).
Podsumowaniem dyskusji powinno być określenie, w jaki sposób sprawdzić, czy dany rok jest przestępny, czy też nie.
Rok jest przestępny, jeśli: liczba go określająca dzieli się przez 4, ale nie dzieli się przez 100 lub dzieli się przez 400.
Zachodzi więc alternatywa: liczba dzieli się przez 4, ale nie dzieli się przez 100 lub liczba dzieli się przez 400.

3. Omówienie i stworzenie skryptu w Scratchu (25 min).

Należy zwrócić uwagę uczniów na to, aby:
■ podczas sprawdzania podzielności przez 4, 100 i 400 użyli bloku reszta z dzielenia. Reszta równa 0
oznacza, że liczba jest podzielna przez daną liczbę;
■ uważnie dobierali niezbędne bloki do zbudowania warunku w instrukcji jeżeli: nadrzędna będzie alter-
natywa (lub), a dopiero jednym z elementów tej alternatywy będzie koniunkcja (i);
■ zwrócili uwagę na to, że w Scratch nie ma operatora „różny”. Należy go zastąpić blokiem negacji.
Warto zwrócić uwagę uczniów, że w tym prostym zadaniu pojawia się kilka elementów logiki matematycznej
(koniunkcja, alternatywa, negacja), często wykorzystywanej podczas tworzenia algorytmów.
Link do projektu w Scratchu: https://scratch.mit.edu/projects/555147331

4. Stworzenie analogicznego programu w języku Python (20 min).

rok=int(input("Podaj rok: "))
if rok % 4 == 0 and rok % 100 != 0 or rok % 400 == 0:
print("Rok jest przestępny")
else:
print("Rok nie jest przestępny")

Przed rozpoczęciem tworzenia programu należy przypomnieć uczniom wykorzystywane w Pythonie operatory
porównania (==, =!), operatory logiczne (and, or) oraz operator arytmetyczny (%).
Należy zwrócić uwagę uczniów na to, że:
■ o ile w Scratchu mogliśmy obyć się bez zmiennej (wystarczy wykorzystać blok odpowiedź), o tyle w Pytho-
nie zmienna jest konieczna;
■ wcięcia odgrywają w Pythonie kluczową rolę.
5. Samodzielna praca ucznia (20 min).
Uczniowie pracują samodzielnie w oparciu o kartę pracy, udoskonalają skrypt. Nauczyciel wspiera uczniów
w rozwiązywaniu pojawiających się problemów dotyczących składni. Nie ingeruje w pomysł ucznia.
6. Podsumowanie zajęć i ewentualna ocena prac uczniów (5 min).