Luke J. Li

Więc kontynujemy tutorial. Oto kolejna, długo wyczekiwana część. Poprzednie części: Krok 0 - przygotowania Krok 1 - ładowanie obrazków Krok 2 - wyświetlanie obrazków na Canvasie, podstawowa animacja Krok 3 - obsługa klawiatury Krok 4 - wystrzeliwanie pocisków Po ich zrobieniu powinniście widzieć coś takiego: Jeśli tego nie macie, możecie ściągnąć paczkę zip z przerobionymi 4 poprzednimi krokami. Czyli mamy statki ufo, mamy rakietę, możemy nią sterować strzałkami oraz strzelać za pomocą spacji. Brakuje jednak jeszcze czegoś. Efektu. Statki ufo powinny się rozwalać, inaczej nie ma to żadnego sensu. I teraz tak. Żeby rozwalać statki musimy jakoś wykryć zderzenie (ang. collision detection) między naszym pociskiem, a tak zwanym "ufem". Czyli w każdej klatce będziemy przelatywali przez obiekty i sprawdzali czy żaden z nich się nie zderza z innym. Jeśli się okazuje, że tak odpowiednio zaregujemy (np. zniszczymy statek kosmiczny). Jak jednak wykryć taką kolizję? Jes

opublikowałem jedną z moich poprzednich gier - strzelanie do wiedźmy. Shoot the Witch jest to na razie pierwszy mój submit do Kongregate i pierwszy ogólnie na platformę grową. Zobaczymy co z tego wyjdzie.

Kolejna dawka screenów z nowej, niewrzuconej jeszcze do internetu wersji gry w orbitującego pingwina. Pojawiły się kryształki śniegu, które pojawiają się w miejscach trafionych przez lodowy pocisk.

Oto parę screenów z obecnej wersji gry. Zapewne w ukończonej grze grafika będzie nieco inna, bardziej dopracowana (nie wiem co z pingwinem zrobić - najpierw był w formie sprajta. Później przerobiłem na kulkę, ale też jakos dziwnie wygląda).

Robię grę o pingwinie w kosmosie. Trójwymiarową. Niewiele jeszcze widać, ot, Ziemia i orbitujący pingwin. I jak się kliknie to strzela. Ale nie ma efektu większego. http://hex13.org/penguin/ Jak chcecie to spójrzcie, będę dorabiał tę grę. EDIT 10 grudnia, 21:02 dorobiłem pociski antypingwinowe lecące z Ziemi. EDIT 12 grudnia, 17:56 uaktualniłem. tweekuję wygląd pocisków. zmieniłem postać pingwina na kulkę, wydaje mi się że bardziej realistycznie wygląda (na tyle, na ile pingwin w kosmosie może "realistycznie wyglądać" ;) inne rzeczy również pozmieniałem, ale ich nie widać na ekranie, gdyż są to zmiany w kodzie.

czy też was wkurza pisanie ciągłe console.log('tekst, który chcemy wyświetlić') jak debugujecie swoje skrypty? Można to obejść pewną sztuczką. Piszemy na początku naszego skryptu coś takiego: Object.defineProperty(window, 'cout', { set: function() { console.log.apply(console, arguments); } }); To nam stworzy właściwość "cout" (możecie inaczej nazwać) i przypisze do obiektu globalnego window . Kiedy ta właściwość będzie przypisywana, automatycznie przekażemy argumenty do funkcji console.log() . A potem wystarczy tylko pisać: cout = 'tekst, który chcemy wyświetlić'; tak jak na tym linku: http://jsfiddle.net/ax3sddL5/2/

Ogarniam ostatnio Three.js . Piekielnie fajną bibliotekę do natywnej grafiki 3D w przeglądarce (wewnętrznie biblioteka korzysta z WebGL). W dość prosty sposób można stworzyć obiekt sceny 3D, dodać do niego obiekty, światła, kamerę, potem jakieś animacje. Tu jest link do tego, co można w tym zrobić: Three.js - przykłady (wymagają przeglądarki obsługującej WebGL ). Wietrzę w tym dużą przyszłość. Udało mi się już zaimportować prosty model z Blendera - jest to tego specjalna wtyczka: wtyczka do eksportu/importu Blender-Three.js niestety jeszcze nie udało mi się zaimportować do końca materiałów (ale może dlatego, że samego Blendera nie ogarniam zbyt dobrze, i nie wiem czy przypisałem dobrze materiały i tekstury w Blenderze). No ale że Three.js to jedynie silnik graficzny, renderer - to można robiąc swoją aplikację podpiąć pod to różne inne biblioteki - ja podpiąłem zewnętrzny silnik fizyki Chipmunk, o którym pisałem poprzednio (z tym, że on nie jest do 3D akurat, tylko do 2D). Wi

Postanowiłem zamiast używać Phasera, skorzystać z Pixi, biblioteki graficznej na której Phaser się w duuużej mierze opiera. Czym jest Pixi ? To po prostu szybki silnik renderujący grafikę 2D w przeglądarce, korzystający z WebGL (jeśli jest dostępny), w ostateczności ze zwykłego Canvasa. Wokół tej biblioteki Phaser dodaje swoje dodatkowe funkcje. Tylko tak - "silnik renderujący" - wydaje się, że to coś strasznie niskopoziomowego? No właśnie nie. API jest może jeszcze prostsze od Phasera. W zasadzie super proste, jeśli miałeś do czynienia kiedyś z programowaniem pod Flasha - bo w Pixi większość funkcji i obiektów opiera się na klasach z ActionScriptu - mamy obiekt Stage, Sprite etc. Mamy hierarchię obiektów na scenie, filtry, zdarzenia myszy/dotyku etc. Pomyślałem więc, że jeśli i tak mi Phaser nie do końca odpowiada (i czuję, że pisząc w Phaserze po prostu musiałbym jednak dodatkowy metaframework zrobić do niego), to może wyjmę z niego samą bibliotekę, na której się on

Powracam do Phasera, próbuję zrobić w nim teraz grę. Ale tak - API niby proste, ale i tak trzeba napisać trochę kodu inicjalizującego, zanim cokolwiek się pokaże na ekranie, co jest upierdliwe. Niby jest to prosty kod i ogranicza się do wywoływania metod w stylu game.load.image(...), game.add.sprite(....) etc. ale i tak, jeśli muszę ładować ileś sprajtów, to ten kod staje się brzydki i w stylu copy-pastego. Trochę bez sensu, prawda (a tak jest w tutorialach, więc tak się chyba tam robi)? Dlatego więc zrobiłem sobie własny loader do sprajtów: i zamiast kodować ręcznie game.add.sprite, to piszę sobie JSONa, który zawiera wszystkie sprajty i definicje: Prawda, że wygląda dość prosto? ;) No więc tym sposobem mam w zasadzie całą planszę w postaci struktury danych w pliku JSON. Strukturę tę później ładuję do skryptu i w pętli przechodzę przez wszystkie obiekty i obrazki i robię automatyczne ich ładowanie. Co mi to daje? mniej bezsensownego pisania. Jak chcę, żeby jednost

Kolejny JavaScriptowy framework, tym razem Phaser. Zaczynam się go uczyć. Z tego co widziałem, to API urzeka prostotą, chociaż jeszcze wciąż się zmienia niestety (rozwojowy framework :( Przykłady: http://examples.phaser.io/ Dokumentacja: http://docs.phaser.io/ Kod źródłowy: https://github.com/photonstorm/phaser Ogólne linki: http://gametest.mobi/phaser/docs/Phaser.html

Z powodu braku czasu musiałem zrobić przerwę w prowadzeniu bloga, ale mam nadzieję, że niedługo uda mi się napisać kolejną część tutoriala. Ponadto może się tu pojawić też niedługo coś związanego z Cocos2D, wieloplatformowym* frameworkiem do gier, w którym jest możliwość pisania kodu w JavaScript - taka gra później odpali się zarówo w przeglądarce, jak i po skompilowaniu na telefonie komórkowym czy innym mobilnym urządzeniu. W przeciwieństwie do innych podobnych technologii, Cocos2d-x (z iksem na końcu, patrz gwiazdka pod tekstem) nie osadza kodu HTML5 w aplikacji, ani nie tworzy webowych rozwiązań typu Canvas, tylko raczej tłumaczy kod JavaScript na wywołania natywnych funkcji zaimplementowanych we frameworku. Więc ma to potencjał do bycia bardziej wydajnym niż webowo-htmlowe rozwiązania (ale czy tak jest w istocie, nie wiem, postaram się dotrzeć do jakichś benchmarków i tu wrzucić jak coś znajdę). W Cocos2D masz do dyspozycji dwa silniki fizyki - Box2D oraz Chipmunk . W tej