В настоящее время я изучаю параметры работы с холстом в новом приложении HTML 5 и задавался вопросом, что представляет собой современное состояние в HTML-библиотеках JavaScript и фреймворках HTML?
В частности, существуют ли рамки, которые поддерживают такие вещи, которые необходимы для развития игры: сложная анимация, управление графиками сцены, обработка событий и взаимодействие с пользователем?
Также желаем рассмотреть как коммерческие, так и продукты с открытым исходным кодом.
Я работаю над fabric.js - библиотекой холста, которая поможет именно с этим - манипулировать объектами на холсте, обрабатывая события и взаимодействие с пользователем. Он еще не выпущен, но взгляните на простое демонстрацию предварительного просмотра.
Вы также можете увидеть его в действии в этом редакторе дизайна, для которого он был создан.
Изменить: Проект теперь доступен в github (открытый под лицензией MIT)
Чтобы начать работу, проверьте:
Как ткань сопоставляется с другими библиотеками холстов Javascript? Здесь таблица сравнения.
Я удивлен, что никто не упомянул WebGL и фреймворки, построенные на нем. Я бы посчитал это высоко в списке для ультрасовременной графики с графическим ускорением 3D и сложной анимацией на HTML canvas/javascript.
WebGL - это кросс-платформенная, бесплатный веб-стандарт для низкоуровневый 3D-графический API на основе OpenGL ES 2.0, открытый через Элемент холста HTML5 в качестве документа Интерфейсы объектной модели....
WebGL предоставляет плагин без 3D-изображений в Интернете, реализован прямо в браузере. Основные поставщики браузеров Apple (Safari), Google (Chrome), Mozilla (Firefox), и Opera (Opera) являются членами Рабочая группа WebGL.
WebGL очень прост в поддержке графической графики с графическим ускорением. Просмотрите эти GLSL shader демонстрации.:-) И посмотрите ChemDoodle в качестве примера взаимодействия с пользователем.
Я работаю над приложением, используя Google O3D framework, который управляет графом сцены и использует WebGL для рендеринга ( он использовал свой собственный плагин). O3D - это работа, и ее документация не полностью обновлена, но она находится в активной разработке, и есть некоторые хорошие демонстрации там. 3D-пул может быть больше вашего переулка. Разработчики Google очень отзывчивы к вопросам в дискуссионной группе.
Существует ряд других фреймворков, построенных на WebGL; см. здесь. Одни, которые упоминают разработку игр и графики сцены, включают Copperlicht, SceneJS, X3DOM.
WebGL запускает последние сборки разработки несколько браузеров, но не IE. Я использую Firefox ( "Minefield" ) и Chromium с хорошими результатами. Вам понадобится один из них для запуска вышеуказанных демонстраций.
Однако, если ваши требования состоят в том, что он не должен иметь зависимостей за пределами HTML 5 canvas/js, WebGL может оказаться неправильным выбором. Это не похоже, что IE будет поддерживать его в ближайшее время.
Обновление: после размещения большого сопротивления, MS решил поддерживать WebGL в IE 11.
three.js, mr, doob, является фантастическим 3D-движком для javascript, который включает в себя сценарграф (как программное обеспечение, так и WebGL/аппаратные ускоренные версии), затенение, частицы, анимация (я думаю) и эффекты освещения. Проверьте это, он супер-талантливый парень.
Я должен добавить, что вам понадобится новейший Google Chrome или эквивалент для просмотра большинства демонстраций, один из моих фаворитов: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html
KineticJS - это современная библиотека, которая может похвастаться созданием и анимацией отдельных "слоев" на холсте для высокой производительности.
CAKE.js больше не поддерживается, но является довольно мощной инфраструктурой - http://code.google.com/p/cakejs/
Демо здесь - http://glimr.rubyforge.org/cake/canvas.html, http://glimr.rubyforge.org/cake/missile_fleet.html
Взгляните на processingjs. Также на предстоящей версии mootools версии 2.0 есть art projekt для работы с холстом
Raphael кажется довольно хорошей библиотекой холста; он основан на SVG (или основан на VML в Internet Explorer) и, таким образом, поддерживает множество событий ввода пользователя. Это довольно мало (60kb gzipped), поэтому не слишком большая зависимость.
Кажется, у него хороший твинер: http://raphaeljs.com/reference.html#animate (см. здесь и здесь).
Для примера, что он может сделать, посмотрите эту умную маленькую демонстрацию.
Надеюсь, это поможет!
Я обнаружил, что две библиотеки чрезвычайно конкурентоспособны и намного лучше, чем ткань.
Kinetic.js и easel.js имеют чрезвычайно хорошую обработку событий, группировку и общую абстракцию фигуры. Вы найдете много, чтобы любить в обоих из них; У мольберта, похоже, больше ориентация на изображение и фильтрация.
Рукоделие событий Fabric намного хуже, чем любой из них - в основном, он рассматривает весь холст как один большой случайный rrapper и сообщает вам, когда нажата кнопка "Что-то". Он не прикрепляет события к отдельным формам или группам фигур.
Существует интересная библиотека, целью которой является улучшение некоторых основ работы с API-интерфейсом canvas canto.js Дэвида Фланагана, автора Javascript: окончательное руководство.
Кроме того, молодые, но неплохие, Javascript framework и его (сложная анимация, управление графиками сцен, обработка событий и пользовательских взаимодействий) - все это - jCanvaScript. Может быть, кроме "управления графами сцен".
Работа с bHive для создания графиков и перемещения заголовков сайтов, кажется впечатляющим и мощным, в отличие от других, похоже, разрабатывается. Adobe Edge также стоит gander, хотя строго не Canvas.
и
Aves Engine действительно замечательный: http://www.dextrose.com/en/projects/aves-engine
Кроме того, Akihabara кажется хорошим: http://www.kesiev.com/akihabara/
Если вы хотите использовать Javascript, Dojo - отличный способ. Он имеет компактный, кросс-платформенный (SVG, VML, Canvas, Silverlight) векторный графический API, который очень мощный. Вы можете найти его в dojo.gfx и dojox.gfx.
Мы использовали это для создания интерактивного преподавателя физики, который позволяет студентам рисовать векторы, эллипсы и т.д. (даже добавлять изображения) и выполнять на них всевозможные преобразования. Вы можете видеть, что мы сделали в http://gideon.eas.asu.edu/web-UI/login.html - просто войдите с любым именем пользователя.
Я взглянул на fabric.js и dojox.drawing делает много одинаковых вещей. Если вы посмотрите на тесты в наборе инструментов (после того, как вы получили его dojox/drawing/tests/), вы найдете примеры всего: от векторной графики до изображений до программно созданных теней.
Я поражен Акихабарой как игровым движком. Он имеет фантастическую документацию в виде учебников и api. Я даже видел на некоторых досках сообщений о выпуске akihabara 2. К сожалению, все эти разговоры примерно один год или более старые. Я действительно надеюсь, что этот двигатель все еще разрабатывается.
Я только что выпустил первую итерацию новой графической и tweening библиотеки, ориентированной на людей с фоном разработки AS3/Flash. Хотя моя библиотека еще не поддерживает сложные схемы рисования или графики, например, я надеюсь, что это поможет людям быстро рисовать и анимировать базовые примитивы знакомым способом.
Обратная связь и комментарии приветствуются. http://www.quietless.com/kitchen/introducing-js3/