Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (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.
Ответить с цитированием
  #12 (permalink)  
Старый 27.11.2016, 23:25
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от spo Посмотреть сообщение
Разобрался с PixiJS. Она полностью удовлетворяет моим запросам.
И какие же там средства создания анимации? requestAnimationFrame не предлагать это нативный метод)
alert(typeof requestAnimationFrame);
Ответить с цитированием
  #13 (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?
Хотя и тут предвижу некоторые проблемы, к примеру каждый объект будет прямоугольником и при наведении курсор будет реагировать на область в которой нет графики.
Ответить с цитированием
  #14 (permalink)  
Старый 30.11.2016, 04:24
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от spo Посмотреть сообщение
intro, room, outro
Это называется - состояние (state) игры.

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

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

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

Последний раз редактировалось Rise, 30.11.2016 в 04:37.
Ответить с цитированием
  #15 (permalink)  
Старый 30.11.2016, 07:34
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Да, игра примитивная, как я уже говорил это обычная point`n`click.
Одна из сложностей это наличие инвентаря и спрайтовая анимация.
Движок для этихх целей использовать кажется не очень разумным.
Буду пробовать сделать на нативном js.
Спасибо за ответ! Буду благодарен за советы по организации архитектуры.
Ответить с цитированием
  #16 (permalink)  
Старый 30.11.2016, 10:29
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от spo Посмотреть сообщение
Движок для этихх целей использовать кажется не очень разумным.
Можно создать собственную сборку движка исключив не нужные опциональные модули.

Сообщение от spo Посмотреть сообщение
Буду благодарен за советы по организации архитектуры.
Например на этом примере создания игры можно посмотреть как построена архитектура.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализована анимация на сайте популярной игры? 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