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

Мой Pixelart

Lumber room
В воскресенье(15.04.07) наткнулся на множество статей о pixelart'е(знатоки, как правильно пишется этот термин на кириллице?). Решил побаловаться. В тот же день нарисовал в Paint'е Кубик Рубика и букву G в кубе(в локалке мой ник Gerasim). Понравилось.
Дальше сами работы и продолжение истории
Total votes 16: ↑13 and ↓3 +10
Views 1.5K
Comments 6

Арт в 256 пикселей

Lumber room
На Монреальском интернациональном игровом саммите прошёл довольно нестандартный конкурс. Количество графики в принимавшихся работах не должно было превышать 256 пикселей, а для управления организаторы почему-то решили избрать контроллер Xbox 360 (клавиатурный ввод и версии для других ОС — опциональны). Вот те шесть игр, которые без проблем запустились в Windows XP, управляются с клавиатуры и ко всему доступны для скачивания с сайта конкурса:
Скрины дальше
Total votes 18: ↑15 and ↓3 +12
Views 2.6K
Comments 10

Cubescape — сделай 3D-pixelart шедевр своими руками

Lumber room
Cubescape — простое веб-приложение, предоставляющее инструменты для создания 3D pixeart произведения небольшой площади. Фактически можно только класть кубики разных цветов один на другой, а также взрывать их. Весь процесс построения запоминается и потом его можно воспроизвести. Вообще штука затягивает неслабо (= есть просто шедевры, такие как этот Ленин или лого Firefox.
Ленин 3D-pixelartFirefox 3D-pixelart
Хабрахабр на Cubescape
Total votes 19: ↑17 and ↓2 +15
Views 940
Comments 9

Групповой Pixel Art

Design
imageНекоторое время назад, был объявлен старт интересному проекту, любой дизайнер мог нарисовать этаж небоскреба в стиле Pixel Art. В результате в постройке небоскреба приняли участие 406 человек, высота изображения составляет 35 000+ пикселей.
Мне так и не удалось на данный момент сделать полный скриншот всей страницы, большинство программ или недосохраняют или крешатся в процессе обработки.
Смотрим небоскреб во всей красе
UPD Сервис лежит, Зеркало 1, Зеркало 2 , Зеркало 3
Total votes 85: ↑78 and ↓7 +71
Views 3K
Comments 60

Картинки в чате skype

Instant Messaging *
image

Оказывается, в чате скайпа работают некоторые HTML-теги, в том числе и <font color="">
Благодаря этому возможно создавать несложные картинки в тексте сообщений.

Список поддерживаемых в скайпе тегов www.wikireality.ru/wiki/HTML_в_Скайпе
Для того чтобы оправить HTML-код в чате нужно зажать CTRL+SHIFT и кликнуть на кнопку отправки сообщения.

Код картинки pastebin.com/raw.php?i=z4EspzjC

Ниже показан пример генерации HTML-кода из изображения на PHP.

Читать дальше →
Total votes 212: ↑187 and ↓25 +162
Views 77K
Comments 147

Улучшаем картинки в чате Skype (обновлено)

Instant Messaging *
Sandbox

Предисловие



17 января мне, как и многим другим, прислали ссылку на статью zhovner про картинки в чате скайпа — http://habrahabr.ru/blogs/skype/136395/, и понеслось!
Идея прикольная, мы тут же начали перекидываться картинками, сгенерированными сервисом img4skype.com, но оказалось что у многих они отображаются растянуто.



Читать дальше →
Total votes 72: ↑45 and ↓27 +18
Views 4.4K
Comments 30

«Игрушечная» картография или 3D карты своими руками

Self Promo
Около полутора лет назад на Хабре был размещен пост про уникальные карты китайского поисковика Baidu (для тех, кто не видел, вот он: http://habrahabr.ru/post/115107/). Я был поражен тем, насколько кропотливо, детально и красиво эти карты сделаны, поэтому однажды мы, вместе с группой товарищей, решили разобраться в процессе создания Baidu-карт и сделать собственные карты всего мира, которые выглядели бы так же круто. Под катом много картинок, раскрытие секрета Baidu-подобных карт и то, что получилось у нас.



Читать дальше →
Total votes 214: ↑202 and ↓12 +190
Views 9.8K
Comments 118

Pyxel Edit: пиксельарт тайлсет редактор

Game development *
image
http://pyxeledit.com/

image

Когда я полгода или чуть больше назад решил ради разнообразия попробовать Flixel и сделать свой платформер, то меня сначало удивило, а потом начало злить отсутствие нормального редактора тайлов. С платформером и флешем я уже наигрался, но наткнувшись на бету не могу не поделиться с хабрасообществом.
Пара роликов c использованием под катом.
Читать дальше →
Total votes 64: ↑62 and ↓2 +60
Views 39K
Comments 48

Tiled Map Editor: пиксельарт тайлсет редактор

Game development *
http://mapeditor.org/



Tiled Map Editor — редактор пиксельарт тайтлсетов написанный на C++ (существует и Java версия программы). Данную программу можно использовать для разработки игр любого 2D-жанра. Редактор имеет большой набор готовых тайлсетов, что значительно увеличивает скорость разработки игры. Пара роликов c использованием под катом

Читать дальше →
Total votes 52: ↑46 and ↓6 +40
Views 45K
Comments 19

«Chaos Engine — вернусь каким и не ждали» — оригинальная позиция разработчиков в отношении ремейка игры

Game development *


Буквально недавно я уже касался творчества известной в свое время группы разработчиков под названием Bitmap Brothers. Коснулся вскользь, с опаской и потаенной надеждой. Иногда надежды бывают оправданными. Иногда случаются чудеса. Иногда человек действительно получает то, что он хочет.

Devolver Digital не стали изобретать велосипед и пошли по оригинальному пути. «Оригинальность» в данном случае можно трактовать двояко. Во-первых, это следование оригинальным канонам, а во вторых в мир кровавого и всепоглощающего 3D увидеть что-то старое – сложно. Исключение составляют те фронты, где каждый день не на жизнь, а на смерть сражаются инди-девелоперы. И в том и в другом случае можно сказать, что разработчики… оригинальны.

Насколько глубоко в любви к истокам они зашли в своей оригинальности? Стоит ли взять лопатку и снять несколько пластов пикселизированной земли? Скрывает ли новость очередное ностальгирующее «нытье» так горячо нелюбимое многими? Лопата – на обычном месте. Копать или нет решать вам.


Ностальгирующая лопата
Total votes 45: ↑33 and ↓12 +21
Views 26K
Comments 7

Курс пиксель-арта

Game development *
Это перевод публикации «Les Forges Pixel Art Course».

pdf на английском.

Часть 1: Правильные инструменты
Часть 2: Линии и кривые
Часть 3: Перспективы
Часть 4: Тень и свет
Часть 5: Палитры цветов
Часть 6: Сглаживание
Часть 7: Текстуры и размытие
Часть 8: Мир тайлов

Предисловие


Есть много определений пиксель-арта, но здесь мы будем использовать такое: изображение пиксель-арт, если оно создано целиком руками, и присутствует контроль над цветом и позицией каждого пиксела, который нарисован. Несомненно, в пиксель арте включение или использование кистей или инструментов размытия или машин деградации (degraded machines, не уверен), и других опций ПО, которые «современны», нами не используются (вообще-то put at our disposal значит «в нашем распоряжении», но по логике вроде правильнее так). Он ограничен инструментами такими как «карандаш» и «заливка».

Тем не менее не скажешь, что пиксель-арт или не-пиксель-арт графика — более или менее красива. Справедливее сказать, что пиксель-арт другой, и он лучше подходит для игр стиля «ретро» (как Супер Нинтендо или Гейм Бой). Вы можете также комбинировать техники изученные здесь, с эффектами из не-пиксель-арта, для создания гибридного стиля.

Так, здесь вы будете изучать техническую часть пиксель-арта. Тем не менее никогда я не сделаю вас художником… по простой причине, что я тоже не художник. Я не научу вас ни человеческой анатомии, ни структуре искусств, и мало скажу о перспективе. В этом руководстве, вы можете найти много информации о техниках пиксель-арта. В конце, вы должны будете быть способны создать персонажей и пейзаж для ваших игр, при условии что вы будете внимательны, практиковаться регулярно, и применять данные советы.
Читать дальше →
Total votes 43: ↑32 and ↓11 +21
Views 279K
Comments 44

Курс пиксель-арта 2

Game development *
Это перевод публикации «Les Forges Pixel Art Course».

Часть 1: Правильные инструменты
Часть 2: Линии и кривые
Часть 3: Перспективы
Часть 4: Тень и свет
Часть 5: Палитры цветов
Часть 6: Сглаживание
Часть 7: Текстуры и размытие
Часть 8: Мир тайлов

Часть 2: Линии и кривые


Если вы ещё не состоявшийся художник, лучший путь начать рисовать, делать это карандашом, после чего обводить чернилами, затем раскрашивать. То же самое применимо и к пиксель-арту: первый шаг в изображении, это обозначить контуры — этот шаг называется «штриховой рисунок» (Lineart). Штриховой рисунок — это очень важный шаг для достижения хорошего результата. Несколько пикселей вашего изображения, могут являться большей его частью (в противоположность рисованию, где масштаб позволяет больше допущений) так что ошибка в один или два пикселя, может сделать так, что ваш персонаж будет выглядеть искажённым. Для ясности, точность штрихового рисунка является Р-Е-Ш-А-Ю-Щ-Е-Й для успеха пиксель-арта.
Читать дальше →
Total votes 48: ↑42 and ↓6 +36
Views 109K
Comments 8

Курс пиксель-арта 3

Game development *
Это перевод публикации «Les Forges Pixel Art Course».

Часть 1: Правильные инструменты
Часть 2: Линии и кривые
Часть 3: Перспективы
Часть 4: Тень и свет
Часть 5: Палитры цветов
Часть 6: Сглаживание
Часть 7: Текстуры и размытие
Часть 8: Мир тайлов

Часть 3: Перспективы


Проблема перспективы в 2D играх, это вопрос который возникает часто, и это возможно то, почему так много любительских игр имеют множество противоречивостей в этой области. В частности эта часть адресуется к типичным перспективам в RPG, так что если вы ищете информацию о виде сбоку или от первого лица, вам следует поискать где-нибудь ещё. Это важно, помнить что перспектива — это «искусство представления трёхмерных объектов на плоской поверхности (в данном случае это ваш экран) как их увидел бы наблюдатель.»
Читать дальше →
Total votes 44: ↑41 and ↓3 +38
Views 83K
Comments 17

Курс пиксель-арта 4

Game development *
Это перевод публикации «Les Forges Pixel Art Course».

Часть 1: Правильные инструменты
Часть 2: Линии и кривые
Часть 3: Перспективы
Часть 4: Тень и свет
Часть 5: Палитры цветов
Часть 6: Сглаживание
Часть 7: Текстуры и размытие
Часть 8: Мир тайлов

Часть 4: Тень и свет


Сегодня мы перейдём из 2D в 3D, в то время как останемся в 2D. Вы увидите (или нет). С тем что мы обсуждали до сих пор, вы сможете делать красивые штриховые рисунки и рисовать предметы с корректной перспективой. Это хорошее начало, но этого недостаточно чтобы делать пиксель-арт. В этой части мы взглянем на затенение. Это набор техник, которые позволит нам ваять наши пейзажи и персонажей чтобы представить объём (и я избавлю вас от долгого рассказа о традиционной важности этой части, ЭТО ПРОСТО СУПЕР ВАЖНО).
Читать дальше →
Total votes 40: ↑38 and ↓2 +36
Views 66K
Comments 16

Курс пиксель-арта 5

Game development *
Это перевод публикации «Les Forges Pixel Art Course».

Часть 1: Правильные инструменты
Часть 2: Линии и кривые
Часть 3: Перспективы
Часть 4: Тень и свет
Часть 5: Палитры цветов
Часть 6: Сглаживание
Часть 7: Текстуры и размытие
Часть 8: Мир тайлов

Часть 5: Цветовые палитры


1. Когда и почему выбирать палитру?

Хороший вопрос, почему в конце концов я начал об этом? Просто потому что палитра — это 50% качества вашей работы. На всём протяжении игры важно иметь последовательные палитры, потому что они существенно способствуют общей атмосфере. В общем, что составляет разницу между хорошей и неудачной графикой, это в значительной степени палитра. «Хорошо, это важно иметь хороший выбор, я сделаю это в конце». А-та-та, конечно нет! Палитра работает от начала до конца, когда вы рисуете пиксель-арт. Для меня это первое и последнее что я делаю: я начинаю с создания стартовой палитры в углу моего изображения, затем я подстраиваю её по мере продвижения, затем, как закончу, я трачу время на улучшение её. Улучшения в основном обусловлены «чутьём», то что вы изучите здесь, может быть поставлено под сомнение: это просто стартовая точка.
Читать дальше →
Total votes 22: ↑21 and ↓1 +20
Views 53K
Comments 14

Курс пиксель-арта 6

Game development *
Это перевод публикации «Les Forges Pixel Art Course».

Часть 1: Правильные инструменты
Часть 2: Линии и кривые
Часть 3: Перспективы
Часть 4: Тень и свет
Часть 5: Палитры цветов
Часть 6: Сглаживание
Часть 7: Текстуры и размытие
Часть 8: Мир тайлов

Часть 6: Сглаживание (Anti-aliasing)


Где весь ваш пиксель-арт становится красивым. Или нет. На самом деле это зависит от того, насколько ужасен он был прежде.
image
Читать дальше →
Total votes 36: ↑33 and ↓3 +30
Views 56K
Comments 4

«Галоп пикселя — часть первая» — базовые понятия, этапы взросления, прикладные упражнения

Game development *Image processing *
Tutorial


«Галоп пикселя», часть I — базовые понятия, этапы взросления, прикладные упражнения (линк)
«Галоп пикселя», часть II — перспектива, цвет, анатомия и прикладные упражнения (линк)
«Галоп пикселя», часть III — Анимация (линк)
«Галоп пикселя», часть IV — Анимация света и тени (линк)
«Галоп пикселя», часть V — Анимация персонажей. Ходьба (линк)

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

В данной публикации мы не рассматриваем программы, но копаем нечто большее. Сами пиксели. От истоков, начав с четырехцветной CGA-эры, вплоть до эпохи ренессанса. В публикации мы не рассматриваем игры, не поем дифирамбы художникам прошлого (разве что самую малость), занимаясь именно процессом создания простейшего пиксель-арта. Данный материал будет интересен начинающим артистам и интересующимся. Статья практически не содержит теории, нудных умозаключений и представляет сторонний взгляд на мир пиксель-арта со стороны некоего самоучки, который предпочел открыть каждую из Америк самостоятельно, не оглядываясь на официальных, общепризнанных и задокументированных Колумбов. Статья снабжена обильным количеством поясняющих иллюстраций, примеров, и советов.

Материал разделен на несколько публикаций в виду объема текста и изображений. Каждая статья имеет свою степень сложности, однако, все из них наглядны и могут быть использованы как руководство к действию.


Лопатить пиксели
Total votes 190: ↑185 and ↓5 +180
Views 229K
Comments 86

«Галоп пикселя — часть вторая» — перспектива, цвет, анатомия и прикладные упражнения

Game development *Image processing *
Tutorial


«Галоп пикселя», часть I — базовые понятия, этапы взросления, прикладные упражнения (линк)
«Галоп пикселя», часть II — перспектива, цвет, анатомия и прикладные упражнения (линк)
«Галоп пикселя», часть III — Анимация (линк)
«Галоп пикселя», часть IV — Анимация света и тени (линк)
«Галоп пикселя», часть V — Анимация персонажей. Ходьба (линк)линк)

Первая статья данного цикла была воспринята тепло, вследствие чего затягивать с продолжением не имело никакого смысла, но, увы – это произошло. Зимнее наступление захлебнулось и плавно переросло в летнюю кампанию. В конце статьи я объясню почему, не хотелось бы вас огорчать с самых первых строк. Итак. Публика выразила желание ознакомиться с предметом глубже, чем предполагалось изначально. Большое количество писем пришло на почту, наряду с регулярными тычками в социальных сетях. В этом месте мне вспоминается одна фраза – «будьте осторожны в своих желаниях».

Сегодня мы продолжаем диалог о пиксель-арте, методах его создания и приёмах в работе с ним. Сегодняшняя статья будет чуть более сложной в освоении, ведь мы уже прошли истоки и ознакомились с базовыми понятиями. Сегодня мы ударим и по теории, с примерами из мира игр, и коснемся конкретных приемов в работе с пиксель-артом. Если вы не любите теорию и не считаете её важной частью обучения – смело прыгайте в лифт и спускайтесь на нижние этажи, с выходом на уровнях анатомии и цвета. Каждый этаж маркирован авторским пиксель-артом, не пропустите.
Те же, кто остался по доброй воле, и те несчастные, кому по какой-то причине не хватило места в лифте, узнают, почему в предыдущей публикации не были затронуты – композиция, перспектива, анатомия и цвет, сущности столь важные в изобразительном искусстве.

Не будем мешкать. Возьмем наши пиксельные лопатки и двинемся на врага сплоченной группой. Быть может, нам повезет, и кто-нибудь, выжив, расскажет потомкам о ещё одной битве Теоретического войска возле местечка, вошедшего в историю сети как Хаброва падь.


Лопатить пиксели
Total votes 112: ↑110 and ↓2 +108
Views 78K
Comments 27
1