2D DOM vs Canvas

[Nygol]

Witam serdecznie. Ostatnio w planach mam pomysł stworzenie gry 2d MMO. Gra ta na początek ma nie być skomplikowana prosta mapa+ wyświetlanie postaci, dopiero jak dobrze zobacze mechanizm działania to będe chciał ją rozbudować. Problem mój polega na tym że nie wiem jak tworzyć ją od strony klienta, czyli gracza. Do wyboru dopuszczam dwa sposoby:

1. Zarządzanie elementami DOM (czyli divy itp)
2. Użycie elementu Canvas

Jako iż z zarządaniem elementami myśle że większych problemów bym nie miał tak Canvas już nie ogarniam (ale wszystko jest do douczenia). Według was który sposób wydaje się lepszy, bądź bardziej optymalny.

 

Pozdrawiam Nygol

[bnmbb]

Oj canvasem się nigdy nie bawiłem i sam piszę grę 2D na divach itd.

Ale gdyby zrobić to canvasem:

W przypadku chodzenia gracza np. o tą 1 kratkę czyli 32pixele, które idzie jedną sekundę musiałbyś wygenerować 32 FPS. Jak by więcej osób szło w tym czasie to więcej.

Nawet już jeśli dałoby to radę no to kolejna rzecz - klikanie na graczy, zarządzanie graczami. Musiałyby jednocześnie z graczami latać elementy dzięki którym np. otworzysz menu dla gracza, albo klikniesz na NPC itd.

 

Miałem jeszcze 1 powód, dla którego canvas nie byłby za dobry, ale wyleciał mi z głowy i muszę się zbierać do szkoły . Jak sobie przypomnę to napiszę .

[Nygol]

I w wlasnie ruszlyes pewna sprawe :-) Mianowicie klikanie na npc itp. Jak w przypadku gry na DOM nie jest to problem(zdarzenie on click na jakis div z id czy klasa) o tyle canvas moze okazac sie problemem :-)

 

PS.Tez jestem w szkole, ale niestety tak zamulaja ze sie nie da uczyc :-D

[Writen]

Canvas jest najlepszym rozwiązaniem. W końcu służy do takich rzeczy. Niestety nie mając dużego pojęcia o javascript zrobienie gry będzie trudne. 

Istnieje gotowa biblioteka do tworzenia gier w javascript i bardzo ją polecam. Jest to chyba najlepsza spośród innych dostępnych bibliotek. Zainteresuj się http://phaser.io/

Można w niej zrobić dowolną grę. 

[Nygol]

JS ogarniam moze nie profesjonalnie ale wiekszych problemow to nie.mam (szczegolnie jak sobie dolaczyny jQuery). Lecz Canvas to dla mnie nowosc dlatego jak na razie DOM eydaje mi sie odpowiedni do takich gier, cos ala danaroth Foxbonda. Fajnie by bylo gdyby on sie wypowiedzial wkoncu jakies doswiadczenie z tym ma.

[Writen]

Na innym forum pojawił się podobny temat i myślę że przekonałem autora do skorzystania z biblioteki Phaser. 

Ciebie też chciałbym przekonać. Szczególnie, że biblioteka ta ma już zaimplementowane silniki graficzny i fizyczny, przy czym ten drugi jest tak rozbudowany że możemy zrobić dowolną grę.

Sam tworzę w tym grę. A jak ty zaczniesz to oczywiście masz moje wsparcie.

 

Kiedyś jeszcze gdy tylko testowałem tą bibliotekę to wrzuciłem na serwer coś takiego http://idea-center.pl/test/

 

Myślę, że biblioteka jest na prawdę warta uwagi.

[bnmbb]

@Writen - No wygląda na fajną fakt, ale ja już robię swoją na DOM'ie i na DOM'ie pewnie pozostanie. Robiłem też testy wydajnościowe by sprawdzić jak wiele elementów mogę nawpier....pododawać.

I wyszło mi, że taki komputer dziś warty 5 stów (nówka) jest w stanie bez problemu większego utrzymać 2000 elementów z czego 1600 non stop się porusza (poprzez animate z JQuery)

 

@Nygol - Spróbuj tą bibliotekę użyć, bo skoro to jest biblioteka to jest to biblioteka (raczej), a nie edytor WYSIWYG.

[foxbond`]

DOM wydajniejszy, uniwersalniejszy i przede wszystkim wyższa kompatybilność, szczególnie jeśli chodzi o starsze przeglądarki. Nie mogę rozwinąć, ale myślę, że wiesz jakie mam doświadczenie w tym temacie

[bnmbb]

No pewnie, nie znasz się .

 

Faktycznie nie pomyślałem o starszych przeglądarkach. Wtedy Canvas ssie, ale myślę że normalni użytkownicy mają przeglądarki z canvasem itd. . Jak nie to za rok/2 lata na bank już 99% przeglądarek będzie miało Canvasa :P

[Nygol]

Foxbond znajac ciebie przeprowadziles jakies testy, czy moglbys podzielic sie wynikami ? Albo powoedz dlaczego tak uwazasz?

;-)

@bnmbb 1600 elementow poruszajacych sie po jednej mapie ? przeciez to skrajnie nie mozliwe aby tyle osob bylo na jednej mapie, ba naweylt na serwerze wiec co do DOM to wodocznie odgarnie (dobrze skonstruowany )

[bnmbb]

@Nygol - Trust me, I'm Kongo.

1600 elementów bo rozwiązanie takie jak chcę wprowadzić w grze wymaga by każdy gracz miał jeden element na siebie, a w nim...1...2...3..4...tak 4 elementy, które się mogą poruszać .

[Writen]

Moze macie racje, ale przy DOM macie zdecydowanie mniejsze mozliwosci. Z czasem się pogubicie.

Ale jezeli wam to wystarcza, prosze bardzo.

[Nygol]

@Writen nikt tutaj nie odrzuca twojej propozycji bo jak najbardziej to rozważe, po prostu ciekawi mnie to rozwiązanie i jego wymagania ;-) Phaser'owi na pewno sie poprzyglądam ;-)

[bnmbb]

Dokładnie, Phaser może być całkiem dobrym rozwiązaniem .

 

Btw. znalazłem stronę z listą gier wykonanych właśnie w Phaserze:

http://pgl.ilinov.eu/

[foxbond`]

 

Moze macie racje, ale przy DOM macie zdecydowanie mniejsze mozliwosci. Z czasem się pogubicie.

Ale jezeli wam to wystarcza, prosze bardzo. 

 

A ja ciebie proszę, podaj jedną rzecz, której nie mogę zrobić za pomocą html-a, a jest możliwa w canvasie

[Nygol]

Czyli na ten moment @bnmbb i @foxbond` są za użyciem DOM'a a @Writen za uzyciem Canvas'a i dodatkowej biblioteki. Chyba jednak skuszę się na zarządzanie elementami DOM, jak nie da rady i nie będzie płynne to spróbujemy Canvas'a

[Writen]

A ja ciebie proszę, podaj jedną rzecz, której nie mogę zrobić za pomocą html-a, a jest możliwa w canvasie\

 

No dobra, może podczas robienia gry 2D w html'u będzie się dało zrobić to samo co w Canvas. Ale pomyśl, że na przykład zrobienie walki w czasie rzeczywistym będzie o wiele bardziej czasochłonne. Nie mówię, że niemożliwe.

 

Ale jak już chcesz jakiś przykład, to na pewno nie zrobisz gry trójwymiarowej.

 

Po za tym co według mnie przemawia za Phaser'em? To, że grafika jest generowana na canvasie używając do tego karty graficznej. Możemy wybrać sobie czy chcemy korzystać z samego Canvasa, czy też z webGL. A jak wiadomo jest to lepsze rozwiązanie niż korzystanie z samego CPU.

 

Kto robił kiedyś gry desktopowe powinien zrozumieć. Jeżeli nie robiliście nigdy gier, to pewnie nie wiecie do końca jak one działają.

[foxbond`]

No dobra, może podczas robienia gry 2D w html'u będzie się dało zrobić to samo co w Canvas. Ale pomyśl, że na przykład zrobienie walki w czasie rzeczywistym będzie o wiele bardziej czasochłonne. Nie mówię, że niemożliwe.

 

Ale jak już chcesz jakiś przykład, to na pewno nie zrobisz gry trójwymiarowej.

 

Po za tym co według mnie przemawia za Phaser'em? To, że grafika jest generowana na canvasie używając do tego karty graficznej. Możemy wybrać sobie czy chcemy korzystać z samego Canvasa, czy też z webGL. A jak wiadomo jest to lepsze rozwiązanie niż korzystanie z samego CPU.

 

Kto robił kiedyś gry desktopowe powinien zrozumieć. Jeżeli nie robiliście nigdy gier, to pewnie nie wiecie do końca jak one działają.

 

 

Po co mam robić grę 3D przez przeglądarkę? To sztuka dla sztuki.

 

Wszystkie przeglądarki od kilku lat generują strony za pomocą GPU więc nie rozumiem argumentu.

 

"No dobra, może podczas robienia gry 2D w html'u będzie się dało zrobić to samo co w Canvas. Ale pomyśl, że na przykład zrobienie walki w czasie rzeczywistym będzie o wiele bardziej czasochłonne. Nie mówię, że niemożliwe."

 

A jaka to niby będzie różnica? Nie będzie bardziej czasochłonne, też mam gotową bibliotekę "graficzną" więc tworzę z taką samą szybkością na elementach HTML co bym rysował w obiekcie canvas.

 

 

Co do gry 3D: Masz rację, ja nie zrobię, nie chce mi się. Są jednak dema takich gier

[bnmbb]

Haha, foxbond ty czasem jak coś dojebiesz... .

@Nygol - Ja muszę być za DOM'em bo robię w DOM'ie .

 

No fakt, ja też 3D nie zrobię. Jak bym robił to zawsze mam do wyboru między Javą, Flashem, a Canvasem.

 

Stworzenie walki w DOM'ie bardziej czasochłonne? Okey...

Jako iż niedawno robiłem walkę Real-Time w mojej grze 2D więc mała tabelka może:

EDIT: Zapomniałem legendy....

 

*fixedframe – tak nazywam coś co wygląda jak klatka, ale tak naprawdę jest to nic innego jak zbiór elementów, których CSS jest tylko odpowiednio ustawiany

**Nie wiem, nie znam Canvasa

*** http://screenshooter.net/9688810/kvulgoa - Jest to animowanie odliczania poprzez zmianę jej przeźroczystości

****Zakładam, że Canvas nie ma tak prostej możliwości by manipulować przeźroczystością elementów

* Odliczenie polega na pokazaniu elementu, odliczaniu od 3 z efektem przejścia – zmiany przeźroczystości odliczania

 

Jeśli cokolwiek pominąłem to sory, ale dodam jak powiecie co .

[Writen]

@bnmbb wszystko co wymieniłeś w ostatniej kolumnie jest zaimplementowane w bibliotece Phaser. Na stronie głównej http://phaser.io/ są wypisane wszystkie możliwości tej biblioteki. Jedyną rzecz jaką trzeba zrobić w html'u to pola do wpisywania tekstu (inputy i textarea).

 

 

 

Stworzenie walki w DOM'ie bardziej czasochłonne? Okey...

 

Tak jeżeli się nie ma gotowej biblioteki tak jak foxbond.

[bnmbb]

Kongo, tworzę grę 2D z walką RealTime. Jedyne frameworki jakie wykorzystuję to JQuery i socket.io (strona serwera), miło mi .

[Writen]

W takim razie chętnie się dowiem w jaki sposób robisz walkę RealTime. Jeśli tylko dobrze rozumiesz to pojęcie.

[foxbond`]

 

Tak jeżeli się nie ma gotowej biblioteki tak jak foxbond.

 

No wiesz, najpierw trzeba ja zrobić. Oczywiście zajmuje to n czasu

[Writen]

Noo. Mozna wybrac z wielu gotowych i zaoszczedzic czas. :-)

[foxbond`]

Noo. Mozna wybrac z wielu gotowych i zaoszczedzic czas. :-)

 

 

Można być złodziejem i kraść czyjeś biblioteki (chodzi o biblioteki open-source, które nie pozwalają na komercyjne wykorzystanie), można być leniem, który korzysta z gotowców lub kimś porządnym. Napisać własne. DO tego oczywiście potrzebna jest wiedza, której absolutna większość nie posiada.