Lekcja 6.

Tworzymy pierwszy
sklep
– sprzęty do walki z Zombie
cz.2

Cel lekcji

Celem lekcji będzie dokończenie sklepu z bronią, który pozwoli nam na walkę z
Zombiakami

Jeżeli mamy słabszą grupę tworzymy tylko jeden przedmiot do zakupu, resztę
zadajemy jako pracę domową.

Agenda
1. Kontynuacja budowy sklepu.
2. Pytania końcowe i podsumowanie zajęć.
Na dzisiejszych zajęciach będziemy dodawać bronie do naszego sklepu. Poznamy
również nowy element systemu w Roblox Studio, czyli zdalne zdarzenia (Remote
Events). Pozwalają one na komunikację pomiędzy serwerem, a klientem (czyli
urządzeniem, na którym aktualnie gra dana osoba).

Zdalne zdarzenie jest przeznaczone do jednokierunkowej komunikacji. Korzystając z

niego można wysyłać informacje w następujący sposób:

Urządzenie → Serwer
Serwer → Urządzenie
Serwer → Wszystkie urządzenia
Urządzenie → Urządzenie / Urządzenia

Przykład:
Urządzenie → Serwer (Pokazujemy przykład, obrazek dostępny w materiałach do
zajęć).

Uwaga podczas tworzenia konspektów, Roblox wprowadził, na testy nowe

ikony, jednak środowisko Robloxa negatywnie odniosło się do zmiany, co
spowodowało powrót starych ikon.
Pierwsze co robimy to udostępniamy materiały dodatkowe do zajęć:
https://drive.google.com/file/d/1ji5lxOh0Jd6KcdcBXwnf_P-NCpTDvoGa/view?
usp=sharing
lub
https://cutt.ly/WBtvXH2

Klikamy prawym przyciskiem na ReplicatedStorage znajdujący się w Explorer.

Następnie wybieramy plik z rozszerzeniem .rbxm
Folder ze Zdarzeniami pozostaje w ReplicatedStorage, skrypt nazwany System
przenosimy do ServerScriptService (Będzie on obsługiwał nasze zdarzenia ze
sklepu).

Następnie przechodzimy do StarterPack i usuwamy bronie jeżeli zostały dodane do

testowania.
Kolejnym krokiem jest przejście do StarterGui i włączenie widoczności Frame,

poprzez zaznaczenie właściwości .

Dzisiaj poznamy kolejny element, który jest przydatny w budowaniu interfejsu

graficznego, nazywa się on Scrolling Frame, jest to specjalna ramka, która pozwala
na przewijanie.

Do elementu Frame za pomocą plusika dodajemy ScrollingFrame.

Następnie zmieniamy jego właściwości.

AnchorPoint: 0.5, 0.5
BackgroundTransparency: 1
Position: {0.5, 0},{0.5, 0}
Size: {1, 0},{0.5, 0}
SizeConstraint: RelativeYY
CanvasSize: {0, 0},{1, 0}
ScrollBarThickness: 5
ScrollingDirection: Y
Następnie dodajemy UIGridLayout do ScrollingFrame, element ten pozwala na
odpowiednie układanie elementów w ramce według ustawionych właściwości.

Zmieniamy właściwości:
CellSize: {0, 75},{0, 75}
HorizontalAlignment: Center
SortOrder: Name

Przyciski nie muszą być tylko zwykłym tekstem, w Roblox Studio występuje również
element, który nazywa się ImageButton, czyli obrazkowy przycisk. Dodajemy go do
ScrollingFrame.
Następnie zmieniamy jego nazwę na 1, będzie to pierwsza broń w sklepie.

Jak widać aktualnie w sklepie przycisk nie zawiera żadnej grafiki, przejdźmy więc do
zmiany właściwości Image na: rbxassetid://10823182770. Po zmianie obrazek
powinien się pojawić :)

Następnie dodatkowo możemy zmienić kolor tła przycisku: BackgroundColor: [0, 0, 0]

oraz dodać UICorner - CornerRadius: 0.2, 0

Kolejnym krokiem jest dodanie elementu ImageLabel, będzie nim obrazek, który
pokaże graczowi, że dana broń nie jest jeszcze kupiona. Nazwę zmieniamy na
ObrazekZablokowany.

Zmieniamy właściwości:
BackgroundTransparency: 1
Size: {1, 0},{1, 0}
Image: rbxassetid://10828794451
Następnie duplikujemy element ObrazekZablokowany i zmieniamy jego nazwę na
ObrazekUzbrojony.
Następnie możemy już wyłączyć widoczność elementu ObrazekZablokowany
i przejść do zmiany właściwości ObrazekUzbrojony:

Image: rbxassetid://10828906307

Dodajemy do elementu 1, dwa elementy BoolValue, następnie zmieniamy ich nazwy

na Uzbrojona oraz Kupiona.
Kolejnym krokiem jest dodanie elementu StringValue, następnie zmieniamy nazwę
na NazwaBroni oraz we właściwościach wpisujemy Value: PISTOL.

Następnie dodajemy LocalScript i tworzymy program.

Przy tworzeniu programu dostosujemy materiał pisany do poziomu grupy,
jeżeli grupa sprawia problemy z pisaniem część programu kopiujemy i dajemy
tylko kawałek do napisania. W ostateczności jeżeli grupa popełnia bardzo dużo
błędów przy pisaniu programów kopiujemy cały program i tłumaczymy
działanie linijka po linijce.

Program do LocalScript (Bez komentarzy)

 local przyciskBroni = script.Parent
local nazwaBroni = przyciskBroni.NazwaBroni
local uzbrojona = przyciskBroni.Uzbrojona
local kupiona = przyciskBroni.Kupiona
local replicatedStorage = game.ReplicatedStorage
local zdarzenieIkona = replicatedStorage.Zdarzenia.Ikona
local zdarzeniePrzycisk = replicatedStorage.Zdarzenia.Przycisk
local obrazekUzbrojony = przyciskBroni.ObrazekUzbrojony
local obrazekZablokowany = przyciskBroni.ObrazekZablokowany

local function ZmianaZakupu()

if kupiona.Value then
obrazekZablokowany.Visible = false
przyciskBroni.BackgroundColor3 = Color3.fromRGB(111, 223, 111)
else
obrazekZablokowany.Visible = true
przyciskBroni.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
end
end

local function ZmianaUzbrojenia()

if uzbrojona.Value then
obrazekUzbrojony.Visible = true
else
obrazekUzbrojony.Visible = false
end
end

local function PobierzDane(bronSerwer, kupionaSerwer, uzbrojonaSerwer)

if nazwaBroni.Value == bronSerwer then
kupiona.Value = kupionaSerwer
uzbrojona.Value = uzbrojonaSerwer
ZmianaZakupu()
ZmianaUzbrojenia()
end
end

local function WyslijDane()

zdarzenieIkona:FireServer(nazwaBroni.Value)
end

zdarzenieIkona.OnClientEvent:Connect(PobierzDane)
przyciskBroni.MouseButton1Click:Connect(WyslijDane)

Program do LocalScript (Z komentarzami)

-- Odwołania do elementów
local przyciskBroni = script.Parent
local nazwaBroni = przyciskBroni.NazwaBroni
local uzbrojona = przyciskBroni.Uzbrojona
local kupiona = przyciskBroni.Kupiona
local replicatedStorage = game.ReplicatedStorage
local zdarzenieIkona = replicatedStorage.Zdarzenia.Ikona
local zdarzeniePrzycisk = replicatedStorage.Zdarzenia.Przycisk
local obrazekUzbrojony = przyciskBroni.ObrazekUzbrojony
local obrazekZablokowany = przyciskBroni.ObrazekZablokowany

-- Ta funkcja pozwala na zmiane wyświetlania obrazka blokady

-- oraz koloru przycisku broni kiedy jest kupiona lub niekupiona.
local function ZmianaZakupu()
-- Jeżeli dana broń jest kupiona
if kupiona.Value then
-- Wyłącz widoczność blokady
obrazekZablokowany.Visible = false
-- Zmień kolor tła ikony broni na zielony
przyciskBroni.BackgroundColor3 = Color3.fromRGB(111, 223, 111)
else
-- Włącz widoczność blokady
obrazekZablokowany.Visible = true
-- Zmień kolor tła ikony broni na czarny
przyciskBroni.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
end
end

-- Ta funkcja pozwala na zmiane wyświetlania obrazka uzbrojony

local function ZmianaUzbrojenia()
-- Jeżeli dana broń jest uzbrojona
if uzbrojona.Value then
-- Włącz widoczność obrazka
obrazekUzbrojony.Visible = true
else
-- Wyłącz widoczność obrazka
obrazekUzbrojony.Visible = false
end
end

-- Ta funkcja pozwala na pobranie danych danej broni

-- oraz czy została kupiona lub uzbrojona
local function PobierzDane(bronSerwer, kupionaSerwer, uzbrojonaSerwer)
-- Jeżeli broń z serwera jest bronią z tego przycisku
if nazwaBroni.Value == bronSerwer then
-- Ustaw wartość zmiennej kupiona na wartość z serwera
kupiona.Value = kupionaSerwer
-- Ustaw wartość zmiennej uzbrojona na wartość z serwera
uzbrojona.Value = uzbrojonaSerwer
-- Uruchom funkcję ZmianaZakupu
ZmianaZakupu()
-- Uruchom funkcję ZmianaUzbrojenia
ZmianaUzbrojenia()
end
end

-- Ta funkcja pozwala na wysłanie danych do serwera

local function WyslijDane()
-- Uruchamiamy zdarzenie kliknięcia w daną ikonę broni w sklepie
zdarzenieIkona:FireServer(nazwaBroni.Value)
 end

-- Zdarzenie ikona jest uruchamiane na początku gry, pozwoli to na załadowanie

-- informacji do sklepu danego gracza oraz kiedy gracz wybierze daną broń, a następnie
-- kliknie przycisku do zakupu, założenia lub ściągnięcia broni
zdarzenieIkona.OnClientEvent:Connect(PobierzDane)
-- Zdarzenie ikona pozwala na wysłanie informacji do serwera, że gracz wybrał daną
-- broń ze sklepu i serwer w odpowiedzi przekaże informacje, czy wybrana broń została już
-- kupiona lub czy gracz może ją założyć lub ściągnąć.
przyciskBroni.MouseButton1Click:Connect(WyslijDane)

Po skończonym omawianiu programu przechodzimy do budowy przycisku, który

pozwoli na zakup/założenie/ściągnięcie broni.

Dodajemy TextButton do Frame, a następnie zmieniamy nazwę na Przycisk.

Następnie zmieniamy jego właściwości.

AnchorPoint: 0.5, 0.5
BackgroundColor3: [111, 223, 111]
Position: {0.5, 0},{0.85, 0}
Size: {0.8, 0},{0.1, 0}
FontFace: BANGERS
Text: Kliknij na broń
TextScaled: Zaznaczony
Dodajemy następnie UICorner dla ładniejszego wyglądu.

UICorner - CornerRadius: 0.2, 0

Kolejnym krokiem jest dodanie LocalScript do Przycisku.
Program do LocalScript (Bez komentarzy)
local przycisk = script.Parent
local replicatedStorage = game.ReplicatedStorage
local zdarzeniePrzycisk = replicatedStorage.Zdarzenia.Przycisk

local wybranaBron = nil

function AktualizacjaDanychSklepu(wiadomosc, bron)

przycisk.Text = wiadomosc
wybranaBron = bron
end

zdarzeniePrzycisk.OnClientEvent:Connect(AktualizacjaDanychSklepu)

function WyslanieDanychDoSerwera()
if wybranaBron ~= nil then
zdarzeniePrzycisk:FireServer(wybranaBron)
end
end
przycisk.MouseButton1Click:Connect(WyslanieDanychDoSerwera)

Program do LocalScript (Z komentarzami)

-- Odwołania do elementów
local przycisk = script.Parent
local replicatedStorage = game.ReplicatedStorage
local zdarzeniePrzycisk = replicatedStorage.Zdarzenia.Przycisk

-- Zmienna przechowująca dane na temat wybranej broni

local wybranaBron = nil

-- Ta funkcja pozwala na aktualizację danych sklepu,

-- tekstu wyświetlanego na przycisku oraz aktualnie wybranej broni.
function AktualizacjaDanychSklepu(wiadomosc, bron)
-- Wyświetl wiadomość z serwera w tekście przycisku
przycisk.Text = wiadomosc
-- Ustaw wybraną broń (gracz kliknął wybraną ikonkę broni)
wybranaBron = bron
end

-- Gracz klika na wybraną ikonkę broni, co powoduje uruchomienie zdarzenia Ikona

-- co powoduje uruchomienie funkcji AktualizacjaDanychSklepu
zdarzeniePrzycisk.OnClientEvent:Connect(AktualizacjaDanychSklepu)

-- Funkcja, która wysyła zdarzenie z informacjami do serwera

function WyslanieDanychDoSerwera()
-- Jeżeli jest wybrana broń
if wybranaBron ~= nil then
-- Wyślij zdarzenie z informacją o wybranej broni
zdarzeniePrzycisk:FireServer(wybranaBron)
end
end
-- Kiedy przycisk zostanie kliknięty uruchom funkcję WysylanieDanychDoSerwera
przycisk.MouseButton1Click:Connect(WyslanieDanychDoSerwera)
Następnie testujemy sklep, pamiętając o wyłączeniu widoczności elementu Frame.
Jeżeli mamy dużo czasu możemy przejść do dodawania kolejnych broni. Jeżeli
mamy mało czasu zadajemy na pracę domową dodanie kolejnych broni, należy
zduplikować element 1, a następnie zmieniać nazwy kolejno 2,3,4 itd. Nazwy
broni wpisujemy w element (StringValue - NazwaBroni), dodatkowo wysyłamy
nazwy broni i obrazki do ikon na czacie.

Nazwy broni:
1: PISTOL
2: SMG
3: SHOTGUN
4: SNIPER
5: ROCKETLAUNCHER
6: GRENADELAUNCHER
7: CROSSBOW
8: RAILGUN

Obrazki do ikon:
1: rbxassetid://10823182770
2: rbxassetid://10827266143
3: rbxassetid://10823182132
4: rbxassetid://10823181577
5: rbxassetid://10823182328
6: rbxassetid://10823182951
7: rbxassetid://10823183106
8: rbxassetid://10823182522
4. Pytania końcowe i podsumowanie zajęć:

1. Czego dzisiaj się nauczyliśmy?

2. Jaką broń dodalibyście jeszcze do sklepu?
3. Co jeszcze można by było kupować w waszym sklepie?