Рубрика «canvas»

Phaser

Оглавление

0. Подготовка к работе
1. Введение [Вы тут]
2. (wip) Загрузка ресурсов
3. (wip) Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи

Добро пожаловать в наш первый урок по созданию игр на Phaser. Здесь я расскажу вам, как создать небольшую игру — платформер, которая познакомит вас с основными функциями данного фремворка и работу с ним в нынешних реалиях (ES6 / TypeScript + WebPack).

Что такое Phaser?

Phaser — это HTML5 (JavaScript / TypeScript) игровой фреймворк, который призван помочь разработчикам создавать крутые, кросс-браузерные HTML5 игры в короткие сроки и, в отличии от других фреймворков, phaser изначально затачивался под мобильные устройства. Единственное требование выдвигаемое данным фреймворком — поддержка тега <canvas />. Он также много чего унаследовал от Flixel.

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

Phaser

Оглавление

0. Подготовка к работе [Вы тут]
1. Введение
2. (wip) Загрузка ресурсов
3. (wip) Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи

Эта серия статей научит вас основам и "хорошему тону" игрового фремворка Phaser. За данный курс, я постараюсь объяснить вам основные идеи и возможности фреймворка, а также покажу как его грамотно использовать в связке с TypeScript и Webpack.

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

Библиотека для тестов с заполнением пропусков - 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. Много картинок под катом
Читать полностью »