Суббота, 20.04.2024, 09:48
Главная Регистрация RSS
Приветствую Вас, Гость
Поиск по сайту
Авторизация

Меню сайта
Game Maker
Если вы только-только начали изучать игрострой и еще даже не успели скачать сам Game Maker, предлагаем вам на выбор следующие версии программы:

Game Maker 8.1
Классика. Идеально подходит для создания простых 2D игр на PC. Требует активации.
Game Maker for Mac
Абсолютно та же программа, но только для пользователей Mac. Требует активации.
Game Maker Studio
Самая новая версия с возможностью кроссплатформенной разработки. Бесплатна.
Топ 5 игр
Агент Green 4.2 / 5.0
FeDo 4.2 / 5.0
To Mars: Sec... 4.2 / 5.0
To Mars+MapE... 3.9 / 5.0
Paintball 3.8 / 5.0

Топ игр составлен путем пользовательского голосования.

Если вы не согласны с какой-либо оценкой, примите участие и поставьте свой балл игре. Ваша оценка очень важна для нас ;)
Статистика



На сайте: 1
Гостей: 1
Пользователей: 0
Главная » Статьи » Разработка игр

Объемный "Sample Text"

Наверняка каждый из вас, уж простите за тавтологию, играл в такую чудесную игру, как Hotline Miami и лицезрел довольно интересный эффект вращающегося текста (если нет, то настоятельно рекомендую хотя бы на youtube ее пройти: игра, как-никак, на GM сделана - хоть посмотрите, что кроме арканоидов можно сделать с этой прогой). Согласитесь, смотрится такой текст очень круто и может удачно вписаться в любой контекст, в любую игру. Так вот, сегодня специально для новичков я наглядно покажу и расскажу то, как можно достигнуть подобного эффекта.

Итак, изначально нам нужно четко определиться, что именно от нас требуется. А требуется от нас 1) нарисовать текст; 2) сделать его объемным; 3) заставить вращаться; 4) результат обвести черным цветом. И тут без лишних слов понятно, что было бы неплохо заюзать такую графическую фичу Game Maker, как сурфейсы. Потому без лишних слов в событии Create сразу создаем сурфейс желаемого размера:

Create
lalka=surface_create(400,200);

Сим кодом я создал сурфейс ‘lalka’ размерами 400x200. Так что рисуемый в нем текст ни в коем случае не должен превышать этот размер. Да и вообще лучше всего будет сделать его вовсе как минимум на треть меньше. Кстати, насчет текста: рисовать его программно - лишние запары не только для нас, но и для самого железа. Так что вооружаемся Фотошопом и рисуем текст уже в нем. Желательно использовать только белый цвет, дабы потом можно было без особых проблем разукрасить картинку. 

После сохраняем полученный текст в спрайт ‘s_lalka’. Вы можете использовать и другое название, но вам придется чуть-чуть поднапрячь извилины и в дальнейшем коде подставить вместо этого названия другое. Боюсь, не все справятся с этой непосильной задачей… (искренне надеюсь, что таких не найдется)

Тем временем приступаем к рисованию нашего текста. Но предварительно пополним событие Create еще парочкой переменных (об их предназначении позже):

Create

ym=0;
xm=0;

rot=0;
sbrot=0;

А вот теперь с головой окунаемся в событие Draw. В первую очередь расчистим почву для дальнейшего кодинга:

Draw

surface_set_target(lalka); //Захват сурфейса

//…

surface_reset_target(); //Отключение захвата

//Импровизированное рисование обводки
draw_surface_ext(lalka,x+1,y,1,1,0,c_black,1); 
draw_surface_ext(lalka,x-1,y,1,1,0,c_black,1);
draw_surface_ext(lalka,x,y+1,1,1,0,c_black,1);
draw_surface_ext(lalka,x,y-1,1,1,0,c_black,1);

draw_surface(lalka,x,y); //Рисование самого текста

С обводкой разобрались. Ныне наша задача сделать так, чтобы текст был объемным и как-бы вращался по окружности. Увы, рисовать трехмерный текст довольно напряжно для наших ручонок, так что выкручиваемся как можем: рисуем обыкновенный текст десять раз и каждый раз смещаем его на пиксель вперед, тем самым создавая эффект объемности. Но не забываем, что эта выпуклость должна, подобно Hotline Miami, вращаться по окружности. Для этого нам нужно найти коэффициент смещения текста, то бишь точку на окружности с определенным радиусом. Благо под рукой всегда есть справочник по геометрии… или хотя бы учебник математики. Без проблем находим нужную формулу и подставляем ее в программу перед непосредственно захватом сурфейса ‘lalka’: 

Draw (ну или Step, неважно)
if direction>359 direction=0 else direction+=4; //вращаем текст
ym=0+1*sin(degtorad(direction)); //Находим коэффициент смещения по y…
xm=0+1*cos(degtorad(direction)); //… и по x

Далее переходим непосредственно к рисованию текста. Предварительно опять же напоминаю, что алгоритм создания объемного текста достаточно прост: нам нужно лишь нарисовать его десять раз, постоянно смещая на пиксель в сторону. Потому, в данном случае, нам удобней всего будет воспользоваться циклом. После surface_set_target(…) пишем:

Draw
draw_clear_alpha(c_black,0); //очищаем сурфейс
var xx { //вводим временную переменную
for (xx=0;xx<=10;xx+=1) { //начинаем цикл
draw_sprite_ext(s_lalka,0,ym*xx,xm*xx,1,1,0,c_white,1);//Рисуем текст…
//…ym - коэффициент смещения по y; xm - коэффициент смещения по x;
//xx - само смещение текста (как видите, оно регулярно увеличивается на 1) 

}
}

Итого большую часть работы мы уже проделали. Осталось только разукрасить текст в нужные тона, а также заставить его уже непосредственно крутиться, а не просто вращаться выпуклостями (как бы это смешно не звучало). Начнем, наверное, с окраски, а также сразу подключим ко всему этому переменную, отвечающую у нас за вращение: (сей листинг пишем заместо draw_sprite_ext(s_lalka,0,ym*xx,xm*xx,1,1,0,c_white,1); из кода выше)

Draw
draw_sprite_ext(s_lalka,0,ym*xx,xm*xx,1,1,rot,clr[xx],1);
//rot - вращение; clr[…] - цвет (будем делать массив)

Итак, увы, мы не можем динамически задать нужный градиент. Так что выкручиваемся, как можем: нам нужно задать в событии Create для каждого элемента массива clr[…] свое значение, то бишь цвет. Лично я выкрутился следующим образом: 

Create
var i { //временная переменная, чтобы не засирать память
for (i=0;i<=10;i+=1) { //цикл
clr[i]=make_color_hsv(30+i*4,255,255) //выбор цвета
}
}

Также для создания цвета вы можете воспользоваться функцией make_color_rgb, где каждый нужный параметр легко можно усмотреть в нашем любимом фотошопе:

Ну а теперь переходим к вращению текста. Для этого случая мы уже заготовили нужные переменные, так что просто переходим в событие Draw и где-нибудь в сторонке пишем:

Draw (или опять же Step)
if sbrot=0 {if rot+0.1 > 10 sbrot=1 else rot+=0.1}//извиняйте, но…
if sbrot=1 {if rot-0.1 < -10 sbrot=0 else rot-=0.1}//…мне лень объяснять очевидные вещи,
//вроде того, как работает этот код

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

Категория: Разработка игр | Добавил: BRESS (09.05.2014)
Просмотров: 4291 | Комментарии: 2 | Рейтинг: 4.8/5
Всего комментариев: 2
2 SVGames   (18.06.2014 14:17) [Материал]
SVGames Great

1 никита   (26.05.2014 17:18) [Материал]
никита GM поражает своими возможностями, не так ли smile ?

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]