Zaczniemy od guzików - to musi mieć każda gra. Przykładowy kod: powiedzmy, że masz prostą grę z 12przyciskami, wygląda to tak:

Wielkość: px

Rozpocząć pokaz od strony:

Download "Zaczniemy od guzików - to musi mieć każda gra. Przykładowy kod: powiedzmy, że masz prostą grę z 12przyciskami, wygląda to tak:"

Kajetan Nawrocki
8 lat temu
Przeglądów:

1 Zabrałem się za gry w technologii HTML. Ponieważ jest to najgorsze wyjście jeżeli ktoś kocha gry, ale najlepsze jeżeli ktoś kocha pieniądze, na pewno będzie kilka osób zainteresowanych. Każda gra jest inna dlatego nie planuję rozpisywać się nad silnikami, czy konkretnymi skryptami. Większość jednakże musi posiadać kilka elementów, które przewijać się będą przez całą Waszą karierę game dev'a, na których się skupie. Cześć 1: Bez 'porno' Sam tytuł w zasadzie wiele wyjaśnia ale opiszę to nieco szerzej - Nie dajcie sie nabrać na 'porno dla programistów'. Chodzi mi o bardzo profesjonalne podejście do swojej pracy. przykłada: var numpionts:int=300; var numbonus:int=100; var numpointsmulti:number=1.2; przykładb: np=300; nb=100; nmul=1.2; jeżeli oba przykłady w danym języku się wykonają tak samo, nie masz narzuconej nomenklatury (nie piszesz w teamie), to pisz jak Tobie wygodniej. Absolutnie nie chodzi mi o posiadanie bałaganu - wręcz przeciwnie. Zawsze sypałem sobie głowę popiołem za to, że piszę wszystko w jednej linii, a zmienne mam 2-3 literowe. Ale gdy przyszedł czas, ze musiałem przepisać swój kod na inny język (na chwilę obecną nie znam ich wiele - javascript,java,actionscript,php), to 100linijek kodu zawsze było łatwiej ogarnąć niż Część 2: Klasy To będzie moja główna wiedza przekazywana w tym kursie - skupiam się na szybkości pracy, bo jako freelancer muszę sporo się uczyć, zatem czas jest na wagę złota. Klasy to takie klocki, które dokładasz do kodu. Im lepiej napisane, tym szybciej składasz swoją grę. Jak wspomniałem na początku - każda gra ma wspólne elementy i poniżej pokażę Wam przykład jak przyspieszyć swoją pracę. Zaczniemy od guzików - to musi mieć każda gra. Przykładowy kod: function starbutton(){ var guzik=document.getelementbyid('startbutton'); guzik.onmousedown=function zacznijgre(){ /*miejsce na kod potrzbny do zaczecia gry*/; }; } powiedzmy, że masz prostą grę z 12przyciskami, wygląda to tak:

Większość jednakże musi posiadać kilka elementów, które przewijać się będą przez całą Waszą karierę game dev'a, na których się skupie.

2 Gołym okiem widać, że każdy szanujący sie developer z sercem inżyniera, wypracuje sobie lepszy sposób. Oto mój. Zrezygnowałem z osobnych funkcji opisujących działanie guzika i wszystko wpakowałem do jednej funkcji, dzięki czemu, utworzenie 12 guzików wygląda tak: dobutt('mmspo');dobutt('mmsta');dobutt('mmmor');dobutt('lvla');dobutt('lvlb');dobutt('lvlc'); dobutt('lvlmor');dobutt('lvlba'); dobutt('butl');dobutt('butr');dobutt('butra');dobutt('butrb');

czemu, utworzenie 12 guzików wygląda tak:

3 oto jak wygląda ta funkcja dobutt: function dobutt(n){var a=getid(n); a.onmousedown=function F(){btC(a);};} jak widać mamy tu kolejny skrót: a=getid(n); jest to skrót do: function getid(id){var M=document.getElementById(ID); return M} zatem, moja funkcja odnajduje guziki, przypisuje do wszystkich jedną funkcję: btc(a); Jak zatem wygląda funkcja btc? function btc(m){ if(m.id=='mmspo'){/*przekierowanie do funkcji*/} if(m.id=='mmsta'){/*przekierowanie do funkcji*/} if(m.id=='mmmor'){/*przekierowanie do funkcji*/} if(m.id=='lvla'){/*przekierowanie do funkcji*/} if(m.id=='lvlb'){/*przekierowanie do funkcji*/} if(m.id=='lvlc'){/*przekierowanie do funkcji*/} if(m.id=='lvlba'){/*przekierowanie do funkcji*/} if(m.id=='butl'){/*przekierowanie do funkcji*/} if(m.id=='butr'){/*przekierowanie do funkcji*/} if(m.id=='butra'){/*przekierowanie do funkcji*/} if(m.id=='butrb'){/*przekierowanie do funkcji*/} } Mam jedną funkcję, w ktorej na początku mam wszystkie nazwy komponentów, co ułatwia mi ich znalezienie (skoro łatwo je znaleźć, to wszsytko czego nie musze szukać moge skrócić do kilku literowych nazw). Zwykle - ponieważ podobne rozwiążanie mam we flashu - nad tą funkcją mam wszystkie guziki. Przy każdej grze mieszczę się w 2-3linijkach z deklaracjami dobutt więc łatwo mi je odszukać. A tak to wygląda w przawdziwym kodzie (10 przycisków): To mniej więcej 50% guzików jakie potrzebuje moja aktualna gra - reszta pojawi sie w miarę produkcji, Widać jednak, że nie potrzeba geniusza, by panował nad kodem. Im prostszy skrypt, tym mniej trzeba szukać w nim błędów, bo wszystko składa się z klocków.

getElementById(ID); return M} zatem, moja funkcja odnajduje guziki, przypisuje do wszystkich jedną funkcję: btc(a); Jak zatem wygląda funkcja btc? function btc(m){ if(m.

4 Część 3: Narzędzia developerskie Każdy język ma swoją specyfikę, ale w każdym powinno się pracować wygodnie. Można korzystać z gotowych frameworków, ale z czasem nie jest to tak optymalne jak się wydaje. Truizmem jest, że developer musi się wciąż rozwijać. Uczenie się czegoś, co w pewnym momencie może przestać się rozwijać i przenoszenie się na kolejne rozwiązanie (w ramach tej samej technologii) pozostawia nas z takim samym skromnym zasobem wiedzy na temat tego co tworzymy. Dlatego jeżeli chcecie kreować własne rozwiązania nie czekając na główną falę innych developerów potrzebne będą Wam narzędzia. Jak pisałem ostatnio wróciłem do tworzenia gier w HTML5 i w związku z tym przenoszę swój model pracy na adekwatny do javascriptu. Java script ma dwie bolączki jeżeli pracujecie jednoosobowo, lub chcecie pracować szybko. Po pierwsze brak systemu animacji (klatek), który trzeba sobie symulować (do czego zachęcam i opiszę w kolejnej części), oraz koszmarny jak cały HTML5 system tworzenia layoutu. Dziś pokażę Wam prosty system pozycjonowania grafik jaki sobie napisałem będę go oczywiście usprawniał, do czego też Was zachęcam. Tryb developerski. Najpierw stworzymy tryb developerski, by mieć podgląd w mini-konsoli na najważniejsze aspekty pomocne przy szybkiej pracy. 1. Zacznijmy od swtorzenia zmiennej określającej tryb developerski (statusem true/false): 2. w drugiej linii kodu mam instrukcję wyświetlającą informacje o tym, że jestem w TD (tryb developera). Jak łatwo się domyślić stworzyłem do tego osobnego div'a i wygląda to tak: 3. Do klasy guzików, którą opisywałem poprzednio, dopisałem sobie na końcu linijkę dla wszystkich guzików, wyrzucającą komunikat o klikniętym elemencie:

Uczenie się czegoś, co w pewnym momencie może przestać się rozwijać i przenoszenie się na kolejne rozwiązanie (w ramach tej samej technologii) pozostawia nas z takim samym skromnym zasobem wiedzy na

4. Teraz wystarczy dodać dobutt() - informacje o niej znajdziesz w 2giej części do wszystkich divów. Dzieki czemu po kliknięciu mam taki oto komunikat: 5.

5 4. Teraz wystarczy dodać dobutt() - informacje o niej znajdziesz w 2giej części do wszystkich divów. Dzieki czemu po kliknięciu mam taki oto komunikat: 5. Ułatwiło mi to dwie rzeczy po pierwsze szybciej piszę kod mając od razu wyświetloną nazwę DIV'a w ktorym znajduje się interesująca mnie zawartość, po drugie mam dokładne koordynaty DIV'a co również przyspieszy mi pracę. W zasadzie tyle by wystarczyło, bo grę już kończę i potrzebowałem szybszego systemu znajdowania divów, którym dedykuje określone akcje, ale ponieważ zakładam, że tworzę linię produkcyjną, dopiszemy jeszcze jeden mały element na przyszłość. Tryb Drag&Drop Pozycje grafiki są przydatne, ale przy kolejnej grze na pewno nie obejdzie się bez szybkiego ustawiania PNG w layoucie. Zdecydowałem się zrobić to poprzez aktywowanie trybu Drag&Drop. W tym dokumencie opiszę Wam przykład z przesuwaniem myszką, ale poza tym tekstem dopiszę sobie także wersję przesuwania strzałkami na klawiaturze ultra wygodne wystarczy wtedy skopiować kod z konsoli do dokumentu js. Zaczynamy: 1. tworzymy zmienne dla pozycji myszki (bo tworząc gry nie raz się to jeszcze przyda). Oraz uzupełniamy akcję dla każdego guzika opisaną powyżej.

2. Pozycję badamy 'co klatkę' js nie ma timeline'a ale przyjąłem w tej grze (co też zapisałem w zmiennej, że 1klatka to 40ms i takim mnożnikiem się posługuje przy określaniu czasu).

6 2. Pozycję badamy 'co klatkę' js nie ma timeline'a ale przyjąłem w tej grze (co też zapisałem w zmiennej, że 1klatka to 40ms i takim mnożnikiem się posługuje przy określaniu czasu). Wszelkie skróty jak Time, Lef,Top to skrótowe funkcje oszczędzające miejsce w głównym kodzie, które szybciej się pisze i łatwiej zapamiętać dzięki czemu płynne tworzenie czegokolwiek w nowym języku jest zawsze wydajniejsze. 3. W trakcie tworzenia tego małego systemu, dodatkowo napisałem sobie funkcję LOG, któej wcześniej jeszcze nie miałem (bo nie miałem konsoli). 4. Dzięki czemu wspomniany dodatek do funkcji dobutt, zamiast wyglądać tak: wygląda teraz tak: Całe działanie funkcji możecie zobaczyć pod tym linkiem: Video pokazuje dokładnie jak to działa, dodatkowo widzicie tam kody klawiszy, ponieważ ukryłem sobie aktywowanie/dezaktywowanie funkcji (drag=true lub drag=false) pod klawiszem 7 z klawiatury numerycznej (kod 103). kolejna część wkrótce. Marcin Rybicki Spruce Mobile LTD YT:

jest zawsze wydajniejsze. 3. W trakcie tworzenia tego małego systemu, dodatkowo napisałem sobie funkcję LOG, któej wcześniej jeszcze nie miałem (bo nie miałem konsoli). 4.

Podobne dokumenty

W każdej sali najważniejszym narzędziem są prawdopodobnie Zasoby. Przyjrzyjmy się teraz temu narzędziu, któremu zmieniono poniżej nazwę na Wspólne

Zasoby W każdej sali najważniejszym narzędziem są prawdopodobnie Zasoby. Przyjrzyjmy się teraz temu narzędziu, któremu zmieniono poniżej nazwę na Wspólne zasoby: Ikonki znajdujące się po prawej stronie