Pull to refresh
  • by relevance
  • by date
  • by rating

Тестируем Mighty Editor и Phaser. HTML5 игра за час

JavaScript *Game development *
Translation


HTML5 игры растут и развиваются, также как инструменты для их создания. Например, phaser.js стал достаточно популярным движком, подходящим для производства игр среднего размера. Но каждый раз, применяя phaser.js, разработчикам html5 игр приходится писать повторяющийся код для стандартных операций. Визуальный редактор позволяет сгенерировать типовой код автоматически.
Читать дальше →
Total votes 24: ↑22 and ↓2 +20
Views 29K
Comments 17

Фиеричная система счисления, или почему 1 + 10 = 100

JavaScript *Mathematics *
«10.01 х 10.01 = 1000.1001»
Джордж Оруэлл. «1010001001001000.1001001000100001»


image


Существует ли позиционная система счисления с иррациональным основанием, в которой все натуральные числа записываются конечным числом цифр? В которой число больше единицы, не имеющее цифр после запятой, наверняка не целое и даже не рациональное? В которой 1 + 10 = 100, а 1 + 1 = 10.01?
Я заинтригован и хочу узнать ответ
Total votes 92: ↑89 and ↓3 +86
Views 54K
Comments 49

Тень на плетень, или 25 елок для Адама Дженсена

Abnormal programming *Game development *
Рассказ о том, как я попробовал построить красивые трехмерные тени не выходя за рамки уютного двухмерного гейм-девелопмента, и что из этого получилось.


Читать дальше →
Total votes 35: ↑34 and ↓1 +33
Views 9.4K
Comments 29

Создание вашей первой игры на Phaser. Часть 0 — Подготовка к работе

JavaScript *Game development *HTML *Canvas *WebGL *
Tutorial

Phaser


Оглавление


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


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

Читать дальше →
Total votes 24: ↑19 and ↓5 +14
Views 19K
Comments 8

Создание вашей первой игры на Phaser. Часть 1 — Введение

JavaScript *Game development *HTML *Canvas *WebGL *
Tutorial

Phaser


Оглавление


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


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


Что такое Phaser?


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

Читать дальше →
Total votes 22: ↑16 and ↓6 +10
Views 15K
Comments 2

Создание вашей первой игры на Phaser. Часть 2 — Загрузка ресурсов

JavaScript *Game development *HTML *Canvas *WebGL *
Tutorial

Phaser


Оглавление


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


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


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


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


Приступим!

Читать дальше →
Total votes 17: ↑17 and ↓0 +17
Views 8.6K
Comments 3

Создание вашей первой игры на Phaser. Часть 3 — Создание игрового мира

JavaScript *Game development *HTML *Canvas *WebGL *
Tutorial

Phaser


Оглавление


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


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


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


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

Читать дальше →
Total votes 23: ↑22 and ↓1 +21
Views 13K
Comments 6

Управление мышью как в Agar.io на Phaser.js

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

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

В этой части я расскажу как реализовать управление мышью. В конечном итоге мы получим вот такой результат:
Total votes 35: ↑23 and ↓12 +11
Views 7.7K
Comments 7

Как создаются изометрические миры

Game development *
Translation
Tutorial
image

Все мы играли в потрясающие изометрические игры, будь то первые Diablo, Age of Empires или Commandos. При первой встрече с изометрической игрой можно задаться вопросом: двухмерная она, трёхмерная или нечто совершенно другое. Сам мир изометрических игр обладает волшебной притягательностью для разработчиков. Давайте попробуем раскрыть тайну изометрической проекции и создадим простой изометрический уровень.

Для этого я решил использовать Phaser с кодом на JS. В результате у нас получится интерактивное приложение HTML5.

Учтите, что это не туториал по разработке на Phaser, мы просто используем его для удобного ознакомления с базовыми концепциями создания изометрической сцены. Кроме того, в Phaser есть простые способы создания изометрического контента, например, Phaser Isometric Plugin.

Для упрощения при создании сцены мы будем использовать тайлы.
Total votes 49: ↑49 and ↓0 +49
Views 47K
Comments 7

Трагикомедия в NaN актах: как мы cделали игру на JS и выпустили ее в Steam

Game development *Game design *Games and game consoles
“Эка невидаль”, — скажете вы, — “В топ-100 вашей игры нет, так что нещитово”. Тоже правда. Зато за год разработки Protolife мы поднакопили какой-никакой опыт, которым можем поделиться с потенциальными будущими игроделами. Ветераны индустрии, боюсь, ничего интересного для себя не найдут. Но, может быть, хоть повеселитесь от души.


Что за игра-то? И кто “мы”?


Мы — это команда из трех человек (GRaAL, A333, icxon), волею судеб названная Volcanic Giraffe без какого либо умысла. Работали долгое время вместе, несколько раз втроем участвовали в Ludum Dare (соревнования по написанию игр за выходные), и однажды решившие довести до релиза одну из наших поделок под названием Protolife.

Если коротко: это необычная tower defense, где надо бегать героем-курсором и выстраивать оборону из блоков против постоянно растущей красной биомассы.
Остальное под катом - осторожно, тяжелые пиксельартные картинки
Total votes 95: ↑91 and ↓4 +87
Views 27K
Comments 51

Очередное незавоевание теней в Phaser, или польза велосипедов

Abnormal programming *JavaScript *Game development *WebGL *
Два года назад я уже экспериментировал с веществами тенями в Phaser 2D. На последнем Ludum Dare мы внезапно решили сделать хоррор, а какой же хоррор без теней и света! Хрустнул я костяшками пальцев…

… и ни черта не успел за LD. В игре конечно есть немного света и теней, но это жалкое подобие того, что должно было быть на самом деле.

Вернувшись домой уже после отправки игры на конкурс, я решил все-таки “закрыть гештальт” и доделать эти несчастные тени. Что получилось — можно пощупать в игре, поиграться в демке, посмотреть на картинке, и почитать в статье.

Читать дальше →
Total votes 12: ↑12 and ↓0 +12
Views 3.4K
Comments 7

Golang + Phaser3 = MMORPG — Делаем базу для бесконечной генерации мира

Game development *Go *Game design *Games and game consoles
Sandbox
image

На русскоязычных ресурсах трудно найти подходящую информацию, возможно этот материал позволит вам понять некоторые основы для создания многопользовательских игр и не только. Я планирую сделать серию статей по созданию 2.5D MMORPG, то бишь в изометрии, наш мир будет разделен на процедурно-генерируемые чанки, состоящие из тайтлов. Сервер будет написан на языке Golang, который как мне кажется отлично для этого подходит, клиентская часть будет на JavaScript с использованием фреймворка — Phaser.js

Создаем генерацию мира


И так в этой статье мы напишем генератор чанков для ММО на Голанг, мы не будем пока рассматривать Phaser. Для процедурной генерации нам потребуется шумовая функция, мы будем использовать Шум Перлина, рекомендую ознакомиться с данной статьей и переписать код на Го или взять мой вариант.
Читать дальше →
Total votes 23: ↑21 and ↓2 +19
Views 6.7K
Comments 9

Golang + Phaser3 = MMORPG — Клиент и Сервер

JavaScript *Go *
image

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

В прошлой статье наш проект выглядел так:

image

Теперь мы будем использовать и другие инструменты для веб-разработки, надеюсь у вас установлен Node.js и npm, если нет, то срочно установите. И так открываем терминал и запускам:
Читать дальше →
Total votes 8: ↑6 and ↓2 +4
Views 3.8K
Comments 5