Tworzenie prostej responsywnej gry w javascript

Darmowy edytor plików SVG Już skończył mi się darmowy okres próbny Affinity Designer. Pomimo jego pewnych braków, pracowało mi się na nim całkiem wygodnie. Tak już się przyzwyczaiłem Affinity, że po powrocie do Inkscape, menu tutaj wydaje mi się toporne i brzydkie. Nawet po liftingu. Właśnie miałem tworzyć nową grafikę wektorową, gdy niejaki Sruuu , ogłosił na facebooku, że jest coś takiego jak  Gravit Designer. Ciekawy, nowoczesny, darmowy i nieporęczny Pierwsze co rzuca się w oczy po uruchomieniu programu to kolory pastelowe. Ikonki też wyglądają dobrze (wiem, że kwestia gustu). Kółka do próbkowania kolorów podobne do tych w Affinity. Wygląda to całkiem oryginalnie i nowocześnie. Następnie co mnie zaskoczyło to ustawienie paneli. Do tej poru używałem programów, które mają pasek narzędziowy po lewej stronie, a warstwy po prawej. Tutaj jest trochę namieszane. Narzędzia są w górnej belce, a warstwy w lewym panelu. Trochę mi zajęło zapamiętanie, co jest gdzie. Muszę wam się p

Biblioteki JS do manipulacji SVG Na planszy robi się interesująco. Słońce rusza promieniami, chmury latają po niebie, mysz hasa sobie po łące. Parę postaci uciekło z gry, zostawiając puste miejsce. To efekt przechodzenia z tagu img na object i zastępowanie JPG plikami SVG. Uparłem się, że do animacji promieni słonecznych użyję tzw. morfingu, czyli płynnego przejścia jednego kształtu w inny. Niestety, okazało się, że poznana biblioteka GSAP GreenSock , nie oferuje tej opcji za darmo. Co prawda mogłem to rozwiązać trochę inaczej, ale chciałem wypróbować tę metodę. I co poradzisz? Na takiego nic nie poradzisz, uparł się i nie odpuści. Natrafiłem w sieci na Kute.js , lekką bibliotekę JS do animacji. Komplet zminimalizowanych bibliotek waży 30KB. Przyjrzyjmy się, co potrafi. Kute.js Dlaczego Kute.js , a nie Snap.svg ? Snap jest cięższy. Podstawowy, zminimalizowany plik waży ok 80KB. Kute ma zbliżoną do GSAP składnie, łatwiej i szybciej mi go przyswoić i w sumie to zadecydowało. Pr

Pierwsze próby animacji SVG W poprzednim poście przedstawiłem wam tło do gry. Może wrzucę rysunek jeszcze raz. Całość jest zrobiona wektorowo i ustawiona w CSS jako background body. To teraz dodaję animację chmur i słońca. Chwilę googlowania i... zaraz, zaraz, jak to nie można animować elementy SVG w background? Oczywiście, że nie! Przecież miałem już podobny problem. Opowiem Wam o tym. Nie wiem, czy wam się już chwaliłem, ale jedna z moich postaci już rusza ręką. Macha sobie radośnie, ale żeby to robiła, to ja straciłem dla niej dużo czasu. Pewnie jak większość wie, plik SVG może składać się z figur geometrycznych, ścieżek, które mogą posiadać  swój id. Można też dodać im klasy. Po umieszczeniu SVG w HTML, można nim manipulować CSS lub JavaScriptem, podobnie jak np. divem, img, tekstem. A przynajmniej tak mi się wydawało. W pierwszych podejściach do animacji z pomocą GSAP, ustawiłem moją postać w tagu img. Na nic się nie zdała próba animacji jakiejkolwiek części ciała

Wektorowe tło Dziś krótki wpis, ale przedstawiający wynik paru godzin dłubania w Affinity Designer. Wszystkie rysunki wykonałem sam. Nie oznacza to, że nie wzorowałem się na rysunkach doświadczonych grafików, ale nie było żadnego kopiuj, wklej. Trochę czasu też straciłem na oglądaniu YouTube z tutorialami.    Elementy nieba: chmury i słońce, są wzorowane na rysunkach mojej córki.   Myślę, że jak na amatora to nie mam czego się wstydzić.  W tym tygodniu również testowałem animację ręki postaci. Po wielu próbach w końcu udało mi się. Moje zmagania opiszę w osobnym wpisie. Na przyszły tydzień szykuję wprowadzenie animacji słońca i chmur w tle oraz dodanie nowych graficznych elementów. Będą do miejsca do chowania się postaci. Na razie nie mam pomysłu, co to może być na łące? Może stóg siana, traktor i ... zobaczymy. Zapytam córki.

Pierwsze wrażenia Postanowiłem przetestować młody program Affinity Designer do stworzenia grafiki wektorowej. W porównaniu do jego wielkich rywali CorelDRAW oraz Adobe Illustrator jest znacznie tańszy. Od CorelDRAW ponad 10 razy, a porównując z ceną Illustratora, to koszt 2 miesięcy abonamentu. Ja jednak jeszcze nie kupiłem go i wykorzystuję darmowy okres próbny 10 dni. Nie będę porównywał możliwości pomiędzy wymienionymi programami, ponieważ ich nie używam, ale korzystam z innego, darmowego Inkscape. Na pierwszy rzut oka, Affinity ma nowocześniejszy i schludny wygląd. Gdy korzystałeś z podobnych programów do tworzenia grafiki wektorowej, przesiadka i zaaklimatyzowanie zajmie Ci tylko chwilę. Jednak są pewne niuanse. Mnie chwilę zajęło szukanie ikonki do usunięcia zbędnego węzła. Po chwili szukania w googlach okazało się, że ikony nie ma, a węzły usuwa się klawiszem delete. Inkscape zawiera więcej opcji. W Affinity nie można ścieżkom ustawić nazw klas css. To dla mnie

It's Alive! Mogę powiedzieć, że silnik już działa, ale nie mogę powiedzieć, że jest idealnie. Taki trochę frankenstein z niego (a raczej twór frankensteina) . Działanie możecie sprawdzić na  https://guydiamond.github.io/where_is_my_letter/ . Jeżeli znajdziecie jakieś błędy w działaniu, to proszę o info. Nie przykładajcie uwagi do grafiki. Na tym etapie chcę się odwrócić od silnika i działać z grafiką. Czy to oznacza, że tak będzie wyglądał kod końcowy tej gry?   Nie. Jeżeli chciałbym go dopieścić, to obawiam się, że nie zdążyłbym do końca konkursu.  Przede wszystkim poprawy wymaga mieszanie css do logiki. Sprawdzanie, czy obiekt jest kliknięty czy nie za pomocą klasy, to w moim odczuciu nie najlepszy pomysł. Lepszym wydaje się stworzenie obiektów postaci i w nich umieszczenie właściwości za to odpowiadających.  Zastanawia mnie też umiejscowienie divów z postaciami i miejscami do ukrycia w HTMLu. Gdy będę chciał zrobić w przyszłości kilka nowych leveli z większą ilością po

Uruchomienie animacji. Moja obietnica z poprzedniego tygodnia, że oddam dwa wpisy wcześniej, a nie na ostatnią chwilę, właśnie staje się niespełnioną. Jest nawet gorzej. Nie pamiętam, kiedy oddawałem dwa wpisy w niedzielę. Obserwując inne wpisy na blogach mam wrażenie, że część uczestników konkursu już odpuściła. Część się tłumaczy nawałem pracy, przesileniem wiosennym, załamaniem nerwowym i takie tam. Ja taki nie będę i otwarcie przyznaję się że mi się nie chciało... To żart. Dlatego dodaje dopiero ten wpis, bo uczyłem się GSAP, miałem trzy problemy, z którymi nie mogłem sobie poradzić, a o których za chwilę opowiem oraz oczywiście brak czasu. Trochę dodałem tagów do HTML, przez co skróciłem kod CSS. Powiększył się również plik js, a postacie nareszcie się ruszają za pomocą GSAP. Możecie sprawdzić:  https://guydiamond.github.io/where_is_my_letter/ . Pierwszym problemem objawił mi się na początku tygodnia był związany z css. Każdy div odpowiadający za miejsce do chowania się pos

GSAP, ależ to dobre jest   Im dłużej siedzę nad tą grą, tym częściej jestem miło zaskakiwany. Chociaż nie od razu jest przyjemnie, zwłaszcza jak się ma bardziej skomplikowane problemy do rozwiązania (jak dla mnie). Do tej pory nie stosowałem żadnych frameworków i prostą animację chciałem zrobić w CSS. W miarę czytania o GASP (GreenSock Animation Platform) i jego testowania, zrezygnowałem z jakiejkolwiek animacji w CSS. Czym jest GSAP? Jest to zbiór narzędzi do tworzenia animacji w JS. https://greensock.com/gsap Obsługuje podstawowe funkcje animacji, takich jak ruch w dowolnym kierunku, czas trwania, zmiana koloru, przeźroczystości, skalowania, obracania obiektu. Na tym jednak się nie kończy. Można manipulować opóźnieniem animacji, krzywą prędkości https://greensock.com/ease-visualizer ,wykonywać przekształcenia 3D. Animacje mogą nachodzić na siebie lub występować jedna po drugiej. Jest też sporo wtyczek z zaawansowanymi funkcjami. Użycie Wystarczy wkleić link do pli

Losowanie liter do gry Schemat i kod programu bardzo podobny do losowania postaci z poprzedniego posta. W modelu różni się tylko losowaniem z łańcucha znaków, poprzednio było z zakresu liczb. W trakcie pisania tego bloga wpadłem na pomysł jak pozbyć się jednej właściwości z modelu: numLetters . Zamiast ustalać na sztywno ile ma być liter, metoda sama sobie to obliczy z ilości stworków na planszy: numCreatures. Na każdą parę jedna litera, a to daje numCreatures/2. Przy tworzeniu nowych poziomów gry, z większą ilością postaci, już jedna właściwość mniej do zmiany. Mała rzecz a cieszy. Widok dostaje tablicę niepowtarzających się dwóch liter. Jedna na parę stworków. Pary stworków dostają po kolei wylosowane litery np. dwa pierwsze "k", druga para "a", następne "p" itd. CSS już dba o to, aby pierwsza była wielka litera. Skoro już wspomniałem o CSS, chciałbym napisać parę słów więcej. Moim celem w tym konkursie nie jest zwycięstwo i nawet nie bycie