Pull to refresh
121
0
Юрий @Kempston

Пользователь

Send message

«Йо-хо-хо»-2 или перевозка рабов и трупов оппозиционеров

Reading time 6 min
Views 37K

Я продолжаю работу над своей браузерной игрой про пиратов на Three.js. Пришло время добавить торговлю. Я подумал, раз у нас тут век пиратов, то и в политическом смысле обстановка должна быть весьма фривольной, то есть, без всякой богомерзкой демократии. А чего стесняться? Заходим в порт, а там нам, пиратам, сразу же предлагают приобрести пушечные ядра и выполнить заказы на транспортировку трупов оппозиционеров и доставку рабов. Еще можно отвезти ром на Тортугу или подбросить губернаторскую дочь на вечеринку на Райский остров. Или тайно эвакуировать беглого губернатора за хорошую плату. Действительно, для подобных дел правительству идеально использовать пиратов. В конце концов, рабы сами себе билет на регулярный рейс не купят, а оппозиционеры сами себя не похоронят. А проблему решать надо... Короче говоря, перевозить древесину и шелк, как в обычных играх - это скучно. Пусть будут этакие «девяностые», но в эпоху пиратов. Пираты выполняют не совсем законные задания правительства, а последнее закрывает глаза на их не совсем законные методы обогащения.

Читать далее
Total votes 105: ↑95 and ↓10 +85
Comments 59

Браузерная игра про пиратов

Reading time 10 min
Views 9.8K

«Йо-хо-хо!» - невольно приходит на ум при любом взаимодействии с морем, передвигаешься ли на речном трамвайчике или же сидишь в баре круизного корабля. В последнем случае еще можно приобрести бутылку рому. Море привлекает своими волнами, закатами и рассветами. А особенно прикольно, когда на море завелись злые пираты. Ну... если это мы, конечно же.

Возьмем шейдер неба и шейдер воды - атмосфера готова! Что может быть проще. И да, я буду писать игру под браузер на Javascript с использованием библиотек Three.js и Cannon.js. Первую я использую для отображения 3D графики, а вторую - в качестве легковесного скриптового физического движка.

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

Читать далее
Total votes 39: ↑39 and ↓0 +39
Comments 35

Растянуть видео в браузере

Reading time 7 min
Views 19K


Очень часто видео в онлайн-кинотеатрах имеет соотношение сторон, отличное от соотношения сторон монитора. Поэтому иногда возникает желание сделать общий масштаб чуть крупнее за счет небольшой обрезки по краям. Или вовсе — вписать изображение в размеры экрана по меньшей стороне картинки. Особенно это актуально для маленьких экранов, а также, для старых мониторов 4:3. Я уж молчу о том, что оригинальное видео может быть вообще растянуто по одной из сторон и это необходимо как-то исправить.

Для решения данной проблемы я задумал написать браузерное расширение под Chrome и Firefox. Идея такая: при проигрывании любого браузерного видео вызывается экранное меню, которое позволяет произвольно менять масштаб и соотношение сторон картинки.
Читать дальше →
Total votes 6: ↑6 and ↓0 +6
Comments 8

3D игры в Инстаграм на Javascript, или траектория полета колбасы

Reading time 19 min
Views 5.8K


После первой статьи о программировании игр в масках Инстаграм ко мне обратился заказчик с просьбой создать игру в Инстаграм для его пиццерии. Эту игру планировалось использовать для целей продвижения бизнеса. Я, конечно, понимаю, что, судя по количеству просмотров первой статьи, тема Инстаграма сообществу Хабра не особо интересна. По-видимому, этот сервис все еще считается каким-то несерьезным развлечением для блондинок, а статья о нем годится только в качестве пятничного чтива под вечерний коктейль. Впрочем, сегодня, как раз, пятница. Доставайте коктейль. И не забудьте пригласить блондинок. Однако, вполне вероятно, в будущем технологии достигнут таких высот, что мы начнем играть в Инстаграме в GTA-5. Или 10.

В данной статье речь пойдет сразу о двух играх. Одну я сделал на заказ, а вторую потом — для себя. С каждой новой игрой я сталкивался с новыми задачами, поиск путей решения которых заставлял меня знакомиться с новыми нюансами разработки. Возможно, этот рассказ будет полезен и другим разработчикам элементов дополненной реальности. Игры написаны на чистом Javascript без использования каких-либо дополнительных библиотек. Для отображения 3D графики задействованы встроенные средства Инстаграм.
Total votes 11: ↑11 and ↓0 +11
Comments 3

Персональный Лас-Вегас, или игра в браузерном расширении

Reading time 10 min
Views 2.6K

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

Я решил заняться рефакторингом своего старого кода, а также, подправить графику. Дизайн мне всегда давался с трудом, это не мое. Рассчитывая хоть на какое-то вдохновение, я включил саунд-трек из GTA San-Andreas, тот, что с кантри-музыкой, с радио K-Rose. Мне кажется, что он хорошо передает атмосферу Лас-Вегаса. Я там никогда не был, но точно передает! Клянусь своей звездой шерифа. (Если что — она пластиковая, так что, не жалко...) И даже не поленился зайти в саму легендарную игру и прокатиться по Лас-Вентурасу, виртуальному прототипу мировой игорной столицы.
Total votes 9: ↑7 and ↓2 +5
Comments 2

Игра, управляемая лицом, в масках Инстаграм, или двойной клик глазами

Reading time 11 min
Views 9.6K

Что за бред, подумаете вы. Что за бессмысленный набор слов? Но, увы или ура — кому как, сегодня это уже не бред, а реальность. Речь в статье пойдет о написанной мной для Инстаграм игре, в которой в качестве контроллера используется ваше лицо, а точнее, не только оно, но иногда и вся голова. Перемещение по игровому полю производится посредством поворота и наклона головы, а выбор действия — открытием рта либо двойным «кликом» (морганием) глазами. Double blink, наверно, стоило бы его назвать…

О дивный новый мир! Вероятно, хипстеры будущего займутся разработкой скриптов для генерации красивого разноцветного дыма за своими легковыми космическими капсулами или написанием шейдеров для придания интересных визуальных эффектов черным вратам персонального телепорта, типа падающих снежинок (Web 100.0) или фрактального тумана (WebGL 100.0) или… Нет, пожалуй, у меня не хватит фантазии представить себе, какой ерундой можно было бы заняться в будущем: я пытаюсь мыслить слишком логично. Но лет 30 назад мы точно, ни в каком сне, ни при каких условиях не смогли бы даже подумать, что сегодня мы будем создавать маски для социальной сети под названием Инстаграм. И более того — что внутри этих масок появятся полноценные игры. Мне стало страшно и интересно. В общем, страшно интересно. И, как вы уже поняли, я не удержался и тоже написал такую игру. Разумеется, для того, чтобы поиграть в нее, у вас должен быть смартфон на Android или iOS с фронтальной камерой и установленным приложением Инстаграм.
Читать дальше →
Total votes 11: ↑11 and ↓0 +11
Comments 6

Воссоздание в новой игре того, за что мы любили старые

Reading time 12 min
Views 27K

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

Вообще, что такое ретро-игра? Скорее всего, первое, что придет на ум большинству — это модный нынче пиксель-арт. Если это 2D, то нарисуйте множество пиксельных спрайтов, сделайте слегка угловатые движения персонажей — и готово. Если это 3D, то… Ну, наверно, нужно понизить разрешение текстур, реализовать движение игрока в стиле «бульдозер», как это было в первом Doom, стрелочками вперед-назад-влево-вправо, добавить слегка мультяшных персонажей и… Я уж не знаю, как еще сделать современный клон старого Doom или Quake. Но в этом ли, в действительности, заключается дух старых игр? Уверяю вас, нет.
Читать дальше →
Total votes 47: ↑45 and ↓2 +43
Comments 208

Хранение фотографий на DVD-дисках в 2K19-м (в 2190-м? в 2238-м?)

Reading time 7 min
Views 53K

Первая цифровая фотокамера у меня появилась 14 лет назад. Тогда же возникла и проблема хранения фотографий. К счастью, в то время она решалась быстро и однозначно — записать на диск, и точка. Внешние HDD, да и внутренние тоже, тогда стоили дорого. SSD-дисков, по-моему, вообще не было, а если и были, то наверняка они стоили еще на порядок дороже. Хранить отснятое прямо на картах памяти и покупать каждый раз новую карточку — расточительное безумие. В общем, в домашних условиях какой-то разумной альтернативы DVD-дискам просто не существовало. К тому же, на дисках выходило множество игр, и DVD-привод в обязательном порядке присутствовал в компьютере. У меня был сразу пишущий дисковод.

В какой-то момент, а это было года 2-3 назад, я пришел к другу с записанным на DVD-RW-диск для него автосимулятором и обнаружил, что в его новом компьютере вообще отсутствует устройство для чтения дисков. Я был немного шокирован. Друг посмеялся: прийти с диском — это все равно, что приехать на автогонки на лошади с телегой. И тогда я понял, что эпоха CD-DVD уходит. Пришлось потом для переноса данных купить себе большую флэшку.
Читать дальше →
Total votes 100: ↑88 and ↓12 +76
Comments 641

Новая игра со старой атмосферой на Three.js. Часть 2

Reading time 20 min
Views 12K
В первой части я рассказал о проблемах, с которыми я столкнулся в процессе создания 3D игры под браузер c использованием Three.js. Теперь я бы хотел подробно остановиться на решении некоторых важных задач при написании игры, типа конструирования уровней, определения столкновений и адаптации изображения под любые пропорции окна браузера.


Схемы уровней


Собственно, сами уровни создаются в 3D редакторе, а именно, их геометрия, наложение текстур, запекание теней и т.д. Все это я описал в первой части. Зачем нужны еще какие-то схемы? Дело в том, что Three.js не предлагает какого-то физического движка, и я использую схемы уровней для определения препятствий.
Total votes 40: ↑39 and ↓1 +38
Comments 29

Новая игра со старой атмосферой на Three.js

Reading time 9 min
Views 27K
Существует множество поклонников старых игр. И они не прочь пустить скупую ностальгическую слезу и нет-нет, да сыграть в «Арканоид», «Пакмана» или «Принца Персии», как двадцать, тридцать, сорок или — подставьте нужное число — лет назад. DOS-box и эмуляторы — им в помощь. Да, что там, я недавно смотрел стрим самого первого 2D «Принца Персии» на Ютьюбе, где довольно молодой «стример» после прохождения очередного смертельного препятствия, смахнув со лба пот рукой, изрек: «Мне еще никогда не было так страшно в компьютерной игре». То есть, даже молодежь способна оценить хардкорность и крутизну старых игр.


Я подумал, а почему бы не создать новую игру в подобном стиле? Да, существуют различные ремейки и клоны. Также, радуют современные игры в стиле пиксель-арт. Однако, все они, как правило, повторяют квесты, механики и иногда вообще полностью левел-дизайн старых игр, по мотивам которых они сделаны. Ну либо, наоборот, предлагают совершенно новый сюжет и локации, являя собой просто визуальную стилизацию «под старину». А что, если представить, какой была бы новая часть старой игры, выйди она следом за последней из серии? Я решил такую создать.
Total votes 144: ↑144 and ↓0 +144
Comments 76

3D игра на three.js, nw.js

Reading time 19 min
Views 17K
Я решил выпустить новую версию своей старой браузерной игры, которая на протяжении пары лет пользовалась успехом в качестве приложения в социальных сетях. На этот раз я задался целью оформить ее также и в виде приложения под Windows (7-8-10) и разместить в различных магазинах. Конечно, в дальнейшем можно сделать сборки и под MacOS и Linux.


Код игры написан полностью на чистом javascript. Для отображения 3D графики в качестве связующего звена между скриптом и WebGL используется библиотека three.js. Однако, так было и в старой, браузерной версии. Самым главным в этом проекте для меня стал повод параллельно с игрой дописать собственную библиотеку, призванную дополнить three.js средствами удобной работы с объектами сцены, их анимацией и многими другими возможностями. Я тогда забросил ее на длительное время. Пришла пора к ней вернуться.
Total votes 17: ↑16 and ↓1 +15
Comments 20

Я написал кроссбраузерное расширение для вкладок, но вы так не делайте

Reading time 11 min
Views 12K

Длинное, нудное вступление с претензией на манию величия


Однажды я обнаружил, что меня, как всегда, что-то сильно не устраивает в этом мире. А именно, введя какой-то длинный запрос в поисковике на настольном компьютере и затем перейдя на планшет, я никак не мог вспомнить дословно текст запроса, чтобы выйти ровно на те же результаты. А начиналось все так хорошо. Я увидел в поисковике ссылку на ответ на свой вопрос и понял, что она сулит долгое чтиво. Тогда я выключил комп и плюхнулся на диван с планшетом с мыслью о том, что вот сейчас я просто заново вобью все это в поисковик, открою ту ссылку теперь уже на планшете и лежа, спокойно, в более удобной позе прочитаю… Но не тут-то было. Какие-то мелкие разночтения в тексте — и моей ссылки уже нет в выдаче поисковика. Воспроизвести саму ссылку — тоже не вариант: она слишком длинная. Ломая голову над вариантами текста запроса, я чуть было в ярости не сломал планшет. Черт побери, пришлось вставать, снова включать компьютер, запускать браузер и копаться в истории, чтобы найти точный текст своего запроса.


Расширение, установленное в Chrome и Firefox
Читать дальше →
Total votes 19: ↑16 and ↓3 +13
Comments 33

Карточная игра на JavaScript и Canvas, или персональный Лас-Вегас. Часть 1

Reading time 11 min
Views 30K
Однажды на досуге я придумал карточную игру и, недолго думая, создал ее электронную версию. А потом добавил еще четыре игры, включая покер Техасский Холдем. А чтобы было еще интереснее, я встроил некое подобие прогресса: выигрываешь в одной игре – открывается новая. Запланировал я разместить свою игру в двух социальных сетях и в магазине Windows Store как html5-js приложение. А также, возможно, создать еще сборки под Android и iOs. Можно играть чрез сервер с другими людьми, а можно – офф-лайн с ИИ.

Для работы я, как всегда, не использовал никакие сторонние движки и библиотеки, даже jQuery мне не понадобилось. Только функции ванильного JavaScript, включая средства работы с холстом (canvas). Холст в игре – основа для вывода всей игровой графики. В WebGL, на этот раз, не было необходимости, поэтому зоопарк поддерживаемых браузеров расширился. Средой программирования, как обычно, стал продвинутый блокнот. Игра получилась объемом 3,8 Мб, из которых 3 Мб — это семь карт спрайтов в формате png. Запускается игра по html-файлу. Сервер на PHP. В случае выбора однопользовательской игры (то есть, с ИИ), запросы к серверу не отправляются и все расчеты ведутся на клиенте. Диздок не писал – он не нужен хипстерам.


Далее – занимательная геометрия и программирование, а во второй части будет рассказ о размещении игры в социальных сетях и в магазине.
Читать дальше →
Total votes 30: ↑28 and ↓2 +26
Comments 45

Как я писал игру на конкурс, или чудесное превращение «Линий» в «Морской бой»

Reading time 8 min
Views 14K


Эта история о том, как я делал очередную 3D веб-игру. История терзаний и сомнений, история недосыпаний и лени. История о том, как все сделать в самый последний момент. В общем, чего тянуть кота за рога – перейду к рассказу. Но сперва – еще кое-что, чтобы покончить со всеми формальностями. «Мадам, вам кофе в постель?» «Нет, лучше в чашку». Кофе был моим ежедневным спасением из лап Морфея, особенно когда я хотел поработать над игрой с утра, перед всеми остальными дневными заботами. Надо отдать ему должное. Я просто не могу не упомянуть о нем, так как для меня это стало воистину одной из составляющих успеха, под коим я понимаю доведение игры до релиза. (Здесь могла быть ваша реклама кофе).

Конкурс


На самом деле, я вписался не в тот конкурс, для которого мог бы что-то сделать. По его условиям требовалось создать игру под Windows, скачиваемую и запускаемую по exe-файлу. Я же люблю программировать под браузеры. Я не знаю C++ и C#, у меня даже нет Visual Studio. Но тут внезапно у меня появилась отличная идея игры, и я подумал – а какого черта! Буду просто делать игру. А получится ли соблюсти все условия конкурса или нет – не так важно. В конце концов, просто запущу ее в социальных сетях.
Читать дальше →
Total votes 30: ↑28 and ↓2 +26
Comments 27

Браузерная 3D WebGL игра с возможностью установки в IndexedDB

Reading time 11 min
Views 20K


Запаситесь попкорном — я поведаю вам интересную историю… В общем, это будет одно из тысячи сочинений на тему «Как я написал свою игру». Сначала я планировал осветить как можно больше технических деталей, но потом понял, что их слишком много для одной статьи и она получится огромной. Поэтому «первая серия» будет, скорее, обзорной. Если будет интересно, то продолжу. Итак.
Читать дальше →
Total votes 19: ↑17 and ↓2 +15
Comments 6

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Registered
Activity