Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.11.2016, 22:18
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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

Прошу подсказать технологии для решения задачи с созданием интерактивных элементов с возможностью использования спрайтовой анимации.
Ответить с цитированием
  #2 (permalink)  
Старый 24.11.2016, 12:04
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

point`and`click
Ответить с цитированием
  #3 (permalink)  
Старый 24.11.2016, 15:36
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Я не совсем понял
Цитата:
Сделай функцию определения по координатам click (или любое событие) в пределах point и тд - вот тебе и интерактивность.
вот это имеется ввиду в контексте PixiJS или просто с помощью js на холсте?
Ответить с цитированием
  #4 (permalink)  
Старый 24.11.2016, 16:08
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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

Последний раз редактировалось spo, 24.11.2016 в 16:44.
Ответить с цитированием
  #5 (permalink)  
Старый 24.11.2016, 18:30
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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

Такое возможно средствами PixiJS?
Ответить с цитированием
  #6 (permalink)  
Старый 24.11.2016, 19:21
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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

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

Последний раз редактировалось spo, 24.11.2016 в 22:19.
Ответить с цитированием
  #7 (permalink)  
Старый 29.11.2016, 22:14
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Все очень плохо... 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?
Хотя и тут предвижу некоторые проблемы, к примеру каждый объект будет прямоугольником и при наведении курсор будет реагировать на область в которой нет графики.
Ответить с цитированием
  #8 (permalink)  
Старый 30.11.2016, 07:34
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализована анимация на сайте популярной игры? whoIam Общие вопросы Javascript 6 19.09.2016 09:45
CSS3 Анимация [Не срабатывает при переключении вкладки] Quasar[CY] (X)HTML/CSS 1 18.11.2015 20:43
Анимация после анимации Narahon Элементы интерфейса 12 02.04.2015 22:06
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50
Цикличность анимация? SashaBorandi jQuery 1 25.12.2008 09:20