Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Интерактивная спрайтовая анимация (https://javascript.ru/forum/library-toolkit-framework/66073-interaktivnaya-sprajjtovaya-animaciya.html)

spo 23.11.2016 22:18

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

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

Rise 24.11.2016 07:25

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

spo 24.11.2016 12:04

point`and`click

Rise 24.11.2016 12:52

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

spo 24.11.2016 15:36

Я не совсем понял
Цитата:

Сделай функцию определения по координатам click (или любое событие) в пределах point и тд - вот тебе и интерактивность.
вот это имеется ввиду в контексте PixiJS или просто с помощью js на холсте?

Rise 24.11.2016 15:54

spo, просто.

spo 24.11.2016 16:08

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

Rise 24.11.2016 17:07

spo, например?

spo 24.11.2016 18:30

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

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

Rise 24.11.2016 18:39

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


Часовой пояс GMT +3, время: 14:19.