Przejdź do głównej zawartości

Środowisko pracy

Edytor kodu

Jestem spóźniony z oddaniem wpisu o dwa dni, ale postaram się nadrobić zaległości.
Moja gra zbudowana w HTML5, CSS3 i JS, będzie wyświetlana w oknie przeglądarki, dlatego będę potrzebował edytor ukierunkowany na front-end.

Do tej pory korzystałem z edytora NetBeans, ale zapragnąłem być bardziej na czasie i postanowiłem wybrać jeden z edytorów na "fali". Padło na Brackets oraz na Atom.
Po zobaczeniu kilku tutoriali  i przeczytaniu paru postów. Wybrałem Atom.
Brackets bardzo przypominał mi Developer Tools w przeglądarkach, ale oferuje mniej opcji od niego np. po najechaniu na element na stronie, przenosi odpowiedniego miejsca w kodzie (podobno już to implementują). Brackets kusił podglądem na żywo tworzonej strony, ale później dowiedziałem się, że Atom także posiada taką wtyczkę.
Pobrałem wtyczki do edytora, wzorując się na bardziej doświadczonym użytkowniku, uczestniczącym w "Daj się poznać 2017":
10 najbardziej przydatnych wtyczek do atoma.

Dodatkowo dodałem wtyczkę Live SVG preview, która może okazać się przydatna.

Edytor SVG


Tutaj już nie będę nic zmieniał.  Jednak chcę zaszaleć i przetestować w miarę nowy i popularny program Affinity Designer. Wersja testowa ma 10 dni. Mam nadzieję, że uda mi się coś w tym czasie na nim stworzyć. Kto wie, może po tym czasie zrobię sobie prezent i go kupię. Jest o wiele tańszy od Corela i programów Adobe.
Po upływie czasu trwania trialu, do tworzenia rysunków wektorowych użyję już poznanego przeze mnie darmowego Inkscape.  

Animacja 

Początkowo wpadł mi w oko program Synfig Studio, który operuje na grafice wektorowej i jest darmowy. Po przemyśleniu, jednak chciałbym operować na CSS i JavaScript 

Animację na obiektach SVG, można stosować na klika sposobów:
  • poprzez css: keyframes, transform
  • w czystym js lub przy pomocy framworków Snap, Bonais lub GASP
  • bezpośrednio w kodzie SVG tz. SMIL, który niestety jest martwą technologią: Zamienniki SMIL
Przykłady użycia animacji

 Do prostych animacji będę stosował CSS, do bardziej skomplikowanych GASP lub Snap.

Jeżeli ktoś z czytelników ma lepsze propozycję dotyczącą moich wyborów, to proszę o opinię.  



Etykiety:

Komentarze

Prześlij komentarz

Popularne posty z tego bloga

Program do organizacji pracy

Nawiązując do poprzedniego postu, w którym przedstawiłem plan działania, chciałbym wam pokazać program do zarządzania listą zadań. Do tej pory chwilę używałem strony Trello . Trello posiada wszystko, co powinien mieć program "to do list". Jeżeli do tej pory nie używałeś żadnego, to wymienię czym powinieneś się kierować przy wyborze dobrego menadżera zadań. Nie będę tutaj wymieniał oczywistości, takich jak dodawanie zadań z datą. Menadżer zadań powinien posiadać:  dostęp z przeglądarki, aplikację na urządzenia przenośne, możliwość pracy w grupie, system powiadomień o nadchodzących "deadlines" oraz zmianach na liście,  opcje kopiowania list, zadań - przydatne, kiedy co tydzień powtarzasz te same zadania, możliwość dodawania komentarzy ludzi biorących udział w zadaniach, dodawanie załączników, zdjęć i innych plików multimedialnych, tworzenie podzadań, chcecklist  lub listy zakupów (funkcjonalność podobna), oznaczanie ważnych zadań, Dobrze, gdyby posia...
4 komentarze
Czytaj więcej

Affinity Designer

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...
Prześlij komentarz
Czytaj więcej

Wybieranie postaci do gry

Losowanie rysunków i wstawianie do HTML Struktura MVC wisi już na githubie, pora się zabrać za wdrażanie metod. Na pierwszy ogień idzie chooseCreatures, która ma za zadanie wylosować cztery rysunki postaci do gry. I tutaj pojawia się pierwsza zagwozdka. Jak wylosować rysunki? Umieścić je w bazie danych i losować rekordy? Bazy nie przewidywałem. Wpadłem na pomysł, aby nazwać wszystkie rysunki tak samo z kolejnymi numerami:  postac1.jpg, postac2.jpg, postac3.jpg itd. Metoda chooseCreatures wylosuje tylko cztery różne numery, które dołączy do stringa "postac+number+.jpg". Nazwy plików trafią do widoku, który je doda do HTML i wyświetli. Do dzieła! W modelu ustalam ile będzie obrazków do wyboru (numPictures) oraz ile będzie obrazków wyświetlanych (numCreatures). Później losuję niepowtarzające się liczby z zakresu numPictures i wstawiam do tablicy. Poniżej przykładowe dane i działania na nich.  numPictures=20, numCreatures=2, Losuję 2 liczby z zakresu 1-20, niech będzie...
4 komentarze
Czytaj więcej