Luke J. Li

Robię grę w pociągi. Na razie wygląda tak: No i ogólnie jest to robione na canvas, co też jest spoko. Na canvasie fajnie się prototypuje. Mam mapę gry, gdzie jest pokazane, gdzie są tory. No i są pociągi, każdy pociąg ma listę torów, po których jedzie (te tory są oddzielne od torów na mapie. Ba, mogą nawet nie istnieć na mapie gry. To tylko informacja dla pociągu, żeby wiedział, po czym jedzie). Dobra, na razie póki co tyle. Jak to rozbuduję, to może wrzucę więcej info albo całą grę.

Ostatnio (od stycznia) mocno wszedłem w temat Three.js. Masę rzeczy się nauczyłem. No i zrobiłem taki edytor . chociaż on jeszcze nie skończony jest. Tylko, że w międzyczasie inne pomysły mnie naszły, więc z jednego projektu w Three.js zrobiłem kilka projektów. Wydzieliłem "silnik" oraz rzeczy specyficzne dla projektu i jakby robię kilka apek na jednym silniku (nawet w jednym repo wszystko jest, tak wygodniej). Poza tym: nauczyłem się operować na wierzchołkach, tworzyć własną geometrię. W ten sposób tworzę teren: https://github.com/hex13/tileterrain/ . Jest on inspirowany terenem, jaki miały gry izometryczne z lat 90 stworzyłem własny shader. I dzięki temu mam inny kolor terenu na różnych wysokościach (na górze śnieg, niżej skały, niżej trawa, a najniżej piasek). A przedtem to shaderów się bałem. poznałem wiele dziwactw Three.js. Niestety jest to biblioteka, która ma wiele rzeczy nieintuicyjnych i trzeba naprawdę uważnie czytać dokumentację + uczyć się na własnych błęda...

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...

The Nature of Code automaty komórkowe, sieci neuronowe, fraktale... dużo do czytania, a także dużo ilustracji. We learn better in 3D Ktoś zrobił stronę, na której są wizualizacje 3D w stylu: jak różne rzeczy działają. Trochę w stylu tej książki "Jak to działa" , którą również polecam. Jonathan Blow: Indie Prototyping twórca gry Braid mówi o tym, jak prototypuje gry Tego się słuchało: \d+  (różne lata) Ośmiominutowe odcinki, które prezentują piosenki z list przebojów RMF FM na przestrzeni lat (od 1989 chyba jest pierwszy odcinek).

The SAM Pattern State-Action-Model, czyli szersze spojrzenie na modne ostatnio wzorce w stylu flux, Redux itp. Chociaż to w zasadzie wychodzi już poza flux. Autor strony nie tyle opisuje to, co już jest, ale pisze co można z tym dalej zrobić, w którą stronę to wg niego powinno pójść.  Dobra strona jeśli chcesz napisać konkurencję dla Reduxa choćby. Albo przynajmniej nabrać szerszej perspektywy Evolve Your Hierarchy o wzorcu Entity-Component-System, przydatnym jeśli chcesz gry robić. Polega on na tym, żeby zamiast tworzyć obiekty jako monolity (Statek, Gracz, Czołg) tworzyć je jako zestawy komponentów.

Think About Code O tym jak jak programiści myślą o kodzie, jak sobie to w wyobraźni układają. Wywiady z programistami. Ciekawe dla mnie bo już wcześniej się zastanawiałem w jaki sposób ja myślę o kodzie, nawet chciałem o tym napisać wpis na blogu. A tutaj proszę bardzo. Rozmowy audio z kilkoma programistami na ten temat. Introduction to A* Wprowadzenie do A* - algorytmu wyszukiwania drogi w grach. Baaaardzo kolorowe to wprowadzenie, dużo rysunków, interaktywne animacje. Żadne tam nudy. <XRay /> - React CSS Layout Debugger proste narządzonko, które wyświetla grida na Reactowych komponentach (czy raczej pod nimi). Wejdźcie i kliknijcie "Enable" i patrzcie co się stanie.

Od teraz co niedzielę będzie się pojawiał zrzut ciekawych linków. O tym, jak zrobić izometryczny widok w grze: Creating Isometric Worlds: A Primer for Game Developers O tym jak działa React od środka: Under the hood: ReactJS Gra w alchemię - masz 4 podstawowe żywioły i z nich robisz kolejne przedmioty, poprzez deszcz aż po samochód czy wiewiórkę: Little Alchemy Jeszcze jeden powód, dla którego nie powinno się zaśmiecać strony popupami i głupimi animacjami: Accessibility according to actual people with disabilities

Nie tylko robię własną wtyczkę do edytora , ale również od jakiegoś czasu zacząłem robić swój własny edytor. Póki co będzie to edytor gier. A później się zobaczy. Na razie to co widać, to edytor poziomów - wyklikujesz sobie, gdzie mają być położone które elementy. W ten sposób możesz zbudować murek, postawić samochód w określonym miejscu itp. Dzisiaj też zacząłem robić coś w rodzaju inspektora obiektów. Po kliknięciu obiektu masz po lewej stronie jego właściwości (np. współrzędne położenia). Niektóre z tych właściwości można zmieniać (pewnie można będzie zmieniać wszystkie, no ale nie od razu Kraków zbudowano). Jak widzicie, inspektor pokazuje również kod źródłowy funkcji odpowiedzialnych za zachowania obiektów: Tutaj mamy funkcję onUpdate, która definiuje to, co obiekt robi przy każdej aktualizacji (która następuje około 60 razy na sekundę). W innych obiektach mogą być różne inne funkcje, które będą się odpalać przy określonym zdarzeniu (np. onClick = co obiekt ma robić ja...