Michał Środek

Kompilatory CSS

Michał Środek — Mon, 15 Aug 2011 18:54:28 +0000

Witaj Świecie po raz n-ty! Kilka miesięcy temu miałem wrócić, a na blogu w dalszym ciągu cisza. No cóż, od kilku miesięcy pracuję na rynku zagranicznym i czasu mam coraz mniej. Ostatnio jednak wziąłem się za porządkowanie własnej pracy i udaje mi się znaleźć kilka wieczorów na napisanie paru zdań.

Wróćmy jednak na chwilę do pracy. Porównując to co aktualnie robię z tym czym zajmowałem się na etacie mogę śmiało powiedzieć, że różnica poziomów jest fenomenalna. O ile w poprzedniej pracy nauczyłem się naprawdę dużo, to jako freelancer pochłaniam wiedzę dużo szybciej. W kolejnych kilku artykułach chciałbym napisać jak przebiega mój standardowy dzień oraz jakich używam narzędzi oraz technik aby usprawnić swoją pracę. Temat na dzisiaj to kompilator CSS.

Czym jest kompilator CSS?

Kompilatory CSS to proste programy wprowadzające różnego rodzaju ulepszenia do języka arkuszy stylów. Dodają one nowe elementy do CSS, które po procesie kompilacji są zamieniane na zwykłe reguły rozumiane przez przeglądarki internetowe.

Prosty przykład:

Najbardziej przydatnym elementem wszystkich kompilatorów jest zagnieżdżanie reguł. Dzięki temu wizualnie widzimy, który element znajduje się wewnątrz innego.

#element{
    font-size: 16px;
    strong{ color: red; }
    em{ color: blue; }
}

W tym przypadku posiadamy element o id #element który może posiadać wewnątrz siebie elementy strong i em. Kod ten zostanie przekompilowany do postaci:

#element{
    font-size: 16px;
}
 
#element strong{
    color: red;
}
 
#element em{
    color: blue;
}

Dlaczego warto?

Przede wszystkim skraca się czas tworzenia strony, a w przypadku jej przyszłej modyfikacji praca nad arkuszem jest dużo prostsza. Podczas tworzenia małych stronek się tego nie odczuwa jednak przy większych projektach moim zdaniem kompilator CSS jest niezbędny. Aktualnie tworzę szablony do WordPressa i klienci często chcą aby dodać im jakąś funkcjonalność albo zgłaszają problemy kompatybilności szablonu z różnymi egzotycznymi wtyczkami(często pojawiają się konflikty CSS). W przypadku odpowiedniego kompilatora zarządzanie tym wszystkim nawet po upływie miesiąca jest dużo prostsze. Co więcej, kompilatory często zgłaszają błędy składni, niektóre wymagają idealnego porządku(np. średnika na końcu każdej reguły), udostępniają kompresowanie kodu i dużo, dużo więcej.

Dostępne rozwiązania

Kompilatorów CSS jest na prawdę sporo. Ja ograniczę się do czterech najbardziej popularnych. Praktycznie wszystkie spośród przedstawionych przeze mnie aplikacji udostępniają podstawowe funkcje kompilatora CSS np:

Zagnieżdżanie elementów
Zmienne(w tym możliwość użycia zmiennych do nazw parametrów)
Operacje arytmetyczne
Obsługa importowania
Mieszanie reguł
Wiele wbudowanych funkcji np. zaogkrąglanie liczb, rozjaśnianie kolorów, czy zmiana koloru na szary odpowiednik

Oczywiście różne kompilatory obsługują wymienione opcje w różnym stopniu. Pozostawiam to wam do dokładniejszego przetestowania.

Sass

Mój faworyt. Lekki, napisany w Ruby kompilator działający w czasie rzeczywistym.

Dodatkowo obsługiwane opcje:

Instrukcje sterujące: @if, @while, @for oraz @each
Tryb interaktywny
Praca w czasie rzeczywistym
Dwa rodzaje składni: klasyczna, kompatybilna z CSS oraz oparta na wcięciach(podobna jak w plikach YAML, Pythonie lub Ruby)
Wsparcie dla Eclipse oraz NetBeans(poprzez nieoficjalne wtyczki)

Strona projektu: http://sass-lang.com

Less

Bardzo potężny kompilator napisany w JavaScript. Jego ogromnym atutem jest działanie na dwóch płaszczyznach — po stronie klienta oraz po stronie serwera. Pierwsze rozwiązanie możemy zastosować podczas pracy nad stroną, drugie aby skompilować ostateczny plik i umieścić na serwerze.

Ciekawe opcje:

Podwójny tryb pracy: po stronie klienta oraz poprzez konsolę
Przestrzenie nazw
Bardzo fajna składnia CSS-podobna
Możliwość umieszczania kodu JavaScript wewnątrz arkusza stylów
Bardzo fajna dokumentacja

Strona projektu: http://lesscss.org

CleverCSS

Trzeci na mojej osobistej liście. Lekki, napisany w Pythonie(lub w Haskellu). Posiada podstawową funkcjonalność i obsługuje tylko składnię opartą na wcięciach.

Przykład użycia:

#main p:
  font->
    family: Verdana, sans-serif
    size: 1.1em
    style: italic

#main p {
    font-family: Verdana, sans-serif;
    font-size: 1.1em;
    font-style: italic;
}

CleverCSS w Pyhonie: http://sandbox.pocoo.org/clevercss/

CleverCSS w Haskellu: http://sandbox.pocoo.org/clevercss-hs/

Hss

Ostatni komplator umieszczam ze względu na sentyment do niego(oraz referer ale o tym za chwilę). Był on pierwszym kompilatorem, którego używałem i ze względu na jego prostotę jest ciekawym rozwiązaniem na początek. Jest to francuska produkcja na potrzeby firmy Motion-Twin(jeżeli ktoś zajmuje się programowaniem gier to zapewne ich zna) — firmy, która stworzyła bardzo przyjemną grę typu „Arkanoid“ — Alpha Bounce (Jeżeli chcesz się zarejestrować możesz podać mój nick jako referer — „Hellson“).

Niestety HSS jest bardzo sztywnym kompilatorem. Jego jedynym plusem jest wsparcie dla tzw. „CSS hacks“. Wpisując np. opacity: 0.6 kompilator sam doda odpowiednie filtry dla IE. Oczywiście nie zawsze jest to plus. Wiele osób(w tym ja) stara się tworzyć czyste pliki css a wszelkiego rodzaju sztuczki dla IE umieszczać w oddzielnych plikach.

Strona projektu: http://ncannasse.fr/projects/hss

W następnym artykule postaram się zaprezentować kilka najważniejszych elementów kompilatora SASS. Jeżeli jednak to was nie interesuje(np. jeżeli wolicie sami poczytać dokumentację), to proszę piszcie. Zajmę się wtedy artykułem na temat kolejnych ciekawych elementów mojej codziennej pracy.

Długo, długo nic

Michał Środek — Sat, 09 Apr 2011 18:47:26 +0000

Jak zapewne zauważyliście od około pół roku jestem całkowicie nieosiągalny. Postanowiłem jednak powrócić do aktywnego pisania na blogu. Co więcej w między czasie tworzę nowy design(już na HTML5) więc odświeżę również wygląd. Dlaczego nie mam czasu dodawać nowych artykułów? W sierpniu poprzedniego roku krążąc po witrynach agencji interaktywnych z Lublina znalazłem na jednej z nich(nazwy firmy nie podam) dziurę XSS(sic!). Poinformowałem ich o tym, a oni zaproponowali mi pracę. Zainteresowany odesłałem e-mail.

Niestety praca kolidowałaby ze studiami więc postanowiłem, że zmienię je na zaoczne. Pomyślałem, że dzięki temu zaoszczędzę sporo czasu, ponieważ zajęcia zazwyczaj odbywają się z ogromnymi „okienkami“ pomiędzy nimi. Mając 2 godziny wolnego czasu możesz wrócić do mieszkania, ale samo przejście się w obie strony zajmuje godzinę. Rozpoczynać pracę tylko po to aby programować 50 minut nie ma sensu, chodzić wszędzie z laptopem nie lubię, a telefon mam za słaby aby zapisywać w nim coś dłuższego. Złożyłem więc podanie i przeniesiono mnie na studia niestacjonarne. To był dobry ruch. Nie oszukujmy się — studia nie kształcą(przynajmniej nie programistów), a na zaocznych mam dużo łatwiej. Odrzuconych zostało sporo przedmiotów, a te które pozostały są na dużo niższym poziomie. Nie muszę się więc uczyć durnych rzeczy, których i tak nigdy nie wykorzystam(z drugiej strony jednak żałuję, że np. nie mam przedmiotu Bezpieczeństwo systemów komputerowych, który na studiach dziennych jest). Oczywiście studia kosztują więc musiałem znaleźć pracę. Na odpowiedź od wcześniej wspomnianej firmy czekałem około 5 tygodni(co za firma!) i do tego czasu, złożyłem CV w kilku innych miejscach. Pracę dostałem w Netrix Group.

Pracę na etacie jednak ciężko pogodzić z własnymi projektami. Z jednej strony od poniedziałku do piątku wycięte z życia 10h(1h dojazd, 8h pracy, 1h powrót do mieszkania), z drugiej studia w weekendy. Ogólny brak czasu na cokolwiek. Jeśli dorzuci się do tego jeszcze pisanie pracy licencjackiej to ilość wolnego czasu redukuje się do zera. Oczywiście pozostają wieczory ale te musiałem poświęcać na pisanie programów na studia. Przetrwałem tak 8 miesięcy i postanowiłem zmienić kolejną rzecz w moim życiu. W poprzednim tygodniu powiedziałem szefowi, że odchodzę. Popracuję do końca miesiąca i wracam na poważnie do własnych projektów.

Chciałbym podać kilka ważnych aspektów dla tych, którzy planują znaleźć pracę na etacie.

Studia na w miarę porządnej uczelni jest ciężko pogodzić z pracą. Osobiście odradzam takie połączenie ponieważ po pół roku masz dość studiowania i pisania totalnie bezsensownych projektów tylko po to aby ktoś wpisał Ci trójkę lub czwórkę w indeks.
Warto się zatrudnić przynajmniej na kilka miesięcy ponieważ poznajesz ludzi, umiejących robić rzeczy, o którym sam wcześniej nawet nie wiedziałeś. Podczas pracy w Netrix Group poznałem dużo ciekawych rzeczy. Przede wszystkim poszerzyłem wiedzę na temat Zend Framework, opanowałem kilka nowych rzeczy z PostgreSQL-a. Poprawiłem swoją wiedzę na temat „cięcia stron“ oraz JavaScriptu. Poznałem kilka ciekawych bibliotek (np. ExtJS) oraz niesamowite IDE — PhpStorm(kosztuje $200 ale na prawdę się opłaca. Nie wiem jak to zrobiła czeska firma JetBrains ale mimo, że aplikacja napisana jest, tak jak inne znane IDE, w Javie i posiada dużo więcej opcji działa 5 razy szybciej niż Eclipse lub NetBeans. W domu wciąż pracuję z NetBeans ale jak tylko pojawi się rozsądna promocja(ostatnio było 50% ceny) kupuję licencję ).
Jeżeli mieszkasz(tak jak ja) w innym mieście niż rodzice oraz dziadkowie i chciałbyś ich odwiedzić od czasu do czasu to musisz mieć świadomość, że będzie to utrudnione. Aby wrócić do domu rodzinnego muszę jechać około 1.5h. Jeżeli po pracy wyjadę z Lublina o 17:00 to o 18:30 będę w mieszkaniu rodziców. Zostając u nich na noc, następnego dnia muszę wstać o 5 aby dojechać do pracy na czas. Weekendy odpadają ponieważ zajęcia na studiach są co tydzień(przynajmniej na UMCS).

Tak więc w skrócie: 1 maja kończę pracę, 1 lipca kończę studia i powracam do tworzenia gier www.

Co dalej? Znów będę wolnym strzelcem. Odłożyłem trochę pieniędzy i dwa, może trzy, miesiące jestem w stanie przeżyć bez pracy. Spróbuję poszukać kontaktów w USA i uderzyć w rynek zagraniczny aby pracując mniej zarabiać więcej.

PS: licencjat piszę na temat Bezpieczeństwa aplikacji www. Nie wiem jak są rozdzielane prawa do publikowania pracy, ale spróbuję się tego dowiedzieć i jeżeli tylko będę mógł, to opublikuję całość w formie kilkunastu artykułów.

Mohebo Framework 0.3

Michał Środek — Sat, 11 Sep 2010 14:02:30 +0000

Ukończyłem kolejną wersję mojego frameworka php. Zmian jest niewiele lecz dotyczą głównego rdzenia oraz struktury frameworka. Jeżeli zajdą kolejne w strukturze plików i katalogów będą one jedynie drobnymi zabiegami kosmetycznymi. Zaktualizowałem stronę frameworka — http://mohebo.com. Przepisałem dokumentację, tak aby przykłady działały w wersji 0.3. W przypadku błędów, problemów itp. proszę o kontakt bezpośredni.

Najważniejsze zmiany:

Rozbudowałem klasę logującą błędy to wyświetlanie backtrace’u w postaci pokolorowanego kodu php wyciągniętego z plików powodujących błąd.
Zmiana struktury katalogów. /system został przekształcony w /library. Katalog /log wskoczył wewnątrz application oraz doszedł nowy katalog bin(w nim będzie dostępna konsola).
Zmiana nazw klas i plików. Teraz każdy plik i klasa rozpoczyna się wielką literą.
Przebudowa autoloadera. W przypadku stworzenia obiektu klasy Klasa_Cos_Innego lub KlasaCosInnego zostanie autmatycznie odczytany plik Klasa/Cos/Innego.php. Jednak w przypadku tworzenia obiektu klasy Klasa_Cos_InnegoTutaj już Klasa/Cos/InnegoTutaj.php. Dzięki temu zachowałem w pewnym stopniu kompatybilność z PSR-0 jednocześnie pozostawiając własną metodologię nienaruszoną.
Dodanie metod init() orad end() do controllera. init() jest wykonywane przed uruchomieniem akcji, end() po. Uwaga: jeżeli jedna akcja wykona inną init() oraz end() zostaną wywołane tylko raz.

Link bezpośredni do paczki: http://srodek.info/files/MoheboFramework-0.3.tar.gz

Własna skórka dla Chrome

Michał Środek — Sun, 18 Jul 2010 12:10:25 +0000

Wczoraj przypadkowo trafiłem na stronę udostępniającą motywy dla przeglądarki ze stajni Google. Postanowiłem, że sprawdzę czym to się je i zostałem miło zaskoczony — cały proces jest bardzo, bardzo prosty. Wystarczy stworzyć kilka grafik oraz plik manifest.json zawierający ustawienia kolorów. Niestety ilość dostępnych opcji jest bardzo ograniczona i z niecierpliwością czekam na jakieś bogatsze możliwości w przyszłych wersjach chrome.

Paczkę wrzuciłem na serwer. Wystarczy kliknąć tutaj

Oto jak wygląda Chromium z moją skórką.

Jako główny kolor wybrałem zieleń ponieważ uspokaja on oczy. Całość urozmaiciłem ivadersami oraz kotem grającym na klawiszach. Ciężko było przygotować grafikę(np. invadersów musiałem ręcznie rysować), ale mam nadzieję, że efekt jest ciekawy .

openSUSE 11.3

Michał Środek — Sat, 17 Jul 2010 17:09:04 +0000

Dzisiaj spędziłem trochę czasu na porządkowanie dysku twardego. Usunąłem praktycznie wszystko, a backup nagrałem na płytę. Przeinstalowałem system ponieważ poprzednia wersja strasznie wolno działała. Co nowego w openSUSE 11.3? Przede wszystkim zwiększenie prędkości. Całe KDE pracuję troszkę szybciej i stabilniej(ale to może być spowodowane wcześniejszymi paczkami z repozytorium Factory). Przyspieszył m.in. Amarok oraz Firefox. Flash niestety wciąż działa niezadowalająco. Zmienił się oczywiście kernel na nowszy, a wraz z nim wolne sterowniki do kart graficznych. Zmienie uległa samba oraz kilka innych rzeczy, dodano również nowy system plików Btrfs. Dla użytkowników Wine ciekawą informacją jest nowy Xorg(1.8.0). Nie jestem pewien czy ten system idzie w dobrym kierunku(prędkość pozostawia wiele do życzenia) jednak konfiguracja wszystkiego to jedynie kilka kliknięć i właśnie za to go lubię .

Tuż po instalacji dointalowałem NetBeans 6.9 oraz skonfigurowałem Apache/MySQL, PHP. Pierwsze co mi później przyszło na myśl, to dopisanie obsługi PDO oraz Doctrine w moim Frameworku. Środowisko mam już przygotowane, więc czas się wziąć do pracy…

Mohebo Framework 0.2

Michał Środek — Fri, 16 Jul 2010 23:51:51 +0000

Dzisiaj, po dwóch latach ciężkiej pracy, wydałem kolejną wersję mojego frameworka. Poprawek nie ma wiele jednak spora ich część znacznie ułatwia pracę. Najważniejszą jednak jest chyba zmiana licencji z LGPL na MIT. W ciągu kilka najbliższych dni postaram się napisać kilka artykułów z serii „Tworzymy portal w oparciu o Mohebo Framework“. Mam nadzieję, że przypadnie on wam do gustu. Wszelkie opinie i komentarze proszę zamieszczać tutaj lub dołączyć się do dyskusji na forum.php.pl

Paczka jest dostępna pod adresem: http://srodek.info/files/MoheboFramework-0.2.tar.gz
Dokumentację można znaleźć na http://mohebo.com

Poruszanie się po mapie

Michał Środek — Fri, 09 Jul 2010 22:17:32 +0000

Mimo, że czołg w mojej grze jeździ, porusza się przez ściany. Dzisiaj zwalczę ten problem dodając kilka linijek kodu odpowiedzialnych za wykrywanie kolizji obiektów, tak aby czołg nie mógł znajdować się w tej samej pozycji co mur lub woda.

Przede wszystkim przebudujmy kilka linijek odpowiedzialnych za wykrywanie zdarzeń klawiatury. O ile kod ten wciąż nie jest doskonały i wymaga dalszego doszlifowania, o tyle aktualnie musi nam wystarczać.

if(keyHandler.isHolded(37)) // LEFT
{
	GameTank.changeDirection(0);
	if(GameTank.x>0)
		GameTank.changePosition(-1,0);
}
else if(keyHandler.isHolded(38)) // UP
{
	GameTank.changeDirection(1);
	if(GameTank.y>1)
		GameTank.changePosition(0,-1);
}
else if(keyHandler.isHolded(39)) // RIGHT
{
	GameTank.changeDirection(2);
	if(GameTank.x<480)
		GameTank.changePosition(1,0);
}
else if(keyHandler.isHolded(40)) // DOWN
{
	GameTank.changeDirection(3);
	if(GameTank.y<480)
		GameTank.changePosition(0,1);
}

Co się zmieniło? Wszelkie polecenia zmiany położenia czołgu są teraz przekazywane do metody GameTank.changePosition(). To ona zabezpiecza grę przed przecinaniem się obiektów.

changePosition: function(x,y)
{
	var newPosition = [this.x+x, this.y+y];
	var newField = [Math.ceil((newPosition[0])/32)-1, Math.ceil((newPosition[1]/32))-1];
 
	if(x)
	{
		var offset = newPosition[1]%32;
		if(x>0)
			var fields = [[1,0],[1,1]];
		else
			var fields = [[0,0],[0,1]];
	}
	else
	{
		var offset = newPosition[0]%32;
		if(y>0)
			var fields = [[0,1],[1,1]];
		else
			var fields = [[0,0],[1,0]];
	}
 
	var checkField = GameBoard.board[newField[1]+fields[0][1]][newField[0]+fields[0][0]];
	if(checkField==0 || checkField==1 || offset==0 || offset>29)
	{
		if(offset>0 && offset<6)
		{
			this.x+=x;
			this.y+=y;
		}
		else
		{
			var checkField = GameBoard.board[newField[1]+fields[1][1]][newField[0]+fields[1][0]];
			if(checkField==0 || checkField==1)
			{
				this.x+=x;
				this.y+=y;
			}
		}
	}
},

Najpierw określam współrzędne nowego położenia czołgu(jego górnego lewego narożnika) oraz współrzędne pola na krórym się znajduje. Następnie wyznaczam odstęp(offset) jaki dzieli czołg od krawędzi kratki(Pamiętajmy, że czołg nie jest szeroki na 32px tak jak pole na mapie). Dzięki określeniu pewnej granicy błędu nie będziemy musieli ustawiać się idealnie aby przejechać między dwoma obszarami blokującymi. Znacznie ułatwi to sterowanie.

Kolejnym krokiem jest określenie 2 pól(fields), na podstawie których badane będą kolizje. To jakie pola wybierze skrypt zależy od kierunku w jakim się poruszamy. A są to:

Następnie jest sprawdzany rodzaj tych pól oraz odległość czołgu o nich. Jeżeli wszystko się zgadza, pozycja czołgu zostaje zmieniona.

Całość działa całkiem sprawnie. Efekt końcowy możesz zobaczyć tutaj

Prokrastynacja

Michał Środek — Wed, 07 Jul 2010 11:28:34 +0000

Prokrastynacja lub zwlekanie (z łac. procrastinatio – odroczenie, zwłoka) – w psychologii: patologiczna tendencja do nieustannego przekładania pewnych czynności na później, ujawniającą się w różnych dziedzinach życia. Bywa żartobliwie nazywana „syndromem studenta“.
Prokrastynator ma problemy z zabraniem się do pracy i odkłada jej wykonanie, zwłaszcza wtedy, gdy nie widzi natychmiastowych efektów.

Źródło: http://pl.wikipedia.org/wiki/Prokrastynacja

Tak, cierpię na to zaburzenie. I mój przypadek jest dosyć ciekawy. Pracuję intensywnie ale tuż przed ukończeniem porzucam projekt i rozpoczynam kolejny. Oczywiście staram się walczyć z moim lenistwem i dzisiaj chciałbym zaprezentować mój nowy sposób na zmuszanie się do pracy i zwiększanie motywacji.

Pierwszym krokiem jest stworzenie pliku index.html, który będzie zawierał tekst zachęcający nas do pracy.

 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pl-PL"> 
  <head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
	<title> Pracuj, pracuj...</title> 
  </head>
  <body>
	<div style="font-family:helvetica; width:600px; margin:auto; background:#eee; padding:20px; border:1px solid #ccc;">
		<h1>WEŹ SIĘ DO ROBOTY!</h1>
		<p>Lista rzeczy do zrobienia</p>
		<ol>
		    <li>Dokumentacja</li>
		    <li>Kolejna część artykułu o tankach</li>
		    <li>Spisanie tabulatur</li>
		    <li>Pisanie książki</li>
		</ol>
		<p>Zarobisz dużo pieniędzy i będziesz bogaty.</p>
		<h2>JEŻELI NIE WYKONUJESZ PUNKTU 3. NIE IDŹ PO GITARĘ! ZOSTAŃ TAM GDZIE JESTEŚ!</h2>
	</div>
  </body>
</html>

Teraz przechodzimy do edycji pliku /etc/hosts

sudo mcedit /etc/hosts

Dopisujemy kilka adresów stron internetowych, na oglądanie których tracimy najwięcej czasu.

127.0.0.1        facebook.com
127.0.0.1        wykop.pl
127.0.0.1        youtube.com
127.0.0.1        demotywatory.pl
127.0.0.1        nk.pl

Przekierowanie gotowe. Możemy wziąć się do pracy.

Informacja dla użytkowników systemów z rodziny Windows. Jeżeli dobrze pamiętam, plik hosts znajduje się w C:\windows\system32, a przynajmniej tam się znajdował, gdy ja korzystałem z Microsoft Windows XP.

Aby rozwiać wszelkie wątpliwości — pisanie tego artykułu to również forma odwlekania mojej pracy .

Optymalizacja obiektu canvas

Michał Środek — Tue, 06 Jul 2010 18:32:03 +0000

Jak zapewne zauważyłeś podczas czytania mojego poprzedniego artykułu gra, którą tworzę działa troszkę wolno. Dzieje się tak dlatego, że mapa jest generowana od nowa w każdej klatce działania programu. Spróbujmy to zoptymalizować.

Zasada jest bardzo prosta. To co możemy generować raz, generujemy tylko raz. Następnie zapisujemy wynik do oddzielnego obiektu

Na potrzeby mojego przykładu stworzyłem dynamicznie dwa nowe obiekty canvas, jeden przechowujący wygenerowaną mapę, drugi czołg(obracanie obrazków jest bardzo czasochłonne).

Uporządkowałem troszkę kod umieszczając wszelkie dane czołgu do klasy GameTank

var GameTank = {
	x:0,
	y:480,
	canvas: null,
	ctx: null,
	direction: 1,  // 0= LEFT 1 =UP, 2 = RIGHT, 3=DOWN
 
	changeDirection: function(newDirection)
	{
		if(newDirection!=GameTank.direction)
		{
			GameTank.direction = newDirection;
 
			GameTank.ctx.clearRect(0,0,32,32);
			GameTank.ctx.save();
			switch(GameTank.direction)
			{
				case 2:
					GameTank.ctx.rotate(90 * Math.PI / 180);
					GameTank.ctx.drawImage(GameMain.img.tank,0,-32);
					break;
				case 3:
					GameTank.ctx.rotate(180 * Math.PI / 180);
					GameTank.ctx.drawImage(GameMain.img.tank,-32,-32);
					break;
				case 0:
					GameTank.ctx.rotate(270 * Math.PI / 180);
					GameTank.ctx.drawImage(GameMain.img.tank,-32,0);
					break;
				default:
					GameTank.ctx.drawImage(GameMain.img.tank,0,0);
			}
			GameTank.ctx.restore();
		}
	},
	init: function()
	{
		this.canvas = document.createElement('canvas');
 
		this.canvas.width = 32; 
		this.canvas.height = 32; 
 
		this.ctx = this.canvas.getContext('2d');
		this.ctx.drawImage(GameMain.img.tank,0,0);
	}
};

W analogiczny sposób tworzony jest obiekt dla mapy

var GameBoard = {
	canvas: null,
	ctx: null,
	TEXTURE_ID: {ICE: 1, BRICK: 2, WATER: 3}, 
	textures: [null, 'images/ice.png', 'images/brick.png', 'images/water.png'],
 
	board:[
		[1,1,1,1,1,1,2,2,2,2,1,1,1,1,1,1],
		[1,1,1,2,2,2,2,2,2,2,2,2,2,1,1,1],
		[1,1,2,2,2,2,2,2,2,2,2,2,2,2,1,1],
		[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
		[1,2,2,1,1,2,2,2,2,2,2,1,1,2,2,1],
		[2,2,2,1,3,2,2,2,2,2,2,1,3,2,2,2],
		[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
		[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
		[2,2,2,2,2,2,2,1,1,2,2,2,2,2,2,2],
		[0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0],
		[0,2,2,2,1,2,2,2,2,2,2,1,2,2,2,0],
		[0,2,2,2,2,1,1,1,1,1,1,2,2,2,2,0],
		[0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0],
		[0,0,0,2,2,2,2,2,2,2,2,2,2,0,0,0],
		[0,0,0,0,0,0,2,2,2,2,0,0,0,0,0,0],
		[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
		],
	drawBoard: function() {
 			this.ctx.clearRect(0,0,512,512);
 
			for(var y=0; y<16; y++)
			{
				for(var x=0; x<16; x++)
				{
					if(this.board[y][x]>0)
					{
						this.ctx.save();
						this.ctx.fillStyle = this.textures[this.board[y][x]];
						this.ctx.fillRect(x*32,y*32,32,32);
						this.ctx.restore();
					}
				}
			}
	},
	preloadTextures: function(i){
		var img = new Image();
		img.src = this.textures[i];
		img.onload = function() {
 
			GameBoard.textures[i] = GameBoard.ctx.createPattern(img, 'repeat');
			if(GameBoard.textures[i+1])
				GameBoard.preloadTextures(i+1);
			else{
				GameBoard.drawBoard();
				GameTank.init();
				window.setInterval(GameMain.mainLoop,10);
			}
		}
	},
	init: function (){
		this.canvas = document.createElement('canvas');
		this.canvas.width = 512; 
		this.canvas.height = 512; 
 
		this.ctx = this.canvas.getContext('2d');
 
		this.preloadTextures(1);
	}
};

Główna klasa gry jedynie składa obraz ze wszystkich elementów

var GameMain = {
	canvas: null,
	ctx: null,
	img: {},
	mainLoop: function(){
 			GameMain.ctx.clearRect(0,0,512,512);
			GameMain.ctx.drawImage(GameBoard.canvas, 0, 0,512,512,0,0,512,512);
 
			if(keyHandler.isHolded(37)) // LEFT
			{
				GameTank.changeDirection(0);
				if(GameTank.x>0)
					GameTank.x-=1;
			}
			else if(keyHandler.isHolded(38)) // UP
			{
				GameTank.changeDirection(1);
				if(GameTank.y>0)
					GameTank.y-=1;
			}
			else if(keyHandler.isHolded(39)) // RIGHT
			{
				GameTank.changeDirection(2);
 
				if(GameTank.x<480)
					GameTank.x+=1;
			}
			else if(keyHandler.isHolded(40)) // DOWN
			{
				GameTank.changeDirection(3);
				if(GameTank.y<480)
					GameTank.y+=1;
			}
 
			GameMain.ctx.drawImage(GameTank.canvas, 0, 0,32,32,GameTank.x,GameTank.y,32,32);
 			FrameCounter.updateFPS();
	},
 
	init: function(){
		this.canvas = document.getElementById('game');
		if (this.canvas.getContext)
			this.ctx = this.canvas.getContext("2d");
 
		this.img.tank = new Image();
		this.img.tank.src = 'images/btank.png';
		this.img.tank.onload = function(){
			GameBoard.init();
		}
		document.addEventListener('keydown', keyHandler.keyDown, false);
		document.addEventListener('keyup', keyHandler.keyUp, false);
	}
}

Kolejną, obok generowania grafiki, czasochłonną operacją jest liczenie czasu. Spróbujmy ograniczyć wywoływanie pewnych funkcji w liczniku FPS. Czas liczył będę co 10 klatek.

var FrameCounter = {
	x: 0,
	lastFrameTime: new Date().getTime(),
	updateFPS: function(){
		if(this.x==10)
		{
			var currentTime = new Date().getTime();
 
			document.getElementById('fps').innerHTML = Math.floor(10000/(currentTime-this.lastFrameTime),2)+'fps';
			this.lastFrameTime = currentTime;
			this.x=0;
		}
		else
			this.x++
	}
};

Poza przyspieszeniem gry zauważymy również zmiany w działaniu samego licznika. Jego odświeżanie będzie rzadsze i jednocześnie przyjemniejsze dla ludzkiego oka.

Technika, którą tutaj pokazałem bardzo przypomina tą ze zwykłych gier DHTML budowanych w oparciu o odpowiednio pozycjonowane znaczniki

. Dlaczego nie robię tak samo w przypadku znaczników

Obsługa klawiatury oraz licznik FPS

Michał Środek — Sat, 22 May 2010 21:58:18 +0000

W dzisiejszym artykule pokażę prosty sposób na wychwycenie zdarzenia przytrzymania klawiszy klawiatury oraz rozpoczniemy mierzenie prędkości naszej gry tj. współczynnika FPS. Umieścimy na naszej mapie czołg oraz umożliwimy sterowanie nim za pomocą klawiszy strzałek.

UWAGA: Artykuł jest kontynuacją poprzedniego: Canvas — Rysujemy mapę

Przede wszystkim potrzebujemy czołgu. Na potrzeby artykułu oraz mojej gry stworzyłem prosty szkic w GIMP-ie:

Zanim umieścimy go na planszy, przeanalizujmy kilka innych ważnych aspektów.

Obsługa klawiatury

Aby sterować naszym czołgiem musimy stworzyć obiekt przechwytujący zdarzenia klawiatury. Najbardziej problematyczny jest jednak sposób ich działania w JavaScript. Dla przeciętnego klawisza są wywoływane 4 zdarzenia:

keydown
keypress
textInput
keyup

Zdarzenie textInput zdefiniowane niedawno przez W3C obsługują, bodajże, tylko przeglądarki w oparciu o silnik WebKit. Z pozostałymi zdarzeniami jest różnie. Keypress jest pomijane w przypadku klawiszy specjalnych takich jak shift, alt i ctrl. Niestety nie ma jasno zdefiniowanej listy klawiszy specjalnych. Przeglądarki w oparciu o WebKit zaliczają do nich np. klawisze strzałek, FireFox już nie. Co więcej identyfikacja klawiszy w różnych przeglądarkach jest realizowana w oparciu o inne pola(event.keyCode, event.which oraz event.charCode). Na szczęście wszystkie całkiem sprawnie obsługują pole keyCode, więc nie jest to aż tak ogromny problem(pomijając fakt, że czasami keyCode dla tego samego klawisza jest inny w różnych przeglądarkach). Podsumowując. Obsługa klawiatury w JavaScript to istny koszmar i moim zdaniem powinna zostać przebudowana. Wystarczy pozostawić keydown, textInput oraz keyup oraz ujednolicić kody klawiszy. Jest jednak lista klawiszy bezpiecznych(działających identycznie lub bardzo podobnie w różnych środowiskach). Znalazłem w sieci ciekawe zestawienie na ten temat.

Warto wiedzieć w jaki sposób działa zdarzenie przytrzymania klawisza. Przeglądarki realizują to bardzo dziwnie. W przypadku wciśnięcia klawisza jest wywoływana akcja keydown, keypress oraz keyup. Następnie wywoływane jest ponownie zdarzenie keydown, po nim keypress oraz znów keyup. I tak, aż do momentu puszczenia klawisza. W naszym przypadku zdarzenie keypress pominiemy(tym bardziej, że w przypadku strzałek nie zawsze jest ono wywoływane) więc zaobserwujemy:

keydown
keyup
keydown
keyup
(…)
keydown
keyup

Oczywiście w przypadku naszej gry akcja utrzymywania klawisza musi być ciągła dlatego musimy opóźnić zwolnienie klawisza. Napiszmy prostą klasę.

var keyHandler = {
 
    keyLastEvent: [], //true = keyDown, false = keyUp
    keyStatus: [],
 
    keyDown: function(e){
        // ustawienie statusu na jeden(klawisz wcisniety po raz pierwszy)
        if(keyHandler.keyStatus[e.keyCode]===undefined)
        {
            keyHandler.keyStatus[e.keyCode] = 1;
            keyHandler.keyLastEvent[e.keyCode] = 1;
        }
        else
        {
            if(!keyHandler.keyLastEvent[e.keyCode]) // ostatnia akcja byl keyUp => powtarzane down, up; down, up
                keyHandler.keyStatus[e.keyCode]++;
 
            keyHandler.keyLastEvent[e.keyCode] = 1;
        }
    },
 
    keyUp: function(e){
        keyHandler.keyLastEvent[e.keyCode] = 0;
 
        // odcisniecie klawisza z 10ms opóźnieniem
        window.setTimeout(keyHandler.decreaseKeyStatus(e.keyCode), 20);
    },
 
    decreaseKeyStatus: function(keyCode){
        this.keyStatus[keyCode]--;
    },
    isHolded: function(key){
        return (this.keyStatus[key]>0);
    }
};

Klasa zawiera tablicę klawiszy. W przypadku wciśnięcia np. strzałki w lewo(keyCode = 37) następuje zwiększenie o jeden wartości keyStatus[37]. Jeżeli ta wartość jest większa od zera metoda isHolded() zwraca true co informuje nas, że klawisz jest przytrzymywany. W przypadku systemów z rodziny Windows zdarzenie keyUp nie jest powtarzane. Zatem zwiększenie wartości naszego licznika powinno nastąpić tylko raz w przypadku pierwszego pojawienia się zdarzenia keyDown. Aby wiedzieć jakiego rodzaju zdarzenie zostało ostatnio wywołane(up czy down) stworzyłem zmienną keyLastEvent i modyfikuję ją wg. potrzeb. Dzięki takiej budowie naszej klasy(tj. bez warunkowych lini kodu zależnych od systemu operacyjnego lub przeglądarki) akcja przytrzymania klawisza zostanie poprawnie rozpoznana nawet w przypadku poprawienia błędów w jednej z przeglądarek.

Aby kod ten zadziałał potrzebujemy dodatkowo określić, które z naszych funkcji nasłuchują. Zrobimy to w metodzie init() obiektu GameBoard tuż pod kodem ładującym tekstury.

        this.preloadTextures(1);
 
        document.addEventListener('keydown', keyHandler.keyDown, false);
        document.addEventListener('keyup', keyHandler.keyUp, false);

Pętla główna

W przypadku gier ważne jest utworzenie pętli głównej programu. Będzie ona za każdym razem sprawdzała stan zdarzeń pochodzących z klawiatury, sieci oraz sztucznej inteligencji. W przypadku małych gier(np. kółko i krzyżyk, sudoku, saper) jest to nieistotne, u nas — w grze pełnej animacji — po prostu konieczne.

Stwórzmy dodatkowy obiekt będący centralną sterownią naszej gry.

var GameMain = {
    img: {},
    x:0,
    y:480,
    direction: 1,  // 0= LEFT 1 =UP, 2 = RIGHT, 3=DOWN
    mainLoop: function(){
 
            GameBoard.drawBoard();
 
            if(keyHandler.isHolded(37)) // LEFT
            {
                GameMain.direction = 0;
                if(GameMain.x>0)
                    GameMain.x-=1;
            }
            else if(keyHandler.isHolded(38)) // UP
            {
                GameMain.direction = 1;
                if(GameMain.y>0)
                    GameMain.y-=1;
            }
            else if(keyHandler.isHolded(39)) // RIGHT
            {
                GameMain.direction = 2;
 
                if(GameMain.x<480)
                    GameMain.x+=1;
            }
            else if(keyHandler.isHolded(40)) // DOWN
            {
                GameMain.direction = 3;
                if(GameMain.y<480)
                    GameMain.y+=1;
            }
 
 
            for(var i=37; i<41; i++)
            {
                if(keyHandler.isHolded(i))
                    document.getElementById('key-'+i).style.background = 'red';
                else
                    document.getElementById('key-'+i).style.background = 'white';
            }
 
            GameBoard.ctx.save();
            GameBoard.ctx.translate(GameMain.x,GameMain.y);
            switch(GameMain.direction)
            {
                case 2:
                    GameBoard.ctx.rotate(90 * Math.PI / 180);
                    GameBoard.ctx.drawImage(GameMain.img.tank,0,-32);
                    break;
                case 3:
                    GameBoard.ctx.rotate(180 * Math.PI / 180);
                    GameBoard.ctx.drawImage(GameMain.img.tank,-32,-32);
                    break;
                case 0:
                    GameBoard.ctx.rotate(270 * Math.PI / 180);
                    GameBoard.ctx.drawImage(GameMain.img.tank,-32,0);
                    break;
                default:
                    GameBoard.ctx.drawImage(GameMain.img.tank,0,0);
 
            }
            GameBoard.ctx.restore();
             FrameCounter.updateFPS();
    },
 
    init: function(){
        this.img.tank = new Image();
        this.img.tank.src = 'images/btank.png';
        this.img.tank.onload = function(){
            GameBoard.init();
        }
    }
}

Metoda mainLoop() będzie wywoływana co określony, bardzo krótki czas. Dzięki temu będziemy w stanie na bierząco wychwytywać nadchodzące zdarzenia.

Podzielona jest ona na kilka akcji. Pierwszą z nich jest rysowanie mapy. Następnie sprawdzamy poszczególne klawisze strzałek. W przypadku przytrzymania jedngo z nich, zmieniamy współrzędne naszego czołgu — pola x oraz y klasy GameMain. Kolejnym krokiem jest zapisanie stanu obiektu canvas. Translacja o wektor, obrót w odpowiednim kierunku oraz rysowanie czołgu. Następnie przywracamy stan obszaru canvas i wywołujemy licznik FPS

Odczyt grafiki czołgu umieściłem w metodzie init(). Jest to nasza nowa metoda inicjalizująca, którą musimy wywołać aby uruchomić grę.

Licznik FPS

Ważnym elementem podczas testowania gry jest licznik FPS. Dzięki niemu będziemy mogli określić, które elementy gry są napisane nieoptymalnie oraz, który kod należy wymienić. Oko ludzkie jest w stanie zaobserwować jedynie 25 klatek filmu w każdej sekundzie. Dla mnie jest to jednak mało. Spróbujmy sprawdzić aby gra posiadała przynajmniej 40fps. Moja klasa licząca ilość klatek wygląda następująco:

var FrameCounter = {
 
    lastFrameTime: new Date().getTime(),
    updateFPS: function(){
        var currentTime = new Date().getTime();
 
        document.getElementById('fps').innerHTML = Math.floor(1000/(currentTime-this.lastFrameTime),2)+'fps';
        this.lastFrameTime = currentTime;
    }
};

Jak ten kod działa? W każdej klatce obliczana jest różnica pomiędzy aktualnym czasem oraz czasem wyświetlania poprzedniej klatki. W ten sposób możemy obliczyć czas(w milisekundach) wykonywania się jednej klatki. Dzieląc przez tą wartość 1000 otrzymujemy ilość klatek na sekundę.

Uruchomienie

Zmieniona została klasa inicjująca naszą grę więc w metodzie GameBoard.preloadTextures() musi zajść lekka zmiana:

    preloadTextures: function(i){
        var img = new Image();
        img.src = this.textures[i];
        img.onload = function() {
 
            GameBoard.textures[i] = GameBoard.ctx.createPattern(img, 'repeat');
            if(GameBoard.textures[i+1])
                GameBoard.preloadTextures(i+1);
            else
                window.setInterval(GameMain.mainLoop,10);
        }
    },

Gotowe! Pełny kod źródłowy z dzisiejszego artykułu jest dostępny również online, jako działająca całość. Zapraszam do testów.

Optymalizacja

Po uruchomieniu gry zapewne zauważyłeś, że działa ona bardzo wolno. Jedynie przeglądarki działające w oparciu o WebKit potrafią osiągnąć oczekiwane 40 klatek. Poniżej dołączam małe zestawienie przeglądarek(aktualne ustawienia — odświeżanie klatki co 10ms — powoduje, że maksymalna ilość klatek na sekundę to 100).

Przeglądarka	fps
Safari (OS X)	50–60
Google Chrome(5.0.375.38 beta, GNU/Linux)	58–60
Mozilla Firefox(3.5.9, GNU/Linux)	31–33
Konqueror(4.3.5–0.1.1, GNU/Linux)	15–17
Opera(10.10, GNU/Linux)	12–16

Oczywiście jest to zbyt mało aby gra była w pełni grywalna, ponieważ na mapie poruszać będzie się kilka czołgów otoczonych szeregiem animacji. Pamiętajmy jednak, że kod, który umieściłem na serwerze jest niezoptymalizowany. W kolejnych artykułach przedstawię sztuczki jak przyspieszyć rysowanie elementów w obiekcie canvas oraz jak skrócić czas wykonywania się zwykłego kodu JavaScript.