The House - gra w html'u :)

[kots]

Nie wiem czy to dobry dział na obwieszczenie, że zabrałem się za grę przygodową. ;) Niemniej standardowo wszystko jest wykonane w html, css oraz js. :] Tylko dźwięk odtwarzany jest z pomocą flasha - ciągle jest to rozwiązanie pewniejsze niż html 5 audio (przynajmniej moim zdaniem).

 

Zapraszam do obadania o co chodzi:

 

http://animacjejs.pl/licencjat

 

Takie super krótkie demo. Ale wiecie co? I tak jestem zadowolony, że udało mi się zrobić to, co zrobiłem. Na początku myślałem, że nie dam rady (był kryzys!). :P

 

Tutaj krótki post na ten temat (na mojej stronce):

 

http://arturkot.pl/nowy-projekt-the-house/

 

Mam nadzieję, że się spodoba. Naprawdę dużo roboty w to włożyłem...

[polka dot]

nie mam teraz czasu obadać, ale grafika w pierwszej lokacji jest doprawdy zachwycająca

[muody]

Przegenialna grafika, man, Another world w izometrii ;] Po drugie, fajny, nie nachalny a czytelny interfejs. Powodzenia w dalszej pracy

 

(Pogadałem z rybą o oknie, wybrałem że "widziałem", chociaż to była bzdura, ryba wyczuła blef, "C'mon, sprawdź okno" - ok, poszedłem - kliknąłem, gra się zawiesiła. Wszystko jest OK, jeśli podejść do okna przed lokacją z rybą.)

[Lucek]

Ekstra klimat kolego!!! Szkoda że przechodzi się to w 30 sekund:(

[Nezumi]

Dobre -cos nowego :D

[arev]

Hej, bardzo fajna sprawa :) Oprawa audiowizualna ciekawa i klimatyczna.

Kilka rzeczy, nad którymi bym popracował:

- Kamera - niech podąża za graczem. Może nie jak przyklejona, a z lekkim opóźnieniem. Ruch, który jest teraz jest ok, ale powinien się zaczynać krótko po tym, jak postać zaczyna się ruszać.

- GUI - gram na dużym monitorze (2048x1152) i przyciski są strasznie rozrzucone. Póki co są mało ważne, ale podejrzewam, że w dalszej części będzie trzeba ich co jakiś czas użyć. Wtedy machanie kursorem po całym ekranie będzie nieco przykre.

Znalazłem jeszcze dwa bugi:

- pathfinding w akwarium sobie nie radzi,

- po wznowieniu gry postać stoi poza pomieszczeniem i można tylko zresetować grę.

Powodzenia w pracach nad projektem. Zapowiada się coś ciekawego, w co chętnie zagram, gdy już skończysz.

[Kim Bo]

po wznowieniu gry postać stoi poza pomieszczeniem i można tylko zresetować grę.

 

u mnie tak jest od samego początku. Nie da się zagrać, zaraz po zakończeniu tego dialogu i załadowaniu grafik wszystko staje w miejscu :(

nie mniej wygląd pokoju całkiem spoko :)

[kots]

Dzieki za opinie Panowie! :)

 

Milo, ze lapiecie bugi. :) Postaram sie to naprawic jak najszybciej. Niestety nie mam teraz stalego dostepu do kompa (i przez jakis czas raczej nie bede mial...), ale jak tylko znajde czas, postaram sie niszczyc problemy.

[Loki]

kots - kawał dobrej roboty. Czekam niecierpliwie na grudzień i premierę "full wersji" :)

[torm]

świetna sprawa, szczególnie mi się spodobał główny bohater i sceneria z rybą :)

[adek]

Już gratulowałem na twitterze bo to ostatnio znalazłem. Jeszcze raz gratuluję. Chciałbym, żeby licencjatów na takim poziomie było więcej. Bardzo dobrze zrobione i świetny pokaz możliwości HTML5, frameworków javascriptowych.

 

Świetne. Napisz coś jak możesz jak to robiłeś, od czego zaczynałeś. Myślę, że wielu osobom się przyda.

 

Mało tutaj w tym dziale takich wątków na 5* :)

[torm]

ja się podpisuję pod prośbą Adka... właśnie zacząłem coś kodować... a sam projekt zrodził pewien pomysł na grę w mojej głowie :) poczekam więc, aż coś napiszesz, a narazie popracuję nad scenariuszem... :)

[Nenek]

rewelacja, strasznie się podjarałem tym! :p

Ekstra klimat.

Powiedz używasz jakiegoś gotowego silnika do tej animacji?

Strasznie jestem ciekaw how it's made. Badam od pewnego czasu możliwości html5 i to co tutaj zobaczyłem na prawdę miło mnie zaskoczyło

 

pozdrawiam

Nenek

[kots]

Witam!

 

Korzystam z krotkiej chwili dostepu do kompa. Rozpisze sie na temat technikaliow za jakies dwa miesiace, kiedy juz prawdopodobnie dorobie sie jakiegos laptopa. Jestem teraz na work and travel w USA i walcze o przezycie. Poczatek pobytu jest ciezki. ;)

 

Anyway...

 

Odnosnie HTML 5 - zwroccie uwage na to, ze korzystam z normalnych elementow HTML (wszystko na divach) oraz wspomagam sie transformacjami 2d i paroma innymi bajerami (css 3). Reszta to javascript (dokladniej - jquery), ktory tym wszystkim porusza.

 

Opisze po krotce js na ktorym smiga gra.

 

Biblioteki z ktorych korzystalem (wszystko mozna sprawdzic w kodzie w index.html - ctrl + u ;) ):

 

less-1.1.3.min.js - LESSJS obiektowy css - jak dla mnie genialna sprawa - nawet pomimo pewnych swoich ograniczen SILNIE ZALECAM zbadanie tej biblioteki.

 

modernizr.custom.13520.js - MODERNIZR - sprawdza kompatybilnosc - czy dane bajery z CSS 3 sa obslugiwane przez przegladarke czy nie? BARDZO PRZYDATNE

 

jquery-1.6.1.min.js - chyba nie musze przedstawiac? Napisze tylko, ze im dluzej korzystam z tego frameworka, tym bardziej mi sie podoba.

 

preloadCssImages.jQuery_v5.js - preloaduje wszystkie obrazki z CSS - praktyczna sprawa

 

jstorage.js - zarzadzenie LOCAL STORAGE - takie cookies na sterydach ;) - obsluguja to nowe przegladarki, uzywam do zapisywania stanu gry

 

jquery.spritely-0.4.js' - Spritely - uzywam do animowania spriteow - np. glowny bohater jest spritem - sprawdzcie w firebugu (lub w czym tam preferujecie ;) )

 

jquery-ui-1.8.11.draggable.min.js - JQUERY UI - zestaw narzedzi do tworzenia interfejsow i nietylko - tutaj uzywam do ”przeciagania” pomieszczen myszka

 

soundmanager2-nodebug-jsmin.js - SOUNDMANAGER - odopowiada za obsluge dzwieku, uzywa flasha w razie potrzeby

 

=== Tutaj zaczynaja sie skrypty napisanie przeze mnie

 

'js/dialogue_box.js' - wyswietla okna dialogowe

'js/tooltip.js' - wyswietla tooltip

'js/text_cloud.js' - chmurki z tekstami, ktore czasmi ”wypowiada” postac

 

'js/data.js' - odpowiada ogolnie za zapisywanie stanu gry i tego co gra ”pamieta”

'js/settings.js' - ustawienia gry, na ten moment odpowiada tylko za resetowanie :P

 

'js/audio.js' - tutaj definiuje sobie poszczegolne dzwieki

'js/items.js' - odpowiada za zarzadzanie przedmiotami znalezonymi przez gracza

'js/view.js' - generuje widok za oknem

 

'js/room.js' - generuje pokoje, odpowiada za poruszanie sie postaci po pokoju (m. in. pathfinding)

 

'js/scenes.js' - odpowiada za cutscenki

'js/npcs.js' - non playable charcters - na razie to tylko rybopodobne stworzenie, bedzie ich wiecej ;)

 

'js/game.js' - korzysta z wszystkich powyzszych skryptow/obiektow i odpala gre

 

Ogolnie to programista ze mnie taki sobie - ucze sie. Duzo jeszcze przede mna... Kiedy juz skoncze te gre, na pewno nabije sobie duzo exp. ;)

 

Pozdro!

[Nenek]

Super, dzięki za tak szczegółowy opis. Nie znałem części tych bibliotek.

Bardzo mi pomogłeś. Jeszcze raz dzięki! A po za js leci jakiś php, ajax?

[adek]

Gratulacje fronta. Z tego działu jest to zdaje się pierwsza rekomendacja!

[n1cram]

Rewelacja! super izometryczny rzut bardzo mi się to podoba! fajna postać też!

[makak]

Świetne, zasłużony front :)

[kots]

Jasny gwint. :) Ale zaskoczenie! Dzieki za fronta! :)

 

Nenek - uzywam html, css i js. Tyle. :) Nie bylo potrzeby kodowania po stronie serwera.

[pabulo]

fajowe, bardzo fajna grafika

 

są drobne będy w inglisz konkretnie w rozmowie z rybą powinno być "tell me what you saw" zamiast "what did you see"

 

w tego typu zabawach scenariusz jest chyba najwazniejszy. Mam nadzieje że dsz rade wystąpić z czymś na miare lostów :)

Edytowane 10 Lipiec 2011 przez pabulo

[lukasjogabonito]

Też się wkręciłem, czekam na dalszą część....

[pkowal1982]

Sympatyczne.

U mnie rozjezdzaja sie dymki z napisami. Wyglada to tak jakby w kazdym opisie byla niepotrzebna pusta linia na poczatku przez co ostatni wers jest juz poza dymkiem.

[ptfromscr]

Klimat świetny, jeżeli chodzi o problemy to mam problem z wystartowaniem gry bo postać cały czas jest poza pokojem i tylko od czas do czasu gra normalnie funkcjonuje. Poza tym raz zacięło się po wejściu do akwarium przy rozpoczęciu dialogu z rybą (nie widać okna z dialogiem), a ponadto nie mogę podnieść klucza (chyba, że coś źle robię :) ).

 

Przeglądarka: Mozilla 3.6.18.

 

Pozdrawiam,

[dElay]

Super tylko rybka popłynęła a ja nie mogę podnieść klucza :)

[Stępniu]

No świetna sprawa:) Ile nad tym łącznie pracowałeś?

[biszkopte]

heh nie no za@#$%^&*:) już się nie mogę doczekać kiedy skończysz :)

[Dav]

Nie wiem czy to dobry dział na obwieszczenie, że zabrałem się za grę przygodową. ;) Niemniej standardowo wszystko jest wykonane w html, css oraz js. :] Tylko dźwięk odtwarzany jest z pomocą flasha - ciągle jest to rozwiązanie pewniejsze niż html 5 audio (przynajmniej moim zdaniem).

 

Zapraszam do obadania o co chodzi:

 

http://animacjejs.pl/licencjat

 

Takie super krótkie demo. Ale wiecie co? I tak jestem zadowolony, że udało mi się zrobić to, co zrobiłem. Na początku myślałem, że nie dam rady (był kryzys!). :P

 

Tutaj krótki post na ten temat (na mojej stronce):

 

http://arturkot.pl/nowy-projekt-the-house/

 

Mam nadzieję, że się spodoba. Naprawdę dużo roboty w to włożyłem...

 

Nie wiem czy była już o tym mowa, nie chciało mi się czytać całego tematu... :P

 

Ale jedyna rzecz, która mnie denerwuje to krzyżyk zamknięcia "okna informacji". Tj po podniesieniu kluczyka. Jest za daleko od zawartości okna, na prawym rogu. Jak ma się duży monitor to to jest trochę uciążliwe. Do tego ten przycisk jest dosyć mały..

 

Robota niezła, gratuluję pomysłu i wykonania. Oby więcej takich prac!

[kots]

Witam!

 

Niestety jeszcze nie skończyłem swojej gry, pozostało jeszcze parę istotnych rzeczy do zrobienia, ale sporo też się zmieniło (na lepsze jak sądzę): animacjejs.pl/licencjat

 

O dojściu do końca informuje stosowny komunikat (nie jest tak, że w pewnym momencie po prostu nie ma gdzie iść ;) ). Od kilku znajomych, którzy sprawdzali mi na szybciora grę usłyszałem, że jest za trudna, w pewnym momencie nie da się logicznie wywnioskować co dalej. Bardzo możliwe, że mieli rację, ale z drugiej strony wydaje mi się, że da się to rozkminić. ;)

 

Ciekaw jestem jak Wam pójdzie. :) Dodam jeszcze, że niestety gra jest bardzo króciutka (taki growy short :) ). No i chociaż wydawać by się mogło, że w zasadzie niewiele tam się dzieje to uwierzcie: to masakrycznie DUŻO roboty. No ale chociaż jest satysfakcja i skill rośnie. :]

 

Acha - jeszcze się pochwalę, że obroniłem swój dyplom parę dni temu i bardzo się spodobało, dostałem celujący (yeah!) i tym samym jestem wesołym licencjatem. ;)

 

Pozdrawiam!

[Nezumi]

Skonczylem - jedyny minus to taki ze kilka razy mi sie zawiesila

 

SPOILER ponizej

 

przy aktywowaniu w kompie pojawia sie czarny ekranik i sie nie zamyka - musialem ponownie wgrec giere - na szczescie jest kontynuacja ;) Drugi raz udalo mi sie ja "zawiesic" jak otwarlem sobie items i z otwartym dzialalem - cos sie ponakladaly warstwy i nie moglem zamknac jakiegos widoczku. Ogolnie nie jest to wszystko trudne do wymyslenia - co ty masz za znajomych?! Nie wiem co tam moglo sprawic klopoty ale najbardziej spodobal mi sie motyw z ptakiem :D

 

Fajne choc psychodeliczne na maksa - ciekawy jestem historii skad to wszystko takie... O ile masz jakas ;)

Edytowane 22 Grudzień 2011 przez Nezumi

[adek]

Gratulacje! Projekt został właściwie oceniony. Myślę, że będziesz miał tez mocną rzecz w portfolio. W okresie świątecznym postaram się znaleźć chwilę, aby to przejść.

[muody]

Hm, gra mi się zawiesiła, kiedy w komputerze kliknąłem na reveal, po akcji z piecem. Przeglądarka: Opera 11.60

[kots]

@muody - na czym dokładnie polega zawiecha? Czy może nie pojawia się krzyżyk do zamknięcia ekranu?

 

Czy po prostu wszystko "zamarza" i pozostaje restart przeglądarki?

Edytowane 23 Grudzień 2011 przez piotrek
merge

[piotrek]

Wow, nie wiedziałem, że takie coś można zrobić w samym HTML5 + zabawki. Fantastycznie to wyszło.

[kots]

@piotrek - podkreślam, że użyłem jedynie standardowych elementów html (divu, divy i divy) - nie ma tu w ogóle canvasa (który jest zdecydowanie bardziej potężny)! To znaczy, że pod względem samej struktury (technicznie) ta gra jest bliska np. ... temu forum. :)

 

Tutaj jeszcze link do prezentacji, którą wykonałem na potrzeby obrony dyplomu: http://animacjejs.pl/prezentacja/ Dodam do tego jakiś tekst z wyjaśnieniami (podczas przerzucania slajdów po prostu sobie do nich mówiłem ;) ). Ale to jakoś później. Teraz mi się nie chce - świąteczne lenistwo! :P

[kots]

Acha - slajdy można przerzucać strzałkami lub spacją i bekspejsem. :)

[imprecis]

Również zwiesił mi się na komputerze i akcji z piecem. Odświeżyłem i teraz jak klikam na komputer to mam czarny ekran ? To jest jakiś błąd czy dobrze działa ? Nie mam teraz pojęcia co zrobić, bo wszystko już wyklikałem co możliwe.

[kots]

@Synuś - to absolutnie niedobrze, że gra się zawiesiła. Możesz napisać jakiej używasz przeglądarki i systemu operacyjnego? W jaki sposób objawiły się t błędy/zawiechy?

 

Odnośnie tego czarnego ekranu to wygląda na to, że jest ok. On ma się wyłączyć, jest to w pełni zamierzone. :)

[olaf]

Bardzo ciekawy projekt. debugowanie gry zawsze najwiecej uczy o danym języku ;)

[imprecis]

kots - Safari 5.1.2, Mac OS Lion 10.7.2. Gra się ścieła jak kliknąłem na komputer (czarny ekran pojawił się i nie było możliwości by go wyłączyć). Jak odświeżyłem stronę to znowu znajdywałem się w pokoju i jak kliknąłem ponownie na komputer to pojawiał się czarny ekran i mogłem go wyłączyć (krzyżyk się pojawił). Jeśli wszystko jest ok to daj jakiegoś spoilera co teraz zrobić, bo chyba z 15min siedziałem nad tym, wszystko już wyklikałem co się dało i nie wiem co dalej, a chciałbym zobaczyć jak wygląda cała gierka :)