pixi.js: коллизия и движение
ฝัง
- เผยแพร่เมื่อ 21 มิ.ย. 2020
- Небольшой курс по pixi.js для создания игр и динамики на сайте.
официальный сайт - www.pixijs.com/
статья Learning Pixi - github.com/kittykatattack/lea...
Что сделали с помощью pixi - www.pixijs.com/galleryTexture
![[Фронтенд] Алексей Кудряшов "Интерактивная графика на PixiJS: архитектура и принципы построения..."](http://i.ytimg.com/vi/pNOzeg0ms_Q/mqdefault.jpg)
Почему ты используешь для обработчика нажатий четыре условных оператора, вместо одного switch?
Это просто предпочтение.
Можно и через switch сделать.
Так делают, чтобы иметь возможность обрабатывать одновременные нажатия стрелок, что многократно улучшает управление, в отличие от реализации со switch.
не могу написать алгоритм который будет рисовать на поле с квадратами 24 штуки (!) ломанные линии (!) через центры квадратов?
Линии должны задаваться одномерным массивом вида [0,1,2,..,W], где
индекс значения массива говорит о колонке на поле,
а значение говорит о строке
жестко, можно попросить помощи как у гуру наставника?
Немного не понимаю какой должен быть результат.
Посмотри пример вот этот - pixijs.io/examples/#/graphics/dynamic.js
Возможно поможет. Там нужно кликать на канвас и увидишь работу.
@@epicnull-it2044 спасибо, как черзз центр квадратов пустить линию, вычислить их центр, или просто примерно?)
Реакцию на ресайз бы еще
1) найти центр квадрата.
- найди точку откуда отрисовывается квадрат
- получи ширину и высоту
- раздели на 2(высота/2 и ширина/2)
- возможно потребуется преобразования к мировым координатам
Я не помню есть у пикси возможность получить центр или нет(из коробки)
2) С ресайзом не помогу... Я реализовывал так. есть переменная которая отвечает за ресайз. Там хранится значение на сколько экран был увеличен. Ну скажем стандарт это 640x480. Значит значение вэтой переменной будет 1. событие ресайз на canvas(или window) увеличивает размер канваса. Высчитывается текущие размеры. Скажем они стали 1280x960, тои значение переменой отвечающей за ресайз будет 2. А все объекты отрисовываются с размером * на эту переменную. Надеюсь понятно из моих объяснений..=)
Примера у меня нет... не сохранял код.
@@epicnull-it2044 благодарю, уже больше чем я ожидал получил в ответ! Кстати спасибо за змейку, крутая тема, на днях повторю и изучу ее.
canvas не отделен от pixi? или стоит уделять внимание чему то одному?
canvas это тег из html5 для создания графики на JS.
У canvas есть свой API.
pixi.js это сахар для canvas который упрощает работу.
Есть еще three.js тот же pixi, но в основном используется для 3D в браузере.
Если ты хочешь делать динамика на сайте(анимации/взаимодействие/игры) то для этого и нужен canvas. Почитай немного про канвас. Попробуй нарисовать простые фигуры, а потом посмотри в строну pixi.js или cocos2d
Привет, как правильно делать стены которые нельзя проходить?? Или может правилнее как делать карты с местами куда можно заходить, а куда нет, но внутри карты?₽
А вот на этот вопрос ответа я не знаю.
Если честно, то сам еще разбираюсь с тем как правильней это делать.
На данный момент всю коллизию делаю с помощью метода из видео.(если 2д игра)
Для 3д игры использовал рейкасты для определения пересечения персонажа и объектов на карте.
@@epicnull-it2044 я делаю лабиринт и чет не могу еще додуматься как эти стены делают и вообще карту строят, массивами как то делают, но хз
можно в коде карту хранить в виде массива.
что то такое
[####
# #
####]
Это если у тебя карта из тайлов сделана. После везде где есть значения что-то рисовать на канвасе. Я так бы сделал изначально, а потом уже искал как лучше можно реализовать карту и коллизию. А лучше вообще использовать движок для игры, а не писать свой.=)
@@epicnull-it2044 это да, юнити быстро решает такое, но задача стоит написать самому)