Рубрика «canvas»

Здравствуй!

Совсем недавно разбирая графический движок Pixi.js было обнаружено, что по нему практически нет обучающего материала на русском языке. И хоть все разработчики поголовно должны знать английский, вводный урок на родном языке, вряд ли сильно навредит. Мы будем писать простейшую мини-игру, суть которой уничтожать шарики, до того как они упали на землю. Вот что у нас получится в конечном итоге:

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

Доброго времени суток! Совсем недавно появилась цель создать аналог игры Agar.io. Чтобы не терять время и не усложнять себе жизнь было решено, что проще и быстрее будет делать игру используя готовый движок для разработки игр.

Мой выбор пал на phaser.js, так как, мне показалось, по нему больше всего есть обучающего материала и он достаточно быстрый так как построен на библиотеке Pixi.js.

В этой части я расскажу как реализовать управление мышью. В конечном итоге мы получим вот такой результат:
Читать полностью »

Производительность WebGL-приложений - 1

Кирилл Дмитренко (Яндекс)

Всем привет! Меня зовут Кирилл Дмитренко, последние 4,5 года я работаю в Яндексе фронтенд-разработчиком? И все это время меня преследуют панорамы. Когда я пришел в компанию, я делал внутренние сервисы для панорам, после этого я решал задачи по панорамам на больших Яндекс.картах, а недавно сделал веб-плеер панорам на Canvas 2D, HTML и WebGL. Сегодня я хочу поговорить с вами о производительности WebGL-приложений.
Читать полностью »

enter image description here

Над проектом работали несколько команд — фронтенд, бэкенд, мобильная разработка. По большей части он был реализован на уже существовавших в Reddit технологиях. В этой статье мы рассмотрим, как с технической стороны создавался Place. Если хотите посмотреть код Place, то он здесь.

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

Приветствую!

Совсем недавно для одного проекта мне понадобилось отображать проценты в круглых графиках(?)
И как обычно я принялся искать готовое решение в интернете, однако ничего путного найти не удалось (возможно из-за того что я точно не знаю как этот элемент правильно называется)
Более-менее то что мне нужно я нашел в библиотеке Knob, но его функционал оказался излишен, т.к изменять значения в графике нет необходимости, помимо этого в библиотеке затесался баг. В итоге пришлось сочинять очередной велосипед.

image

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

Phaser

Оглавление

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

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

Не забывайте читать комментарии в коде, они важны!

Весь код, как и в прошлый раз, лежит в Github репозитории с тегом part-3.

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

Phaser

Оглавление

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

Продолжим серию уроков, посвященных использованию Phaser в связке с TypeScript. В этом уроке, мы рассмотрим загрузку ресурсов в Phaser, а также немного "причешем" код из предыдущей части.

Как и в прошлых статьях, не пропускайте комментарии в коде.

Полный код, написанный в этой статье, вы найдете в Github репозитории с тегом part-2.

Приступим!

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

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 и последующее написание этой статьи. Вдруг кому пригодится. Под катом то, что в итоге получилось.
Читать полностью »