Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 147
Вы меня конечно все извините, но у Канваса есть одна большая беда по сравнению с тем же Флешем. Отсутвтие GUI для создания подобных даже галактик. На рисование всего этого ушло около часа — неплохой результат, но… Вот дизайнер просто не сможет этого создать — он ЯП обычно не изучает, тогда как во Флеше сможет скорее всего накидать.
Пока такая сложность создания таких вот вещей сохранится, Флеш будет на коне…
Пока такая сложность создания таких вот вещей сохранится, Флеш будет на коне…
боюсь, что галактику даже на флеше хрен кто «накидает»
Зря вы такое пишите. В отличие от html5 во flash уже есть нативный движок с иерархическим дисплей-листом и нужными функциями отрисовки. Из-за этого кода будет минимум, а производительность будет не хуже чем в html5.
Из-за этого кода будет минимум, а производительность будет не хуже чем в html5.
Ну где же код? Почему все так любят чесать языками, но не любят давать никаких пруфов? Только virtualtoy показал хоть какой-то результат, но он не соответствует тому, что вы утверждаете. Просто тут в комметах Флешу прям чудеса приписывают. Вообще проц не грузит, описанное в топике за 20 минут реализуется мышкой через GUI и так далее, а как доходит до дела — так куча подводных камней.
К сожалению, лично я сейчас работаю. И не могу все бросить ради доказательства. Но как появится свободное время обязательно сделаю пример. Через GUI можно сделать, но с минимумом кода и максимум графических элементов.
Вот только, надеюсь, мы увидим именно галактику, а то меня уж очень зацепило ваше «Зря вы такое пишите» и поэтому невероятно сильно хочется посмотреть на результат работы нативного движка с иерархическим дисплей-листом при отрисовке такого количества объектов.
Вы имеете ввиду что-то вроде конструктора, когда мышкой накликал и оно заработало? Да, согласен, без этого Html5 Canvas будет доступен только для программистов, как бы ужасно это ни звучало ;)
Дизайнер сделает этот GUI на HTML+CSS :) А если нужен жестокий realtime то и во флеше и тут придётся поработать кодеру.
Советую вам посмотреть наработки Виктора Брата по данному вопросу, флеш там просто нервно курит в сторонке.
А ссылку можно?)
Простите оговорился Bret Victor вот vimeo.com/36579366
Посмотрите в сторону Adobe Edge
Ждем версию на чистом html+js )
Дивами, чтоли?) А орбиты рисовать картинками?
Зачем картинками? border-radius же )
Ждём на чистом CSS, что уж там! :)
А дырку под планету — как?)
Я думаю, можно что-нибудь придумать )
Не, там дырки под планету в орбите нету ведь,
И это можно jsfiddle.net/qCKmh/
Оригинально :)
Чит ведь) Но он не решит главной проблемы — рисуем орбиту, на неё накладываем этот объект, но орбита остаётся внутри дырки. В топике это решается в этом отрывке:
Сначала отрисовываем орбиту. Потом стираем shape планеты, а потом обводим shape планеты
Fixed&Improved jsfiddle.net/qCKmh/3/
Хорошоо) А теперь под ним орбиту пропустить)
И это можно jsfiddle.net/qCKmh/4/
Я уж думал вы забросили свой проект, к счастью ошибся :)
Кстати, помнится вы упоминали про игру на libCanvas
Уже есть какое-нибудь демо?
Кстати, помнится вы упоминали про игру на libCanvas
Уже есть какое-нибудь демо?
Я уж думал вы забросили свой проект, к счастью ошибся :)
Ни в коем случае) Развивается и очень активно. Просто пока без публикаций. Надо исправить)
Кстати, помнится вы упоминали про игру на libCanvas
Уже есть какое-нибудь демо?
Ну люди уже играют, но пока закрыто. Обещает быть шедевром)
Можете, кстати, глянуть видео Berserk: Rebirth, тоже на LibCanvas игрушка (ещё на прошлой версии). Я сам в разработке участие не принимал, но консультировал. Сильная команда делала.
www.casus-belli.com/ru интересно на чем написан. сама по себе она не очень интересная, интересен тот факт, что она на js.
Даешь больше топиков про канвас, хороших и разных!
И да, это решение жрет значительно меньше ресурсов.
Кстати, кто-то там обещал решение на флеше?)
И да, это решение жрет значительно меньше ресурсов.
Кстати, кто-то там обещал решение на флеше?)
Шок, вы, конечно, молодец, но флеш опускаете зря.
Ну в топике ни слова про флеш. Но от комментов просто уже устал. Обязательно в любом топике про Canvas появится что-то в духе: «ууу, html5 — фигня, на флеше это сделать значительно проще». Да вот, посмотрите хоть прям этот топик и первый коммент. Хоть кто-то бы сделал, да выложил, да описал. И без закидонов в сторону html5, а просто так, чтобы люди поучились, да и я сам с удовольствием вспомнил бы, как это делается.
Ещё раз обратите внимание — я в топике сухо рассказал о технологии, не акцентируя внимания ни на каких альтернативах, но всё-равно первый коммент был про флеш.
Ещё раз обратите внимание — я в топике сухо рассказал о технологии, не акцентируя внимания ни на каких альтернативах, но всё-равно первый коммент был про флеш.
Эмм… «пока у них билдер запустится, пока проект создадут, пока поймут как делать. Может, к завтрашнему дню кто-то и осилит» — ваши слова? :) Если бы я был флешом — я бы обиделся :) Пойду билдер открывать…
Ну как без лёгкой иронии в комментах? Тем более, про флеш уже вспомнили, а примеров так и не показали ;)
Просто тут уже грозились, ещё в прошлом топике, что типа на флэше такое наваять — 30 минут. Да что-то результатов до сих пор не видно.
Подождите чуток
Ок, подождём. Просто ещё сутки назад грозились сделать за «20 минут от силы» :)
Ну где же?)
Готово, заняло 1 час 10 минут. Не бейте за них, пожалуйста. Сейчас выложу куда-нибудь
Что-то мне и класть некуда :( пока так:
04703929-a-62cb3a1a-s-sites.googlegroups.com/site/virtualtoy/solar-system/solar_system.swf
04703929-a-62cb3a1a-s-sites.googlegroups.com/site/virtualtoy/solar-system/solar_system.swf
Смотрится хорошо. За одинаковое время почти так же, как на LibCanvas. Но… на одном и том же компе:
27% загрузка проца от флеша и 2% загрузка проца от канваса. Где ж обещанная производительность? ;)
27% загрузка проца от флеша и 2% загрузка проца от канваса. Где ж обещанная производительность? ;)
Если сравнивать этот флешевый клип с реализацией из статьи про Хабраспор, то на моем FF 10 c Celeron B815 работает в стопятьсот раз адекватнее — можно двигать курсором мыши, переключаться по вкладкам, заниматься любыми делами без 100% загрузки процессора (что характерно, при тесте на HTML-канве FF потреблял не более 40% процессора, но зато неожиданно X-сервер стал кушать всё оставшееся). Ваш вариант, к моей бурной радости (хе-хе), работает ничуть не хуже, чем вариант на flash. Браво!
Быстродействие не впечатлило. Как-то так:
Browser CPU
Opera 100%
IE 8 70%
Chrome 100%
FF 100%
Извините, апдейт:
04703929-a-62cb3a1a-s-sites.googlegroups.com/site/virtualtoy/solar-system/solar_system_v2.swf
Я оперные числа возьму. У меня флеш жрет 30-50%, канвас 40-50%, сейчас проверю еще
04703929-a-62cb3a1a-s-sites.googlegroups.com/site/virtualtoy/solar-system/solar_system_v2.swf
Я оперные числа возьму. У меня флеш жрет 30-50%, канвас 40-50%, сейчас проверю еще
Всё тех же 25%. У вас вариант из топика жрёт 40-50%? Где? На каком железе?
Да, скачет примерно 35-50% в опере 12.11. Ноут HP pavilion dv6000. 2 гб озу, core2duo 2.2, видео geforce 8400m gs
А хром флеш опустил, да-да :)
А хром флеш опустил, да-да :)
Ну опера вообще относительно тормозная, да( Она скорее исключение. Даже в Фоксе вменяемая производительность.
Правда. Жаль, а я так люблю оперу :(
Попробую подвести итог.
1. флешевый вариант сделан с нуля, не использовано никаких движков (сознаюсь, стырил где-то функцию для рисования дуги), оптимизация никакая (TheShock, низкий вам поклон, вы сколько либканвас разрабатываете и оптимизируете?). Возможно, что вариант с использованием bitmapdata и блиттинга был бы производительнее.
2. не все поняли, зачем было сделано демо: задели слова «пока у них билдер запустится, пока проект создадут, пока поймут как делать Может, к завтрашнему дню кто-то и осилит». Извините, иронию не заметил.
3. флеш не защищаю, у него, как и у html5 свои плюсы и минусы. Кричать «flash, die!», равно как «html5 sucks!» неразумно.
Попробую подвести итог.
1. флешевый вариант сделан с нуля, не использовано никаких движков (сознаюсь, стырил где-то функцию для рисования дуги), оптимизация никакая (TheShock, низкий вам поклон, вы сколько либканвас разрабатываете и оптимизируете?). Возможно, что вариант с использованием bitmapdata и блиттинга был бы производительнее.
2. не все поняли, зачем было сделано демо: задели слова «пока у них билдер запустится, пока проект создадут, пока поймут как делать Может, к завтрашнему дню кто-то и осилит». Извините, иронию не заметил.
3. флеш не защищаю, у него, как и у html5 свои плюсы и минусы. Кричать «flash, die!», равно как «html5 sucks!» неразумно.
1. Ну Флеш ведь сам по себе движок. Вы ведь не юзаете там прямую отрисовку в холст, события как-то к элементам цепляете ;) LibCanvas'у уже почти 3 года.
2. Ну просто во всех топиках кричат, что на флеше это за 15 минут делается, да ещё и не тормозит в сравнении с html5) А как сделать — то никого)
3. Это да) Но на туториалы по Флешу html'щики не набегают с криками «Canvas! Только Canvas!»
2. Ну просто во всех топиках кричат, что на флеше это за 15 минут делается, да ещё и не тормозит в сравнении с html5) А как сделать — то никого)
3. Это да) Но на туториалы по Флешу html'щики не набегают с криками «Canvas! Только Canvas!»
1. подловили
2. я не кричал, а сделал
3. :)
извините, не смог успокоиться (совершенно забыл о bitmapcaching):
04703929-a-62cb3a1a-s-sites.googlegroups.com/site/virtualtoy/solar-system/solar_system_v3.swf
теперь в хроме флеш жрет 15-25%, а канвас 13-18%
вот такие как я и дискредитировали флеш *посыпаю голову пеплом*
2. я не кричал, а сделал
3. :)
извините, не смог успокоиться (совершенно забыл о bitmapcaching):
04703929-a-62cb3a1a-s-sites.googlegroups.com/site/virtualtoy/solar-system/solar_system_v3.swf
теперь в хроме флеш жрет 15-25%, а канвас 13-18%
вот такие как я и дискредитировали флеш *посыпаю голову пеплом*
К слову, у меня на одном из компов ваш пример скачет в пределах 40-50% CPU при 60 FPS. Вчерашний пример — 86% :) (Chrome 23)
А по статье — пример бы более интересной задачи с приостановкой движения планеты на время наведения и открытия менюшки.
А по статье — пример бы более интересной задачи с приостановкой движения планеты на время наведения и открытия менюшки.
А что за комп? И какой FPS на каждом из вариантов? (fpsможно смотреть по shift-esc)
Ну это просто к рендеру мало относилось, потому его отрезал с чистой совестью, чтобы вписаться в доступное время.
А по статье — пример бы более интересной задачи с приостановкой движения планеты на время наведения и открытия менюшки.
Ну это просто к рендеру мало относилось, потому его отрезал с чистой совестью, чтобы вписаться в доступное время.
TheShock, запускай WebGL-2d покажем этим флэшерам, что такое перфоманс!
Stage3d тоже интересная штука. Подскажите, пожалуйста, canvas аппаратно ускорен?
На сколько я понимаю только композитинг слоёв
В той или иной мере да. Для Opera, Chrome можно посмотреть тут
about:gpuCore2Duo E7400 Ubuntu 12.04.
По FPS: 59-60 ваш пример, 34-36 вчерашний пример.
P.S. solar_system_v3.swf от virtualtoy выдает 65% CPU.
P.P.S. WebGL Aquarium на 1000 рыб тянет все те же 30FPS. Это к вопросу про производительность в целом.
По FPS: 59-60 ваш пример, 34-36 вчерашний пример.
P.S. solar_system_v3.swf от virtualtoy выдает 65% CPU.
P.P.S. WebGL Aquarium на 1000 рыб тянет все те же 30FPS. Это к вопросу про производительность в целом.
Ноут? Случайно не от батареи работает сейчас?
у меня везде скачет с 43 до 60 — т.е. на полсекунды тормоз с определенной периодичностью.
Шок, вы, конечно, молодец, но флеш опускаете зря.
Зря? — Лично я последнее время очень ненавижу(раньше просто не любил его) флеш потому что у меня из за него падает хром.
П.с Мне кажется что флешу пора на пенсию с его багами и дырками в безопасности…
Какие милые масштабы орбит и размеров планет!
А можно узнать технические параметры «слабого ноута»?
И насчёт освещения планет — не пробовал делать тени путём наложения тени поверх целого изображения планеты? Чтобы сама планета не вращалась, а смещалась тень?
И насчёт освещения планет — не пробовал делать тени путём наложения тени поверх целого изображения планеты? Чтобы сама планета не вращалась, а смещалась тень?
И насчёт освещения планет — не пробовал делать тени путём наложения тени поверх целого изображения планеты? Чтобы сама планета не вращалась, а смещалась тень?
Вообще это не проблема. Берём прозрачно-чёрный градиент от солнца и накладываем его поверх планеты с
globalCompositeOperation, если не ошибаюсь, source-in. Но я решил сделать поближе к оригиналу.А можно узнать технические параметры «слабого ноута»?
на самом деле «слабый» — это образно. Проц i5, но в энергосберегающем режиме да на старой версии браузера. У меня сейчас на том же проце на стационарнике 1-2% загрузка проца, так что как абсолютный результат не пойдёт — только в качестве сравнения.
Планеты качаются влево-вправо, аж укачивает
Объясните? Не вижу такого эффекта
сейчас попробую описать (в предыдущем примере от другого автора такого не было) а у вас происходит колебание планеты влево-вправо (помимо движения его по орбите)
Такое впечатление, будто координаты планет только целые числа. В предыдущем варианте видимо вещественная арифметика была и движение плавнее выглядит.
UPD это зависит от браузера, в FF оба варианта плавные
UPD это зависит от браузера, в FF оба варианта плавные
UPD2 в «стандартных» браузерах (FF, Opera, Chromium) оба варианта плавные. В нестандартных (я использую Konqueror), варант от kibizoidus — плавные изменения координат, вариант TheShock — прыгают картинки по целым позициям.
Планеты не по центру обводки расположены, особенно это заметно на внешних орбитах.
Например:
habrastorage.org/storage2/318/de0/b0c/318de0b0c4696e852089cda4fa1319e7.png
Видно как сверху между обводкой и планетой просвечивают звезды, снизу такого нет :)
Например:
habrastorage.org/storage2/318/de0/b0c/318de0b0c4696e852089cda4fa1319e7.png
Видно как сверху между обводкой и планетой просвечивают звезды, снизу такого нет :)
Спасибо за топик! Только это не галактическая система, а звездная система
Господа, это ТЗ заразно. Мне тоже пришлось выпилить свой вариант. На мой взгляд чудес никто не продемонстрировал (если не считать, что Вы так быстро и классно написали статью с готовой демкой). Хром и IE 10 ожидаемо лучше всех, Опера и FF плетутся в конце.
выпилить
таки «Запилить». «Выпилить» — это «уничтожить» ;)
быстро и классно
ну так в том то и дело, что это работает быстро и оптимизированно) и работает у меня хорошо даже в iPad ;)
Не могу понять почему, но движение рывками. У меня в игре тоже подобная ситуация происходит.
Кажется проблема найдена) И называется она requestAnimationFrame. Попробуйте все таки рендерлуп поместить в таймаут, чисто для проверки.
У меня, кстати, в таймауте, а не в раф
Вероятно, оно не может 62 кадра в секунду вытягивать постоянно, от того и рывки. Что бы не было рывков, график кадров в секунду должен быть ровный, как поверхность зеркала на хаббле:)
Ну проц ведь не перегружён, даже с запасом. Или ты о том, что надо ставить ровно 60?)
Хотя я рывков не вижу, правда)
Хотя я рывков не вижу, правда)
хз, надо поглядеть на график FPS. вот я искуственно понизил до комфортных 31 FPS, рывков не наблюдаю и график выглядит вот так:
А дайте ка эту мерялку fps, пожалуйста)
Фирменная мерялка от создателя threejs github.com/mrdoob/stats.js
Орбиты неправильно выделяются в ff17
Просто замечательно! Даже на смартфоне вполне сносно работает.
*приготовил попкорн*
А кто возьмется на сильверлайте? =) Думаю, производительность у него будет в минусе, а простота написания наобротот в плюсе.
А кто возьмется на сильверлайте? =) Думаю, производительность у него будет в минусе, а простота написания наобротот в плюсе.
Это на который даже сам MS забил?
не знаю даже, кто там на кого забил, но сделать на нем такую штуку можно элементарно.
но это не олимпиада и мне не 15 лет, чтобы бросаться делать «за час» — я бы предпочел посмотреть на такую реализацию от настоящих специалистов сильверлайта :)
но это не олимпиада и мне не 15 лет, чтобы бросаться делать «за час» — я бы предпочел посмотреть на такую реализацию от настоящих специалистов сильверлайта :)
не знаю даже, кто там на кого забил, но сделать на нем такую штуку можно элементарно.
О! Ещё и Сильверлайтеры подтянулись с «языкочесательством». Я не бросался «успеть за час». Я просто ограничил время для себя, чтобы не тратить излишне много. Что успел — то успел.
Не очень понятно почему Вы утверждаете, что там это сделать элементарно. Я по работе немного пользую WPF (как сервелат, только лучше :)) и не сказал бы, что там это сделать прямо уж так просто. По крайней мере мне это так не кажется.
Вращение планет, орбиты и тултипы делаются элементарно. Накодил в перерывах между растапливанием печки и чисткой снега :)
Выделение делается относительно сложно и заняло чуть ли не в два раза больше времени, с рисованием ArcSegment через задницу и затем вращением его через Transform.
runserver.net/temp/SolarSystem.html
Что я не делал, так это выделение орбиты по Mouse Hover.
В тестах процессор жрется как бешеный, правда у меня Chrome + Mac, но на винде наверное так же.
К плюсам этой технологии можно отнести программинг на C#, относительную простоту реализации базовых вещей (ArcSegment — не базовая, потому и сложности), к минусам — прожорливость плагина, его слабую распостраненность.
Имхо, единственное, ради чего есть смысл использовать Silverlight, так это для реюзабельности кода на других платформах: программу за минимум времени сделать десктопной WPF, мобильной для WP 7-8, или за чуть большее время Metro/Modern приложением для Windows Store. Если же отделить бизнес-логику от интерфейса, то ее можно использовать на iOS и Android в MonoTouch/MonoDroid. Собственно, так я и делаю при портировании своих проектов по цепочке Android -> iOS (MonoTouch) -> Mac OS X (MonoMac) -> Win 8.
Выделение делается относительно сложно и заняло чуть ли не в два раза больше времени, с рисованием ArcSegment через задницу и затем вращением его через Transform.
runserver.net/temp/SolarSystem.html
Что я не делал, так это выделение орбиты по Mouse Hover.
В тестах процессор жрется как бешеный, правда у меня Chrome + Mac, но на винде наверное так же.
К плюсам этой технологии можно отнести программинг на C#, относительную простоту реализации базовых вещей (ArcSegment — не базовая, потому и сложности), к минусам — прожорливость плагина, его слабую распостраненность.
Имхо, единственное, ради чего есть смысл использовать Silverlight, так это для реюзабельности кода на других платформах: программу за минимум времени сделать десктопной WPF, мобильной для WP 7-8, или за чуть большее время Metro/Modern приложением для Windows Store. Если же отделить бизнес-логику от интерфейса, то ее можно использовать на iOS и Android в MonoTouch/MonoDroid. Собственно, так я и делаю при портировании своих проектов по цепочке Android -> iOS (MonoTouch) -> Mac OS X (MonoMac) -> Win 8.
А сколько времени ушло на этот пример? В винде проц жрётся не очень. Где-то так же, как html5 в Опере. А почему не сделали выделение орбиты по hover?
пол-часа на базовую часть вчера вечером, час сегодня утром на выделение.
изредка приходилось гуглить, потому как с Path до этого в Silverlight не работал — я далеко не гуру по этой технологии, да и вообще не гуру и не из Бобруйска :)
Выделение изначально орбиты по hover не сделал, потому, что используется встроенный ToolTipService — он связывает объект ToolTip с объектом на Canvas и привязывается к видимой части объекта. У орбит видимая часть очень тонкая, потому наводиться будет очень тяжело.
Выложил обновленную версию, в ней я добавляю еще одну «невидимую» орбиту с толщиной в 20 пикселей и к ней привязываю другой тултип, без надписи. Ссылка та же:
runserver.net/temp/SolarSystem.html
изредка приходилось гуглить, потому как с Path до этого в Silverlight не работал — я далеко не гуру по этой технологии, да и вообще не гуру и не из Бобруйска :)
Выделение изначально орбиты по hover не сделал, потому, что используется встроенный ToolTipService — он связывает объект ToolTip с объектом на Canvas и привязывается к видимой части объекта. У орбит видимая часть очень тонкая, потому наводиться будет очень тяжело.
Выложил обновленную версию, в ней я добавляю еще одну «невидимую» орбиту с толщиной в 20 пикселей и к ней привязываю другой тултип, без надписи. Ссылка та же:
runserver.net/temp/SolarSystem.html
Кстати, оно часто или вообще не реагирует на мышь или реагирует на мышь с существенной задержкой. Винда 7, 64 бита.
Ага, у системных тултипов есть базовая задержка. Чтобы ее не было, надо все переделывать на MouseOver и пр.
Вообще, все хоть чуточку нестандартное в винляндии делается через задницу с горой дополнительного кода… Потому я и поставил крест на 5ти годах работок для AD и ушел программить на Mac, чего и всем желаю :)
Вообще, все хоть чуточку нестандартное в винляндии делается через задницу с горой дополнительного кода… Потому я и поставил крест на 5ти годах работок для AD и ушел программить на Mac, чего и всем желаю :)
У меня отъедает 3% на 2x2 ядрах. Значит где-то 12% на ядро. Пока это одно из самых производительных решений. Кстати небольшие рывки все равно заметны и здесь. Из минусов — сначала ИЕ мне предложил установить сервелат, потом сказал, что его версия устарела и предложил установить новую версию :). И только после этого все завелось.
У меня в маке жрет намного больше, но ни о каких рывках и речи нет.
Может это глаз реагирует на фиксированные 33 FPS? Или рывки видны, когда выбрана какая-то орбита?
Может это глаз реагирует на фиксированные 33 FPS? Или рывки видны, когда выбрана какая-то орбита?
Может это глаз реагирует на фиксированные 33 FPSПричин не знаю, но без всяких мышкодвижений и выделений орбит наблюдаются небольшие мелкие рывки.
Microsoft Silverlight x64 5.1.10411.0 на Windows 7 prof sp1 x64 на Core i3-2100 3.1 GHz, 8 Gb, GeForce GT 520.
окей, посмотрю на досуге, почему такое может быть. все-таки там копеечные отрисовки, не должно дергаться.
Если не сложно, проверьте, будет ли дергаться карта при перетаскивании вот тут:
runserver.net/temp/sol/Solitaire.webTestPage.html
Технология одна и та же, но в планетах движение по таймеру, а тут по событию мыши.
Если не сложно, проверьте, будет ли дергаться карта при перетаскивании вот тут:
runserver.net/temp/sol/Solitaire.webTestPage.html
Технология одна и та же, но в планетах движение по таймеру, а тут по событию мыши.
В сервелате писать смысла большого не вижу, лучше уж флеш использовать — он хоть большим числом платформ поддерживается.
Вот на что и вправду было бы интересно взглянуть, так это на решение на CSS3.
Вот на что и вправду было бы интересно взглянуть, так это на решение на CSS3.
Так есть же, azproduction выше привёл: codepen.io/juliangarnier/pen/idhuG
И 2d, и 3d. Феерично! Но css-кода там много…
И 2d, и 3d. Феерично! Но css-кода там много…
Да, очень круто! Я как-то пропустил, спасибо. Правда, нормально только в Хроме заработало, Opera, FF и IE 10 дружно пасуют. Что касается загрузки CPU, то цифры сопоставимы с оптимизированным JS + Canvas или тем же flash. Мне кажется, что это говорит о том, что сами по себе ни JS ни Canvas особых тормозов не вносят, тормозит именно отрисовка самим браузером.
Спасибо вам за отличную статью! И отдельное спасибо всем, кто делал разные версии.
Теперь бы ещё на Fabric.js версию… Может, kangax сделает?..
P.S. Как вам «Хоббит»? :)
Теперь бы ещё на Fabric.js версию… Может, kangax сделает?..
P.S. Как вам «Хоббит»? :)
Пожалуйста)
Ждём kangax, отписался ему в Скайп)
Хоббит просто прелестный. До сих пор аж тепло в груди от просмотра.
С удовольствием схожу на него ещё раз.
Ждём kangax, отписался ему в Скайп)
Хоббит просто прелестный. До сих пор аж тепло в груди от просмотра.
С удовольствием схожу на него ещё раз.
Наконец нашёл пару свободных минут, вот пожалуйста — fabricjs.com/solar-system/
Заняло где-то 2 часа. По размеру получается приблизительно также как и LibCanvas. Хотя сама Fabric весит меньше :P
Было бы хорошо подробно написать о том как реализовал всё это, но нет времени. В двух словах:
— В принципе всё было более менее очевидно
— В Fabric нет hover событий (не хотел добавлять из-за производительности), поэтому пришлось сделать небольшой «monkey-patching» одного из методов, чтобы это событие симулировать (~20 линий)
— В Fabric нет ничего для работы со спрайтами (так как мы на игры, например, сильно не ориентируемся), поэтому тоже пришлось вручную. Рендерил спрайт прямо на маленький канвас в памяти, с отступом, потом читая через data-url создавал картинки (~15 линий)
— Архитектурой не занимался. Можно было бы создать специальный класс для планеты с подсветкой, но я сделал всё тупо и линейно. Подсветка вокруг планеты — просто круг который показываем в нужном месте или прячем за холстом. Ну и всё остальное тоже как отдельные простые объекты — планеты как картинки (fabric.Image), орбиты как круги (fabric.Circle), текст как текст (fabric.Text). Всё создаём, добавляем на холст, запускаем анимацию вокруг центра, и следим за hover событиями. Вот и всё.
Недостаток по сравнению с LibCanvas в том что рендерим всё на одном слое, поэтому производительность скорее всего хуже. И ещё иногда вижу какой-то глюк с разпознанием планет. Иногде не подсвечиваются кажется; не уверен в чём проблема, буду разбираться как будет время.
Ну а так в общем всё вроде более менее работает.
Заняло где-то 2 часа. По размеру получается приблизительно также как и LibCanvas. Хотя сама Fabric весит меньше :P
Было бы хорошо подробно написать о том как реализовал всё это, но нет времени. В двух словах:
— В принципе всё было более менее очевидно
— В Fabric нет hover событий (не хотел добавлять из-за производительности), поэтому пришлось сделать небольшой «monkey-patching» одного из методов, чтобы это событие симулировать (~20 линий)
— В Fabric нет ничего для работы со спрайтами (так как мы на игры, например, сильно не ориентируемся), поэтому тоже пришлось вручную. Рендерил спрайт прямо на маленький канвас в памяти, с отступом, потом читая через data-url создавал картинки (~15 линий)
— Архитектурой не занимался. Можно было бы создать специальный класс для планеты с подсветкой, но я сделал всё тупо и линейно. Подсветка вокруг планеты — просто круг который показываем в нужном месте или прячем за холстом. Ну и всё остальное тоже как отдельные простые объекты — планеты как картинки (fabric.Image), орбиты как круги (fabric.Circle), текст как текст (fabric.Text). Всё создаём, добавляем на холст, запускаем анимацию вокруг центра, и следим за hover событиями. Вот и всё.
Недостаток по сравнению с LibCanvas в том что рендерим всё на одном слое, поэтому производительность скорее всего хуже. И ещё иногда вижу какой-то глюк с разпознанием планет. Иногде не подсвечиваются кажется; не уверен в чём проблема, буду разбираться как будет время.
Ну а так в общем всё вроде более менее работает.
Ох… Только добрался до комментариев.
Чувствуется — вывел мой топик холивары на новый уровень — не просто между Canvas vs Flash, а уже Canvas Native vs Canvas Libraries. И, думается мне, это далеко не конец.
По поводу примеров выше на Flash… Да, возможно — удобнее, но, прежде всего, только потому, что многие решения Flash-плеера решают и оптимизируют за программиста. Это, конечно же, хорошо, но теряется непосредственная связь между программистом и объектом программирования.
В общем и целом, пример показателен. По большей части в том, что мне есть куда стремиться и оптимизация и доведение до «товарного вида» важна не меньше, чем реализация концепта. И я за это благодарен всем присутствующим.
To be continued. Soon ^_~
Чувствуется — вывел мой топик холивары на новый уровень — не просто между Canvas vs Flash, а уже Canvas Native vs Canvas Libraries. И, думается мне, это далеко не конец.
По поводу примеров выше на Flash… Да, возможно — удобнее, но, прежде всего, только потому, что многие решения Flash-плеера решают и оптимизируют за программиста. Это, конечно же, хорошо, но теряется непосредственная связь между программистом и объектом программирования.
В общем и целом, пример показателен. По большей части в том, что мне есть куда стремиться и оптимизация и доведение до «товарного вида» важна не меньше, чем реализация концепта. И я за это благодарен всем присутствующим.
To be continued. Soon ^_~
Реализация от hizahazahub на флэше под stage3d, в качестве displaylist'а использован starling framework:
g-pixel.ru/star_system/
g-pixel.ru/star_system/
Попробовал LibCanvas-версию на недавнем приобретении — WP8 смарте. Работает лучше и плавнее, чем на iPad! Один косяк — при тапе канвас выделяется серым, выделение исчезает само примерно через полсекунды.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Солнечная система на LibCanvas