Jaki jest obecny stan wiedzy w bibliotekach JavaScript i strukturach HTML kanwy? [Zamknięte]

Obecnie badam opcje pracy z kanwami w nowej aplikacji HTML 5 i zastanawiam się, jaki jest obecny stan wiedzy w bibliotekach JavaScript i strukturach HTML kanwy?

W szczególności, czy istnieją frameworki, które obsługują rzeczy potrzebne do tworzenia gier - złożone animacje, zarządzanie wykresami scen, obsługę zdarzeń i interakcje użytkowników?

Również chętny do rozważenia zarówno produktów komercyjnych, jak i otwartych.

Pracowałem nad fabric.js - biblioteką płótna, która pomaga właśnie w tym - manipulowaniu obiektami na płótnie, obsługując zdarzenia i interakcje użytkownika. Nie jest jeszcze wydany, ale spójrz na prostą wersję demonstracyjną .

Możesz go również zobaczyć w akcji w tym edytorze projektów , dla którego został pierwotnie stworzony.

Edycja: Projekt jest teraz dostępny na github (open-source na licencji MIT)

Aby rozpocząć, sprawdź:

• Dema (proste i złożone, z kodem pokazującym, jak są zrobione)
• Prezentacja Fabric.js na FalsyValues (i jeszcze jedna na BK.js )
• Wiki na github (w tym FAQ )
• Dokumentacja
• Grupa Google (zadaj tam dowolne pytanie)
• Fabric.js na Twitterze (lub krótkie pytania na Twitterze)
• Wprowadzenie do Fabric.js: część 1 (artykuł na ScriptJunkie)
• Wprowadzenie do Fabric.js: część 2 (artykuł na ScriptJunkie)

Jak wypada Fabric w porównaniu z innymi bibliotekami kanw Javascript? Oto tabela porównawcza .

Jestem zaskoczony, że nikt nie wspomniał o WebGL i zbudowanych na nim frameworkach. Uważam to za wysoko na liście ze względu na najnowocześniejszą grafikę 3D z akceleracją GPU i złożoną animację na płótnie HTML / javascript.

WebGL to międzyplatformowy, wolny od opłat standard sieciowy dla niskopoziomowego interfejsu API grafiki 3D opartego na OpenGL ES 2.0, udostępniany za pośrednictwem elementu HTML5 Canvas jako interfejsy Document Object Model. ...

WebGL przenosi 3D do sieci bez wtyczek, zaimplementowane bezpośrednio w przeglądarce. Główni dostawcy przeglądarek Apple (Safari), Google (Chrome), Mozilla (Firefox) i Opera (Opera) są członkami grupy roboczej WebGL.

WebGL jest bardzo solidny w obsłudze grafiki akcelerowanej przez GPU. Sprawdź te demonstracje shaderów GLSL . :-) I zobacz ChemDoodle jako przykład interakcji użytkownika.

Pracowałem nad aplikacją wykorzystującą framework O3D firmy Google , która zarządza wykresem sceny i używa WebGL do renderowania (używał własnej wtyczki). O3D jest w toku, a jego dokumentacja nie jest w pełni aktualna, ale jest w trakcie aktywnego rozwoju i istnieje kilka dobrych wersji demonstracyjnych . Basen 3D może znajdować się najbardziej na twojej alei. Programiści Google bardzo reagują na pytania w grupie dyskusyjnej.

Istnieje wiele innych frameworków opartych na WebGL; zobacz tutaj . Wśród tych, które wspominają o tworzeniu gier i grafach scen, są Copperlicht, SceneJS, X3DOM.

WebGL działa w ostatnich wersjach rozwojowych kilku przeglądarek , ale nie IE. Używałem Firefoksa („Pole minowe”) i Chromium z dobrymi wynikami. Będziesz potrzebować jednego z nich, aby uruchomić powyższe wersje demonstracyjne.

Jednak jeśli Twoim wymaganiem jest to, że nie może mieć żadnych zależności poza kanwą / js HTML 5, WebGL może nie być właściwym wyborem. Wygląda na to, że IE wkrótce go obsłuży.

Aktualizacja: po postawieniu dużego oporu MS zdecydowało się na obsługę WebGL w IE 11 .

three.js , autorstwa mr. doob , to fantastyczny silnik 3D dla javascript, który zawiera scenegraph (zarówno wersje programowe, jak i przyspieszone sprzętowo WebGL), cieniowanie, cząsteczki, animację skórki (tak mi się wydaje) i efekty świetlne. Sprawdź to, jest super utalentowanym facetem.

Powinienem dodać, że będziesz potrzebować najnowszej przeglądarki Google Chrome lub jej odpowiednika, aby wyświetlić większość wersji demonstracyjnych, jedną z moich ulubionych jest: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

KineticJS to wschodząca biblioteka, która szczyci się tworzeniem i animowaniem poszczególnych „warstw” na płótnie w celu uzyskania wysokiej wydajności.

http://www.kineticjs.com/

CAKE.js nie jest już utrzymywany, ale jest dość potężnym frameworkiem - http://code.google.com/p/cakejs/

Dema tutaj - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html

Spójrz na framework processingjs . Również nadchodząca wersja Mootools 2.0 ma projekt artystyczny do pracy z płótnem

Raphael wydaje się całkiem niezłą biblioteką na płótnie; jest oparty na SVG (lub VML w Internet Explorerze), a zatem obsługuje wiele zdarzeń wejściowych użytkownika. Jest dość mały (60kb spakowany gzipem), więc nie jest zbyt dużą zależnością.
Wygląda na to, że ma też fajny tweener: http://raphaeljs.com/reference.html#animate (zobacz tutaj i tutaj, aby zobaczyć przykłady).

Aby zobaczyć przykład tego, co potrafi, spójrz na to sprytne, małe demo .

Mam nadzieję że to pomoże!

Okazało się, że dwie biblioteki są niezwykle konkurencyjne i znacznie lepsze niż fabric.

Kinetic.js i easel.js mają wyjątkowo dobrą obsługę zdarzeń, grupowanie i ogólną abstrakcję kształtu. W obu tych znajdziesz wiele rzeczy do pokochania; Wydaje się, że sztaluga jest bardziej zorientowana na obraz i filtruje.

Funkcje obsługi zdarzeń w Fabric są DUŻO gorsze niż którekolwiek z nich - w zasadzie traktuje całe płótno jako jeden duży program zdarzeń i informuje, kiedy kliknięto „Coś”. Nie dołącza wydarzeń do pojedynczych kształtów lub grup kształtów.

Istnieje interesująca biblioteka, której celem jest udoskonalenie niektórych podstaw pracy z interfejsem API kanwy o nazwie canto.js autorstwa Davida Flanagana, autora Javascript: The Definitive Guide .

Również młody, ale niezły framework Javascript i wszystko na ten temat (złożona animacja, zarządzanie wykresami scen, obsługa zdarzeń i interakcji użytkownika) - jCanvaScript . Może poza „zarządzaniem wykresami sceny”.

Pracowałem z bHive przy tworzeniu wykresów i przenoszeniu nagłówków witryn, wydaje się imponujący i potężny, w przeciwieństwie do innych, które wydają się być rozwijane. Adobe Edge jest również wart obejrzenia, choć zdecydowanie nie Canvas.

http://www.bhivecanvas.com

i

http://labs.adobe.com/technologies/edge/

Aves Engine jest naprawdę świetny: http://www.dextrose.com/en/projects/aves-engine

Również Akihabara wydaje się dobra: http://www.kesiev.com/akihabara/

Jeśli chcesz używać Javascript, Dojo to świetny sposób. Posiada kompaktowy, wieloplatformowy (SVG, VML, Canvas, Silverlight) interfejs API grafiki wektorowej, który jest bardzo wydajny. Możesz go znaleźć w dojo.gfx i dojox.gfx.

Wykorzystaliśmy to do zbudowania interaktywnego nauczyciela fizyki, który pozwala uczniom rysować wektory, elipsy itp. (Nawet dołączać obrazy) i wykonywać na nich różnego rodzaju transformacje. Możesz zobaczyć, co zrobiliśmy na http://gideon.eas.asu.edu/web-UI/login.html - po prostu zaloguj się, używając dowolnej nazwy użytkownika.

Rzuciłem okiem na fabric.js i dojox.drawing robi wiele tych samych rzeczy. Jeśli spojrzysz na testy w zestawie narzędzi (gdy już je masz, jego dojox / rysowanie / testy /), znajdziesz przykłady wszystkiego, od grafiki wektorowej, przez obrazy, po programowo utworzone cienie.

Jestem pod wrażeniem Akihabary jako silnika gry. Posiada fantastyczną dokumentację w postaci samouczków i api. Widziałem nawet na niektórych forach dyskusyjnych rozmowę o wydaniu akihabara 2. Niestety, wszystko to ma rok lub więcej. Naprawdę mam nadzieję, że ten silnik jest nadal rozwijany.

Właśnie wydałem pierwszą iterację nowej biblioteki do rysowania i animacji, przeznaczonej dla osób z doświadczeniem w rozwoju AS3 / Flash. Chociaż moja biblioteka nie obsługuje jeszcze złożonych ścieżek rysowania ani wykresów, mam nadzieję, że pomoże ludziom szybko rysować i animować podstawowe prymitywy w znany sposób.

Opinie i komentarze są mile widziane. http://www.quietless.com/kitchen/introducing-js3/