
Применение класса hq3x или вращаем pixel art
Давным-давно, я поднимал тему про вращение растрового изображения без порождения эффекта лестницы.
Наконец-то я достиг максимальных результатов в этом деле, т.к. постоянно работаю с pixel art'ом и мне хотелось избавиться от этого ужасного проклятия — «лесенки».
Объяснить мне это тяжело, поэтому буду все показывать в картинках:

Эффект лесенки
Некоторые скажут: "Включи сглаживание и не парься!!1". Но увы, сглаживание портит картинку не хуже, чем лесенка. А выбирать из двух зол меньшее — не хочу. Я выбираю третий, тот самый вариант, который я сейчас покажу.

Нет лесенки, но ужасное сглаживание. Четкость пропала :(
C этим мы и будем бороться. Для начала покажу исходное изображение, которое пройдет в дальнейшем обработку для достижения нужных результатов:

Pixel art изображение в x1 и x3 масштабах
Почему x3? Потому что весь секрет кроется в этом замечательном масштабе, если мы целенаправленно увеличим изображение в три раза, а потом уменьшим до начального состояния, то «флешевское сглаживание» не будет распространяться на мелкие детали (т.к. 1 пиксель уже равен 9-и пикселям). Но на этом останавливаться еще рано:

Четкая картинка, но с лесенкой :(
Тогда, я подумал о том, чтобы сглаживать х3 картинку вручную, вот таким образом:

И попробовать снова старый способ:

В живую лесенка не заметна (честно признаюсь, что даже не ожидал увидеть такого плохого результата, может градус такой выбрал)

Вот тут уже понятней, но внизу есть лишний пиксель. Связано этой с тем, что изображение обрабатывал вручную
Теперь вы скажете: «И что вот так каждую картинку перерисовывать?». Нет. Спасибо Claymore, что натолкнул на мысль реализовывать сию вещь программно. Решил попробывать, да оказывается я изобретал колесо. В старых эмуляторах используется похожий алгоритм hq2x:

Ностальгия :'( (Streets of Rage)
И я пошел серфить в «западных интернетах» с целью найти сорц алгоритма. К счастью, я нашел готовую реализацию алгоритма на AS3:
Теперь пробуем:

Изображение после обработки

Вуаля! Минимум стараний и максимум результат
Результат:
Наконец-то я достиг максимальных результатов в этом деле, т.к. постоянно работаю с pixel art'ом и мне хотелось избавиться от этого ужасного проклятия — «лесенки».
Объяснить мне это тяжело, поэтому буду все показывать в картинках:

Эффект лесенки
Некоторые скажут: "Включи сглаживание и не парься!!1". Но увы, сглаживание портит картинку не хуже, чем лесенка. А выбирать из двух зол меньшее — не хочу. Я выбираю третий, тот самый вариант, который я сейчас покажу.

Нет лесенки, но ужасное сглаживание. Четкость пропала :(
C этим мы и будем бороться. Для начала покажу исходное изображение, которое пройдет в дальнейшем обработку для достижения нужных результатов:

Pixel art изображение в x1 и x3 масштабах
Почему x3? Потому что весь секрет кроется в этом замечательном масштабе, если мы целенаправленно увеличим изображение в три раза, а потом уменьшим до начального состояния, то «флешевское сглаживание» не будет распространяться на мелкие детали (т.к. 1 пиксель уже равен 9-и пикселям). Но на этом останавливаться еще рано:

Четкая картинка, но с лесенкой :(
Тогда, я подумал о том, чтобы сглаживать х3 картинку вручную, вот таким образом:

И попробовать снова старый способ:

В живую лесенка не заметна (честно признаюсь, что даже не ожидал увидеть такого плохого результата, может градус такой выбрал)

Вот тут уже понятней, но внизу есть лишний пиксель. Связано этой с тем, что изображение обрабатывал вручную
Теперь вы скажете: «И что вот так каждую картинку перерисовывать?». Нет. Спасибо Claymore, что натолкнул на мысль реализовывать сию вещь программно. Решил попробывать, да оказывается я изобретал колесо. В старых эмуляторах используется похожий алгоритм hq2x:

Ностальгия :'( (Streets of Rage)
И я пошел серфить в «западных интернетах» с целью найти сорц алгоритма. К счастью, я нашел готовую реализацию алгоритма на AS3:
package {
/**
* @author nicoptere
*/
import flash.display.BitmapData;
public class ScaleX {
static public function scale2x( bd:BitmapData ):BitmapData{
var dest:BitmapData = new BitmapData( bd.width*2, bd.height*2, true );
var E:uint;
var E0:uint;
var E1:uint;
var E2:uint;
var E3:uint;
var B:uint;
var D:uint;
var F:uint;
var H:uint;
var i:int;
var j:int;
var i2:int;
var j2:int;
var w:int = bd.width;
var h:int = bd.height;
bd.lock();
dest.lock();
for ( i = 0; i < w; i+=1 )
{
for ( j = 0; j < h; j+=1 )
{
E = bd.getPixel32( i, j );
//on est sur un bord
if( i==0 || j==0 || i == w-1 || j == h-1 )
{
E0 = E;
E1 = E;
E2 = E;
E3 = E;
}else{
B = bd.getPixel32( i, j-1 );
D = bd.getPixel32( i-1, j );
F = bd.getPixel32( i+1, j );
H = bd.getPixel32( i, j+1 );
if (B != H && D != F )
{
E0 = ( D == B ) ? D : E;
E1 = ( B == F ) ? F : E;
E2 = ( D == H ) ? D : E;
E3 = ( H == F ) ? F : E;
}else{
E0 = E;
E1 = E;
E2 = E;
E3 = E;
}
}
i2 = i*2;
j2 = j*2;
dest.setPixel32( i2, j2, E0 );
dest.setPixel32( i2+1, j2, E1 );
dest.setPixel32( i2, j2+1, E2 );
dest.setPixel32( i2+1, j2+1, E3 );
}
}
bd.lock();
dest.unlock();
return dest;
}
static public function scale3x( bd:BitmapData ):BitmapData {
var dest:BitmapData = new BitmapData( bd.width*3, bd.height*3, true );
var E:uint;
var E0:uint;
var E1:uint;
var E2:uint;
var E3:uint;
var E4:uint;
var E5:uint;
var E6:uint;
var E7:uint;
var E8:uint;
var A:uint;
var B:uint;
var C:uint;
var D:uint;
var F:uint;
var G:uint;
var H:uint;
var I:uint;
var i:int;
var j:int;
var i3:int;
var j3:int;
var w:int = bd.width;
var h:int = bd.height;
bd.lock();
dest.lock();
for ( i = 0; i < w; i+=1 )
{
for ( j = 0; j < h; j+=1 )
{
E = bd.getPixel32( i, j );
//on est sur un bord
if( i==0 || j==0 || i == w-1 || j == h-1 )
{
E0 = E;
E1 = E;
E2 = E;
E3 = E;
E4 = E;
E5 = E;
E6 = E;
E7 = E;
E8 = E;
}else{
A = bd.getPixel32( i-1, j-1 );
B = bd.getPixel32( i, j-1 );
C = bd.getPixel32( i, j+1 );
D = bd.getPixel32( i-1, j );
F = bd.getPixel32( i+1, j );
G = bd.getPixel32( i-1, j+1 );
H = bd.getPixel32( i, j+1 );
I = bd.getPixel32( i+1, j+1 );
if ( B != H && D != F )
{
E0 = ( D == B ) ? D : E;
E1 = ( ( D == B && E != C ) || ( B == F && E != A ) ) ? B : E;
E2 = ( B == F )? F : E;
E3 = ( ( D == B && E != G ) || ( D == H && E != A ) ) ? D : E;
E4 = E;
E5 = ( ( B == F && E != I ) || ( H == F && E != C ) ) ? F : E;
E6 = ( D == H ) ? D : E;
E7 = ( ( D == H && E != I ) || ( H == F && E != G ) ) ? H : E;
E8 = ( H == F ) ? F : E;
} else {
E0 = E;
E1 = E;
E2 = E;
E3 = E;
E4 = E;
E5 = E;
E6 = E;
E7 = E;
E8 = E;
}
}
i3 = i*3;
j3 = j*3;
dest.setPixel32( i3, j3, E0 );
dest.setPixel32( i3+1, j3, E1 );
dest.setPixel32( i3+2, j3, E2 );
dest.setPixel32( i3, j3+1, E3 );
dest.setPixel32( i3+1, j3+1, E4 );
dest.setPixel32( i3+2, j3+1, E5 );
dest.setPixel32( i3, j3+2, E6 );
dest.setPixel32( i3+1, j3+2, E7 );
dest.setPixel32( i3+2, j3+2, E8 );
}
}
bd.unlock();
dest.unlock();
return dest;
}
}
}
Теперь пробуем:

Изображение после обработки

Вуаля! Минимум стараний и максимум результат
Результат:
- +24
- z3lf
Комментарии (70)
Заюзаю в следующей своей пиксельной игрушке
Я думаю тут важны таки мелочи. Иначе какой смысл от пикселарта:)
Ащще не люблю пиксельарт.
Я люблю пиксельарт.
Вырвалось)
Если все красиво делать, то все будет в тему. Хотя если тебе не нравится пиксельарт, то тут сложно угодить.
Я наоборот, уважаю пиксельарт. И в большинстве случаев, он реально не в тему.
fix
Нет причин использовать пиксел арт в физз пазлах — смысл? Небыло ТАКИХ (построенных на реальной физике) физ паззлов раньше (да и вообще были ли в полном смысле слова физ паззл?).
Ещё такой ньанс — в подавляющем большинстве случаев пиксельные игры — удел инди. Почему? В некоторых случаях это реально упрощает разработку, стилизуя игру под ущербную кастрированную графику, объясняя закосом под ретро (сейчас 2012, зачем мне разглядывать мелкие пиксельные объекты, или малодетализированное окружение????). Крупные разработчики врядле возьмутся сейчас делать такую графику. Это извращение над игроком.
Можешь объяснить почему «он реально в тему» и чем это обусловлено кроме фапа на мастерство художника? Ну серьёзно. Какие плюсы для игрока? Возможность играть на мониторах которые отображаю 256 цветов?
Попробуй расскажи мне, чем тебе нравится дом 2, и у тебя ничего не получится.
Зачем делать кастрированные и ущербные 2D игры, когда давно изобрели 3D?
Не нравится пиксельарт, не играй и не смотри игры с пиксельартом. Случайно увидел — закрой, пойди поиграй в круизис с калл оф дюти.
Я просто хочу узнать плюсы пикселарта? Вот не уходи от ответа, а попробуй их озвучить. Плюсы со стороны разработчика и со стороны игрока (не трогая тему иконографики — это отдельный разговор).
А то выходит что реально тёплый ламповый звук лучше?
Что «аргументы» вроде «реально не в тему» кончились, остались только оскорбления?
У оппонента ожидаемо проявился баттхерт. Продолжай.
P.S. Плюс от меня, случайный.
Какое графическое оформление тебе нравится?
Хотя мне безразлично, все равно ты фапер, фанбой и неадекват, потому что мне такое оформление не нравится.
Могу с совсем другой стороны подойти — НЕ пиксельные игры НАМНОГО популярней пиксельных, и пользуются НАМНОГО большим спросом. И тогда уж, если ты инди ориентированный на заработок, должен это учесть И НЕ СТАВИТЬ ПИКСЕЛ АРТ ХОТЯБЫ В ФИЗ ПАЗЗЛЫ!!!:DDD
Часто вижу платформеры, автораннеры, рпг, стратегии, с приятной пиксельной графикой. Можно в этих жанрах использовать писельарт? Или так делают только фаперы и неадекваты?
А то, что тебе не нравится пиксельарт, это очевидно, что бы ты не говорил.
Будующее за вектором как инструментом:) Пикселарт даже с иконографии в будующем уйдёт. Но это личное мнение.
Нитром сделал имя на пиксельарте.
ЗЫ Сам я не любитель пиксельарта )
dl.dropbox.com/u/4952054/ludumdare20/postRelease/index.html
Но думаю, если вдруг все начнут делать игры в этом стиле — станет не так прикольно…
blog.deepnight.net/p/games.html
Пиксельарт это стиль, а не технология. Это тоже самое, что сказать модерн отстой, барокко крутизна.
У лебедева написано именно про технологию, а не про стиль. Пиксельарт может рисовать самыми разными способами, в том числе и вектором ( flash-animated.com/piksel-art-vo-fleshe ). Очевидно же, что последние 15 лет никакого практического смысла в использовании пиксельарта уже нет. О чем спорить?
А уж нравится вам или нет — это дело сугубо вашего вкуса (также как стили в живописи, архитектуре и т.п.).
А на жизнь и смерть того или иного стиля влияет мода и популярность. Не так давно делать игру в 2д было смертным грехом и все очень ругали графику арканума, фаллаута тактикс и подобных игр.
В таком случае, скоро нельзя будет упрекнуть игру в плохой графике, т.к. «у всех свои вкусы». И опять прошу не понимать это как то, что я считаю пикселарт плохой графикой.
Одно дело вы говорите, что в этой игре плохо нарисованная графика, и совсем другое, что пиксельарт плохой стиль.
Не совсем уместное сравнение. Во-первых, тут каждый строит свой маленький домик и очевидно что большинство людей построят: 1-в популярном и модном на данный момент стиле 2-по своим возможностям и бюджету.
Поэтому пиксельарт тут вполне уместное решение, пускай даже его и много.
Во-вторых, я бы не назвал вектор супер технологичным. С такой позиции надо защищать, как минимум 3д графику и т.п.
2) Вот я ведь и писал выше что пикселарт это решение для тех у кого маленький бюджет. Конечно пиксел арт по ссылке — работа профи (и хорошо если это не дизеринг кстате). Но это не часто увидишь в играх.
Ну и по технологии — я лишь сказал что вектор применять практичней чем любой растр:) Но это спорно конечно.
Технологии идут вперёд и 3д — это то, к чему, по большому счёту мы все должны идти. Как разработчики. Покрайней мере для своего развития. что круче 2д или 3д — вот этот холивар был бы глупым)
ладно, всё, я сдаюсь :D
А вот это уже дело вкуса :D Если уровень графики одинаковый.
Да это, конечно, очень на любителя. Я больше как пример ссылку привел, чем из каки-то практических соображений