Jump to content

The House - gra w html'u :)


kots
 Share

Recommended Posts

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...

Link to comment
Share on other sites

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ą.)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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* :)

Link to comment
Share on other sites

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... :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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 :)

Edited by pabulo
Link to comment
Share on other sites

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,

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 ;)

Edited by Nezumi
Link to comment
Share on other sites

@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?

Edited by piotrek
merge
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

@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. :)

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

We are using cookies. Read about our Privacy Policy