Tag: Canvas

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

JS Platformer – dalszy ciąg prototypowania

W ostatnim poście przedstawiłem dwa prototypy tworzonej przeze mnie platformówki. Różniły się one głównie sposobem sterowania. W jednym z nich postać kontroluje się tylko klawiaturą, w drugim dochodzi myszką.

Szczerze mówią byłem prawie zdecydowany na to, żeby gra powstawała na podstawie pierwszego prototypu. Jednak wspomniany wpis spotkał się z dużym odzewem ze strony czytelników. Pod postem pojawiła się zawrotna ilość komentarzy (aż trzy, rekord tego bloga)! I według was lepszy jest drugi prototyp. I co teraz?

Gra platformowa w javascript Czytaj dalej JS Platformer – dalszy ciąg prototypowania

JSetpack – gra co miesiąc: luty – Kompletna gra.

Z przedstawieniem kompletnej gry miesiąca, musiałem czekać na ostatnią chwilę. Inaczej być nie mogło… Na szczęście luty w tym roku dłuższy niż zwykle, akurat żebym ze wszystkim zdążył 🙂

Mój klon starusieńkiego Jetapaca – Jsetpack jest już gotowy.

Programowanie gier w JavaScript Czytaj dalej JSetpack – gra co miesiąc: luty – Kompletna gra.

(WIP) JSetpac – gra co miesiąc: luty – aktualizacja

Pracę nad grą lutego trwają w najlepsze. Doszło sporo nowości 🙂 . W aktualnej wersji, gra tworzy dość zgraną całość, dlatego postanowiłem, że czas na wpis.

Gra już trochę bardziej przypomina oryginał niż ostatnio. Wiele rzeczy robię z pamięci, więc nie gwarantuje, że wszystko będzie działać identycznie jak w pierwotnym JetPacu.

JavaScript Noob Tworzenie Gier Czytaj dalej (WIP) JSetpac – gra co miesiąc: luty – aktualizacja

(WIP) JSetpac – gra co miesiąc: luty – pierwsza odsłona

Czas na kolejny wpis z serii gra co miesiąc. Tym razem tworzę JavaScriptowy remake starej gry Jetpac. Kiedys trochę grałem w tę grę na wysłużonym komputerze ZX Spectrum i bardzo mi się podobała. Szczerze mówiąc od dawna chciałem ją odtworzyć. W końcu mam dość umiejętności aby tego dokonać 🙂

W grze mam do czynienia z podstawowymi prawami fizyki. Na postać gracza działa grawitacja i jeżeli żadna siła nie będzie unosić go w górę, zacznie opadać. Na szczęście, wyposażony jest w tytułowy jetpack, czyli plecak odrzutowy 🙂 Dzięki temu może się wznieść i wylądować na platformach znajdujących się w powietrzu (nie, na platformy grawitacja nie działa, cicho!).

Tworzenie gier w JavaScripcie Czytaj dalej (WIP) JSetpac – gra co miesiąc: luty – pierwsza odsłona

Tworzenie gier w JavaScript – obiekty blokujące ruch

W dzisiejszym poście opiszę kolejną technikę przydatną podczas tworzenia gier 2d. Chodzi o blokowanie ruchu jednych obiektów innymi obiektami.

Jest to tak naprawdę wariacja kolizji z paroma dodatkowymi haczykami. Tym razem jako przykładu, znów użyję mojego psa 🙂 .

obiekty blokujące ruch Czytaj dalej Tworzenie gier w JavaScript – obiekty blokujące ruch

(WIP) Wiedźma – gra co miesiąc: styczeń – update 2

Nic nie daje takiego natchnienia do pracy jak zbliżający się termin 🙂 Do końca miesiąca został tylko tydzień a styczbiowa gra nie jest jeszcze gotowa. Na szczęście nie zostało zbyt wiele pracy. W tej aktualizacji dodałem sporo nowości.

W lesie pojawiają się teraz potwory, które przeszkadzają wiedźmie w zbieraniu ziół. Drugą rzeczą mając na celu utrudnić czarownicy życie, są drzewa i kamienie, które blokują jej lot i muszą być omijane

javascript noob gra co miesiąc styczeń Czytaj dalej (WIP) Wiedźma – gra co miesiąc: styczeń – update 2

(WIP) Wiedźma – gra co miesiąc: styczeń – update 1

Pora na pierwsza aktualizację projektu „Wiedźma – gra co miesiąc”. Spędziłem nad projektem trochę czasu i muszę przyznać, że gra zaczyna nabierać kształtów. Prawie wszystkie zmiany nastąpiły w głównym stanie gry. Jedyna zmiana poza nim to nowy stan, obsługujący sytuacje, w której gracz ukończy grę z pozytywnym wynikiem. Aby go osiągnąć trzeba sprawić żeby czarownica zebrała 4 magiczne zioła i wróciła z nimi do chatki.

Zioła można znaleźć w lesie. Aby je zioło, czarownica musi po prostu na nie nalecieć. Dodałem też system powiadomień. Kiedy gracz wykona jakąś akcje, która wpłynie na stan gry, na ekranie pojawi się tekst informujący go o tym. Na przykład gdy czarownica wleci do chatki bez wszystkich ziół, pojawi się odpowiednie powiadomienie. Ostatnią nowością, jest to, że wiedźma może teraz ciskać magicznymi pociskami. Aby ją do tego zmusić, wystarczy że gracz naciśnie spację.

Wiedźma - gra co miesiąc Czytaj dalej (WIP) Wiedźma – gra co miesiąc: styczeń – update 1

(WIP) Wiedźma – gra co miesiąc: styczeń

Obiecałem, że w 2016 roku na blogu będę co miesiąc prezentował jedną, nową grę. Minęły już daw tygodnie stycznia i ciągle żadnych wieści w temacie. Do dziś 🙂 W tym poście przedstawiam pierwsze informacje o styczniowej grze.

W tym miesiącu stworzę grę, w której gracz będzie mógł wcielić się w postać wiedźmy, poszukującej składników do potężnego zaklęcia. Nie będę póki co zdradzał szczegółów fabuły. Skupie się na tym co do tej pory przygotowałem, czyli nowy silnik gry.

gra co miesiąc: styczeń Czytaj dalej (WIP) Wiedźma – gra co miesiąc: styczeń

Javascript wykrywanie kolizji w grach – część trzecia

W poprzednich wpisach pokazywałem jak wykrywać kolizje pomiędzy obiektami kwadratowymi i obiektami okrągłymi. Te metody wystarczą na wykrycie prawie każdej kolizji w grach dwu wymiarowych. Nawet jeżeli kształty nie do końca będą prostokątne lub okrągłe, zawsze można je mniej więcej opisać kwadratem lub kołem. Gra na pewno będzie sprawiała wrażenie realistycznej 🙂

Póki co pokazywałem jedynie przypadki, w których w grze były tylko dwa obiekty. W tym poście opiszę jak efektywnie wykrywać kolizje pomiędzy wieloma obiektami.

Javascript wykrywanie kolizji Czytaj dalej Javascript wykrywanie kolizji w grach – część trzecia