Ну вообще для тайлового кеша — для каждого тайла нарисовать все что внутри него, там не нужно считать зависимости, надо просто знать в каком тайле какие персонажи.
Именно так кешируют части веб-страницы в браузерах.
А применимо к таким играм, само собой разделение фона и персов, персов всех каждый кадр заново рисовать. Это привет 2012 году, тогда такое везде использовали
Два года прошло, но все равно пишу: Спасибо за статью!
Path2D уже не экспериментальный, он работает везде кроме IE (в Edge уже есть), частично поддерживаемое только addPath и на него есть полифилл.
Некоторые вещи из SVG можно использовать в Canvas. Пути и фильтры те же самые. Кстати, вообще не упомянуты фильтры, а они часто нужны но тормозище то ещё.
Я на holyjs выдавал другой взгляд на ту же проблему, но сравнение в основном с webgl а не с 2d: www.youtube.com/watch?v=yibGMQ7GGVo. Презентация там в комментах.
Я не так давно всем этим занялся, начал с canvas2d и WebGL и пошёл вниз по годам :) Сейчас во флеше разбираюсь. Постепенно осознаю весь этот опыт поколений и как его сохранить и передать дальше.
До AGG ещё не добрался, для этого надо чтобы он мне был реально нужен.
Приколы с переключением видел прямо в исходниках хрома, поэтому получается что 2d контекст не так надёжен по результату. В данный момент делаю плагин для pixi для кэширования сглаженных шейпов в текстурах, самое близкое решение к этому есть у AwayJS, но моё будет круче.
Знаю ещё особенность что MSAA врубается даже на обычном SVG если ты под виндой с видеокартой nvidia pascal. Апофеоз — то что флэш делал в лохматом году, SVG на главной странице гугла фейлит если у тебя не паскаль.
Ещё есть аналитический АА, вот там для шейпа сразу говорится сколько % пикселя он покрывает — и это автоматом вызывает ту проблемку с просвечиванием фона, поскольку два шейпа покрывающие вместе пиксель не складываются в alpha=1. Ну если фон прозрачный, то они могут сложится, если ADD использовать а не нормальный блендинг, но я не встречал кто это использует.
А теперь прикол — canvas2d скотина переключается между MSAA и AAA, и может сотворить чушь иногда. Вот нет гарантии что он попользует, даже если он полностью на GPU, например если это OffscreenCanvas в хроме.
АА бывает разный, но в 2д обычно используется мультисэмплинг. Для каждого пикселя хранится несколько значений цвета (16), они там запакованы могут быть масочками, т.к. обычно там одинаковых много. Почему это круче по производительности чем просто в четыре раза увеличить размер канвы? потому что fragment shader только один раз проходится и видюха один и тот же цвет пишет в разные сэмплы из этих 16, это эффективно. Вот по памяти же проседает, это да. Операция которая «схлопывает» это копируя всё в обычную текстуру в opengl называется blitFramebuffer.
Флэш делал круче — там не FOR shape FOR pixel там наоборот, для пикселя знаем шейпы, можем каждый шейп на этих 16 сэмплах прогнать и тут же их «схлопнуть», незачем их хранить, поэтому по памяти он не проседает.
Ещё есть особенность как эти 16 точек распределены внутри пикселя — там немного повёрнутая сетка, чтобы избежать общих артефактов.
У меня в примере грузится swf и её контент добавляется на сцену. Было бы здорово сделать такой же пример на вашей штуке. Можно даже с той же swf-кой из ninja action.
C момента последнего коммента я продвинулся сильно, но публиковать это пока не хочу, всё в рефакторинге.
Проект смотрит и в прошлое и в будущее.
Предполагается что те кто хотят спасти свои игрушки уж как-нибудь могут перевести их с AS3 на typescript, а дальше API будет тот же самый, но с доступом к WebGL и с возможностью использования рендереров типа pixijs и threejs в том же контексте. Опциональная VM чтобы проверить как работал старый AS3.
Самая задница это вектор. Никто не может сделать нормальный вектор. Транслировать язык, запустить AS в vm это всё можно, похожий API для спрайтов — как два пальца. Я даже производительностью сейчас ещё не занимаюсь, хотя она и выросла гораздо по сравнению с обычным shumway. Главное это качественно показать вектор загруженный из SWF.
Проблемы с производительностью будут и в webgl, если вершины тайлов будут перезаливаться каждый кадр. Для тайловых карт есть отдельный плагин который старается не перезаливать буфера и не хранить лишних объектов.
Если добавить одну из популярных оптимизаций с окошками, например Кармака, или, другой пример, хранение большой области и перезаливка при наезде камеры или при анимации, то будет ещё большее ускорение.
Можно было посмотреть исходники программ любых папок которые пишут на джаве. Можно было бы хотя бы посмотреть блог Пети Митричева, я уверен что у него тоже где-нибудь такой шаблон виден.
Просто берешь любой и в первых трёх сотнях любого контеста на codeforces любого джависта — там не будет сканнера.
Я понимаю когда интернет был доступен мало кому в начале 2000-ых, но сейчас у школьников есть все ресурсы чтобы проводить самостоятельную работу.
Никто не обязан объяснять эти приколы, хотя на некоторых соревнованиях реально раздают примеры как писать на джаве не через сканнер. Это не единственный прикол, их много. Только тренировка может помочь избежать проблем, и это верно для всех языков а не только для джавы.
Ну вообще для тайлового кеша — для каждого тайла нарисовать все что внутри него, там не нужно считать зависимости, надо просто знать в каком тайле какие персонажи.
Именно так кешируют части веб-страницы в браузерах.
А применимо к таким играм, само собой разделение фона и персов, персов всех каждый кадр заново рисовать. Это привет 2012 году, тогда такое везде использовали
dtf.ru/gamedev/441490-flash-nikogda-ne-budet-takim-kak-prezhde
AwayJS
SWF2JS
Ruffle
WAFlash
CheerpX
и Ruffle в этом списке вообще слабое звено, просто дилетанты разнесли его по всему инфополю.
Path2D уже не экспериментальный, он работает везде кроме IE (в Edge уже есть), частично поддерживаемое только addPath и на него есть полифилл.
Некоторые вещи из SVG можно использовать в Canvas. Пути и фильтры те же самые. Кстати, вообще не упомянуты фильтры, а они часто нужны но тормозище то ещё.
Я на holyjs выдавал другой взгляд на ту же проблему, но сравнение в основном с webgl а не с 2d: www.youtube.com/watch?v=yibGMQ7GGVo. Презентация там в комментах.
До AGG ещё не добрался, для этого надо чтобы он мне был реально нужен.
Приколы с переключением видел прямо в исходниках хрома, поэтому получается что 2d контекст не так надёжен по результату. В данный момент делаю плагин для pixi для кэширования сглаженных шейпов в текстурах, самое близкое решение к этому есть у AwayJS, но моё будет круче.
Знаю ещё особенность что MSAA врубается даже на обычном SVG если ты под виндой с видеокартой nvidia pascal. Апофеоз — то что флэш делал в лохматом году, SVG на главной странице гугла фейлит если у тебя не паскаль.
А теперь прикол — canvas2d скотина переключается между MSAA и AAA, и может сотворить чушь иногда. Вот нет гарантии что он попользует, даже если он полностью на GPU, например если это OffscreenCanvas в хроме.
Флэш делал круче — там не FOR shape FOR pixel там наоборот, для пикселя знаем шейпы, можем каждый шейп на этих 16 сэмплах прогнать и тут же их «схлопнуть», незачем их хранить, поэтому по памяти он не проседает.
Ещё есть особенность как эти 16 точек распределены внутри пикселя — там немного повёрнутая сетка, чтобы избежать общих артефактов.
Давно хочу мега-моник из 4 таких штук, чел который делал корпус 1.5 года тянет :)
ninja action demo: pixijs.io/pixi-swf/demos/ninja-cat.html
js code: pixijs.io/pixi-swf/demos/ninja-cat.js
Тема на петиции к adobe: github.com/open-source-flash/open-source-flash/issues/107
C момента последнего коммента я продвинулся сильно, но публиковать это пока не хочу, всё в рефакторинге.
Проект смотрит и в прошлое и в будущее.
Предполагается что те кто хотят спасти свои игрушки уж как-нибудь могут перевести их с AS3 на typescript, а дальше API будет тот же самый, но с доступом к WebGL и с возможностью использования рендереров типа pixijs и threejs в том же контексте. Опциональная VM чтобы проверить как работал старый AS3.
Самая задница это вектор. Никто не может сделать нормальный вектор. Транслировать язык, запустить AS в vm это всё можно, похожий API для спрайтов — как два пальца. Я даже производительностью сейчас ещё не занимаюсь, хотя она и выросла гораздо по сравнению с обычным shumway. Главное это качественно показать вектор загруженный из SWF.
Если добавить одну из популярных оптимизаций с окошками, например Кармака, или, другой пример, хранение большой области и перезаливка при наезде камеры или при анимации, то будет ещё большее ускорение.
Вот Egor: codeforces.com/profile/Egor
Вот одно из его решений недавних: codeforces.com/contest/853/standings/participant/13695075#p13695075, даблклик на любом из его решений.
Он использует свой плагин для Idea, CHelper: plugins.jetbrains.com/plugin/7091-chelper
Можно было посмотреть исходники программ любых папок которые пишут на джаве. Можно было бы хотя бы посмотреть блог Пети Митричева, я уверен что у него тоже где-нибудь такой шаблон виден.
Просто берешь любой и в первых трёх сотнях любого контеста на codeforces любого джависта — там не будет сканнера.
Вот например мой шаблон: codeforces.com/contest/549/standings/participant/4846847#p4846847
Я понимаю когда интернет был доступен мало кому в начале 2000-ых, но сейчас у школьников есть все ресурсы чтобы проводить самостоятельную работу.
Никто не обязан объяснять эти приколы, хотя на некоторых соревнованиях реально раздают примеры как писать на джаве не через сканнер. Это не единственный прикол, их много. Только тренировка может помочь избежать проблем, и это верно для всех языков а не только для джавы.