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