Flashist Aug 30 2016 at 11:30

FConsole — инструмент для отладки PIxi.js (Canvas/WebGL) приложений

1 min

7.7K

Canvas*Debugging*

+28

Comments 15

kozyabka Aug 30 2016 at 13:36

Чуть оффтоп. Для флеша удобный инструмент, может возьмёте пару идей там — http://www.monsterdebugger.com/

Flashist Aug 30 2016 at 13:40

Спасибо, что напомнили про этот инструмент, когда-то давно пользовался им, но потом полностью перешёл на Flash-Console (кстати последний раз, когда я использовал MonsterDebugger, там была отдельная кнопочка для Flash-Console).

На ваш взгляд, какие из функций MonsterDebugger могут быть полезны для отладки Canvas-приложений?

zonex5 Aug 30 2016 at 14:48

Если работает на Pixi то должно заработать и для Phaser, я правильно понимаю?

Flashist Aug 30 2016 at 14:49

Хороший вопрос) Я не пробовал, но если Phaser работает с «чистым» Pixi.js, и через него можно получить доступ к инстансу PIXI.SystemRenderer и главному контейнеру (если там есть такое понятние), то должно работать.

clamaw Aug 30 2016 at 16:59

Мда, заголовочек лукавит. Даже расстроился чуть-чуть. Сторого говоря, с canvas и (тем более) webgl инструмент ничего общего не имеет.

Flashist Aug 30 2016 at 17:30

Поправил заголовок (если коротко, то консоль можно подружить с любой JS графической библиотекой, которая работает с Canvas/WebGL, поэтому лукавства не было, неправильно подобрал заголовок). Вам, как и DrReiz спасибо за то, что подсказали, как исправить заголовок.

DrReiz Aug 30 2016 at 17:22

Поменяйте заголовок на «инструмент для отладки Canvas/WebGl в Pixi.js». Имхо, на хабре не стоит разводить желтые заголовки.

Flashist Aug 30 2016 at 17:27

Сделано! На самом деле консоль разрабатывалась как независимая от графических движков библиотека: с возможностью использовать разные движки: но на данный момент реализован только Pixi.js адаптер.

Жёлтых заголовков и тем более обманов кого-то делать не планировалось: просто не совсем правильно подобрал заголовок (но спасибо, что подсказали, как его улучшить)

Jedi_Knight Sep 12 2016 at 13:15

Отлично! Оно ещё должно работать для RPGMaker MV последней версии, два месяца назад как раз обновились до pixi-v4

Надо ещё проверить что с 2.5d-форком оно работает. В каком месте в FConsole там хук в interaction идёт?

Flashist Sep 12 2016 at 13:32

Уточните, пожалуйста, что вы имеете ввиду под «хуком»? В сам код Pixi.js консолька (и зависимости) никак не лезут, исопльзуют то, что доступно от Pixi.js извне (в частности из interaction используется InputManager с его mouse.global)

Кстати, буквально недавно заметил, что консолька неработает на мобильной эмуляции (и подозреваю, что на мобильниках тоже), из-за того, что mouse.global не обновляется в случае с тач-событиями (что логично).

Jedi_Knight Sep 12 2016 at 13:51

Как она определяет какие объекты под мышкой находятся?

Flashist Sep 12 2016 at 13:57

Если коротко, то адаптер графического движка (в нашем случае PixiAdapter), предоставляет метод для поиска объектов, потом идёт по дереву и проверяет детей объектов, попадают ли они под мышку. Думаю, вам будет нагляднее, если вы посмотрите в исходники либ, которе отвечают за это (в частности PixiAdapter: https://github.com/flashist/fgraphics/blob/master/src/adapter/pixi/PixiAdapter.ts )

Jedi_Knight Sep 12 2016 at 14:29

Да, с этим всё в порядке, containsPoint вроде везде нормально работает.

Jedi_Knight Sep 12 2016 at 13:53

Кстати, показ width,height на больших сценах может привести к падению FPS. Там идёт вызов getLocalBounds() для каждого контейнера по два раза, а каждый такой вызов пересчитывает всё поддерево. К счастью, спрайты просто показывают размер текстуры и не пытаются смотреть в детей.

Flashist Sep 12 2016 at 13:55

Показ width/height происходит только при включённой опции «additional info» (была добавлена буквально 2-3 дня назад). Поэтому по-умолчанию проблем не будет (разработчики смогут дебажить это по-необходимости).