Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 76
Спасибо, давно собирался посмотреть на ЛибКанвас
Посмотрите лучше в сторону processing.js.
Более продвинутая библиотека. Имхо.
Более продвинутая библиотека. Имхо.
Хм… оно глобальный неймспейс загаживает сотней имён, или я чего-то не понял?
А можете объяснить, пожалуйста — чем она более продвинутая?
Я посмотрел код — лично меня что-то не впечатлило.
Я посмотрел код — лично меня что-то не впечатлило.
Посмотрите хотя-бы примеры на сайте. В этой библиотеке реализован больший функционал.
OK, давайте посмотрим Reference на сайте processing.js.
Что есть в processing.js / сравнение с LibCanvas:
1) Расширение стандартных прототипов / Прототипы расширяет MooTools
2) Подсчет framerate'а / LibCanvas.Utils.FpsMeter
3) 2D-примитивы — эллипсы, квадраты, треугольники / LibCanvas.Shapes.*
4) Кривые Безье / LibCanvas.Shapes.Path
5) Построение полигонов через vertex / LibCanvas.Shapes.Polygon
6) Ввод с клавиатуры и мыши / LibCanvas.Interfaces.MouseListener, LibCanvas.Core.Keyboard
7) Трансформации матриц / встроено в классы Shapes
8) Загрузка и отображение картинок / LibCanvas.Context2D.drawImage, LibCanvas.Utils.ImagePreloader
Это все, что есть в Processing.js.
Чего там нет, и что есть в LibCanvas (и это только начало): анимация спрайтов, отрисовка частей изображений (полезно для спрайтов), буферизации и кэширования спрайтов, поведений Linkable, Clickable, Draggable, Droppable, предварительной загрузки изображений.
Теперь, внимание, просьба и одновременно вопрос — покажите мне пожалуйста, в каком месте у processing.js реализован больший функционал?
Что есть в processing.js / сравнение с LibCanvas:
1) Расширение стандартных прототипов / Прототипы расширяет MooTools
2) Подсчет framerate'а / LibCanvas.Utils.FpsMeter
3) 2D-примитивы — эллипсы, квадраты, треугольники / LibCanvas.Shapes.*
4) Кривые Безье / LibCanvas.Shapes.Path
5) Построение полигонов через vertex / LibCanvas.Shapes.Polygon
6) Ввод с клавиатуры и мыши / LibCanvas.Interfaces.MouseListener, LibCanvas.Core.Keyboard
7) Трансформации матриц / встроено в классы Shapes
8) Загрузка и отображение картинок / LibCanvas.Context2D.drawImage, LibCanvas.Utils.ImagePreloader
Это все, что есть в Processing.js.
Чего там нет, и что есть в LibCanvas (и это только начало): анимация спрайтов, отрисовка частей изображений (полезно для спрайтов), буферизации и кэширования спрайтов, поведений Linkable, Clickable, Draggable, Droppable, предварительной загрузки изображений.
Теперь, внимание, просьба и одновременно вопрос — покажите мне пожалуйста, в каком месте у processing.js реализован больший функционал?
Вот вы перечислили некоторые функции LibCanvas, но на libcanvas.com я не нашел ни одного дока об этом. Может подскажите, где почитать? Или рыться в коде?
Дока на самом деле сейчас один из важных векторов для нас и активно пишется. Например: libcanvas.com/tutorial/behaviors
Да и примеров кода куча. Поверьте, то, что описано в статье — это только вершина айсберга втроенных в ЛибКанвас возможностей.
Да и примеров кода куча. Поверьте, то, что описано в статье — это только вершина айсберга втроенных в ЛибКанвас возможностей.
CPU 100% для такой игрушки не многовато?
Safari 5.0.1, Mac OS 10.6.4
Safari 5.0.1, Mac OS 10.6.4
А что вы хотели от canvas?
Svg менее прожорлива.
Svg менее прожорлива.
Так там всего-то несколько кружочков. Полагаю, дело в том, что фпс не ограничивается сверху. Автор бы фпс вывел.
SVG менее прожорлива? а на ней можно нарисовать что-то кроме парочки линий?
Сделайте habrahabr.ru/blogs/javascript/101273/ на СВГ, я хочу посмотреть просто, насколько она менее прожорлива.
Сделайте habrahabr.ru/blogs/javascript/101273/ на СВГ, я хочу посмотреть просто, насколько она менее прожорлива.
С помощью SVG можно нарисовать всё то, что иллюстратор может нарисовать в Adobe Illustrator и Corel Draw, плюс есть куча эффектов, smil и javascript, вставка растровых изображений. Возможности просто неограничены. Тормозни точно не будет — обработка идёт нативно, а не через JS с костылями. Игры делать мне лень, извините. Но примеров в инете много:
Кстати, SVG может в вебе заменить почти весь CSS3, если ребята из Mozilla научатся вставлять SVG фоном через CSS, а разработчики Webkit поправят пару багов.
Кстати, SVG может в вебе заменить почти весь CSS3, если ребята из Mozilla научатся вставлять SVG фоном через CSS, а разработчики Webkit поправят пару багов.
это все только в теории. на практике я не видел ничего стоящего на SVG.
даже запрос в Гугле ничего интересного не находит
svg showcase попробуйте. Игр никто и не делал особо, а вот картографических коммерческих приложений — тонны.
Всё как всегда упирается в поддержку браузерами. На данный момент самая вменяемая поддержка есть только в Opera. Увы…
Всё как всегда упирается в поддержку браузерами. На данный момент самая вменяемая поддержка есть только в Opera. Увы…
оооу. то вы про статические картинки. ну ясно тогда.
покажите хоть одно достаточно динамичное приложение на СВГ с постоянным обновлением состояния. Ато сравнивать один раз отрендеренную картинку с постоянно обновляющейся — очень круто.
покажите хоть одно достаточно динамичное приложение на СВГ с постоянным обновлением состояния. Ато сравнивать один раз отрендеренную картинку с постоянно обновляющейся — очень круто.
Скажите, вы троллите или у вас гугл сломался?
svg-wow.org/audio/animated-lyrics.html
svg-wow.org/audio/animated-lyrics.html
отличный пример))) проц загружен, что происходит — непонятно.
все только для того, чтобы написать одну строчку текста, плавно увеличивающуюся.
особо в сравнении с астероидами — очень круто))
все только для того, чтобы написать одну строчку текста, плавно увеличивающуюся.
особо в сравнении с астероидами — очень круто))
Ну сделайте на канвасе схожую штуку, раз там «написать одну строчку текста, плавно увеличивающуюся». Я понимаю, что вы далеки от программирования и что такое рендеринг текста по путям не знаете, но вы попробуйте — вдруг что выйдет хорошее.
только после того, как сделаете Астероиды.
Уже давно всё сделали:
ie.microsoft.com/testdrive/Graphics/35SVG--oids/Default.xhtml
www.apple.com/downloads/dashboard/games/asteroidswidget.html
Дружите с гуглом, оок? И хотя бы вики почитайте, а то такую дуйню несёте…
ie.microsoft.com/testdrive/Graphics/35SVG--oids/Default.xhtml
www.apple.com/downloads/dashboard/games/asteroidswidget.html
Дружите с гуглом, оок? И хотя бы вики почитайте, а то такую дуйню несёте…
хахаха. я знаю. вы под видом троллинга хотите всем показать насколько SVG ущербен для создания таких вещей по сравнению с Канвасом.
сравниваете летающие многоугольнички с libcanvas.com/games/asteroids
такие многоугольнички, как вы показали были где-то на первой стадии разработки наших астероидов.
а проц на свг грузят не меньше, чем полноценная анимированная версия на канвас.
кончайте троллить, вы постоянно failитесь
сравниваете летающие многоугольнички с libcanvas.com/games/asteroids
такие многоугольнички, как вы показали были где-то на первой стадии разработки наших астероидов.
а проц на свг грузят не меньше, чем полноценная анимированная версия на канвас.
кончайте троллить, вы постоянно failитесь
Во-первых, постоянно фейлитесь вы. То, что вы друг друга плюсуете и минусуете меня не делает вас ни на грамм умнее.
Во-вторых, я нигде не писал, что SVG — замена Canvas. Не надо придумывать то, чего я не говорил. И да, ваши астероиды отличаются от SVG-шных только тормознёй и наличием звука. Графика? Да какая разница что вращать? Вставьте в пример от Microsoft свою графику — визуально результат будет один в один как у вас.
В-третьих, SVG создан для манипуляции векторными обьектами. Использовать его для работы с растром глупо. Использовать Canvas для работы с вектором тоже глупо.
В-четвёртых, в SVG есть куча готовых фильтров, таких как размытие Гаусса, блендинг, матричные преобразования цвета и т.д. Всего этого в случае канваса нету и надо писать самому. И тут вылезает проблема производительности. Наверняка вам будет интересно добавить в свой LibCanvas такие фишки, как Shift Hue. Вот добавите и сравните производительность нативной реализации и вашей на JS. Я вам даже сразу подсказку дам на тему оптимизации — менять Hue, Saturation и Lightness быстрее через цветовую модель YIQ, подробнее тут — beesbuzz.biz/code/hsv_color_transforms.php
В-пятых, сделать что-либо серьёзное игровое с помощью Canvas невозможно. Почитайте блог немцев, ссылку я уже давал — blog.dextrose.com/en
Вобщем, когда сделаете что-нибудь серьёзное — приходите, поговорим. А пока нам с вами разговаривать не о чём.
Во-вторых, я нигде не писал, что SVG — замена Canvas. Не надо придумывать то, чего я не говорил. И да, ваши астероиды отличаются от SVG-шных только тормознёй и наличием звука. Графика? Да какая разница что вращать? Вставьте в пример от Microsoft свою графику — визуально результат будет один в один как у вас.
В-третьих, SVG создан для манипуляции векторными обьектами. Использовать его для работы с растром глупо. Использовать Canvas для работы с вектором тоже глупо.
В-четвёртых, в SVG есть куча готовых фильтров, таких как размытие Гаусса, блендинг, матричные преобразования цвета и т.д. Всего этого в случае канваса нету и надо писать самому. И тут вылезает проблема производительности. Наверняка вам будет интересно добавить в свой LibCanvas такие фишки, как Shift Hue. Вот добавите и сравните производительность нативной реализации и вашей на JS. Я вам даже сразу подсказку дам на тему оптимизации — менять Hue, Saturation и Lightness быстрее через цветовую модель YIQ, подробнее тут — beesbuzz.biz/code/hsv_color_transforms.php
В-пятых, сделать что-либо серьёзное игровое с помощью Canvas невозможно. Почитайте блог немцев, ссылку я уже давал — blog.dextrose.com/en
Вобщем, когда сделаете что-нибудь серьёзное — приходите, поговорим. А пока нам с вами разговаривать не о чём.
Графика? Да какая разница что вращать? Вставьте в пример от Microsoft свою графику — визуально результат будет один в один как у вас.
«Игрушка в топике отличается от Фоллаута 3 только графикой. Какая разница что двигать? Вставте в эту игрушку спрайты из Фолла и результат будет один-в-один как у Беседы»
Вот вставте, запрограммируйте, а потом рассказывайте. Ато только абстрактные «на свг можно сделать очень пиздато» пока что и выскакивают.
за немцев я очень рад.
пока что вы не показали ничего более серьезного на СВГ.
тем более если вы думаете, что мне крайне важно ваше одобрение, то в этом вы очень ошибаетесь. считайте как хотите.
> ie.microsoft.com/testdrive/Graphics/35SVG--oids/Default.xhtml
Опера 10.6, загрузка процессора — 50%, тормозит даже больше чем Канвасная версия.
Или вы хотели показать, что векторная графика лучше растровой? :)
Опера 10.6, загрузка процессора — 50%, тормозит даже больше чем Канвасная версия.
Или вы хотели показать, что векторная графика лучше растровой? :)
продвинутые градиенты, мягкие края, прозрачность. некоторые векторные дизайнеры весьма удивлялись качеству отрисовки бесплатного inkscape (и просмотру картинки в любом браузере), и говорили, что coreldraw так красиво не может.
у меня под 60%, xp, firefox, core 2 duo. Как-то не очень шустро прямо скажем (
XP SP3, Opera 10.6, ноутбучный процессор Pentium Dual-Core T4400 — никаких лагов или тормозов не замечено.
Интересно получается — очень большой разброс по результатам скорости у Canvas — у кого-то очень сильно тормозит даже на сильных компьютерах, а у кого-то летает на средних.
Видимо, это можно объяснить только тем, что HTML5 все-таки еще драфт :)
Интересно получается — очень большой разброс по результатам скорости у Canvas — у кого-то очень сильно тормозит даже на сильных компьютерах, а у кого-то летает на средних.
Видимо, это можно объяснить только тем, что HTML5 все-таки еще драфт :)
Нет, это обьясняется тем, что Firefox чертовски тормозной. В моих тестах по обработке тяжёлой графики Firefox в десять-двадцать раз медленнее чем Opera и Chrome. Его производительность на уровне встроенного в гуглофон браузера на движке WebKit. А ведь в гуглофоне всего гигагерцовый проц, против моего двух-гигагерцового Dual Core в настольнике.
моя практика показывает прямо противоположные результаты
Я не знаю, что значат ваши циферки.
загрузка процессора на одном приложение в разных версиях браузеров
На каком? Если говорить про игру из поста, то у меня с ней все браузеры кушают целиком одно ядро. Разница в том, что в Opera картинка плавная, а в FF всё дёргается.
Если говорить про игру из поста, то авторы пока что не знают, что такое оптимизация.
Если говорить про игру из поста, то авторы пока что не знают, что такое оптимизация.
> Если говорить про игру из поста, то авторы пока что не знают, что такое оптимизация.
Вы хоть скажите, где оптимизировать-то. В коде браузеров? Или автор статьи ответственен за то, что примеры, использующие по большей части экспериментальный компонент Canvas (вы, кстати, в курсе, что релиз HTML5 состоится только в течение 10 следующих лет?) тормозят в вашем браузере и на вашем компьютере?
Как всегда — эксперты на проводе, по делу абсолютно ничего — зато напускной важности — хоть отбавляй.
Вы хоть скажите, где оптимизировать-то. В коде браузеров? Или автор статьи ответственен за то, что примеры, использующие по большей части экспериментальный компонент Canvas (вы, кстати, в курсе, что релиз HTML5 состоится только в течение 10 следующих лет?) тормозят в вашем браузере и на вашем компьютере?
Как всегда — эксперты на проводе, по делу абсолютно ничего — зато напускной важности — хоть отбавляй.
Во-первых, надо хотя бы почитать хоть какую-то инфу по теме игростроя.
В 2D играх непринято перерисовывать всю картинку 60 раз в секунду без необходимости. Во-вторых, математику надо дёргать как можно реже — все эти кружочки можно закешировать и выводить только результат. Использование back-buffer и прочих прелестей — обязательно.
Посмотрите на работу немцев — www.dextrose.com/ Они легко рисуют тысячи статичных и сотни анимированных обьектов не перегружая процессор и уже сейчас всё вменяемо работает на iPhone.
В 2D играх непринято перерисовывать всю картинку 60 раз в секунду без необходимости. Во-вторых, математику надо дёргать как можно реже — все эти кружочки можно закешировать и выводить только результат. Использование back-buffer и прочих прелестей — обязательно.
Посмотрите на работу немцев — www.dextrose.com/ Они легко рисуют тысячи статичных и сотни анимированных обьектов не перегружая процессор и уже сейчас всё вменяемо работает на iPhone.
Тема оптимизации канвас тянет на отдельную статью. И так пришлось укорачивать её на четверть, чтобы влезла в хабр.
Например
Отрисовка картинок будет быстрее, чем заливка путей-окружностей.
Конечно,
можно было бы написать про то, что не надо обновлять канвас, если ничего не изменилось, когда его обновлять, как его обновлять. Хотя, если есть хотя бы один «хищник» изменения всё равно происходят каждый кадр.
Тут вообще много чего можно было бы добавить.
А отрисовка через back-buffer в ЛибКанвасе происходит автоматически. Об этом даже не надо задумываться.
Например
Отрисовка картинок будет быстрее, чем заливка путей-окружностей.
Конечно,
можно было бы написать про то, что не надо обновлять канвас, если ничего не изменилось, когда его обновлять, как его обновлять. Хотя, если есть хотя бы один «хищник» изменения всё равно происходят каждый кадр.
Тут вообще много чего можно было бы добавить.
А отрисовка через back-buffer в ЛибКанвасе происходит автоматически. Об этом даже не надо задумываться.
У меня тоже core 2 duo. Но я в Линуксе — 20-30% в фоксе(1 пиксель ширины — 2 секунды).
w7, Fx 3.6.8, Turion X2 Dual-Core. Загрузка не более 15%
Эта печатная машинка иллюстрирует уже третью статью. Где же прогресс?
Загрузил бы что-ли спрайты с космическими кораблями!
Эх, помню год назад тоже баловался canvas — получилось вот это galaxy.artklen.ru/
К сожалению скорость работы canvas очень печальна (
К сожалению скорость работы canvas очень печальна (
Недурно вообще. Кстати, у меня кажет 180fps, так что для такой игры вполне приемлемая скорость :-)
Убил минут 20 :) Спасибо
Отличная реализация, спасибо.
Ваша игрушка игрушка грузит мой Mac Mini всего на 40%. Видимо с HTML 5 будет все тоже самое, что и со флешем,
говнокод будет убивать все производительность.
говнокод будет убивать все производительность.
Размер не тот. Попробуйте эту: libcanvas.com/catch-creating/step14/
и напишите, пожалуйста, результат.
и напишите, пожалуйста, результат.
хорошая игра получилась, и как пример тоже пригодится. спасибо вам.
Остановился только когда занял третье место :)
Спасибо, в обед отлично помогла отвлечься!
Спасибо, в обед отлично помогла отвлечься!
розовый шарик постоянно кудато уббегает при при касании с ним. может(
if (this.isMoveTo('left') && pos.x > 0 ) pos.x -= this.speed;
за пределы экрана всё-равно можно залезть
за пределы экрана всё-равно можно залезть
Прикольная игрушка, по началу не оторваться :) Радует, что все-же есть такие вот интузиасты!
На древнем нетбуке с Atom N270 полет нормальный, но из-за разрешения 1024х600 все поле не помещается в высоту и появляется полоса прокрутки. И управление стрелочками совсем уже не радует.
спасибо, нужная статья. буду очень рад продолжению.
Хорошая статья. Было бы очень здорово, если бы кто-нибудь из вашей команды написал статью об опыте использования . Осветили возможные подводные камни при разработке и тд и тп. У вас это как ни у кого другого хорошо получиться — не плохая библиотека вами написана.
классно!
у меня небольшое замечание по самой игре, небольшой чит
когда наживка отлетела, «player» на пути к её новому местоположению должен уворачиваться от хищников
но если «player» стоит в более-менее безопасном месте (скажем, нет хищников, траектория которых заденет его в ближайшие секунды),
то игрок может нажать правую кнопку мыши — и тогда «player» остаётся на месте, a курсор мыши может спокойно подойти к наживке напрямую
левый клик — и наживка поймана, причём игрок обходит хищников на пути к наживке
у меня небольшое замечание по самой игре, небольшой чит
когда наживка отлетела, «player» на пути к её новому местоположению должен уворачиваться от хищников
но если «player» стоит в более-менее безопасном месте (скажем, нет хищников, траектория которых заденет его в ближайшие секунды),
то игрок может нажать правую кнопку мыши — и тогда «player» остаётся на месте, a курсор мыши может спокойно подойти к наживке напрямую
левый клик — и наживка поймана, причём игрок обходит хищников на пути к наживке
Я понимаю, что почти год прошел, но ссылки умерли, однако
да, дайте пожалуйста новые ссылки
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Создание игры на Javascript Canvas