Развитие игровой вспышки
Текущее время: Пн дек 18, 2017 2:48 pm

Часовой пояс: UTC + 3 часа [ Летнее время ]




Начать новую тему Ответить на тему  [ Сообщений: 9 ] 
Автор Сообщение
 Заголовок сообщения: [Песочница] Эмулятор ЭЛТ для Flixel
СообщениеДобавлено: Пн сен 02, 2013 8:55 pm 
Не в сети

Зарегистрирован: Пн сен 02, 2013 4:24 pm
Сообщений: 5
Здравствуйте, дорогие друзья!

В этом посте пойдет речь о реализации на флэше (с исп. Stage3D) эмулятора электронно-лучевой трубки, имитирующего эффект картинки, выводимой на экран телевизора. Эмулятор может быть легко прикручен к популярным движкам Flixel/FlashPunk, а также к любому другому движку, использующему растровый рендер.

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

Для демонстрации воспользуемся простейшим платформером на Flixel, внеся в него самую малость дополнений.

Оригинальная картинка из платформера:

Изображение

Она же, выводимая через эмулятор:

Изображение

Функционал эмулятора реализован в классе TV. Для создания экземпляра используется конструктор:

Код:
public function TV(
   displayObject:DisplayObject,
   inputWidth:int,
   inputHeight:int,
   outputWidth:int,
   outputHeight:int)


Параметры:
  • displayObject:DisplayObject - любой объект Flash, он будет использован для доступа к свойству stage;
  • inputWidth:int - ширина входного изображения;
  • inputHeight:int - высота входного изображения;
  • outputWidth:int - ширина выходного изображения, выводимого на экран;
  • outputHeight:int - высота выходного изображения, выводимого на экран

Если объект класса TV создается внутри метода класса Main, вызов конструктора может выглядеть, например, так:

Код:
private var _tv:TV;
...
_tv = new TV(this, 320, 240, 640, 480);
...


Для того же, чтобы отправить картинку из игры на рендер, достаточно вызвать метод present():

Код:
public function present(image:BitmapData):void


При этом из содержимого объекта image будет использована прямоугольная область изображения размером (0, 0, inputWidth, inputHeight).

Для настройки эмулятора могут быть использованы следующие свойства (properties):

x:int (read/write)
y:int (read/write)
определяют положение (в оконных координатах) левого верхнего угла области экрана, используемой Stage3D для вывода изображения;

distortion:Number (read/write)
определяет степень искажения (скругления углов) выводимой картинки, значение 0 задает отсутствие искажений, по умолчанию используется значение 0.2;

brightness:Number (read/write)
определяет общую яркость экрана эмулятора, 1 (по умолчанию) - полная яркость, 0 - минимальная яркость;

scanlineMode:uint (read/write)
определяет интенсивность выделения скан-линий, задается одной из констант (от наименьшей интенсивности к наибольшей) TV.SCANLINE_MODE_LIGHT, TV.SCANLINE_MODE_MEDIUM (по умолчанию), TV.SCANLINE_MODE_DARK;

inputGamma:Number (read/write)
outputGamma:Number (read/write)
значения влияют на цветокоррекцию во время финального прохода рендера, значения по умолчанию соответственно: 2.4 и 2.2;

cellGlowSize:Number (read/write)
cellGlowPower:Number (read/write)
значения используются при имитации эффекта блика от светящегося зерна люминофора (область Cell glow на картинке ниже), свойство cellGlowPower определяет степень яркости блика, а свойство cellGlowSize - размер блика (если хотя бы одно из этих свойств равно 0, то проход рендера, имитирующий этот эффект, выключается; по умолчанию каждое свойство равно 0);

glassGlowSize:Number (read/write)
glassGlowPower:Number (read/write)
значения используются при имитации эффекта обширных относительно неярких бликов на стекле кинескопа, возникающих вокруг мест скопления в больших количествах ярко светящихся зерен (область Glass glow на картинке ниже); свойство glassGlowSize определяет размер бликов, glassGlowPower - яркость свечения (если хотя бы одно из этих свойств равно 0, то проход рендера, имитирующий этот эффект выключается; по умолчанию каждое свойство равно 0);

Изображение

noisePower:Number (read/write)
определяет степень проявления шума в финальном изображении, значение 0 (по умолчанию) задает отсутствует шума;

isHardware:Boolean (read only)
если значение свойства равно true, то эмулятором используется аппаратное ускорение, если false - то используется программный рендер Flash;

Еще несколько слов относительно области Glass glow. Технически этот эффект реализуется при помощи многократного применения к исходному изображению размытия по Гауссу в нескольких проходах рендера так, что результат работы одного прохода передается на вход следующего. Таким образом, помимо свойств glassGlowSize и glassGlowPower на качество имитации эффекта влияет также общее количество проходов. Чем оно больше, тем более качественным («мягким») получается результат.
Для задания требуемого количества итераций следует воспользоваться свойством

gaussianPasses:uint (read/write)

Однако, увеличивая значения gaussianPasses нужно помнить о том, что размытие по Гауссу выполняется в две стадии (размытие по горизонтали и размытие по вертикали), поэтому количество реальных проходов рендера будет в два раза больше, чем gaussianPasses. Значение 0 (по умолчанию) отключает применение размытия по Гауссу, и, следовательно, имитацию области Glass glow.

Использование эмулятора совместно с Flixel
Во Flixel растровый рендер сцены осуществляется в буфер камеры (камер). При этом, по умолчанию всегда доступна минимум одна камера (FlxG.camera). Отправить содержимое буфера этой камеры в эмулятор можно следующим образом:

Код:
_tv.present(FlxG.camera.buffer);


Но перед этим саму камеру необходимо вынести за пределы экрана:

Код:
FlxG.camera.x = -1000;


Лучше всего это делать внутри переопределенного метода create() в классах-потомках FlxState, а отправлять сцену на рендер - внутри класса Main (потомке FlxGame) в переопределенном методе draw(), не забыв перед этим вызвать super.draw().

В общем виде:
Код:
import org.flixel.*;

[SWF(width="640", height="480", backgroundColor="#000000")]
public class Main extends FlxGame
{
   private var _tv:TV;
   
   public function Main()
   {
      super(320, 240, SomeState, 1, 30, 30);
      _tv = new TV(this, FlxG.width, FlxG.height, FlxG.width * 2, FlxG.height * 2);
   }

   override protected function draw():void
   {
      super.draw();
      _tv.present(FlxG.camera.buffer);
   }
}

public class SomeState extends FlxState
{
   override public function create():void
   {
      FlxG.camera.x = -1000;
      // или FlxG.camera.x = -FlxG.width * 2;
   }
}



Использование эмулятора совместно с FlashPunk
Для растрового рендера сцены во FlashPunk также используется буфер (FP.buffer), содержимое которого можно отправить в эмулятор следующим образом:

Код:
_tv.present(FP.buffer);


Однако потребуется немного доработать класс net.flashpunk.Screen, добавив в него следующий метод:

Код:
public function hide():void
{
   _sprite.visible = false;
}


В общем виде:

Код:
import net.flashpunk.*;

public class Main extends Engine
{
   private var _tv:TV;   

   public function Main()
   {
      super(320, 240, 30);
      _tv = new TV(this, 320, 240, 640, 480);
   }

   override public function init():void
   {
      FP.screen.hide();
   }

   override public function render():void
   {
      super.render();
      _tv.present(FP.buffer);
   }
}


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

Исходники эмулятора вместе с демонстрационным платформером доступны в проекте для FlashDevelop. Вы вправе использовать класс эмулятора по его прямому назначению, в своих целях, как коммерческих, так и не очень. :write: :gamer:

Спасибо, что дочитали до конца :)

P.S. Буду благодарен инвайту на FGB :roll:

- инвайт отправлен


Рейтинг: 12.5%
Вернуться наверх
 Профиль  
 
 Заголовок сообщения: Re: [Песочница] Эмулятор ЭЛТ для Flixel
СообщениеДобавлено: Пн сен 02, 2013 9:07 pm 
Не в сети
Аватар пользователя

Зарегистрирован: Пт янв 13, 2012 12:14 pm
Сообщений: 52
Выглядит отлично!


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: [Песочница] Эмулятор ЭЛТ для Flixel
СообщениеДобавлено: Пн сен 02, 2013 10:59 pm 
Не в сети

Зарегистрирован: Пн сен 02, 2013 4:24 pm
Сообщений: 5
Bender, спасибо!


Вернуться наверх
 Профиль  
 
 Заголовок сообщения: Re: [Песочница] Эмулятор ЭЛТ для Flixel
СообщениеДобавлено: Пн сен 02, 2013 11:03 pm 
Не в сети

Зарегистрирован: Сб сен 29, 2012 1:28 pm
Сообщений: 856
Откуда: BY
А как насчет производительности? Что то мне подсказывает, что это здорово нагрузит процесс рендеринга.


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: [Песочница] Эмулятор ЭЛТ для Flixel
СообщениеДобавлено: Вт сен 03, 2013 2:05 am 
Не в сети

Зарегистрирован: Чт июл 01, 2010 2:39 pm
Сообщений: 1256
По мотивам http://pierrechamberlain.ca/blog/2013/0 ... sion-game/ ? )


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: [Песочница] Эмулятор ЭЛТ для Flixel
СообщениеДобавлено: Вт сен 03, 2013 9:32 am 
Не в сети

Зарегистрирован: Пн сен 02, 2013 4:24 pm
Сообщений: 5
ReMind
По производительности: при наличии аппаратного ускорения производительность вполне на уровне. Так, в демо выполняется 6 проходов рендера на каждый ENTER_FRAME, fps задано 30, в Firefox 22 (fp 11.8) профайлер показывает:

Изображение

При 60 fps картинка в FF несколько хуже:

Изображение

Но хром тянет и 60:

Изображение

В то же время, если включить софтварный рендер для Stage3D:

Изображение

:pardon:


abyss честно говоря, по мотивам You Have to Win the Game (не флэш)


Вернуться наверх
 Профиль  
 
 Заголовок сообщения: Re: [Песочница] Эмулятор ЭЛТ для Flixel
СообщениеДобавлено: Ср сен 04, 2013 9:10 pm 
Не в сети

Зарегистрирован: Сб фев 02, 2013 7:47 pm
Сообщений: 7
Спасибо за статью!

Я пока только начинающий разработчик, поэтому задам такой вопрос: если игра окажется на сайтах спонсоров, там аппаратное ускорение будет принудительно отключено и игра будет выдавать ~2 fps?

Прошу прощения за крупное изображение, но в нем важен текст, а тег "спойлер" я здесь не обнаружил.

Изображение


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: [Песочница] Эмулятор ЭЛТ для Flixel
СообщениеДобавлено: Чт сен 05, 2013 9:16 am 
Не в сети

Зарегистрирован: Пн сен 02, 2013 4:24 pm
Сообщений: 5
Да, скорее всего так и будет.
Впрочем, подобные случаи можно предусмотреть - например, если аппаратное ускорение недоступно, то не использовать вывод графики через эмулятор, а выводить средствами движка.
Хотя, это может удивить владельца портала, например: тот взял себе игру с "красивой картинкой", но не выставил wmode=direct (или забыл про него, или не знал) и увидел у себя совсем не то, что ожидал :crazy:


Вернуться наверх
 Профиль  
 
 Заголовок сообщения: Re: [Песочница] Эмулятор ЭЛТ для Flixel
СообщениеДобавлено: Чт сен 05, 2013 2:32 pm 
Не в сети

Зарегистрирован: Сб фев 02, 2013 7:47 pm
Сообщений: 7
Жаль, очень интересный эффект.

Спасибо за ответ :)


Вернуться наверх
 Профиль Отправить e-mail  
 
Показать сообщения за:  Сортировать по:  
Начать новую тему Ответить на тему  [ Сообщений: 9 ] 

Часовой пояс: UTC + 3 часа [ Летнее время ]


Кто сейчас на форуме

Сейчас этот форум просматривают: Majestic-12 [Bot] и гости: 2


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Русская поддержка phpBB