Jakie są dobre biblioteki JS dla twórców gier? [Zamknięte]

56

Jeśli zdecyduję się napisać prostą grę, zarówno tekstową, jak i graficzną (2d), jakich bibliotek użyłbym? (Załóżmy, że korzystamy z przeglądarki zgodnej z HTML5)

Najważniejsze rzeczy, o których mogę myśleć

  • Renderowanie tekstu na ekranie
  • Animowanie duszków (przy użyciu obrazów / css)
  • Wejście (przechwytywanie klawiszy strzałek i uzyskiwanie względnych pozycji myszy)
  • Być może jakiś ładowanie zasobów lub dynamiczne ładowanie zasobów i wybieranie kolejności
  • Dźwięk (ale nie jestem pewien, jak ważne będzie to dla mnie na początku). Być może z miksowaniem i łańcuchami dźwięków lub zapętlaniem na zawsze, aż do zatrzymania.
  • Praca w sieci (niski priorytet) w celu połączenia użytkownika z innym użytkownikiem lub ciągłego pobierania danych bez wielokrotnego żądania (wiem, że istnieje, ale nie wiem, jak łatwo jest go skonfigurować lub używać. Ale to nie jest dla mnie ważne. pytanie).
html5 javascript 1047
źródło
3
Całkiem kompletna lista bibliotek HTML
oberhamsi
Co? Możesz to wszystko zrobić za pomocą czystego JavaScript. Socket.io dla sieci.
jcora,
Ciekawe może być Stage.js (jestem jego autorem).
Ali Shakiba,

Odpowiedzi:

25

jQuery i MooTools to niesamowite biblioteki JavaScript; Sam wolę jQuery. Każdy z nich pomoże ci w tworzeniu gier JS, jeśli korzystasz z DOM. Jeśli wybierzesz renderowanie Canvas, nadal uważam, że powinieneś użyć jednej z tych bibliotek, ale musisz nauczyć się funkcji Canvas. Oto samouczek, który wprowadza Cię w obszar roboczy, tworząc klon Breakout, więc może to być dokładnie to, czego szukasz (i używa jQuery).

Animowanie duszków polega na zmianie obrazu src lub wstępnym załadowaniu kilku obrazów i zamianie ich, lub na płótnie po prostu rysowaniu ramek animacji. Powyższe biblioteki mogą pomóc w każdym z tych przypadków. Biblioteki również pomagają przy wprowadzaniu danych (sprawdzają zdarzenia, takie jak onkeypress i onmousemove).

Jeśli chodzi o wstępne ładowanie zasobów, wydaje mi się, że niektóre gry używają pojedynczego obrazu „arkusza sprite” ( tutaj jest to dla gry Pacman firmy Google ). Wierzę, że w zasadzie tworzą DIV o jednym rozmiarze kafelka, z właściwością obrazu tła CSS ustawioną na arkusz sprite i właściwością położenia tła ustawioną na przesunięcie kafelka na arkuszu sprite. Nie widziałem biblioteki, która zrobi to za Ciebie, ale jQuery lub MooTools mogą ci pomóc w dynamicznym tworzeniu DIV i manipulowaniu jego CSS. W przeciwnym razie wstępne ładowanie obrazów polega na utworzeniu <img>tagów obrazów, które chcesz wstępnie załadować, i nie dodawaniu ich do strony (lub dodawaniu ich niewidocznie). Oto post na blogu który zawiera kod dla funkcji używającej jQuery do wstępnego ładowania obrazów.

SoundManager 2 wydaje się być biblioteką dźwiękową JS do użycia; Wiem, że Vanthia go używa, a Pacman Google'azastosował coś podobnego (lub przynajmniej taką samą technikę, używając ukrytego pliku Flash na stronie do odtwarzania dźwięków).

W przypadku sieci jQuery może obsłużyć AJAX dla Ciebie lub jeśli chcesz znacznie więcej sieci w czasie rzeczywistym (i masz do tego serwer), zajrzyj do gniazd JavaScript . Nie wiem, czy jest tam stabilna biblioteka, ale możesz przyjrzeć się temu lub temu . Zasadniczo korzysta z ukrytego pliku Java lub Flash na stronie, dzięki czemu możliwa jest prawdziwa komunikacja gniazd z JavaScriptem, który jest znacznie szybszy niż odpytywanie AJAX i nieco bardziej wydajny niż „AJAX Push” . Jednak najprawdopodobniej AJAX Push będzie tym, czego chcesz, a APE (Ajax Push Engine) jest prawdopodobnie biblioteką do użycia.

Oto też wykład techniczny Google na temat „Budowania silnika gry opartego na JavaScript . ” Wygląda schludnie.

Ricket
źródło
2
Ta odpowiedź jest nieco konserwatywna; jeśli chce korzystać tylko z przeglądarek HTML5, może wybrać płótno i skorzystać z jednej z bibliotek HTML5 (patrz mój komentarz do pytania). Używanie DOM i CSS do gier wydaje się włamaniem (choć w niektórych przypadkach jest to możliwe do wykonania).
oberhamsi
2
Co sprawia, że ​​wygląda to na hack? Google nie miał problemu z użyciem czystego DOM & CSS z logo PacMan i bardzo lubię moją grę w ponga na mojej stronie głównej. Szczerze mówiąc, płótno wydaje się jak włamanie, włamanie kwadratu grafiki do strony zdominowanej przez DOM. Ale niestety z naciskiem na to i WebGL jest jasne, że przeglądarka stanie się ciężką aplikacją do wszystkiego, jeśli jeszcze nie jest.
Odchodzę
Jeśli chce korzystać z audio, sieci, renderowania tekstu, będzie musiał użyć przeglądarki obsługującej HTML5. Niestety, płótno byłoby dobrym wyborem. Jeśli trzymasz się DOM i CSS, masz ograniczone możliwości, ponieważ technologie te tworzą już warstwę prezentacji z pewnymi założeniami (przepływ tekstu, nakładanie warstw, rodzaj wykresu sceny dla dokumentu tekstowego). Podczas gdy za pomocą płótna możesz manipulować pikselami w dowolny sposób, który uznasz za odpowiedni, co jest bliższe „normalnym”, surowym silnikom gier na SDL lub opengl.
oberhamsi
Dostarczone przeze mnie biblioteki audio i sieciowe nie wymagają HTML5. I faktycznie widzę przepływ tekstu, warstw i podobieństwo grafów jako zalety. Większość gier to po prostu rozmieszczanie i przesuwanie ikonek (obrazów) i nie potrzebują one bezpośredniego dostępu do pikseli. Naprawdę trzeba to ocenić na podstawie gry, którą chcesz zrobić, a także jeśli jesteś bardziej komfortowo z płótnem lub DOM, jeśli chcesz obsługiwać starsze przeglądarki, jeśli potrzebujesz dodatkowej mocy płótna itp.
Ricket
1
tak, to zależy od gry. Ale prosi o HTML5, a twoja odpowiedź dotyczy głównie Flasha i poziomu DOM 1 :) Jeśli chce zrobić najnowszą wersję HTML5, nie zwabiaj go.
oberhamsi
12

Kiedy jakiś czas temu oceniałem silniki JavaScript, moim ulubionym był Crafty:

http://craftyjs.com/

Było kilka opcji, które musiałem rozważyć, a niektóre inne, które mi się podobały, to:

http://easeljs.com/

http://www.limejs.com/

http://code.google.com/p/casualjs/

(Nawiasem mówiąc, inną opcją, która początkowo wygląda na dość sprytną, jest http://impactjs.com/, ale biorąc pod uwagę, że kosztuje to pieniądze, a inne opcje, na które spojrzałem, to silniki open source, były pewne rażące pominięcia, takie jak niemożność dołączenia elementów wyświetlających w dziedziczność).

AKTUALIZACJA: Minęły prawie 2 lata, odkąd opublikowałem tę odpowiedź, a sytuacja nieznacznie się zmieniła ( jest to rodząca się dziedzina technologii). Chociaż Crafty jest nadal doskonałym wyborem, w ubiegłym roku EaselJS nabrał tempa (szczególnie biorąc pod uwagę, że Adobe wskoczył do pociągu EaselJS .) Przejdę do tego narzędzia do przyszłych projektów (zauważ również, że ma nową stronę internetową )

jhocking
źródło
co dzisiaj sugerujesz? po 4 latach
Pooya Estakhri
1
Cóż, aktualizacja miała miejsce 1,5 roku temu i nadal to sugeruję.
jhocking
7

Silnik Effect Games (javascript) jest fantastyczny w przypadku gier opartych na kafelkach / ikonkach 2d. Witryna nie radzi sobie zbyt dobrze z opisywaniem tego, co jest w niej tak wspaniałego, ale jak tylko zagłębisz się w doskonałą dokumentację, zobaczysz, ile zostało dla ciebie pokryte:

  • spriting
  • wykrywanie kolizji
  • edycja poziomu
  • zarządzanie aktywami
  • audio
  • wejście i kontrola
  • tworzenie i zarządzanie zestawami klocków
  • nakładanie warstw
  • animacja
  • wydajność (blokada do prędkości klatek)
  • obsługa i abstrakcje w różnych przeglądarkach
  • hosting
  • osadzanie
  • Obsługa interfejsu

Naprawdę nie mogę dostarczyć wyczerpującej listy, ponieważ jest ona w pełni funkcjonalna. Brakuje tylko możliwości tworzenia menu w grze i interfejsu użytkownika (np. Menedżerów sprzętu itp.), Ale podobno jest to na liście rzeczy do zrobienia.

Rahul
źródło
4
Niestety silnik efektów wydaje się całkowicie opuszczony.
Letharion,
6

Utrzymuję brezentowy silnik gry 2D o nazwie JawsJS - http://jawsjs.com/

Źródło @ https://github.com/ippa/jaws

klify:

  • Czytelny, udokumentowany kod
  • Ponad 12 udokumentowanych przykładów w pakiecie
  • Przydatne konstruktory, takie jak Sprite (), SpriteSheet () i Animation ()
  • Stany gry - oddzielne sekcje gry, aby lepiej zorganizować kod
  • Zasoby - Szczęki wstępnie załadują wszystkie zasoby przed rozpoczęciem gry
  • Nie zależy od żadnej innej biblioteki javascript
  • Opiera się na wnioskach wyciągniętych z lat rozwijania Chingu, biblioteki gier Ruby
ippa
źródło
4

Ostatnio prowadzę badania w tej dziedzinie, więc pozwólcie mi wpłacić 0,02 USD:

PlayN to wieloplatformowa biblioteka od Google, która kompiluje obiektową grę od Java do javascript / Flash / Android. Będzie obsługiwał JSON (AJAX), modele danych i ma rozsądną semantykę do aktualizacji i renderowania. Bardzo fajne rzeczy.

Przetwarzanie Jest prostą w użyciu biblioteką skierowaną do projektantów i artystów. Jest wyjątkowo prosty w użyciu i może dać świetne wyniki. Użyłem wersji Java do modelowania naukowego i jest to przyjemność. Sceny 3D będą wymagały WebGL, ale sceny 2D działają bez nich.

Three.js Ma świetnie wyglądające dema. Wymaga WebGL, ale wynik wydaje się tego wart. Istnieje również kilka ciekawych przykładów online.

Oto niektóre inne elementy moich osobistych zrzutów linków, które dotyczą WebGL:

brice
źródło
3

Akihabara to środowisko, które widziałem, pojawiło się w wielu miejscach. Mój przyjaciel stworzył również serię samouczków i dokumentacji dla frameworka.

Alex Schearer
źródło
1

Wtyczki Pixie

Twórcy Contrasaurus wydali wiele swoich indywidualnych komponentów !!!

Mają kod do przekształcania macierzy , abstrakcje płótna i wiele innych ciekawych rzeczy.

Ich kod jest świetny, a ich biblioteki są naprawdę przydatne.

DFectuoso
źródło
1

Dziwne, że nie wspomniano o Bibliotece zamknięcia Google . Ma ogromny interfejs API, pozwala na bardziej obiektowy styl kodowania i ma kompilator.

Do tej pory korzystałem tylko z kompilatora, ale planuję jak najszybciej przestudiować resztę.

Petteri Hietavirta
źródło
1

Zwykle używam jawsjs, ponieważ bardzo łatwo jest go skonfigurować i rozpocząć tworzenie gry w kilka minut. Ma wiele naprawdę przydatnych domyślnych klas (Tilemap, Viewport, Sprite i inne), które naprawdę pomagają w tworzeniu gier.

David Gomes
źródło
1

Masz ich naprawdę dużo, ale to zależy przede wszystkim od tego, jakiego rodzaju silnika gry szukasz. Mogę podać kilka referencji najbardziej godnych uwagi.

Silniki do gier 2D

  • Cocos2D jest obecnie nieco bardziej modny. Ostatnio widziałem pytania Cocos2D pojawiające się na Stackoverflow.
  • Wpływ , możesz zobaczyć test porównawczy działający na oficjalnej stronie internetowej.

Silniki do gier 3D

Fundacja Mozilla pracuje nad silnikiem gier 3D o nazwie Paladin . To chyba Mozilla, że ​​tak naprawdę nie może zranić.

użytkownik14170
źródło
0

Istnieje również GameQuery, silnik gry oparty na jQuery. Ma przyzwoitą dokumentację dotyczącą swojego interfejsu API, a także kilka interfejsów API opakowań dźwiękowych, do których prowadzą linki w swojej witrynie.

http://gamequery.onaluf.org/

numo16
źródło
0

Matrix.js jest dobry, jeśli chcesz uzyskać transformacje macierzy w stylu Flash.

Daniel X Moore
źródło
0

Tom tutaj ze Scirra, jesteśmy 2-osobowym zespołem, który stworzył Construct 2, twórcę gier HTML5 . (Dostępna wersja bezpłatna).

Możesz rozważyć silnik taki jak nasz, ponieważ wykonuje on dużo pracy nóg. Na przykład samodzielne wykonywanie kolizji w kodzie może być bardzo trudne (pomyśl o kolizjach wielokątów). Wszystko na twojej liście jest łatwo osiągalne dzięki Construct 2.

Tom Gullen
źródło