[DaXaka]

Всем доброго времени суток! Многие из нас заходят на nfs-s.com, чтобы посмотреть свою статистику по нашей любимой игре Need For Speed WORLD, и каждый хотел похвастаться своими результатами с помощью баннеров в своей подписи на форуме. Но вы заметили, что баннеры у всех игроков одинаковые, и я готов поспорить, что каждый хотел иметь лично свой уникальный баннер. Итак, сегодня я вам расскажу, как создать свой баннер на nfs-s.com. Приступим!!!
Редактор баннеров
1. Для начала зайдем на сайт nfs-s.com, после чего выбираем пункт меню «Sigs & Graphics»
2. Заходим в «Editor»

3. Далее перед нами появляется окно создания нового баннера, в котором указываем следующие параметры:
Title – здесь имя нашего баннера (в моем случае это My Banner)
Category – выбираем категорию нашего баннера (я оставил по умолчанию)
Size – размеры баннера (у меня пусть будет 500х100)

4. Далее жмем кнопку «Create graphic» и видим сам редактор нашего баннера. Рассмотрим его элементы, которые нам понадобятся:
1. Окно просмотра баннера
2. Редактор кода
3. Библиотека файлов

Во время разработки баннера рекомендуется заблокировать его, чтобы другие пользователи не увидели вашу еще недоделанную работу. Для этого в самом низу страницы в выпадающем списке выбираем «Not public». По завершению работы вы можете выставить значение «Public» - если хотите поделиться своим баннером с другими пользователями, а если вы делаете только для себя и не хотите ни с кем делиться, то можете оставить значение «Not public».

Библиотека файлов
Библиотека файлов содержит в себе все файлы (картинки и шрифты), которые вам необходимы при создании баннера. Заходим в «File library» (на рисунке выше) и видим 6 вкладок:
Image library – здесь хранятся игровые аватарки
My Images – здесь хранятся ваши загруженные картинки
Font Library – стандартная библиотека шрифтов
My Fonts - здесь хранятся ваши загруженные шрифты
Upload – тут мы будем загружать наши шрифты и картинки
Итак, для начала загрузим изображение для фона и какой-нибудь шрифт. Жмем во вкладке «Upload» на кнопку «Click for upload» и в открывшемся окне выбираем нужные нам файлы . Я выбрал картинку в формате JPG и TTF -шрифт .

Код
Итак, с файлами мы разобрались, теперь перейдем к программированию. При создании баннера нужно учесть тот факт, что все его элементы располагаются как слои, поэтому будьте внимательны, чтобы элементы располагались по порядку! Наш баннер будет состоять из следующих элементов:
1.Фон
Для установки картинки в качестве фона напишем следующую строку:
image(file: "back.jpg", ownerid: 3693, x:0, y:0);
где X и Y – координаты расположения левого верхнего угла картинки (в данном случае x=0,y=0);
ось X идет слева направо, ось Y – сверху вниз.
текст выделенный зеленым - копируем из библиотеки файлов во вкладке «My Images».

*После каждого изменения регулярно сохраняйте свою работу кнопкой «Save» (там их 2 штуки, но можете нажимать любую).
2. Аватарка
image(file: p.avatar, x:5, y:5, w:35, h:35);
здесь ничего не надо копировать пишем как есть, только смените под себя координаты расположения аватарки (X и Y) и ее размеры (w – ширина, h - высота);
строка «file: p.avatar» означает, что мы берем нашу игровую аватарку, которая хранится в переменной p.avatar. После сохранения вы увидите результат этой несложной операции.
3. Никнейм
Перед тем как мы напишем никнейм, нам нужно определить шрифт:
defaults.font= font(name: "dungeon", ownerid: 3693);
defaults.size=8;
defaults.font – определяем шрифт;
defaults.size=8 – размер шрифта по умолчанию;
текст, выделенный зеленым, копируем из библиотеки файлов во вкладке «My Fonts» или «Font Library».
*Внимание! Если вы собираетесь писать русскими буквами, удостоверьтесь, что ваш шрифт поддерживает кириллицу, иначе – вместо русских букв будут непонятные символы!

Для написания никнейма используем функцию text().
Данный оператор предназначен для написания теста. Он имеет много параметров, рассмотрим все по порядку на примере:

text(x:80, y: 25, color:’000000’, size:12, align:’center’, text: ’Привет!’)
x: 80, y:25 – координаты расположения текста, НО это уже координаты не левого верхнего угла (как в фоне и аватарке), а левого нижнего угла (по умолчанию);
color: ‘000000’ – цвет текста, цвет указывается в шестнадцатеричном формате, т.е. у нас сейчас установлен черный цвет. Узнать шестнадцатеричный код нужного вам цвета можно узнать в графических редакторах (например, в Photoshop);
size:12 – размер шрифта;
align:’center’ – выравнивание текста. Имеет 3 значения:
right – выравнивание по правому краю относительно заданных координат
center - выравнивание по центру относительно заданных координат
left - выравнивание левому краю от заданных координат, тогда параметр «align» писать не обязательно, т.к. он установлен по умолчанию
text:’Привет!’ – сам текст

Теперь приступим к непосредственно к написанию никнейма:

tx=45; ty=20;
te=p.personaName;
text(x:tx, y:ty, text: te, size:14, color: 'ffffff');
tx и ty – координаты
te=p.personaName – наш ник
Я решил добавить эффект обводки текста, чтобы избежать случайного слияния с фоном. Вставлять перед строкой text(x:tx, y:ty, text: te, size:14, color: 'ffffff');
text(x:tx-1, y:ty+1, text: te, size:14, color: '000000');
text(x:tx+1, y:ty-1, text: te, size:14, color: '000000');
text(x:tx-1, y:ty-1, text: te, size:14, color: '000000');
text(x:tx+1, y:ty+1, text: te, size:14, color: '000000');

4. Уровень

tx=45; ty=35;
te= concat('Level: ', p.level);
text(x:tx, y:ty, text: te, size:10);
concat(‘Level: ‘, p.level) – функция, соединяющая значения разных типов. В данном случае это текст «Уровень: » и переменная, содержащая числовое значение вашего уровня.
Если хотите, то также можете добавить эффект обводки как и в никнейме.

5. Rank (Место в таблице лидеров)

tx=tx+30; te=concat('Rank: ',p.rank);
text(x:tx, y:ty, text: te, size:12);
Ну тут вроде бы все ясно…

6. Статистику гонок я обозначу другим цветом и размещу в 2-х колонках:
1. Avg place, MP streak, SP streak
2. Процент побед, победы, поражения

Avg place (точно сказать не могу, но по-моему это средняя позиция)
tx=5; ty=57; ta=p.races.total.averageFinishingPlace; te=concat('Avg place: ',ta);
text(x:tx, y:ty, text: te , color:'448eb9');
MP streak (Серия побед в мультиплеере)
tx=tx+14; ty=57; ta=p.races.mp.bestWinStreak; te=concat('MP streak: ',ta);
text(x:tx, y:ty, text: te , color:'448eb9');
SP streak (серия побед в сингле)
Тут все идентично MP streak, только в значении переменной “ta” вместо “mp” написать “sp”
Win % (Процент побед)
tx=110; ty=57;
r=nf(p.races.total.racesWon/(p.races.total.racesLost+p.races.total.racesWon)*1 00,2); te=concat('Победы %:',r);
text(x:tx, y:ty, text: te);
r –процент, который вычисляется по формуле: Победы/(Поражения+Победы)*100. Функция «nf()» с двойкой в конце выражения округляет полученное число до сотых, если бы стояло 3 – то до тысячных и т.д., выбирайте как вам удобнее.
Races lost (поражения)
tx=110; ty=ty+14; ta= p.races.total.racesLost; te=concat('Races lost: ',ta);
text(x:tx, y:ty, text: te , color:'448eb9');
Races won (победы)
Тут все идентично Races lost, только в значении переменной “ta” вместо “ racesLost ” написать “ racesWon”

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

bestcar=0;
bestcar_rating=0;
foreach(p.cars as d)
{
if(d.rating>bestcar_rating)
{
bestcar=d;
bestcar_rating=d.rating;
}
}
car=cc(bestcar.make,' ',bestcar.carName);

7. Тиры (T1, T2, T3)
Теперь установим иконку тира авто в правый верхний угол (путь к файлу должен быть как у меня!):

image(file:cc('/cardetails/tier',bestcar.tier,'.png'), x:470, y:5, w:25, h:19);
с координатами XY тут все ясно;
w, h – размеры иконки (ширина, высота соответственно)

8. Марка авто

tx=468; ty=18; te=car;
text(x:tx, y:ty, text: te, color: 'ffffff', align: 'right');
te=car – переменная, содержащая нашу лучшую машину (мы ее высчитали в предыдущем коде)

9. Характеристики авто
Теперь мы будем создавать шкалы технических характеристик (макс. скорость, ускорение и управление). Шкала будет состоять из двух частей: фона и заполнителя. Шкала может быть создана с помощью кода (т.е. будет простенькая и одноцветная полоса) или же с помощью изображений (такой способ создания обеспечит вашему баннеру уникальный вид). Мы рассмотрим первый способ
Пропишем следующий код для создания фона для шкал Top Speed, Acceleration, Handling, которые будут располагаться горизонтально друг за другом:

tx=210; ty=75;
rectangle(x:tx, y:ty, w:85, h:15, fill:'8c8c8c');
rectangle(x:tx+95, y:75, w:85, h:15, fill:'8c8c8c');
rectangle(x:tx+190, y:75, w:85, h:15, fill:'8c8c8c');
Функция rectangle() рисует прямоугольники со следующими параметрами:
x,y – собственно координаты;
w,h – ширина и высота соответственно, в пикселях;
fill – цвет прямоугольника.

Теперь приступим к заполнителям. Заполнители тоже будут рисоваться прямоугольниками поверх фона шкалы.

максимальная скорость:
prg=progress(start:0, curr:bestcar.topSpeed, next:1000, w:85);
rectangle(x:tx, y:75, wrg.currw, h:15, fill:'00b4ff');
функция progress() отвечает за создание шкалы, (не рисование!). Данная функция имеет следующие параметры:
start – начало отсчета, как правило начинается с нуля;
curr – данная переменная содержит текущее значение какого-либо параметра (в данном случае это Top Speed);
next – максимальное значение. В NFSW максимальное значение характеристик авто составляет 1000.
w – максимальная длина заполнителя в пикселях, как правило равна длине фона шкалы.
Функцию rectangle() я уже описывать не буду, но объясню один параметр: wrg.currw – здесь для получения значения ширины заполнителя происходит обращение к параметру curr, который находится в переменной prg.
ускорение и управление создаются аналогично максимальной скорости, только требуется в переменной prg заменить значение параметра curr на acceleration и handling соответственно, а также изменить координаты расположения этих заполнителей.

Вот что должно в итоге получиться:

Теперь осталось малость – подписать шкалы и вывести значения характеристик авто:

defaults.font= font(name: "volter__28goldfish_29", ownerid: 3693);
defaults.size=7;
tx=210; ty=72; te=concat('Top Speed:', bestcar.topSpeed);
text(x:tx, y:ty, text: te, color: 'ffffff');
Для остальных шкал (ускорение и управление) в строке te=concat('Top Speed:', bestcar.topSpeed); заменить значение topSpeed на acceleration и handling, также изменить координаты расположения текста.

Та-да!И вот настал тот момент, когда можно лицезреть плоды вашего творчества:

Вы также можете придумать что-нибудь свое: поставить другой фон, поменять шрифты, расположить элементы, так как вашей душе угодно, что-то добавить, что-то убрать.

Желаю творческих успехов! С уважением DaXaka.

P.S.: данный пост будет еще обновляться, так что следите за обновлениями. Если у вас возникли какие-то вопросы по данной теме – задаем их здесь, ну а я по возможности постараюсь на них ответить.

[osip14]

У меня вот такая шняга выходит) http://g.nfs-s.com/9046/nfsw_OSIP14.png?editor что делаь?

[DaXaka]

закинь лучше скрин, а то ссылка не пашет

[LadyHawk]

А у меня всё по-другому,некоторых кнопок нету как у тебя на скринах...

[GhoST69]

Чет попробовал поиграться както - результат в подписи (скажу честно, подсматривал код на разньіх баннерах, чет своего добавлял - первая работа ток как ни как ). Меня интересует возможность разделения тачек по Т. Типа в банере т1-лучшая тачка, дальше т2-лучшая тачка и т3-лучшая тачка. А не все тачки, что отобрал код - т3. Как так сделать? Чет я такой скрипт не нашел

[deadmoroz14]

Меня интересует возможность разделения тачек по Т. Типа в банере т1-лучшая тачка, дальше т2-лучшая тачка и т3-лучшая тачка.

я себе так сделал. приведен только кусок кода с выборкой автомобилей. синим выделено то, что надо будет дописать:

Код:

        // get best car 1
bestcar=0;
bestcar_rating=0;
foreach(p.cars as d) {
  if(d.rating>bestcar_rating && d.tier==3) {
    bestcar=d;
    bestcar_rating=d.rating;
  }
}

tx=ctx; ty=cty;
defaults.size=carSize;

image(file:cc('/cardetails/tier',bestcar.tier,'.png'), x:tx, y:ty, w:26, h:20);

// car name
tx=tx+30; ty=ty+15; te=cc(bestcar.make,' ',bestcar.carName);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// Perf block
pty=ty+2;
defaults.size=perfSize;

// speed label
tx=ptx; ty=pty+10; te=cc('Top speed: ',bestcar.topSpeed);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// Acceleration label
tx=tx+100; te=cc('Acceleration: ',bestcar.acceleration);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// handling label
tx=tx+100; te=cc('Handling: ',bestcar.handling);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// top speed
tx=ptx; ty=pty+15;
prg=progress(start:0, curr:bestcar.topSpeed, next:1000, w:90);
rectangle(x:tx, y:ty, w:90, h:prh, fill:'999999');
rectangle(x:tx, y:ty, w:prg.currw, h:prh, fill:'27FD0A');

// Acceleration
tx=tx+100;
prg=progress(start:0, curr:bestcar.acceleration, next:1000, w:90);
rectangle(x:tx, y:ty, w:90, h:prh, fill:'999999');
rectangle(x:tx, y:ty, w:prg.currw, h:prh, fill:'27FD0A');

// Handling
tx=tx+100;
prg=progress(start:0, curr:bestcar.handling, next:1000, w:90);
rectangle(x:tx, y:ty, w:90, h:prh, fill:'999999');
rectangle(x:tx, y:ty, w:prg.currw, h:prh, fill:'27FD0A');

// get best car 2
bestcar2=0;
bestcar2_rating=0;
foreach(p.cars as d) {
  if(d.rating<bestcar_rating && d.rating>bestcar2_rating && d.tier==2) {
    bestcar2=d;
    bestcar2_rating=d.rating;
  }
}

tx=ctx; ty=ty+8;
defaults.size=carSize;

image(file:cc('/cardetails/tier',bestcar2.tier,'.png'), x:tx, y:ty, w:26, h:20);

// car name
tx=tx+30; ty=ty+15; te=cc(bestcar2.make,' ',bestcar2.carName);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// Perf block
pty=ty+2;
defaults.size=perfSize;

// speed label
tx=ptx; ty=pty+10; te=cc('Top speed: ',bestcar2.topSpeed);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// Acceleration label
tx=tx+100; te=cc('Acceleration: ',bestcar2.acceleration);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// handling label
tx=tx+100; te=cc('Handling: ',bestcar2.handling);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// top speed
tx=ptx; ty=pty+15;
prg=progress(start:0, curr:bestcar2.topSpeed, next:1000, w:90);
rectangle(x:tx, y:ty, w:90, h:prh, fill:'999999');
rectangle(x:tx, y:ty, w:prg.currw, h:prh, fill:'27FD0A');

// Acceleration
tx=tx+100;
prg=progress(start:0, curr:bestcar2.acceleration, next:1000, w:90);
rectangle(x:tx, y:ty, w:90, h:prh, fill:'999999');
rectangle(x:tx, y:ty, w:prg.currw, h:prh, fill:'27FD0A');

// Handling
tx=tx+100;
prg=progress(start:0, curr:bestcar2.handling, next:1000, w:90);
rectangle(x:tx, y:ty, w:90, h:prh, fill:'999999');
rectangle(x:tx, y:ty, w:prg.currw, h:prh, fill:'27FD0A');

// get best car 3
bestcar3=0;
bestcar3_rating=0;
foreach(p.cars as d) {
  if(d.rating<bestcar2_rating && d.rating>bestcar3_rating && d.tier==1) {
    bestcar3=d;
    bestcar3_rating=d.rating;
  }
}

tx=ctx; ty=ty+8;
defaults.size=carSize;

image(file:cc('/cardetails/tier',bestcar3.tier,'.png'), x:tx, y:ty, w:26, h:20);

// car name
tx=tx+30; ty=ty+15; te=cc(bestcar3.make,' ',bestcar3.carName);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// Perf block
pty=ty+2;
defaults.size=perfSize;

// speed label
tx=ptx; ty=pty+10; te=cc('Top speed: ',bestcar3.topSpeed);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// Acceleration label
tx=tx+100; te=cc('Acceleration: ',bestcar3.acceleration);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// handling label
tx=tx+100; te=cc('Handling: ',bestcar3.handling);
text(x:tx-1, y:ty+1, text: te, color: shcol);
text(x:tx+1, y:ty-1, text: te, color: shcol);
text(x:tx-1, y:ty-1, text: te, color: shcol);
text(x:tx+1, y:ty+1, text: te, color: shcol);
text(x:tx+2, y:ty+2, text: te, color: shcol);
text(x:tx, y:ty, text: te);

// top speed
tx=ptx; ty=pty+15;
prg=progress(start:0, curr:bestcar3.topSpeed, next:1000, w:90);
rectangle(x:tx, y:ty, w:90, h:prh, fill:'999999');
rectangle(x:tx, y:ty, w:prg.currw, h:prh, fill:'27FD0A');

// Acceleration
tx=tx+100;
prg=progress(start:0, curr:bestcar3.acceleration, next:1000, w:90);
rectangle(x:tx, y:ty, w:90, h:prh, fill:'999999');
rectangle(x:tx, y:ty, w:prg.currw, h:prh, fill:'27FD0A');

// Handling
tx=tx+100;
prg=progress(start:0, curr:bestcar3.handling, next:1000, w:90);
rectangle(x:tx, y:ty, w:90, h:prh, fill:'999999');
rectangle(x:tx, y:ty, w:prg.currw, h:prh, fill:'27FD0A');