Poziom trudności: trzy gwiazdki

Rekomendowany wiek: 10+

Dowiesz się:

• Jak stworzyć sklep w Robloxie?
• Jak pisać programy w języku Lua?
• Odkryjesz jedną z tajemnic Budowniczego Robloxa.

Potrzebna wiedza:

• Podstawowa wiedza o Robloxie.
• Podstawowa umiejętność pisania kodów w Lua.
• Umiejętność poruszania się po środowisku Roblox Studio.

Przepustki do gier inaczej nazywane „Game Pass” zapewniają graczom specjalne przywileje i umiejętności w grach, takie jak  na przykład super skok czy zwiększona szybkość poruszania. Przepustki te można tworzyć bezpłatnie i sprzedawać za określoną ilość Robuxów w danej grze. Jest to jeden ze sposób na zarobienie tej cennej waluty. W tej części artykułu zajmiemy się tworzeniem sklepu do Game Passów.

Tworzenie nowego projektu  „Gamepass Shop”

Uruchamiamy Roblox Studio i zaczynamy od wybrania szablonu. Ostatnio został dodany nowy Baseplate 2021, więc można go przetestować.

Wskazówka!

Projekt możesz również stworzyć za pomocą strony Robloxa. Ominie cię wtedy proces publikacji!

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

Kiedy już projekt zostanie stworzony, pierwszą czynnością, którą należy wykonać jest publikacja projektu.

Klikamy przycisk FILE, znajduje się on w lewym górnym rogu ekranu, kolejno wybieramy z listy Publish to Roblox.

Ilustracja 2. Publikacja projektu w „Roblox Studio”

Nazwę projektu jest dowolna, można go nazwać Gamepass Shop.

Po uruchomieniu projektu przechodzimy do ustawień gry. Przycisk Game Settings znajdziesz w kategorii HOME. Do tych ustawień można również dostać się za pomocą przycisku FILE.

Ilustracja 3. Przycisk ustawień gry

Następnie przechodzimy do kategorii Security i włączamy opcję Allow Third Party Sales. Pozwoli nam to przeprowadzić test zakupu na uruchomionym lokalnie serwerze.

Ilustracja 4. Ustawienia gry – kategoria bezpieczeństwo

Zaczynamy budowanie sklepu od dodania ScreenGui do StarterGui, które znajduje się w Explorerze.

Ilustracja 5. Dodany ScreenGui

Następnie zmieniamy nazwę ScreenGui na Shop i dodajemy do niego TextButton.

Kolejno modyfikujemy właściwości w TextButton

BackgroundColor3: [42, 120, 214]

BorderColor3: [42, 120, 214]

BorderSizePixel: 5

Position: {0.03,0},{0.35,0}

Size: {0.1,0},{0.1,0}

SizeConstraint: RelativeXX

Font: FredokaOne

Text: GAMEPASS SHOP

TextColor3: [255, 255, 255]

TextScaled: Zaznaczony

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

Kolejnym krokiem jest dodanie Frame do Shop oraz dodatkowo zmieniamy nazwę TextButton na OpenButton.

Następnie modyfikujemy właściwości w Frame.

AnchorPoint: 0.5, 0.5

BackgroundColor3: [180, 180, 180]

BorderColor3: [42, 120, 214]

BorderMode: Inset

BorderSizePixel: 4

Position: {0.5, 0},{0.5, 0}

Size: {0.3, 0},{0.2, 0}

SizeConstraint: RelativeXX

Ilustracja 7. Dodanie i modyfikacja Frame

Ciekawostka!

Zmiana punktu zakotwiczenia AnchorPoint pozwala na łatwiejsze wypośrodkowanie elementu GUI.

Tworzenie napisu GAMEPASS SHOP oraz przycisku do zamykania sklepu.

Aby to osiągnąć, należy dodać TextButton oraz TextLabel do Frame, następnie zmieniamy nazwę TextButton na ExitButton.

Ilustracja 8. Dodany TextButton oraz TextLabel do Frame	Ilustracja 9. Element TextButton po zmianie nazwy na ExitButton

Następnie zmieniamy właściwości:

Ilustracja 10. Dodany tekst GAMEPASS SHOP oraz zamykanie sklepu

W sklepie nie ma jeszcze żadnych przycisków do Game Passów. Aby to zmienić dodaj dwa ImageButton do Frame.

Ilustracja 11. Dodanie dwóch ImageButton do Frame	Ilustracja 12. Zmiana nazwy dwóch ImageButton

Kolejno zmieniamy właściwości:

Ciekawostka!

Chcesz mieć inny obrazek do Game Passów? Możesz dodać swój własny obrazek do Images w Asset Manager lub znaleźć go w Toolboxie w kategorii Images.

W momencie, kiedy już wprowadzisz wszystkie zmiany, sklep powinien wyglądać jak na ilustracji poniżej.

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, zaznaczenie jej pozwoli na rozciągnięcie elementu graficznego na pełny ekran.

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 14. Widoczny interfejs graficzny	Kliknięcie na przycisk	Ilustracja 15. Niewidoczny interfejs graficzny

Sklep już jakoś wygląda, ale nie jest jeszcze funkcjonalny. Możesz się o tym przekonać po wejściu do gry.

Zaczniemy od stworzenia programów do otwierania i zamykania sklepu.

Przed tym jednak, należy wyłączyć widoczność sklepu. Aby to zrobić wystarczy zmienić w Frame właściwość Visible na odznaczoną.

Następnie dodajemy LocalScript do OpenButton oraz ExitButton

Ilustracja 16. Umiejscowienie LocalScriptów

Program do otwierania sklepu za pomocą przycisku (LocalScript w OpenButton)

function Open()

-- zmień w Frame

-- właściwość Visible na true

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 (LocalScript w ExitButton)

function Exit()

-- zmień w Frame

-- właściwość Visible na false

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 UserInputService = game:GetService("UserInputService")

-- kiedy jest żądanie skoku,

-- połącz się z funkcją Exit

UserInputService.JumpRequest:Connect(Exit)

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 sklepu podczas skoku, może się to przydać, kiedy gra zostanie uruchomiona na telefonie.

Dodanie narzędzi GravityCoil oraz SpeedCoil

GravityCoil to sprężynka, która pozwala na wyższe skakanie. Z kolei SpeedCoil pozwala na spore przyśpieszenie poruszania.

Na początku należy dodać dodatkowe narzędzia do gry. W tym celu przechodzimy do Toolboxa, a następnie wyszukujemy i dodajemy SpeedCoil oraz GravityCoil.

Ilustracja 17. Przycisk Toolbox

Dodanie danego elementu z Toolboxa polega na kliknięciu na niego lewym przyciskiem myszy.

Ilustracja 18. Dodanie GravityCoil	Ilustracja 19. Dodanie SpeedCoil

Kiedy wybierzemy narzędzie, zostaniesz zapytany o to, czy umieścić narzędzie w starter pack. Zgadzamy się, ponieważ należy je przetestować przed dodaniem go do Game Passa. Nie chciałbyś przecież, żeby ktoś zapłacił w robuxach za niedziałające dodatkowe narzędzie.

Ilustracja 20. Dodanie narzędzie do starter pack

Uruchamiamy grę i wybieramy dane narzędzie poprzez wciśnięcie 1 lub 2 na klawiaturze. Można je również wybrać za pomocą kliknięcia myszką w dany obrazek.

Ilustracja 21. Test GravityCoil

Jeżeli jakieś narzędzie nie działa, spróbuj poszukać innego, często zdarza się że obiekty z Toolboxa nie działają, tak jak powinny.

Ilustracja 22. Test SpeedCoil

Po udanych testach przenosimy GravityCoil oraz SpeedCoil do ReplicatedStorage. Jest to potrzebne, ponieważ będziemy dawać te narzędzia osobom, które wykupią odpowiedni Game Pass.

Ilustracja 23. Narzędzia w StarterPack	Przenosimy do ReplicatedStorage	Ilustracja 24. Narzędzia przeniesione do ReplicatedStorage

Ważne!

Sprawdź, czy nazwy narzędzi są takie same jak na ilustracjach! 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.

Do zobaczenia w kolejnej części z cyklu „Budowniczego Robloxa”, w którym poznacie jego kolejne tajemnice i dowiecie się, jak dokończyć projekt „Gamepass Shop”!

Zapamiętaj!

• Do StarterGui dodajemy interfejsy graficzne.
• Różne obrazki do gry znajdziesz w Toolboxie w kategorii Images.
• Narzędzia pozostawione w StarterPack, zostaną dodane do gracza po uruchomieniu gry.

Ćwicz do domu!

• Wypróbuj różne narzędzia z Toolboxa.
• Spróbuj użyć ImageButton do otwierania sklepu.
• Przetestuj grę na różnych urządzeniach, sprawdź jak skaluje się twój sklep.

Przemysław Folholc

Programista oraz pasjonat tworzenia gier. Trener w Gigantach Programowania.