Среда, 22 февраля 2017, 18:10

Приветствую Вас Гость

Меню сайта
Категории каталога
Создание игр [298]
Статьи об общих понятиях связанных с созданием игр.
Программирование [66]
Гайды по программированию на разных ЯП.
Движки и Гейммейкеры [120]
Статьи о программах для создания игр, уроки и описания.
Софт [27]
Различные программы, в том числе в помощь игроделам.
2D-графика [7]
Уроки по рисованию, растр, пиксель-арт, создание спрайтов и пр.
3D-графика [8]
Уроки по моделированию, ландшафт, модели, текстурирование и пр.
Моддинг игр [4]
Модификация компьютерных игр, создание дополнений, перевод, хакинг.
Игры [65]
Статьи об играх, в том числе и сделанных на гейммейкерах.
Разное [53]
Статьи, которые не вошли в определённые разделы.
Наш опрос
На каких мобильных устройствах вы играете?
Всего ответов: 593
Главная » Статьи » Создание игр

Game Maker Studio: Шейдеры (Часть 4)


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

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

Для примера, попытаемся увеличить часть изображения, создав своеобразный эффект лупы. Здесь, нам бы пригодились всяческие формулы из курса геометрии и физики, но, скажу честно, мне было лень копаться в этом. Потому, результат был получен исключительно экспериментальным путем, который основывался на моем понимании поставленной задачи. Думаю, для ознакомления с работой текстурных координат этого будет достаточно.

Вновь создадим новый шейдер и перейдем на вкладку Fragment. Так как наша лупа будет привязана к координатам мыши, то вспомним, что мы делали в подобной ситуации в прошлый раз. Каких-то дополнительных пояснений тут не требуется. Создадим две переменные, которые будут хранить координаты мыши:

Код
uniform float xMouse;
uniform float yMouse;


Теперь перейдем в функцию main() и начнем творить наш шейдер. Давайте подумаем, что нам понадобиться для достижения поставленной задачи. Первое, что нужно, это получить текущие текстурные координаты:

Код
vec2 Coord = v_vTexcoord;


Далее, определим координаты центра лупы и зададим ее радиус:

Код
vec2 Center = vec2(xMouse,yMouse);
float rad = 0.2;


Как видите, центр, для удобства, мы будем хранить в 2-компонентном векторе Center. Ну а пояснять, что центром лупы будут являться координаты мыши, думаю, не стоит. Для хранения радиуса создаем новую переменную rad, я выбрал значение радиуса 0.2 (не забывайте, что вся текстура у нас располагается в диапазоне от 0 до 1).

Как и в прошлой части, нам нужно знать, будет ли текущая координата входить в зону покрытия лупы. Но на этот раз мы не будем применять геометрических формул, а воспользуется встроенной функцией distance(), которую предоставляет шейдер. Зная расстояние от центра лупы до текущей точки, мы можем легко определить, входит ли точка в радиус охвата лупы. Функция distance() как раз служит для того, чтобы определить расстояние между двумя точками. Сохраним это расстояние в переменную dist:

Код
float dis = distance(Coord, Center);


Далее, составим условие попадания текущей координаты под лупу:

Код
if (dis < rad + 0.1)
  {
……………
  }


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

Код
Coord = Coord - (Coord - Center)/0.2;


Останется только вывести текстуру с новыми текстурными координатами, а так же вывести исходные координаты, не попадающие под лупу. Общий код будет иметь следующий вид:

Код
if (dist < rad + 0.1)
  {
  Coord = Coord - ((Coord - Center)/0.2) ;
  gl_FragColor = texture2D(gm_BaseTexture, Coord);
  }  
  else
  gl_FragColor = texture2D(gm_BaseTexture, v_vTexcoord)


Остается создать текстуру с размерами 2 в степени N, установить галочку [b]Used for 3D[/b] и назначить ее объекту. У объекта в событии [b]Draw[/b] пишем уже знакомые нам строки:

Код
var xM = shader_get_uniform(shader0,"xMouse");
var yM = shader_get_uniform(shader0,"yMouse");

shader_set(shader0);
shader_set_uniform_f(xM,mouse_x/sprite_width);
shader_set_uniform_f(yM,mouse_y/sprite_height);
draw_sprite(sprite_index,0,x,y);
shader_reset();


Если теперь запустить приложение и проверить работу шейдера, то мы увидим, что часть текстур под лупой действительно увеличилась, но отсутствует эффект выпуклости, свойственный подобной оптике. Что такое эффект выпуклости, говоря простым языком?! Это зависимость размера текстуры от удаления текущей точки от центра. Центр у нас есть, текущую точку мы получить можем, давайте сформируем зависимость. Для этого в шейдере пропишем следующее:

Код
float d = (rad - dist)/2.0;


Если рассудить логически, то мы увидим, что d будет тем больше, чем ближе текущая точка к центру. Так как полученное значение для нашего эффекта будет чрезмерно большим, мы делим его на 2.0.

Остается только использовать данную зависимость в построении новых координат:

Код
Coord = Coord - ((Coord - Center)/0.2) * d;


Вот, что получается в итоге для формирования нашего импровизированного эффекта лупы:

Код
if (dist < rad + 0.1)
  {
  float d = (rad - dist)/2.0;
  Coord = Coord - ((Coord - Center)/0.2) * d;
  gl_FragColor = texture2D(gm_BaseTexture, Coord);
  }


Можно запускать и наслаждаться результатом. У меня это выглядит вот так:



Спасибо за внимание. И удачи в изучении.
Категория: Создание игр | Добавил: LunarPixel (16 сентября 2013)
Просмотров: 3694 | Комментарии: 10 | Рейтинг: 5.0/6 |
Теги: Game Maker Studio, GameMaker Studio, шейдеры, уроки, GM, графика, Статьи, GMS, Shader, gamemaker
Дополнительные опции:
Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:

Игровые объявления и предложения:
Если вас заинтересовал материал «Game Maker Studio: Шейдеры (Часть 4)», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела. Предлагаются такие схожие материалы: Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.

Всего комментариев: 10
+1-
10 Eshford   (18 сентября 2013 18:09)
EshfordИ да, спасибо за урок. :3

+0-
9 Eshford   (18 сентября 2013 17:48)
EshfordЕсли уточнить, то это рыбий глаз, а не лупа.

+1-
7 Hyishy   (18 сентября 2013 10:50)
Слова в увеличенном виде повторяются: Еш(обычным шрифтом), ещё (большим) в одной строке

+1-
8 LunarPixel   (18 сентября 2013 15:32)
LunarPixelВсе таки, нужно было каждое слово "лупа" брать в кавычки ))

+-3-
1 MadMax   (16 сентября 2013 16:12)
MadMaxна лупу не совсем похоже biggrin

+1-
2 FadeBaker   (16 сентября 2013 16:26)
Сделай, чтобы было похоже. Автор просто показал, как пользоваться фрагментными шейдерами.

+-2-
4 MadMax   (17 сентября 2013 16:35)
MadMaxсделай

+0-
5 FadeBaker   (17 сентября 2013 18:28)
Мне это не нужно.

+2-
3 LunarPixel   (16 сентября 2013 16:39)
LunarPixel))) Ну я написал в начале:
"Здесь, нам бы пригодились всяческие формулы из курса геометрии и физики, но, скажу честно, мне было лень копаться в этом. Потому, результат был получен исключительно экспериментальным путем, который основывался на моем понимании поставленной задачи."
Так что, как уже сказал Fade, дерзайте и сделайте, чтобы было похоже )

+1-
6 MrNesh   (17 сентября 2013 21:32)
MrNeshПочему?
Включи воображение wink

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
10 случайных движков
  • lifeEngine
  • J.U.R.P.E.
  • Java Script WebGL Games Creator
  • Quad Engine
  • Sandy3D
  • Wintermute Engine
  • PointJS
  • INSTEAD
  • DS Game Maker
  • RTADS
  • Друзья сайта
    Игровой форум GFAQ.ru Перевод консольных игр
    GameDev, Уроки OpenGL, Программирование, Создать Minecraft
    Все права сохранены. GcUp.ru © 2008-2017 | Free GIF Animator Рейтинг
    http://vashclimate.ru/ ремонт кондиционеров sakata.