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

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

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

spo, что за игра?

point`and`click

spo, что за проблемы с интерактивностью в canvas? PixiJS (2D WebGL renderer) - "webgl" и есть контекст canvas (это 3d по сути), а для 2d есть контекст "2d". Сделай функцию определения по координатам click (или любое событие) в пределах point и тд - вот тебе и интерактивность.

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

spo, просто.

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

spo, например?

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

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

spo, почему бы не сделать это в виде GIF?

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

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

И какие же там средства создания анимации? requestAnimationFrame не предлагать это нативный метод)

alert(typeof requestAnimationFrame);

Все очень плохо... 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?
Хотя и тут предвижу некоторые проблемы, к примеру каждый объект будет прямоугольником и при наведении курсор будет реагировать на область в которой нет графики.

Это называется - состояние (state) игры.

Для этого, попробуй сделать это на чистом js) видимо твоя игра примитивна ее просто сделать на чистом js... всё на чистом js написано разница лишь в уровне абстракции для программиста когда сложные вещи делаются просто...

Опять же если игра примитивна может и будет, но canvas специально заточен под рисование (низкоуровневая поддержка) вплоть до возможности написания шейдеров (shader) на OpenGL ES (синтаксис языка C), код которых выполняется непосредственно на видеокартах (пример).

PS: возможно тебе нужен полноценный игровой web framework/engine, например Phaser, либо допиливай PixiJS (render engine) до нужной тебе кондиции (тот же Phaser использует PixiJS для рендера), либо пиши всё с нуля)... ну а может тебе вообще нужна игровая desktop platform/engine типа Unity с возможностью портирования в HTML5 (WebGL)...

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

Можно создать собственную сборку движка исключив не нужные опциональные модули.

Например на этом примере создания игры можно посмотреть как построена архитектура.