Интерактивная спрайтовая анимация
 

Экспериментирую с созданием игры на js и параллельно его изучаю.
Начал с canvas, но совсем скоро понял что в нем не хватает построения DOM для интерактивности.
Строю DOM с помощью Raphaёl, но когда встал вопрос анимации, понял что нужно что то другое.
Теперь смотрю в сторону PixiJS.
Но в виду нехватки опыта боюсь, что если не спрошу совета на форуме, буду еще долго ходить по граблям.

Прошу подсказать технологии для решения задачи с созданием интерактивных элементов с возможностью использования спрайтовой анимации.

point`and`click

Я не совсем понял
вот это имеется ввиду в контексте PixiJS или просто с помощью js на холсте?

Но мой вопрос не только в интерактивности, но еще и в использовании спрайтовой анимации.
К примеру экспорт раскадровки анимации из flash в одно изображение и последующее его использование для создания анимации.

Не знаю как это делается, но я себе представляю это на подобии спрайтов в CSS.
Например имеем спрайт-изображение содержащее две картинки.
На первой персонаж с открытыми глазами, на второй с закрытыми.
На сцене показывается область в которой помещается только одно из двух изображений.
Анимация моргания будет заключаться всего навсего в смене координаты спрайта.

Такое возможно средствами PixiJS?

Потому что тогда я не смогу делать плавный переход одной анимации в другую. Я же не могу определить проигрывание последнего кадра gif.

p.s.: Разобрался с PixiJS. Она полностью удовлетворяет моим запросам.

Все очень плохо... PixiJS не подошел :-?

С анимацией там все в порядке, мне требовалось вот что http://pixijs.github.io/examples/#/b...spritesheet.js
Проблема обнаружилась в другом, а именно в доступе к созданным объектам.
К сожалению там все по индексам, а я создаю все объекты динамически прописывая их в js объекте, там же задаю все их свойства и методы.

Например

let displays = {
	intro: {
		background: {
			image: 'intro.png',
			x: 0,
			y: 0
		}
	}
	room: {
		background: {
			image: 'room.png',
			x: 0,
			y: 0,
		},
		objects: {
			key: {
				image: 'key.png',
				show: false,
				x: 0,
				y: 0
			},
			box: {
				image: 'box.png',
				show: true,
				x: 0,
				y: 0
			},
			door: {
				image: 'true.png',
				show: true,
				x: 0,
				y: 0
			}
		}
	}
	outro: {
		background: {
			image: 'outro.png',
			x: 0,
			y: 0
		}
	}
}

Пример не полный, внутри объектов еще должны быть и методы описывающие его анимации и прочие свойства.

Да это получается не совсем просто игра, а наверное что то на подобии движка, но мне хочется именно так, а не создавать все руками для каждой локации, а прописать все разом (например для удобства в отдельном файле или там json).

Писал костыль, который добавляет в массив имена создаваемых объектов по порядку. Таким образом могу получать индекс нужного объекта по его имени из массива. Казалось бы выход, но и тут PixiJS повел себя непредсказуемо (для меня). Не исключаю, что все дело в моем знании js и самой библиотеки, но дальше двигаться не смог.

Обидно учитывая то что знаний хватило чтобы написать почти всю игру в canvas, за исключением интерактивности объектов (click, dragndrop), а потом с использованием raphael, за исключением спрайтовой анимации в svg.

Сейчас окончательно запутался и не понимаю, зачем все эти библиотеки если вроде как на чистом js все это можно сделать, максимум с библиотечкой для удобного управления спрайтами.
Подскажите, будет ли нормальным подход, при котором я все сделаю на обычных div с анимацией на css?
Хотя и тут предвижу некоторые проблемы, к примеру каждый объект будет прямоугольником и при наведении курсор будет реагировать на область в которой нет графики.

Да, игра примитивная, как я уже говорил это обычная point`n`click.
Одна из сложностей это наличие инвентаря и спрайтовая анимация.
Движок для этихх целей использовать кажется не очень разумным.
Буду пробовать сделать на нативном js.
Спасибо за ответ! Буду благодарен за советы по организации архитектуры.