Drogi Czytelniku zainteresowany tworzeniem gier 🎮. Oto artykuł o tym, jak zacząć tworzenie gier w języku JavaScript 🎉!!! Dowiesz się o samym języku jak bardzo pasuje do tworzenia gier, jakie istnieją narzędzia (darmowe i płatne) wspierające programowanie z jego użyciem, a także wyczytasz parę porad na co warto zwrócić uwagę czy to od strony technicznej, czy dystrybucyjnej 🚀. Dodam, że materiał pochodzi od człowieka, który stworzył parę gier używając JavaScriptu 🙂. Jeżeli jesteś zainteresowany(-a), to zapraszam Cię serdecznie 😄!
CZY TWORZENIE GIER W JĘZYKU JAVASCRIPT BĘDZIE DLA CIEBIE ODPOWIEDNIE?
Podzielę materiał na 3 części 👇:
- czym jest język JavaScript,
- jakie występują narzędzia do tworzenia gier z jego udziałem,
- porady z mojej strony na podstawie własnych doświadczeń.
Zaczynamy ▶️!
CZY JĘZYK JAVASCRIPT PASUJE DO TWORZENIA GIER?
JavaScript jest językiem interpretowanym służącym do obsługi określonych elementów na stronie internetowej wykonując skrypty po stronie klienta (PHP działa na serwerze), zapraszam do serii artykułów na temat języka 😊. Język "stoi" obok języków HTML i CSS, i z tego względu jest on doskonałym kandydatem do tworzenia gier internetowych na platformę HTML5 🔥.
Wypuszczanie na HTML5 oznacza publikację w pełni działającej produkcji na stronie internetowej, dzięki czemu nikt nie będzie musiał niczego pobierać na swój komputer, aby zagrać w Twoją grę 🤩! Taki styl dystrybucji był bardzo modny po roku 2000, gdy wchodziły gry stworzone w technologii Adobe Flash (w 2020 roku technologia została "wygaszona" ℹ️), a serwisy takie jak Miniclip czy Wyspa Gier, dominowały na ekranach domowych komputerów wśród starszych i młodszych graczy 😊.
Nawet jeśli czasy szczytów popularności już minęły, to wciąż możesz ujrzeć wiele gier online funkcjonujących bezpośrednio w przeglądarce ✅. Także to wcale nie "umarło" - nadal jest to stosowana metoda publikacji 👍. Ponadto częstym zjawiskiem jest wyświetlanie reklam podczas gry pomiędzy sesjami czy w zamian za jakąś nagrodę, co może być dobrym pomysłem na zarobek 💵!
JavaScript jest językiem interpretowanym, co oznacza że nie będzie idealnie pasować dla "ciężkich" produkcji wielkości AAA, jeśli chodzi o zapotrzebowanie na maksymalną wydajność od strony instrukcji przetwarzanych przez procesor ℹ️. Natomiast jego składnia jest lekka i przyjazna dla początkujących, więc jeżeli dopiero zaczynasz swoją przygodę w tworzeniu gier i chcesz po prostu stworzyć coś nieskomplikowanego w 2D lub 3D, to wspomniana wada nawet nie będzie dla Ciebie odczuwalna 😉.
 |
Język JavaScript jest doskonałym wyborem, jeśli planujemy tworzenie niedużych gier i publikowanie ich jako w pełni działających w przeglądarce (bez pobierania ani instalowania czegokolwiek).
Źródło: Wikimedia
LISTA DARMOWYCH I PŁATNYCH NARZĘDZI OBSŁUGUJĄCYCH JĘZYK JAVASCRIPT
Masz 2 drogi tworzenia gier w języku JavaScript 👇:
- na płótnie (ang. canvas), czyli bezpośrednio na elemencie HTML5,
- używając narzędzia wspierającego programowanie i eksport na HTML5.
Moim zdaniem najlepiej tworzyć na serio wyłącznie przy pomocy narzędzi, bo większość z nich wspiera edytor wizualny do tworzenia scen, grafiki, kodu itd. na styl WYSIWYG (ang. What You See Is What You Get) - "otrzymujesz to, co widzisz" 👀. Ponadto dysponują zestawem gotowych funkcji, edytorów czy eksporterów i to nie tylko na platformę HTML5 🤩!
Ograniczanie się do samego płótna (czyli programowanie bez żadnego wspomagania) lepiej sobie zostawić na coś bardzo prościutkiego do publicznego repozytorium na GitHub celem zaprezentowania swoich umiejętności ℹ️. Świadome rezygnowanie z dzisiejszych możliwości lepiej wybić sobie z głowy ⚠️. Podstawowa zasada dewelopera gier XXI wieku: nie wynajduj koła na nowo 🚫!!!
Teraz przedstawię szereg dostępnych narzędzi, zarówno darmowych, jak i płatnych, które znacznie ułatwiają tworzenie gier w języku JavaScript 🌟. To nie będzie zestawienie wszystkich jakie istnieją w całej sieci, tylko tych najbardziej rzucających się w oczy i aktualizowanych po dziś dzień ℹ️.
JAKIE SĄ DARMOWE NARZĘDZIA DO TWORZENIA GIER W JĘZYKU JAVASCRIPT?
Oto spis darmowych narzędzi do tworzenia gier w języku JavaScript 👇:
JAKIE SĄ PŁATNE NARZĘDZIA DO TWORZENIA GIER W JĘZYKU JAVASCRIPT?
Niżej masz wypisane płatne narzędzia do tworzenia gier w języku JavaScript 👇:
PORADY ODNOŚNIE TWORZENIA GIER W JĘZYKU JAVASCRIPT
A teraz na sam koniec tego artykułu, co mogę Ci doradzić ze swej strony, gdy ja trochę tworzyłem używając języka JavaScript ⭐.
URUCHAMIANIE WYMAGA UMIESZCZENIA GRY NA SERWERZE
W 99% przypadków będziesz potrzebować wstawienia swojej gry na serwer, aby mogła uruchomić się bez przeszkód (nie zawsze, lecz w zdecydowanej większości ⚠️) 😲. Masz 2 sposoby 👇:
- wstawić pliki gry na dowolny serwer zdalny, do którego masz dostęp (to może być Twoja strona internetowa),
- postawić serwer lokalny na Twoim komputerze i do niego wstawić pliki gry.
O wiele szybciej (i taniej 😏) będzie skorzystać z drugiej metody ✅. Jeżeli posiadasz zainstalowanego Pythona, możesz użyć bardzo ułatwiającego życie polecenia, które tworzy serwer lokalny z poziomu lokalizacji, w której to polecenie wykonano 😄!
Uruchom wiersz poleceń ("cmd"), przejdź do lokalizacji, w której masz pliki gry i wpisz poniższą instrukcję 👇:
python -m http.server 8000To utworzy tymczasowy lokalny host (tzw. "localhost") 👍. Gdy połączenie zostanie nawiązane, możesz otworzyć Twoją ulubioną przeglądarkę i wpisać następujący adres URL:
localhost:8000/To jest najprostszy sposób na wyświetlenie gry 🙂. Możesz też zainstalować program do obsługi lokalnych serwerów (np. "XAMPP"), jednak wymaga to więcej pracy i nieco miejsca na dysku 💽.
UPEWNIJ SIĘ, ŻE NIE MA ODSTĘPU OKNA GRY OD KRAWĘDZI
Płótno HTML5 domyślnie posiada mały odstęp od lewego górnego rogu obszaru strony wyświetlanej przez przeglądarkę ⚠️. Jeżeli narzędzie, w którym pracujemy, nie usuwa tego odstępu w dowolny sposób, musisz się go pozbyć samodzielnie 💥. Jest to o tyle istotne, że będzie widoczny w każdym serwisie, w jakim wypuścisz grę 😱!
Na przykład, gdy będziesz chciał(a) opublikować swój projekt na itch.io w postaci okienka, to nawet jak podasz wymiary okna takie same, jakie przyjmuje gra, to całe okno będzie lekko przesunięte i będzie widać małą "przerwę" w lewym górnym rogu ❌.
Możesz bardzo łatwo usunąć ten problem, dodając następujący kod do pliku CSS 👇:
* {
margin: 0px;
padding: 0px;
}To spowoduje "przyleganie" okna gry do lewego górnego rogu, zgodnie z oczekiwaniami ✅.
ZABEZPIECZ KOD PRZED PUBLICZNYM DOSTĘPEM Z KONSOLI PRZEGLĄDARKI
To kolejna rzecz, której musisz być świadomy(-a), zanim zdecydujesz się na tworzenie gier w języku JavaScript 🔥!
Wstawiając grę na dowolny serwer publiczny, kod źródłowy Twojej gry będzie dostępny dla reszty użytkowników (o ile narzędzie nie "opakowuje" go w dowolne zabezpieczenia) 😳. Możesz bardzo łatwo dostać się do kodu używając konsoli deweloperskiej 🔓. W zależności od przeglądarki będzie to przyjmować inną nazwę 👇:
- Microsoft Edge 👉 Narzędzia programistyczne,
- Google Chrome 👉 Konsola,
- Mozilla Firefox 👉 Narzędzia dla twórców witryn,
- Opera 👉 Programista, Narzędzia dla programistów.
Wszystko będzie odnosiło się do tego samego - konsola, dzięki której możesz podejrzeć kod 😲!
Jeżeli gra nie jest w żaden sposób zabezpieczona, bo np. całość stworzyłeś(-aś) używając jedynie płótna HTML5 (ang. canvas) jako okna gry, będzie można bez większych problemów "poszperać" w katalogach, znaleźć folder z grą i dostać się do skryptów 😐! Gdy zależy Ci na zachowaniu kodu dla siebie, tak można zostać po prostu okradzionym 😔!
Najprostszym sposobem na zminimalizowanie tego ryzyka jest tzw. "minifikacja" kodu (ang. obfuscation) albo "zaciemnianie" kodu 🚀. To jest proces edycji kodu polegający na "ściśnięciu" wszystkich instrukcji do jednego wiersza, co znacznie utrudnia analizę kodu ✔️. Są narzędzia, które to robią i które zajmują się też zmienianiem nazw poszczególnych fragmentów kodu, aby jeszcze bardziej ten kod "obrzydzić" 🙂.
Bez względu na sytuację, warto mimo wszystko zastosować "minifikację" dla wersji publikowanej, gdyż to technicznie zmniejsza liczbę znaków w kodzie 📉. A mniejsza liczba znaków w kodzie, to mniej kilobajtów zajmowanego miejsca 😉!
To wszystko, co chciałem Ci przekazać 😀! Na koniec, ponownie zaproszę Cię do artykułu wprowadzającego do nauki języka JavaScript 😁! Miłej nauki i co najważniejsze, niech Ci ona dostarcza przyjemności ze zdobywanej wiedzy ❤️!