Search
Write a publication
Pull to refresh
6
0
Send message

Модель освещения для двумерных хоррор-игр

Reading time2 min
Views21K
image
Самым нетерпеливым: лагающая демка, написанная под хром. На моей машине загружается секунд 20.

Эта идея пришла ко мне года 2 назад. Я обратил внимание на то, что, в условиях недостаточного освещения, я воспринимаю видимые объекты преимущественно в синеватых тонах и с небольшой потерей резкости. Возможно, это чисто психологическое восприятие, но мы сейчас не об этом. Мне стало любопытно, как выглядела бы 2D игра с такими особенностями освещения. С целью выяснить это, я, так и не разобравшись с шейдерами, набросал демку на самом удобном для меня языке — javascript. Поскольку эффект применяется к слабоосвещенным участкам, он не самый заметный из происходящего на экране, но вполне ощутимый шарм он добавляет.
Читать дальше →

CSS слайдер

Reading time7 min
Views154K
С развитием CSS3, возможности верстки растут экспоненциально. Всё больше функционала можно реализовать на «чистом» CSS. В этом посте показан процесс разработки интерактивного циклического слайдера без единой строчки JavaScript. Автоматическая ротация, выбор любого слайда с плавным переходом – на «чистом» CSS. Пример в действии



Под катом пошаговое описание реализации

Space Engine — Вселенная на ладони

Reading time8 min
Views100K
My God, it's full of stars!
Arthur C. Clarke

Кто из нас в детстве не мечтал «бороздить просторы вселенной», как капитан Пикард, прогуливаться по неизведанным планетам далёких миров, встречать рассветы двойных или тройных звёзд, погружаться в атмосферы газовых гигантов, ронять корабли в чёрные дыры? И я тоже не исключение. Конечно, частично эту мечту воплощали книги, фильмы и «Элит»-ные игры. Но вся романтика в них разрушалась банальными купи-продай и «пиу-пиу» в «жидком» космосе на скоростях самолётов времён первой мировой войны. Да и тем немногим виртуальным миркам не хватало свободы, детальности и масштабов реальной вселенной.

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

Но вот, чуть больше года назад, я совершенно случайно наткнулся на вселенную Space Engine, и она просто взорвала мне мозг и размазала его по полу своим масштабом и невероятной детализацией.
Читать дальше →

Я переучиваю людей на Java-программистов

Reading time8 min
Views135K

Когда я вижу друзей, которые вкалывают в два раза больше, а зарабатывают в четыре раза меньше, каждый раз начинается разговор:
— А ты бы не хотел поработать программистом? Ты же реально умный. Может ты просто не на своем месте?

В результате я переучиваю своих друзей и знакомых на программистов. Весь процесс занимает от двух до трех месяцев. 25 уроков по 4 часа. Потом все смогли устроиться программистами.
Эта статья не о том, как надо учить, скорее просто описание процесса, который работает.
Читать дальше →

Принцип цикады на чистом CSS

Reading time2 min
Views14K
Принцип цикады позволяет строить очень длинные неповторяющиеся фоны веб-страниц из нескольких простых изображений. Он был впервые описан Алексом Уокером в апреле 2011 года и быстро завоевал популярность. На сайте designfestival.com появилась целая галерея фонов, сделанных по этому принципу.

Во многих случаях можно сэкономить ещё больше, используя градиенты. Даже с учётом того, что пока практически все браузеры поддерживают свойство linear-gradient только с префиксами, суммарный объем кода CSS, необходимый для создания фона, в несколько раз меньше размера нескольких PNG с фрагментами, и, что ещё важнее — вообще не требует лишних запросов к серверу. Так, Эрик Мейер недавно привёл пример реализации первых двух фонов из оригинальной статьи Уокера на чистом CSS. Для простых цветных полосок (вверху) понадобилось 2.66 Кб кода CSS (с префиксами, без минификации и компрессии). В будущем, когда все популярные браузеры избавятся от префиксов, будет достаточно 0.59 Кб кода. В оригинальном примере изображения весили около 6 Кб + 3 запроса к серверу. Второй пример с занавесом (внизу) впечатляет ещё больше. Даже с префиксами получается примерно десятикратный выигрыш.
Читать дальше →

Создаем кассетный магнитофон при помощи HTML5 Audio

Reading time2 min
Views19K


Если вы не знаете, что такое кассета, то вы, вероятно, родились в эпоху хай-тэк, эпоху, которая, несомненно, является интересной и новаторской. Но если же вы имеете представление, что такое аудио-кассеты, то скорее всего вы принадлежите к старшему поколению, динозаврам, которые знают, что объединяет карандаш и аудио-кассету. :)
Читать дальше →

Moqups — новый сервис для создания макетов UI

Reading time1 min
Views90K
Как характеризуют сервис сами разработчики, Moqups — это «изящное HTML5-приложение для создания макетов, концептов пользовательского интерфейса, прототипов, в зависимости от того, как вы сами это называете».



Для Chrome есть отдельное приложение.

На данный момент доступно более 60 шаблонов элементов, экспорт в PDF и PNG, клавиатурные шорткаты, группировка объектов, привязка к сетке и проч.

Проект находится в стадии активной разработки и открыт для критики, помощи и предложений.

Анимация и Canvas

Reading time9 min
Views51K
Добрались руки мои до Canvas. Посматривал я на него давненько, очень уж он мне в качестве инструмента для графиков приглянулся. Да и неделя Canvas на Хабре поддержала интерес.

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

Three.js — 3d движок на Javascript

Reading time1 min
Views89K

Есть javascript-гурру, mr.doob, даже на Хабре уже всплывали его работы.
В общем, у него есть очень мощный Javascript 3d-фреймворк с названием

Three.js


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

Меня особо затянул полет между шариков и порадовал панорамный движок.
А у кого работает WebGL — так вообще не нарадуется — там вам и Minecraft и всё, что хотите)

Читать дальше →

Улучшаем производительность HTML5 canvas

Reading time10 min
Views40K
В последнее время мне везет натыкаться на интересные статьи для перевода. На этот раз – статья на HTML5Rocks о производительности HTML5 canvas. Автор пишет о некоей стене, в которую упираются разработчики при создании приложений. Какое-то время назад в нее уперся и я при портировании старой-доброй игры на canvas.

К сожалению, графики в оригинале вставлены через iframe. Я мог бы сделать снимки и разместить их изображения, но сам автор позиционирует графики актуальными и такими, которые будут обновляться, потому я просто разместил на них ссылки. Приятного чтения!


image
  1. Вступление
  2. Тестирование производительности
  3. Предварительно отрисовывайте в виртуальный canvas
  4. Группируйте вызовы
  5. Избегайте ненужных изменений состояния
  6. Отрисовывайте только разницу, а не весь холст
  7. Используйте многослойных canvas для сложных сцен
  8. Избегайте shadowBlur
  9. Различные способы очистить экран
  10. Избегайте нецелых координат
  11. Оптимизируйте анимации с помощью 'requestAnimationFrame'
  12. Большинство мобильных реализаций canvas – медленные
  13. Заключение
  14. Ссылки



Вступление


HTML5 canvas, который начинался, как эксперимент компании Apple, – наиболее широко распространенный стандарт для 2D режима непосредственной графики в интернет. Многие разработчики использую его в широком круге мультимедиа проектов, визуализаций и игр. Как бы то ни было, с ростом сложности приложений, разработчики нечаянно натыкаются на стену производительности.
Читать дальше →

Создаем сайт с эффектом Parallax, используя Stellar.js

Reading time7 min
Views86K
Один из самых популярных трендов современного веб-дизайна является эффект Parallax. В этом туториале я покажу вам, как создать подобный эффект на вашем веб-сайте, используя воображение и Stellar.js.



Скачать исходники | Демо
Читать дальше →

Домашний медиа-сервер на основе Ubuntu Server 12.04 LTS

Reading time8 min
Views359K
Привет, Хабр! В ходе обсуждения одной статьи про «идеальную» домашнюю сеть, возник спор, что лучше, аппаратный NAS или мини-компьютер с Linux дистрибутивом. Автор предлагал использовать аппаратный NAS, т. к. якобы он проще в администрировании, не требует знаний Linux, да и вообще NAS тихий. Но при этом, для просмотра на DLNA-телевизоре видео, который он не поддерживает, предлагал включать ноутбук с транскодирующим DLNA. Меня это, мягко говоря, удивило, т. к. в идеальной сети такого быть не должно. Поэтому хочу представить своё видение одного из ключевых компонентов домашней сети — централизованного хранилища данных, и основано оно будет на мини-ПК с ОС Ubuntu Server.
Читать дальше →

Работа с изометрическими матрицами. Часть 1

Reading time4 min
Views21K
Изометрия — вещь, стара как компьютерные игры.
Сейчас пришло время, когда интернет и игры стали совмещаться в браузере (flash не в счет).
Примеров браузерных игр много, большая часть из них казуалки, но для гиков более интересны жанры action, RTS и RPG, а для разработчиков — их реализация.



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

Под катом я расскажу:
  1. Как рисовать изометрическую матрицу
  2. Как нарисовать fullscreen изометрическую матрицу

Читать дальше →

Визуализация данных

Reading time1 min
Views13K
Привет!

Ребята с ресурса Data Visualization собрали несколько очень интересных решений для представления данных:



Datavisualization.ch Selected Tools

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

Datavisualization.ch является одним из ведущих ресурсов в интернете, рассказывающих о визуализации данных и инфографике. На сайте обсуждаются и исследуются интересные и инновационные идеи в этих областях.

Подборка скриптов для создания галереи на php

Reading time1 min
Views36K
Искал я на просторах Интернета всего лишь скрипт для создания индекса изображений с lightbox и генерированием thumbnails. Помимо того что меня полностью устроило (phppi), нашел довольно интересную подборку галерей. В наличии комментарии и пояснения, думаю будет полезно новичкам да и бывалым время сэкономит.

Fullscreen Gallery with Thumbnail Flip



Читать дальше

Ностальгия: роемся у «Танчиков» под капотом

Reading time12 min
Views107K
Многие из нас выросли на «Танчиках», «Марио» и прочих нетленных шедеврах времён рассвета игровой индустрии. Приятно порой вспомнить, как днями напролёт резались с друзьями у экранов телевизоров, меняя джойстики как перчатки. Но время не стоит на месте, и одни интересы сменяются другими. Однако, порой любовь к старым-добрым игрушкам не угасает.
Я отношу себя к людям именно таким, и мой интерес к старым играм пошёл в сторону реверс-инжиниринга, что и привело меня в IT-сферу, где я и осел с концами.

Я хочу рассказать вам о том, что же под капотом у железных монстров из знаменитой игры Battle City (в простонародье «Танчики») с не менее знаменитой приставки Nintendo Entertainment System (сокращённо NES, в России более известен её китайский клон «Dendy»). Мне в своё время эта информация показалась довольно любопытной — надеюсь, такой же она покажется и вам.
Читать дальше →

Рендеринг мира

Reading time3 min
Views7.1K
Ведущий программист компании MapBox Юнг Хан (Young Hahn) опубликовал стенограмму своей презентации с конференции FOSS4G.

Компания MapBox известна как разработчик open source картографической дизайн-студии TileMill и тайлового сервера TileStream. Недавно они выпустили новую систему MapBox Streets — аналог Google Streets, но на открытых картах OpenStreetMap. Это глобальный картографический сервис с зуммированием до уровня отдельных домов, тоннелей, станций метро и т.д.

В презентации, названной «Рендеринг мира» (Rendering the World) ведущий программист компании рассказывает, как им удалось сгенерировать тайлы на таком уровне зуммирования для всей планеты.
Читать дальше →

Разгоняем портфолио сисадмина бесплатными сертификатами

Reading time3 min
Views125K
Информация будет особенно полезна тем, кто начинает свою карьеру. Обычно первое резюме пугающе пустое, кроме образования, практики и дипломной работы – в нём ничего нет. Практический опыт отсутствует, но есть энтузиазм и жажда знаний. Предлагаю вашему вниманию возможность не только получить знания, но и подтвердить их сертификатом, который можно будет приложить к резюме, добавив ему веса.
Читать дальше →

Портируем html5 игру на Android

Reading time5 min
Views15K
Это продолжение моей прошлой статьи "Создаем html5 мини-бродилку на CraftyJS". Я подумал, сейчас так много возможностей относительно просто портировать любое html5 приложение на мобильную платформы, почему бы не попробовать?

image

Ниже, то что из этого вышло. Внимательно читаем вывод!
Читать дальше →

Information

Rating
Does not participate
Location
Барнаул, Алтайский край, Россия
Registered
Activity