Luke J. Li

Projekt, o którym pisałem ostatnio, musi trochę poczekać, bo w międzyczasie wpadłem na pomysł zrobienia gry w Three.js . Wzięło się to z tego, że ostatnio prowadzę rozmowy w sprawie współpracy z firmą, która robi projekt w WebGL i chciałem sobie przypomnieć temat robienia grafiki 3D w JavaScript. I z rozpędu zacząłem grę robić. O grze napiszę później, jednak teraz trochę o samej bibliotece. Ale nie będzie to tutorial, tylko rzut okiem z lotu ptaka. Jaki problem rozwiązuje ta biblioteka? Czy jeśli jest natywne api do robienia 3D w przeglądarce (WebGL), to czy warto w ogóle osobnej biblioteki używać? Czy to taki kaprys, podobny do używania jQuery w 2019 roku? Przecież można pisać w WebGL. Wyrzućmy biblioteki w kosmos! Cóż, z używaniem suchego WebGLa jest taki problem, że tam proste rzeczy robi się w złożony niskopoziomowy sposób. Zróbcie sobie jakiś tutorial, to zobaczycie, że nawet, żeby wyrenderować obracającą się kostkę, trzeba się namęczyć. Więc o ile warto poznać suchego We...

Ogarniam ostatnio Three.js . Piekielnie fajną bibliotekę do natywnej grafiki 3D w przeglądarce (wewnętrznie biblioteka korzysta z WebGL). W dość prosty sposób można stworzyć obiekt sceny 3D, dodać do niego obiekty, światła, kamerę, potem jakieś animacje. Tu jest link do tego, co można w tym zrobić: Three.js - przykłady (wymagają przeglądarki obsługującej WebGL ). Wietrzę w tym dużą przyszłość. Udało mi się już zaimportować prosty model z Blendera - jest to tego specjalna wtyczka: wtyczka do eksportu/importu Blender-Three.js niestety jeszcze nie udało mi się zaimportować do końca materiałów (ale może dlatego, że samego Blendera nie ogarniam zbyt dobrze, i nie wiem czy przypisałem dobrze materiały i tekstury w Blenderze). No ale że Three.js to jedynie silnik graficzny, renderer - to można robiąc swoją aplikację podpiąć pod to różne inne biblioteki - ja podpiąłem zewnętrzny silnik fizyki Chipmunk, o którym pisałem poprzednio (z tym, że on nie jest do 3D akurat, tylko do 2D). Wi...

Postanowiłem zamiast używać Phasera, skorzystać z Pixi, biblioteki graficznej na której Phaser się w duuużej mierze opiera. Czym jest Pixi ? To po prostu szybki silnik renderujący grafikę 2D w przeglądarce, korzystający z WebGL (jeśli jest dostępny), w ostateczności ze zwykłego Canvasa. Wokół tej biblioteki Phaser dodaje swoje dodatkowe funkcje. Tylko tak - "silnik renderujący" - wydaje się, że to coś strasznie niskopoziomowego? No właśnie nie. API jest może jeszcze prostsze od Phasera. W zasadzie super proste, jeśli miałeś do czynienia kiedyś z programowaniem pod Flasha - bo w Pixi większość funkcji i obiektów opiera się na klasach z ActionScriptu - mamy obiekt Stage, Sprite etc. Mamy hierarchię obiektów na scenie, filtry, zdarzenia myszy/dotyku etc. Pomyślałem więc, że jeśli i tak mi Phaser nie do końca odpowiada (i czuję, że pisząc w Phaserze po prostu musiałbym jednak dodatkowy metaframework zrobić do niego), to może wyjmę z niego samą bibliotekę, na której się on ...

Powracam do Phasera, próbuję zrobić w nim teraz grę. Ale tak - API niby proste, ale i tak trzeba napisać trochę kodu inicjalizującego, zanim cokolwiek się pokaże na ekranie, co jest upierdliwe. Niby jest to prosty kod i ogranicza się do wywoływania metod w stylu game.load.image(...), game.add.sprite(....) etc. ale i tak, jeśli muszę ładować ileś sprajtów, to ten kod staje się brzydki i w stylu copy-pastego. Trochę bez sensu, prawda (a tak jest w tutorialach, więc tak się chyba tam robi)? Dlatego więc zrobiłem sobie własny loader do sprajtów: i zamiast kodować ręcznie game.add.sprite, to piszę sobie JSONa, który zawiera wszystkie sprajty i definicje: Prawda, że wygląda dość prosto? ;) No więc tym sposobem mam w zasadzie całą planszę w postaci struktury danych w pliku JSON. Strukturę tę później ładuję do skryptu i w pętli przechodzę przez wszystkie obiekty i obrazki i robię automatyczne ich ładowanie. Co mi to daje? mniej bezsensownego pisania. Jak chcę, żeby jednost...

Kolejny JavaScriptowy framework, tym razem Phaser. Zaczynam się go uczyć. Z tego co widziałem, to API urzeka prostotą, chociaż jeszcze wciąż się zmienia niestety (rozwojowy framework :( Przykłady: http://examples.phaser.io/ Dokumentacja: http://docs.phaser.io/ Kod źródłowy: https://github.com/photonstorm/phaser Ogólne linki: http://gametest.mobi/phaser/docs/Phaser.html

Załadowaliśmy grafikę, teraz możemy ją wyświetlać wtedy, kiedy tylko chcemy. Jednak grafika to tylko wygląd, a potrzebna jest pewna logika gry. Nie chcemy mieć statycznych obrazków, a raczej obiekty, które coś robią, ruszają się w jakiś sposób, odpowiadają na zdarzenia. Dlatego w tym kroku stworzymy tzw. pętlę gry (game loop), czyli odpalaną 60 razy na sekundę funkcję JavaScript, która zajmie się poruszaniem i wyświetlaniem Jednostek . Jednostką (ang. Entity) zaś nazywamy tutaj każdy animowany i biorący w rozgrywce obiekt gry - w tym wypadku będzie to gracz (rakieta) oraz statki ufo. Każda taka jednostka będzie osobnym obiektem i będzie miała metodę draw() , metodę move() oraz parę właściwości, takie jak pozycja na ekranie (x,y) oraz prędkość pozioma i pionowa (vx, vy). Ponieważ w JavaScript nie ma klas, będziemy działać na tzw. prototypach. Utworzymy teraz prototyp, z którego będziemy tworzyć jednostki. Nazwiemy go EntityPrototype i zaopatrzymy go w metody draw() i move()...

W poprzedniej części stworzyliśmy podstawową strukturę plików potrzebnych do naszej gry. W tej części zaczniemy już programować naprawdę, tworząc kod potrzebny do załadowania obrazków. Następnie (w dalszych częściach tutorialu) skorzystamy z obiektu <canvas> , który będzie naszym takim "płótnem" do rysowania grafiki. Wtedy to właśnie będziemy mogli załadowane uprzednio obrazki wyświetlić na ekranie komputera (za pomocą funkcji drawImage ). Teraz jednak wróćmy do ładowania obrazków. Uwaga: Jeśli jesteś trochę bardziej zaawansowanym użytkownikiem i nieobcy ci jest koncept image preloadera, proponuję, żebyś przeskoczył od razu do kodu , zamiast czytać łopatologiczne, i być może nudne, wprowadzenie teoretyczne ;) W idealnym świecie jeśli mielibyśmy do załadowania 10 plików graficznych z Internetu, załadowalibyśmy najpierw pierwszy plik z listy, później drugi, później trzeci, aż w końcu przystąpiliśmy do załadowania dziesiątego pliku. Niestety nie żyjemy w idealn...

W tym tutorialu utworzymy prostą grę w JavaScript, z użyciem elementu Canvas. Gra będzie polegać na kosmicznym locie i strzelaniu w statki przeciwnika . Mało oryginalne, ale od czegoś trzeba zaczać, prawda? Klasyczne pomysły są najlepsze do nauki. A więc zaczynamy. Będziemy potrzebować: edytora tekstu z kolorowaniem składni (np. Notepad++, Sublime Text oraz wiele innych) grafiki (weźmiemy darmową grafikę z Internetu) podstawowej znajomości języka JavaScript, oraz języków HTML i CSS. Krok 0: Przygotowania Załóż nowy folder i nazwij go spaceshooter . Wejdź do folderu, utwórz w nim 3 pliki i nazwij je: index.html - tu będzie podstawowa struktura strony w HTML index.js - tu będzie nasz kod JavaScript index.css - tu będą definicje stylów CSS Do pliku index.html wklej ten kod: Pozostałe pliki (index.js, index.css) pozostaw na razie puste. grafika będziemy potrzebować grafiki statku gracza: player.png oraz grafiki statków wroga: ufo.png Są to przeskalowane grafiki ze...