Tworzenie gier w JavaScript – Zaawansowany Game Loop

Prawie rok temu wrzuciłem tu posta o tworzeniu game loop’ów w grach JSowych. Bardzo dużo zmieniło się od tego czasu. Przede wszystkim nabrałem doświadczenia i nauczyłem się tego i owego. Innymi słowy, nie jestem już aż takim noobem jak kiedyś 🙂 .

Właśnie dlatego dziś wracam do tematu. Teraz, kiedy stworzyłem już kilka prostych gier, mogę powiedzieć co nieco w temacie 🙂 . W tym poście przedstawię bardziej zaawansowaną implementację pętli gry. Przyda się ona nie tylko w grach ale i we wszelkich animacjach i symulacjach.

Tworzenie gier w Javascript Game Loop Czytaj dalej Tworzenie gier w JavaScript – Zaawansowany Game Loop

GCM – Październik: Necropolis – Phaser + TypeScript. Kontrolowanie czasu.

Czas na aktualizację mojej październikowego projektu. Tym razem bohater gry otrzymał dużą moc, która pozwoli mu uniknąć wielu tarapatów. Dzięki magicznemu amuletowi jest on w stanie spowolnić czas. Wystarczy, że gracz naciśnie spacje 🙂 Ponowne naciśnięcie spacji spowoduje, że czas wróci do normalnego biegu.

Dzięki możliwości kontrolowania czasu, gracz otrzyma możliwość unikania przeciwników i bezpiecznego przejścia pomiędzy pułapkami. Oczywiście korzystanie z mocy będzie w przyszłości ograniczone, ale póki co skupiłem się na dodanie podstaw mechanizmu.

tworzenie gier typescript Czytaj dalej GCM – Październik: Necropolis – Phaser + TypeScript. Kontrolowanie czasu.

TypeScript – pierwsze kroki. Przestrzenie nazw w TypeScript.

Gdy pisałem moją wrześniową grę co miesiąc, nie znałem jeszcze dobrego sposobu na modularyzację kodu w TypeScript. Gra nie była specjalnie duża ale i tak brak modułów spowodował, że kod był cięższy do czytania i utrzymania.

Dziś przedstawię rozwiązanie tego problemu. Będą to podstawowych technik wykorzystania TSowych modułów. Na początek opiszę idealnie nadające się do dzielenia kodu na utrzymywalne i czytelne fragmenty – przestrzenie nazw czyli znane wszystkim użytkownikom Javy, C++ czy C#, namespace`y.

Przestrzenie nazw w TypeScript Czytaj dalej TypeScript – pierwsze kroki. Przestrzenie nazw w TypeScript.

GCM – Październik: Necropolis – Phaser + TypeScript. Pierwszy prototyp.

W ostatnim poście przedstawiłem podstawowy setup mojej październikowej gry. Tym razem gracz wcieli się w rolę brawurowego awanturnika, który w poszukiwaniu potęgi i chwały zapuścił się w odmęty przeklętych podziemi leżących na granicy świata żywych i umarłych. Niestety miejsce to okazało się niebezpieczną pułapką. Jeżeli nie uda mu się uciec na czas, zostanie w nim uwięziony na zawsze 🙂 .

Całkiem nieźle znam już Phasera, jednak ponieważ używam TypeScriptu zamiast zwykłego JSa, pewne konstrukcje w grze będą wyglądać trochę inaczej. Na szczęście różnic jest niewiele, i są one raczej na plus. W dzisiejszym poście przedstawię implementację podstawowych elementów gry w nowym środowisku, dzięki temu przejście na TSa powinno być bezbolesne.

Jak programowac Phaser TypeScript Czytaj dalej GCM – Październik: Necropolis – Phaser + TypeScript. Pierwszy prototyp.

GCM – Październik: Necropolis – Phaser + TypeScript. Podstawowy setup projektu.

Do stworzenia wrześniowej gry eksperymentalnie wykorzystałem język TypeScript. Bardzo podoba mi się konwencja typowanego JavaScriptu na sterydach. Jednak brakowało mi frameworka Phaser, który lubię i dobrze znam.

Dlatego w tym miesiącu, do stworzenia prostej gry, postanowiłem wykorzystać obie te technologie. Październikowa gra powstanie we frameworku Phaser i napisana zostanie w TypeScript. Zdradzę wam od razu, że to połączenie spisuje się doskonale.

Gra napisana w Phaser TypeScript Czytaj dalej GCM – Październik: Necropolis – Phaser + TypeScript. Podstawowy setup projektu.

Podstawowe przekształcenia w elemencie Canvas

Element canvas nadaje się świetnie do tworzenia gier (oraz różnego rodzaju animacji) w środowisku przeglądarki. Nie jest bez wad ale zdecydowanie to najlepszy wybór z dostępnych opcji. API obsługujące canvas jest bardzo proste w użyciu, wystarczy wyznaczyć współrzędne x oraz y obiektu i wyrysować go stosując odpowiednie metody. Takie podejście jest idealne, jednak nie kompletne.

Manipulując tylko tymi współrzędnymi szybko natrafimy na pewne ograniczenia. Na przykład gdy chcemy obrócić element lub go przeskalować. Obliczanie nowych współrzędnych i wielkości może stać się bardzo mozolne. Na szczęście mamy przekształcenia.

JavaScript Noob Canvas Przeksztalcenia Czytaj dalej Podstawowe przekształcenia w elemencie Canvas

TypeScript – pierwsze kroki. Ograniczanie typów generycznych.

W ostatnich dwóch postach z serii, przedstawiłem działanie typów generycznych w TypeScript. Zagadnienie to powinno być już w miarę jasne a korzyści płynące z korzystania z generyków oczywiste dla każdego.

Jednak jeżeliby się nad tym chwilę zastanowić, szybko dojdziemy do wniosku, że pozwalanie metodom lub klasom na korzystanie z dowolnych rodzajów typów może czasem sprawiać problemy. Dobrze byłoby czasem dopuszczać tylko niektóre typy, a inne nie. Dziś przedstawię rozwiązanie dla tego problemu

Podstawy programowania typescript Czytaj dalej TypeScript – pierwsze kroki. Ograniczanie typów generycznych.

GCM – Wrzesień: Gra w TypeScript. Skończona Gra.

Dziś przedstawiam ostateczną wersję mojej pierwszej napisanej w TypeScripcie gry. Szczerze mówiąc ani nie jest to moja najlepsza gra, ani nie jest to wybitny program TypeScriptowy. No ale tak zazwyczaj wyglądają początki, nic na to nie poradzę 🙂 .

Kolejne programy będą na pewno coraz lepsze. Póki co jestem zadowolony, że udało mi się napisać działającą grę bez pomocy żadnych frameworków, nawet jeżeli z założenia jest bardzo prosta.

TypeScript Komplena Gra Czytaj dalej GCM – Wrzesień: Gra w TypeScript. Skończona Gra.

Vue.js – wprowadzenie. Pierwsza aplikacja – Wartości obliczane.

Praca z aplikacją pisaną w Vue sprawia mi naprawdę dużą przyjemność. Jednak powoli zaczyna mi brakować pomysłów na to jak bardziej ją rozwijać (a zarazem uczyć się nowych rzeczy o bibliotece.) Trudno najwyżej stworzę nową, bardziej oryginalną apkę 😉

Tym razem udało mi się jeszcze dodać do mojej Todo Listy coś konkretnego – wartości obliczane (ang. computed values). Są one bardzo przydatnym elemenemt Vue. Szczerze mówiąc nie przychodzi mi do głowy podobne rozwiązanie z innych frameworków, które można by porównać do wartości oblicznaych.

Aplikacja Vue js Czytaj dalej Vue.js – wprowadzenie. Pierwsza aplikacja – Wartości obliczane.

Vue.js – wprowadzenie. Pierwsza aplikacja – serwer i obsługa AJAXa.

Tym razem rozwinę moją aplikację Vue o backend. Dzisiejszy post będzie dotyczył Vue tylko połowicznie. Trochę miejsca poświęcę na pobieżne opisanie tego jak napisałem obsługę apki od strony serwera.

Do stworzenia serwera użyłem bardzo popularnego frameworka Express. To znaczy, że wszystko zostaje w JavaScripcie. Natomiast po stronie front-endu dodałem obsługę zapytań aplikacji Vue do serwera, więc będzie ciekawie 🙂

Express podstawy tworzenia serwera Czytaj dalej Vue.js – wprowadzenie. Pierwsza aplikacja – serwer i obsługa AJAXa.