В этот прекрасный, ничем не отличающийся от остальных день (если не брать в расчёт тот факт, что холодная погода разбила в осколки все мечтания о хотя бы паре тёплых дней в этом году что бы поездить на велосипеде), у меня выдалось хорошее настроение. И хорошее оно даже несмотря на то, что я отчаялся ставить хакинтош на свой ноут, и пришёл к неутешительной мысли, что если я хочу хоть что-то написать под iOS, то мне надо копить на продукцию фирмы Эппл. Но собственно пост не об этом, а о небольшой жизни крохотной игрушки, которую мы с вами и попытаемся создать. Честно говоря, в добрые времена я не так уж и много играл в предка нашего творения (которого ещё и не существует), но определённые теплые воспоминания ещё остались в моём сердце. Итак… Танки! Танчики! БатлТанкс! БатлСити!
Писать будем на JavaScript с выводом на canvas.
В последнее время мне везет натыкаться на интересные статьи для перевода. На этот раз – статья на HTML5Rocks о производительности HTML5 canvas. Автор пишет о некоей стене, в которую упираются разработчики при создании приложений. Какое-то время назад в нее уперся и я при портировании старой-доброй игры на canvas.
К сожалению, графики в оригинале вставлены через iframe. Я мог бы сделать снимки и разместить их изображения, но сам автор позиционирует графики актуальными и такими, которые будут обновляться, потому я просто разместил на них ссылки. Приятного чтения!
Вступление
Тестирование производительности
Предварительно отрисовывайте в виртуальный canvas
Группируйте вызовы
Избегайте ненужных изменений состояния
Отрисовывайте только разницу, а не весь холст
Используйте многослойных canvas для сложных сцен
Избегайте shadowBlur
Различные способы очистить экран
Избегайте нецелых координат
Оптимизируйте анимации с помощью 'requestAnimationFrame'
Большинство мобильных реализаций canvas – медленные
Заключение
Ссылки
Вступление
HTML5 canvas, который начинался, как эксперимент компании Apple, – наиболее широко распространенный стандарт для 2D режима непосредственной графики в интернет. Многие разработчики использую его в широком круге мультимедиа проектов, визуализаций и игр. Как бы то ни было, с ростом сложности приложений, разработчики нечаянно натыкаются на стену производительности.
Некоторое время назад я писал о своем android-приложении раскраске и онлайн-галерее для публикации эскизов и картин из приложения. Идея браузерной онлайн-раскраски вполне логична, но как-то не было стимула сесть и сделать. Было очевидно, что придется использовать технологии, с которыми я не работал и это не сильно вдохновляло. Но как-то появилось время и я решил попробовать. Забегая наперед скажу, что в процессе вскрылись достаточно неочевидные свойства браузеров. Выяснилось, что есть онлайн-компиляторы (в частности с++), выдающие исполняемый файлы для windows и linux. И кроме того мне пришлось впервые поставить себе Linux (Ubuntu).
Эта джаваскриптовая библиотека из более чем сорокá эффектов («фильтров»), налагаемых на изображения (при помощи холста — HTML5 canvas), вызывает желание сравнить её с Фотошопом. По мере распространения браузеров, имеющих дело с холстом, она способна революционизировать иллюстративную силу Всемирной Паутины.
Код фильтров открыт.
За отдельные деньги к нему предлагают докупить плагин для jQuery, обеспечивающий анимацию.