Рубрика «canvas»

 

Библиотека для тестов с заполнением пропусков - 1

Не всегда же только пользоваться. Именно с такой мысли началось написание библиотеки под Android и последующее написание этой статьи. Вдруг кому пригодится. Под катом то, что в итоге получилось.
Читать полностью »

Всем привет. В этой статье речь пойдет о библиотеке для рисования на canvas — KeepDraw.
Это фреймворк для работы с canvas 2d с поддержкой событий и анимации.

Отличительные черты:

  1. API в стиле ООП;
  2. События для мыши, клавиатуры и сенсорных экранов;
  3. Поддержка анимации;
  4. Рисование кривых безье по точкам;
  5. Множество функций, проверяющих пересечения фигур и точек;
  6. Заливка фигур градиентами и изображениями;
  7. Шаблоны объектов — линия, прямоугольник, текст, многоугольник и круг.
  8. Поддержка мобильных устройств.
  9. Сглаживание фигур с использование кривых безье.
  10. Легковесный. Сжатая версия весит 15 килобайт.

Читать полностью »

Всем привет, сегодня поговорим про сетевое взаимодействие в онлайн играх. Да не обо всём, а о том, как исключить влияние некорректных данных на других пользователей. Все знают что сервер никогда не должен доверять клиенту, но иногда лучше на практике посмотреть где и какие данные обрабатываются на неком примере.

Хочу предупредить, что статья нацелена на новичков. Людей которые хотели бы написать свою первую многопользовательскую игру. Если вы хоть раз занимались сетевым взаимодействием в играх, ничего полезного здесь не найдёте.

Техническое отступление

И дабы не остаться теоретическим материалом была написана небольшая демка. Ее можно запустить, посмотреть какими данными обмениваются клиент и сервер. На чьём примере и будет рассмотрено клиент-серверное взаимодействие.

Приложение использует технологию canvas для графики и websockets для взаимодействия с сервером. Код не является предметом обсуждения, поэтому писался быстро (основная часть около 2-3 часов), без проектирования и рефакторинга. Я не рекомендую использовать его или его часть где бы то ни было.
Читать полностью »

Мы делаем бродкастер для live трансляций в Facebook и одна из задач с которой пришлось столкнуться это текстовые оверлеи или титры (Lower Third). Наш JustBroadcaster мы выдерживаем в концепции всё должно быть “очень просто для обычного пользователя” и конечно задачу с титрами пришлось решать с учётом этого, избегая превращения в панель управления космическим кораблём.
Читать полностью »

Недавно мне довелось поработать над прототипом видеочата. Это был отличный повод поближе познакомиться с концепциями WebRTC и опробовать их на практике. Как правило, когда говорят про WebRTC, подразумевают организацию аудио- и видеосвязи, но эта технология может применяться и для других интересных вещей. Я решил попробовать сделать peer-to-peer игру и поделиться опытом ее создания. Видео того что получилось и подробности реализации под катом.

WebRTC: Делаем peer to peer игру на javascript - 1

Читать полностью »

image

За последние полгода редактор для создания игр и просто баннеров под HTML5 прилично пообтесался, упростился (в смысле концепции и интерфейса) и, в итоге, стал ближе к конечному пользователю. Пришла пора посмотреть, что есть в нём (в редакторе, а не в пользователе, конечно) интересного. Под катом — тяжёлые картинки и немного текста.

Читать полностью »

image

Приветствую! В сегодняшнем посте хочу рассказать вам об обновлении своей библиотеки измерительных приборов до версии 2 и обо всех тех изменениях, которые теперь доступны публике.

Как и раньше, библиотека OpenSource и распространяется по лицензии MIT, так что берите, используйте и, вообще, далайте что хотите без каких-либо ограничений.

Читать полностью »

Месяц с Animate CC - 1
Описание моего опыта переезда с Flash на Animate CC и создания баннеров во всемогущем формате HTML5. Много картинок под катом
Читать полностью »

Комментарии к записи FConsole — инструмент для отладки PIxi.js (Canvas-WebGL) приложений отключены

Буквально вчера выложил в открытый доступ первую рабочую версию консоли для отладки Canvas/WebGL приложений FConsole. Если вы всегда хотели редактировать свойства визуальных объектов без изменения исходного кода, а так же без сложностей просматривать всю иерархию визуальных объектов, то прошу под кат.

image

* На скриншоте представлена Flash-Console, которая бралась в качестве примера при разработке FConsole
Читать полностью »

В сети есть несколько похожих примеров создания спидометра, но я решил поделиться с вами своим.

image

Для начала нам нужно в DOM'е создать объект canvas:
Читать полностью »