Регистрация Главная Пользователи Все разделы прочитаны
Сообщения за день Справка Регистрация

Создаем свой интерфейс

-

Статьи, квесты и описания по Perfect World

- Статьи, квесты, карты и описания мира Perfect World в этом разделе

Ответ
 
Опции темы
Старый 10.03.2012, 17:59   #1
Заблокирован
 Пехотинец
Аватар для Spyware
 
Spyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известен
Регистрация: 06.03.2012
Сообщений: 80
Популярность: 413
Сказал(а) спасибо: 15
Поблагодарили 73 раз(а) в 15 сообщениях
Отправить сообщение для Spyware с помощью ICQ
 
Post Создаем свой интерфейс

[Ссылки могут видеть только зарегистрированные пользователи. ]
Доброго времени суток, уважаемые пользователи!
Многие, наверное, хотели изменить интерфейс игры ну или немного адаптировать его под себя, но распаковав архив surfaces.pck (а именно там находятся все элементы интерфейса) сталкивались с непроходимыми дебрями китайских иероглифов и бросали это дело.
Я постараюсь как можно подробнее описать процесс редактирования интерфеса игры. Не знаю, насколько это будет полезно, во всяком случае такого материала больше нигде нет.
Итак, приступим...

Пролог
Для серьезной работы и подготовится нужно соответствующе. Перед началом установить у себя на компьютере поддержку иероглифического письма (в случае с Windows 7 скачайте и установите пакет китайкого, японского и корейского языков через мастера поиска обновлений).
Далее нам нужны программа PW Pack (если у Вас ее до сих пор нет, то можете [Ссылки могут видеть только зарегистрированные пользователи. ]) и Adobe Photoshop любой удобной для Вас версии (я работаю в версии 5, скачать ее не составит труда). Почему фотошоп? Во-первых это лучший на сегодняшний день графический редактор. Во-вторых, файлы .tga - растровые графические изображения, а фотошоп именно растровый графический редактор, поэтому Corel Draw тут не подойдет (он предназначен для работы с векторными изображениями).

С програмной основой разобрались. Теперь теория. А в теории необходимо знать, ни много ни мало - основы редактирования графики в Photoshop. Если в фотошопе Вы разбираетесь плохо, поищите уроки для новичков в интернете и возвращайтесь к чтению этой статьи позже.Если умеете - едем дальше. А дальше собственно само руководство...
Часть 1. Что к чему
Итак, в обновлении "Генезис" разработчики сделали 3 очень хороших вещи:
1) Поместили 95% файлов нового интерфейса в одну папку
2) Все графические файлы в этой папке имеют расширение .tga которое очень удобно открывается и редактируется фотошопом, в отличии от предшествующих файлов .dds
3) В каждой папке лежит картинка, демострирующая элементы интерфейса, которые находятся в этой папке

Но обо всем по-порядку.
Я буду рассматривать файл surfaces.pck новой версии, то есть версии "Генезис", соответственно работать будем с новым интерфейсом. Я работаю с версией файла с PWI, но версия PWR не отличается.
Почти все файлы, которые нам понадобятся, расположены в папке "version01"
[Ссылки могут видеть только зарегистрированные пользователи. ]
Открываем эту папку и видим еще немного папок. Вот это почти весь наш интерфейс.
Всего 3 папки подписаны по-английски, поэтому вот небольшая подсказка (сортировка "По имени":
[Ссылки могут видеть только зарегистрированные пользователи. ]
Совет: в каждой папке сортируйте файлы "По размеру". Таким образом, самые значительные части интерфейса будут вначале.
Итак, с этим разобрались. Теперь разберем на конкретном примере.
Мы хотим изменить окно информации о персонаже.
Для этого открываем папку 4 и открываем первый .tga файл (самый большой). Видим следующее:
[Ссылки могут видеть только зарегистрированные пользователи. ]
Изменяйте файл как хотите, главное:
- Не менять размеры элементов, если не умеете работать с файлами параметров (об этом ниже)
- Не менять форму и размеры окна, по той же причине

В глубины фотошопа залазить не будем. Пропускаем пункт творчества, в итоге у нас получится другое окно. У меня получилось так:
[Ссылки могут видеть только зарегистрированные пользователи. ]
В Photoshop не силен, времени ушло минут 30, не больше.
Теперь давайте сохраним плоды нашего труда. При сохранении программа попросит Вас задать глубину цвета. Желательно оставлять то, которе установило сама программа (это глубина исходного файла), но если хотите, можете исправлять на 32 там, где стоит отличное от этого значение. Галочку "Уплотнение (RLE)" не ставим.
[Ссылки могут видеть только зарегистрированные пользователи. ]
Таким образом можно полносью поменять стиль оформления игры за день-два.
Пример: Скриншоты
Вот в принципе и все. Это базовое редактирование, для новчиков в этом деле.
И не большой бонус: подсказки для папки "windows". Она довольно большая и запомнить в ней все сложно. Когда-то я делал их для себя, но если кому-то пригодятся, буду рад. В остальных папках все проще.
Внимание! На всех картинках файлы расположены "По имени". Сделайте то же самое у себя и можете ориентироваться по этим картинкам.
[Ссылки могут видеть только зарегистрированные пользователи. ]
[Ссылки могут видеть только зарегистрированные пользователи. ]
[Ссылки могут видеть только зарегистрированные пользователи. ]

Для тех, что "шарит" лучше и хочет создать что-нибудь оригинальное, читаем дальше.

Часть 2. Продвинутая
Сразу предупреждаю, что для более продвинутых действий нужно будет вычислять размеры с точностью до пикселя. Это кропотливый труд, запаситесь терпением.

Я покажу весь процесс изменения интерфейса на самой сложной его части: панель отображения ХП/МП/Опыта
Все параметры элементов интерфейса хранятся в файле interfaces.pck. Для каждого окна они хранятся отдельно. Сейчас проще - почти весь интерфейс заключен в папке \version01\, и в этом файле тоже. В этой папке вы найдете 80% всего текста интерфейса в игре (собственно эта папка отвечает за то, что мы видим на экране).
Допустим, мы хотим изменить вид панельки, где показывается ХП\МП\Опыт перса, Чи и все остальное.
Приступим.

Для начала нам нужно узнать, какой текстовый файл в файле interfaces.pck отвечает за отображение этой самой панельки. В нашем случае это файл hpmpxp.xml в папке \version01\.
Открываем и видим кучу непонятных символов. Давайте разберемся в структуре и по ходу дела будем искать необходимые файлы. Начнем сверху

Код:
<DIALOG Name="Win_Hpmpxp" Width="293" Height="115" Alpha="0" BackgroundDialog="true" CanMove="false">
Эта строка задает базовые параметры окна, а именно:
- Максимальный размер панели: 293х115 пикселей.
- Альфа-канал равен 0 (это значит, что фон прозрачный)
- Нельзя перемещать (CanMove="false")

Код:
       <IMAGEPICTURE Name="Control_11822592" x="9" y="11" Width="72" Height="72">
   <Resource>
    <FrameImage FileName="Version01\Windows\?????.tga"/>
   </Resource>
  </IMAGEPICTURE>
В этом коде содержится информация о фоне за головой персонажа. В нашем случае он прозрачный (потому что файл представляет собой просто черный квадрат, а у нас Альфа=0, значит все черное- прозрачное)
Что полезного мы можем узнать из этих строк? Следующее:
- Левый верхний угол фона (там где он начинается): 9х11 пикселей
- Размеры фона (от точки начала): 72х72 пикселя
- Ну и путь к файлу в архиве surfaces.pck ("Version01\Windows\?????.tga")
Пока нам это ничего не даст, но в будущем, конгда будете менять все окно и захотите поменять окошко для лица персонажа, Вам придется менять все, в том числе и этот файл, если захотите убрать прозрачность.
Идем дальше

Код:
    <IMAGEPICTURE Name="Size" x="14" y="14" Width="64" Height="64">
   <Resource>
    <FrameImage FileName="Window\???_???.bmp"/>
   </Resource>
  </IMAGEPICTURE>
Это - одна из самых важных частей всей панели. Представляет собой обычную розовую точку в формате .bmp (а в формате .bmp розовый фон означает перекрытый Альфа-канал, таким образом мы имеем прозрачную точку).
Для чего она нужна? Если Вы просмотрите весь файл, то увидите, что путь к точке прописан более 20 раз с интервалом расположения в 19-20 пикселей. Эта точка определяет границы панели.
А в этом коде она служит прозрачным фоном для головы персонажа:
- Начинается в точке 14х14 пикселей(т.е. от верхнего левого угла делается отступ в 14 пикселей сверху и 14 пикселей слева, а потом только начинается сама картинка)
- Размер от левого верхнего угла (от 14х14): 64х64 пикселя.

Более-менее понятно? Тогда идем дальше.

Код:
<IMAGEPICTURE Name="Back1" Width="255" Height="92">
   <Resource>
    <FrameImage FileName="Version01\??????\???.tga"/>
   </Resource>
  </IMAGEPICTURE>
А вот и наша панелька! Открывайте этот файл ("Version01\??????\???.tga") из архива surfaces.pck фотошопом. Как Вы догадались, размер панели 255х92 пикселя.
Но не спешите закрывать файл hpmpxp.xml, в нем еще куча полезной информации, которую нам придется менять.
Идем дальше.

Код:
<IMAGEPICTURE Name="Img_BGclose" Width="10" Height="10">
   <Resource>
    <FrameImage FileName="Version01\????\????(??).tga"/>
   </Resource>
  </IMAGEPICTURE>
Это кнопка скрытия панели (та, что в левом верхнем углу). тут все просто: путь к файлу и размер (10х10 пикселей). Опять же кнопка нарисована на черном фоне, что для формата .tga означает прозрачность - помните об этом.

Код:
<PROGRESS Name="Prgs_EXP" x="103" y="46" Width="125" Height="6">
   <Resource>
    <FrameImage FileName="Window\???_???.bmp"/>
    <FillImage FileName="Version01\???\???.tga"/>
   </Resource>
  </PROGRESS>
Это уже что-то новенькое. Как можно догадаться, это полоска прогресса Опыта ("Prgs_EXP"). Если Вы внимательно читали это руководство, то уже поняли, что левый верхний угол полосы (т.е. начало) находится по координатам 103х46(зеленая точка):
[Ссылки могут видеть только зарегистрированные пользователи. ]
Ширина полосы: 125х6
[Ссылки могут видеть только зарегистрированные пользователи. ]
Совпадает с тем, что мы видим в игре? Таким образом, если Вы поменяете расположение полоски, которая будет отвечать за опыт, Вам придется переставить координаты и этого файла.
Помните: Не забывайте указывать координаты начала ("х" и "у"). Файлы без этих координат автоматически "прилепятся" к ближайшему углу экрана.
А вот графических файлов тут два, причем один из них находится в папке со старым интерфейсом (Window\???_???.bmp). Это точка, да-да, все таже точка, она выступает в роли рамки. Это очень хитрый трюк, когда прозрачная точка играет роль рамки, не давая картинке выходить за пределы, но мы эту рамку не видим. Точка автоматически заполнит область 125х6 пикселей, так как находится в глобальном блоке <PROGRESS> и наследует все его качества. А вторая картинка - это и есть наша полоса опыта (сиреневая). Изменить ее не составит труда.

Теперь давайте немного отвлечемся и поговорим о тегах. Это специальные коды, заключенные в скобки "<>". Те, кто знаком с языком html или css знает, для чего они нужны. Если Вы обратили внимание, каждый файл, будь то панель или точка заключены внутри какого-то глобального тега (блока). С этих блоков начинается код фрагмента интерфейса и этим же кодом закрываается с добавлением символа "/". Углубляться не буду, так как думаю, что многие знают этот принцип. Я хочу лишь дать небольшую подсказку:
Те файлы, которые заключены в теги <IMAGEPICTURE> не двигаются (т.е. не активны по ходу игры), а файлы в тегах <PROGRESS> двигаются (т.е. игра и наши действия влияют на их состояние). Пример выше: панель неподвижна, а вот полоса опыта уже подвижна, правильно?
Но давайте вернемся к файлу hpmpxp.xml

Код:
<IMAGEPICTURE Name="Pic_MinusExp" x="103" y="46" Width="125" Height="6">
   <Resource>
    <FrameImage FileName="???????\???_hp\???_exp.bmp"/>
   </Resource>
  </IMAGEPICTURE>
А эта строка приведет нас к такой же полосе, но в формате .bmp и желтого цвета. Если честно, я не разобрался зачем она нужна. Изменение ни к чему не привело.

Код:
         <PROGRESS Name="Prgs_MP" x="102" y="35" Width="139" Height="9">
   <Resource>
    <FrameImage FileName="Window\???_???.bmp"/>
    <FillImage FileName="Version01\???\????.tga"/>
   </Resource>
  </PROGRESS>
Как Вы наверное уже поняли, эта часть кода отвечает за строку Маны ("Prgs_MP"), имеет размеры 139х9 и начиается в точке 102х35. Два файла задействованы: сама полоса и уже знакомая нам прозрачная точка. Точка 102х35, конечно же находится в верхнем левом углу начала полоски Маны:
[c][Ссылки могут видеть только зарегистрированные пользователи. ][/c]
А размер равен самой полосе на панели, как и в случае с полосой опыта.

Код:
<PROGRESS Name="Prgs_HP" x="102" y="25" Width="139" Height="9">
   <Resource>
    <FrameImage FileName="Window\???_???.bmp"/>
    <FillImage FileName="Version01\???\????.tga"/>
   </Resource>
  </PROGRESS>
Самые смышленые уже поняли, что эта часть кода указывает на часть панели, на которой отображается состояние здоровье нашего персонажа. Как обычно два файла: точка и полоса ХП. Начинается полоса в точке 102х25 пикселей:
[Ссылки могут видеть только зарегистрированные пользователи. ]
И максимально может заполнить от этой точки пространство 139х9 пикселей:
[Ссылки могут видеть только зарегистрированные пользователи. ]

Код:
<PROGRESS Name="Prgs_AP" x="106" y="58" Width="117" Height="19" FillMarginTop="1" FillMarginBottom="1">
   <Resource>
    <FrameImage FileName="Progress\??.tga"/>
    <FillImage FileName="Version01\???\?????.tga"/>
   </Resource>
  </PROGRESS>
По названию этой части кода трудно понять, что она содержит. Но если открыть эти файлы, мы поймем, что это ничто иное, как полоса ярости. Координаты нам понятны, длина полосы тоже. В данном коде первый файл является задним фоном нашей поолосы (когда она пустая), а второй файл: сама полоса, когда у нас имеется Ци.

Код:
<LABEL Name="TXT_EXP" x="168" y="43" Align="1">
   <Text String="100%" FontName="???????" FontSize="9" Shadow="255" Bold="true" OutlineColor="0,0,0,0" TextUpperColor="0,0,0,0" TextLowerColor="0,0,0,0"/>
  </LABEL>
  <LABEL Name="TXT_LV" x="92" y="60" Align="1">
   <Text String="25" FontName="???????" FontSize="10" Bold="true" OutlineColor="0,0,0,0" TextUpperColor="0,0,0,0" TextLowerColor="0,0,0,0"/>
  </LABEL>
  <LABEL Name="Txt_Name" x="165" y="60" Align="1">
   <Text String="1 2 3" FontName="???????" FontSize="10" Bold="true" OutlineColor="0,0,0,0" TextUpperColor="0,0,0,0" TextLowerColor="0,0,0,0"/>
  </LABEL>
  <LABEL Name="Txt_MP" x="102" y="33" Width="138" Align="1">
   <Text String="13758/19275" FontName="???????" FontSize="9" Shadow="255" Bold="true" OutlineColor="0,0,0,0" TextUpperColor="0,0,0,0" TextLowerColor="0,0,0,0"/>
  </LABEL>
  <LABEL Name="Txt_HP" x="102" y="23" Width="138" Align="1">
   <Text String="12593/32325" FontName="???????" FontSize="9" Shadow="255" Bold="true" OutlineColor="0,0,0,0" TextUpperColor="0,0,0,0" TextLowerColor="0,0,0,0"/>
  </LABEL>
Этот массивный блок отвечает за цифры и надписи на панели.
"TXT_EXP" - цифры в полосе опыта
"TXT_LV" - уровень персонажа
"Txt_Name" - имя персонажа
"Txt_MP" - цифры в полосе маны
"Txt_HP" - цифры в полосе жизней
Прошу заметить, что эти названия также являются переменными и согласуются с сервером, т.е. если Вы укажите 150 уровень в строке:
Код:
<Text String="25" FontName="???????" FontSize="10" Bold="true" OutlineColor="0,0,0,0"
это ничего не даст, так как эти переменные принимаются с сервера по мере игры.
Вы возможно спросите: "А что же тогда мы можем тут изменить?" А изменить мы можем тут настройки шрифта:
FontSize="9" - в кавычках указываем размер шрифта
Shadow="255" - цвет тени по каналу R (0 это белый, 255 - это черный, остальные цвета лежат в этих пределах)
Bold="true" - жирный шрифт. При значении "false" или удалении этого параметра текст будет обычным
Ну и конечно же Вы можете поменять место расположения этих самых надписей. Координаты начала надписей и их максимальная длина есть
Например: x="102" y="33" Width="138"
указывает на местоположение цифр маны. Если Вы будете менять внешний вид панели и захотите передвинуть строки состояния, эти параметры тоже нужно будет изменить.

Код:
<IMAGEPICTURE Name="Img_Leader" x="68" y="72" Width="15" Height="20">
   <Resource>
    <FrameImage FileName="Window\LeaderMark.tga"/>
   </Resource>
  </IMAGEPICTURE>
Как Вы поняли, это значок лидера группы. Нам известен путь к нему и его координаты. Теперь мы сможем его заменить и утановить на другое место.

Обратите внимание, далее после этого кода идут одинаковые коды типа:

Код:
<IMAGEPICTURE Name="St_4" x="162" y="80" Width="16" Height="16">
   <Resource>
    <FrameImage FileName="Window\???_???.bmp"/>
   </Resource>
  </IMAGEPICTURE>
Это та самая невидимая точка, которая задает границы панели, чтобы та не занимала больше места и не могла быть растянута игроком. Как видите меняется только название ("St_4","St_5" и т.д.) и координаты. Все они лежат примерно в 20 пикселях друг от друга и находятся на СЛЕДУЮЩЕМ пикселе от панели. То есть эти точки не находятся поверх границы панели, а лежат в следующем пикселе, это важно.

Что еще у нас находится на этой панели? Кнопки отображения ХП/МП, 4 кнопки вверху панели (показать монстров на карте, минимализировать графику и т.д.), замок и капли Чи.

Те 4 кнопки вверху панели имеют общую конструкцию примерно такого вида (на примере кнопка отображения имени и символов игроков):

Код:
<CHECK Name="Chk_Player" x="129" y="1" Width="17" Height="17" SoundEffect="SFX\Interface\ClickB.wav" Command="player">
   <Hint String="^ffcb4aПоказать/скрыть имена и символы других игроков"/>
   <Resource>
    <NormalImage FileName="Version01\???\????????.tga"/>
    <CheckedImage FileName="Version01\???\????????.tga"/>
   </Resource>
  </CHECK>
Обратите внимание - нам встретился новый глобальный тег <CHECK>. Он означает, что внутри него находятся кнопки, адресующие команды клиенту или серверу. В данном случае - клиенту.
Помимо того, что мы знаем координаты этой кнопки (x="129" y="1" Width="17" Height="17") и пути к ней (первый файл (NormalImage) отвечает за нормальное состояние кнопки, второй (CheckedImage) - в нажатом положении, мы также знаем имя команды, подаваемой при нажатии этой кнопки. Зачем это нам? К примеру, Вы захотите заменить одну из кнопок на любую другую (например кнопку отображения монстров на карте на кнопку открытия окна питомцев). Для этого нужно будет найти команду открытия этого окна в одном из файлов и поменять значения "Chk_Player" и "player" на неободимые.
Также тут есть тег <Hint String>. Во всех файлах игры он отвечает за подсказки при наведении на кнопку, к которой привязан. Встречается довольно часто.
ВНИМАНИЕ: не путайте с тегом <Text String>, который отвечает за "постоянное" отображение текста, например, заголовки окон или параметры персонажа и т.д.

Код:
<STILLIMAGEBUTTON Name="Btn_HeadHP" x="87" y="22" Width="12" Height="12" SoundEffect="SFX\Interface\ClickA.wav" Command="headhp">
   <Hint String="^ffcb4aЖизненные силы"/>
   <Resource>
    <FrameUpImage FileName="Version01\??????\????(??).tga"/>
    <FrameDownImage FileName="Version01\??????\????(??).tga"/>
   </Resource>
  </STILLIMAGEBUTTON>
  <STILLIMAGEBUTTON Name="Btn_HeadMP" x="87" y="34" Width="12" Height="12" SoundEffect="SFX\Interface\ClickA.wav" Command="headmp">
   <Hint String="^ffcb4aМагическая энергия"/>
   <Resource>
    <FrameUpImage FileName="Version01\??????\????(??).tga"/>
    <FrameDownImage FileName="Version01\??????\????(??).tga"/>
   </Resource>
  </STILLIMAGEBUTTON>
  <STILLIMAGEBUTTON Name="Btn_HeadEXP" x="-2000" y="-2000" Width="12" Height="12" SoundEffect="SFX\Interface\ClickA.wav" Command="headexp">
   <Hint String="^ffcb4aОпыт"/>
   <Resource>
    <FrameUpImage FileName="???????\???_hp\??-hp??.tga"/>
    <FrameDownImage FileName="???????\???_hp\??-hp????.tga"/>
   </Resource>
  </STILLIMAGEBUTTON>
Эта часть кода отвечает за кнопки отображения полосок ХП/МП/Опыта над головой персонажа. Как обычно, мы знаем координаты начальных точек изображений кнопок и их размеры, а также место расположения изображений (первое изображение определяет, как будет выглядеть кнопка в нормальном режиме, а второе - при нажатии на кнопку.
Обратите внимание: в строках тегов <Hint String> и <Text String> мы можем задать цвет текста, используя символ "^" и цветовое значение в формате от 000000 до FFFFFFF. В фотошопе есть функция отображения выбранного цвета в таком формате:
[Ссылки могут видеть только зарегистрированные пользователи. ]
Примером может послужить строка из кода выше:
<Hint String="^ffcb4aЖизненные силы"/>
Обратите внимание, что пробела между кодом цвета и текстом быть не должно. Также посмотрите на координаты кнопки "Btn_HeadEXP". Они равны -2000 на -2000 пикселей. Это означает, что это кнопки у нас нет (точнее она не отображается в игре). Если захотите "включить" ее, просто замените координаты.
С этим разобрались? Тогда идем дальше.
Следующий кусок кода присутствует только в этом файле, больше его нет нигде.

Код:
<IMAGEPICTURE Name="CombatMask" Width="255" Height="92">
   <Resource>
    <FrameImage FileName="Version01\???\?????.tga"/>
   </Resource>
  </IMAGEPICTURE>
Это маска ярости. Т.е. картинка ?????.tga в папке ???\Version01 файла surfaces.pck отвечает за то, каким цветом будет мигать рамка ярости и круга, в котором находится лицо персонажа, когда он сражается. Изначально она красного цвета, но я ее изменил под свой интерфейс:
[Ссылки могут видеть только зарегистрированные пользователи. ]

Итак, мы почти дошли до конца файла и разобрали почти все его коды (которые будут встречаться не раз в других файлах), научились определять координаты точек, цвета надписей и разобрались с командами. Но есть еще один очень важный элемент интерфейса, как капли Чи. А вот дальше они у нас и расположены. Все коды имеют вид:
Код:
<IMAGEPICTURE Name="Img_P1off" x="223" y="46" Width="40" Height="40">
   <Resource>
    <FrameImage FileName="Progress\AP_A.tga"/>
   </Resource>
  </IMAGEPICTURE>
Меняется лишь параметр Name, координаты и пути к файлам.
Обратите внимание: в этих файлах нарисованы несколько капель Чи, это полоса анимации, при игре она движется от верхней картинке к нижней и так постоянно. Так получается эффект "горения" капель при полной ярости. Однако каждая капля ограничена размером 40х40 (прописано в коде), таким образом игра выделяет по одной капле и создается анимация. почему нельзя было создать формат .gif для этого трюка? Потому что:
[c]1) Это слишком просто
2) Качество картинки ухудшается
3) Выбор цветов ограничен[/c]
Если с координатами и путями к файлам все ясно, то с именами (Name="") ясно не все. Давайте разберемся:
"Img_P1off" - пустая капля Ци
"Img_P1on" - одна полная капля Ци
"Img_P2off" - две пустых капли Ци
"Img_P2on" - две полные капли Ци
"Img_P3off" - три пустые капли Ци
"Img_P3on" - три полные капли Ци
"Img_P1flash" - эффект "сгорания" 1 капли Ци
"Img_P2flash" - эффект "сгорания" 2 капель Ци
"Img_P3flash" - эффект "сгорания" 3 капель Ци
Анимация присутствует везде, кроме файлов пустых Ци.

Фух... С этим вроде тоже более менее понятно. Я думаю, по аналогии с другими элементами Вы сможете настроить и капли Ци. В одном из своих интерфейсов я вообще убирал анимацию капель Ци, просто создав 2 файла 40х40. В одном была картинка пустых Ци, а во втором - заполненных, при этом анимации не было, потому что у меня во втором файле содержался всего один рисунок 40х40, а не несколько, как в оригинале. В конце этой статьи Вы сможете увидеть это на картинке.
Осталось всего два кода в этом файле. Давайте разберем и их.


Код:
<CHECK Name="Chk_AutoLock" y="68" Width="27" Height="27" Command="autolock">
   <Resource>
    <NormalImage FileName="Version01\??????\???.tga"/>
    <CheckedImage FileName="Version01\??????\???.tga"/>
   </Resource>
  </CHECK>
Это замок (по названию понятно думаю). Как видите, имеется глобальный тег <CHECK>, значит первый файл будет определять внешний вид нормального состояния кнопки, а второй - нажатой, в нашем случае - когда он "снят".
Единственное, на что стоит обратить внимание в этой части кода - это то, что отсутствует координата "х". Это значит, что картинка "прилипает" к экрану по горизонтали, а по вертикали опускается на 68 пикселей (координата "y" нам указывает на это). Остальное думаю, понятно.
Ну и последняя часть кода:

Код:
<STILLIMAGEBUTTON Name="Btn_AddExp" x="81" y="1" Width="17" Height="17" SoundEffect="SFX\Interface\ClickB.wav" Command="addexp">
   <Resource>
    <FrameUpImage FileName="Version01\???\??(??).tga"/>
    <FrameDownImage FileName="Version01\???\??(??).tga"/>
   </Resource>
  </STILLIMAGEBUTTON>
Это кнопка включения гиперов. Почему тут, а не со всеми остальными кнопками, расположенными рядом? Так программеры игры определяют, когда было введена определенная фишка. Например, если какая-то фишка была введена в период аддона "Rasing Tide", коды этих обнов находятся в конце листа кодов перед закрывающим тегом. Но потом они поняли, что это нифига не прокатит, когда придется выпускать аддон "Genessis" и решили создать отдельную папку для почти всех измененных файлов.

Код:
<LABEL Name="Txt_Prof" x="-2000" y="-2000">
   <Text String="Воин" FontName="???????" FontSize="10" OutlineColor="0,0,0,0" TextUpperColor="0,0,0,0" TextLowerColor="0,0,0,0"/>
  </LABEL>
Этот код ныне не актуален. В прошлом он отвечал за надпись класса персонажа рядом с уровнем на руофе (еще до амфибий). Как можно увидеть по координатам, этот параметр отключен, но если Вы планируете использовать старый интерфейс, можете прописать новые координаты.

Ну вот вроде и все. Мы разобрали один из самых сложных элементов интерфейса. На примере я постарался объянить принцип устройства кода этой части интерфейса. Однако статья еще не окончена.

Теги
Если Вы ищите какую-либо картинку или строку кода, не зная названия, приходится пересматривать весь файл целиком, открывая каждый путь. Это муторно. А если Вы и точный файл не знаете? Тогда поиск нужных элементов затянется на часы. Однако, если знать, в каком теге вероятно будет прописан искомый фрагмент, этот процесс ускорится в несколько раз. Ниже я приведу список самых часто встречающихся тегов.

Все глобальные теги прописаны заглавными буквами, а обычные - прописными.

Глобальные теги:
<DIALOG> - это основной тег, определяющий окно. Если в файле отсутствует этот тег, значит в этом окне пользователь ничего не сможет сделать, т.е. окно обособлено от действий игрока.
<IMAGEPICTURE> - тег, внутри которого расположены подчиненные теги, указывающие на какую-либо картинку в файле surfaces.pck. Все окна в игре прописаны именно в этом теге.
<PROGRESS> - внутри этого тега заключены картинки или скрипты, которые зависят от наших действий и меняются по ходу игры. Например, полосы ХП/МП/Опыта.
<LABEL> - тег, внутри которого заключены какие-либо цифры и числа, которые меняются по ходу игры (значения как правило зависят от сервера). Например, число, обозначающее количество Маны, оно меняется по ходу игры, значит опеделенно код этого сигмента расположен в этом теге.
<CHECK> - обозначает кнопки, при нажатии на которые включаются определенные функции, а при повторном нажатии они отключаются. При этом подается одна и та же команда на сервер и клиент. Например: кнопка "Отображение мобов на мини-карте" или кнопка расширенного инвентаря.
<STILLIMAGEBUTTON> - тег похож на тег <IMAGEPICTURE>, только в этом теге содержится от 2-х до 5-ти картинок, обозначающие положения. Например, кнопки в игре имеют три положения: обычный вид, вид при наведении указателя (свечение) и вид при нажатии (затемнение, впадание). Все кнопки, имеющие больше двух положений, но приводящих к одному действию (а не к нескольким, как тег <CHECK>) содержатся в теге <STILLIMAGEBUTTON>. Например кнопки вокруг мини-карты.

Подчиненные теги:
<Resource> - основной тег, содержит картинки, рамки, кнопки. Одним словом, любые графические файлы, как правило, употребляется только внутри тегов <STILLIMAGEBUTTON> и <IMAGEPICTURE>
<FrameImage> - содержит ссылку на файл, играющий роль рамки окна или обводки. Внутри него не может быть других тегов.
<FillImage> - в этом теге также прописан путь к графическому файлу, только в этот раз этот тег определяет то, что картинка может отображаться не только полностью, но и по частям. Например, полоски ХП/МП/Опыта. Это также заключительный тег, внутри него не может быть другого.
<Text String> - тег, внутри которого находятся все тексты, которые ОТОБРАЖАЮТСЯ на элементах интерфейса. Например, заголовки окон, параметры персонажа, скиллы и так далее.
<Hint String> - тоже самое, что и предыдущий, только этот отображает текст внутри себя только при наведении на элемент курсора мыши. Например, наведите курсор параметр "Сила" в окне персонажа, Вам всплывет подсказка о том, за что отвечает этот параметр. Вот этот текст и прописан в тегах <Hint String>.
FontSize - параметр тегов, расположенный внутри тегов <Hint String> и <Text String>. Отвечает за размер шрифта указанного текста. Если у Вас не помещяется текст - уменьшите размер шрифта.
<NormalImage FileName> - в этом теге прописан путь к картинке, которая отображается при нормальном положении кнопки.
<CheckedImage FileName> - а в этом прописан путь к картинке, которая отображается при нажатой клавише (активной). Примером этих двух тегов служат кнопки вверху панели персонажа (минимализировать графику, включить имена игроков и т.д.)

Ну и напоследок несколько советов:
- Чтобы узнать точное расположение точек в игре, запустите игру не в оконном режиме, а в полный экран. Сделайте скриншот через кнопку Print Screeen, в фотошопе создайте новый документ (он автоматически подставит размер сделанного скриншота и нажмите Ctrl+V. Потом аккуратно выделите прямоугольную область до левой верхней части картинки. Так вы получите координаты x и y.
- Сохраняйте все исходники .psd измененных файлов.
- Держите под рукой переводчик. Google неплохо справляется с переводом китайского языка.
- Найденные координаты лучше записывать в блокнот отдельно, не надейтесь на память. 2-3 значения запомнить еще можно, а вот больше рано или поздно забудете.
- Имейте в запасе лишнюю копию оригиналього surfaces.pck или хотябы папки Version01.

На этом можно считать первую часть статьи завершенной. Я планирую и дальше рассматривать части интерфейса игры, если пользователям это будет интересно. Повоторюсь: весь материал наработан вручную в результате более 2-хлетней "деятельности" с ресурсами игры. Файл surfaces.pck является началом. Позже я начну рассматривать и другие файлы игры.
Ну и в конце, как и обещал, несколько скриншотов того, что можно сделать с интерфейсом на уровне "глубокого проникновения". Это еще "любительское" изменение, сделанное часа за 2. Посидев дольше, можно нарисовать хоть интерфейс как Diablo Благо файлы игры очень гибкие в изменении.
Интерфейс сделан в стиле Fallout.
[Ссылки могут видеть только зарегистрированные пользователи. ]
[Ссылки могут видеть только зарегистрированные пользователи. ]

Надеюсь я слегка приоткрыл завесу и Вы сможете попробовать изменить интерфейс, как слегка, так и основательно.
Благодарю за внимание.

С Уважением, Mescaline.

Права на материал принадлежат Mescaline. Копирайст матерлиала происходил с разрешением автора

Сказать Сяп!

P.S. Если будут вопросы - задавайте, постараюсь объяснить

Последний раз редактировалось Spyware; 11.03.2012 в 21:18.
  Ответить с цитированием
10 пользователя(ей) сказали cпасибо:
-_-Неви (08.11.2012), AlexRyatt (11.03.2012), lalarik (11.03.2012), mat-mat (06.04.2012), Pahafl (11.03.2012), tamuk (14.05.2012), wanted678 (09.04.2012), whoami (06.04.2012), xSkyDev (11.03.2012), ~ГайвеР~ (11.03.2012)
Старый 11.03.2012, 19:36   #2
 Капитан
Аватар для volodu
 
volodu скоро будет известенvolodu скоро будет известенvolodu скоро будет известен
Регистрация: 18.09.2010
Сообщений: 300
Популярность: 223
Сказал(а) спасибо: 71
Поблагодарили 37 раз(а) в 34 сообщениях
 
По умолчанию Re: Создаем свой интерфейс

Главная проблема пв (да и пви), это названия почти всех картинок и папок иероглифами, большинство программ не желает их открывать....
  Ответить с цитированием
Старый 11.03.2012, 20:39   #3
Заблокирован
 Пехотинец
Аватар для Spyware
 
Spyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известен
Регистрация: 06.03.2012
Сообщений: 80
Популярность: 413
Сказал(а) спасибо: 15
Поблагодарили 73 раз(а) в 15 сообщениях
Отправить сообщение для Spyware с помощью ICQ
 
По умолчанию Re: Создаем свой интерфейс

Цитата:
Сообщение от voloduПосмотреть сообщение
Главная проблема пв (да и пви), это названия почти всех картинок и папок иероглифами, большинство программ не желает их открывать....

С новым интерфейсом проблем практически нет: ты легко можешь узнать что находится в определенной папке по общему скриношоту. А самые "важные" части выявляются путем сортировки "По размеру" в папке.
Со старым да, невероятно трудно работать.
А насчет программ: все открывается фотошопом. Только для dds нужно плагин установить.
  Ответить с цитированием
Старый 11.03.2012, 21:02   #4
 Главнокомандующий
Аватар для finkrer
 
finkrer сломал счётчик популярности :(finkrer сломал счётчик популярности :(finkrer сломал счётчик популярности :(finkrer сломал счётчик популярности :(finkrer сломал счётчик популярности :(finkrer сломал счётчик популярности :(finkrer сломал счётчик популярности :(finkrer сломал счётчик популярности :(finkrer сломал счётчик популярности :(finkrer сломал счётчик популярности :(finkrer сломал счётчик популярности :(
Регистрация: 11.04.2010
Сообщений: 1,314
Популярность: 100919
Золото Zhyk.Ru: 7
Сказал(а) спасибо: 249
Поблагодарили 1,066 раз(а) в 767 сообщениях
Отправить сообщение для finkrer с помощью ICQ Отправить сообщение для finkrer с помощью Skype™
 
По умолчанию Re: Создаем свой интерфейс

А чего это в самом начале эпилог?
  Ответить с цитированием
Старый 11.03.2012, 21:17   #5
Заблокирован
 Пехотинец
Аватар для Spyware
 
Spyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известен
Регистрация: 06.03.2012
Сообщений: 80
Популярность: 413
Сказал(а) спасибо: 15
Поблагодарили 73 раз(а) в 15 сообщениях
Отправить сообщение для Spyware с помощью ICQ
 
По умолчанию Re: Создаем свой интерфейс

А не знаю, авторская ошибка наверное. Сейчас исправлю.

Последний раз редактировалось Spyware; 13.03.2012 в 01:26. Причина: Добавлено сообщение
  Ответить с цитированием
Старый 17.03.2012, 11:45   #6
 Пехотинец
Аватар для tamuk
 
tamuk никому не известный тип
Регистрация: 20.06.2009
Сообщений: 54
Популярность: 1
Сказал(а) спасибо: 39
Поблагодарили 19 раз(а) в 6 сообщениях
 
По умолчанию Re: Создаем свой интерфейс

а можно как то сразу закинуть старый интерфейс? как на версиях 1.4.4 в файле systemsettings.ini, Theme = 1, поменять на Theme = 0
Дело в том , что играю на PWorld, у них версия не 1.4.4, а 1.9.2 и там нету Theme = 1/Theme = 0
  Ответить с цитированием
Старый 24.03.2012, 06:46   #7
 Разведчик
Аватар для ratson
 
ratson на правильном пути
Регистрация: 30.03.2011
Сообщений: 34
Популярность: 22
Сказал(а) спасибо: 14
Поблагодарили 8 раз(а) в 3 сообщениях
 
По умолчанию Re: Создаем свой интерфейс

Цитата:
Сообщение от SpywareПосмотреть сообщение
Далее нам нужны программа PW Pack (если у Вас ее до сих пор нет, то можете [Ссылки могут видеть только зарегистрированные пользователи. ])

файл удалён пишут((
Перезалейте пожалуйста или дайте ссылку
  Ответить с цитированием
Старый 02.04.2012, 15:53   #8
 Разведчик
Аватар для vospa
 
vospa никому не известный тип
Регистрация: 14.03.2012
Сообщений: 7
Популярность: 10
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
 
По умолчанию Re: Создаем свой интерфейс

Осилил. Что-то переварил, что-то нужно внимательней перечитать для переваривания. С ходу вопрос. Косметика интерфейса штука забавная и интересная, но несущая в основном эстетическое удовлетворение. А хочется немного прагматизма. Вопрос вот какой. Есть две панельки горячих клавишь для скиллов, 1-9 и F1-F8. Тут все понятно. Каждую панельку можно развернуть на несколько рядов. Так вот можно ли и на них прописать кнопки использования скиллов? То есть, расширить количество горячих клавишь для скиллов, создать дополнительные панели горячих клавишь для скиллов.

Последний раз редактировалось vospa; 02.04.2012 в 15:59.
  Ответить с цитированием
Старый 05.04.2012, 21:13   #9
Заблокирован
 Разведчик
Аватар для sashasuv2010
 
sashasuv2010 неизвестен в этих краяхsashasuv2010 неизвестен в этих краяхsashasuv2010 неизвестен в этих краях
Регистрация: 23.05.2011
Сообщений: 17
Популярность: -200
Сказал(а) спасибо: 51
Поблагодарили 14 раз(а) в 13 сообщениях
 
По умолчанию Re: Создаем свой интерфейс

народ, кто сделал что интересное выкладывайте .pck файлы, хочу попробывать ваши творения)
  Ответить с цитированием
Старый 08.04.2012, 04:19   #10
Заблокирован
 Пехотинец
Аватар для Spyware
 
Spyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известенSpyware скоро будет известен
Регистрация: 06.03.2012
Сообщений: 80
Популярность: 413
Сказал(а) спасибо: 15
Поблагодарили 73 раз(а) в 15 сообщениях
Отправить сообщение для Spyware с помощью ICQ
 
По умолчанию Re: Создаем свой интерфейс

Цитата:
Сообщение от vospaПосмотреть сообщение
Вопрос вот какой. Есть две панельки горячих клавишь для скиллов, 1-9 и F1-F8. Тут все понятно. Каждую панельку можно развернуть на несколько рядов. Так вот можно ли и на них прописать кнопки использования скиллов? То есть, расширить количество горячих клавишь для скиллов, создать дополнительные панели горячих клавишь для скиллов.

Создать можно, и расширить можно. Но вот по горячим клавишам работать они не будут. Только по кликам на них. Чтобы они работали нужно редактировать elementclient.exe.
  Ответить с цитированием
Старый 08.04.2012, 23:00   #11
 Разведчик
Аватар для RoktoR
 
RoktoR на правильном пути
Регистрация: 22.08.2010
Сообщений: 4
Популярность: 26
Сказал(а) спасибо: 0
Поблагодарили 7 раз(а) в 6 сообщениях
 
По умолчанию Re: Создаем свой интерфейс

Цитата:
Сообщение от SpywareПосмотреть сообщение
Создать можно, и расширить можно. Но вот по горячим клавишам работать они не будут. Только по кликам на них. Чтобы они работали нужно редактировать elementclient.exe.

Не подскажешь,там же нужно ещё что бы было 100% работало,надо версию заменять,не знаешь,как будет в ехе проц выглядеть 1.9.2?
  Ответить с цитированием
Старый 12.04.2012, 21:23   #12
 Разведчик
Аватар для SmApple
 
SmApple на правильном путиSmApple на правильном пути
Регистрация: 11.02.2012
Сообщений: 13
Популярность: 142
Сказал(а) спасибо: 1
Поблагодарили 31 раз(а) в 6 сообщениях
Отправить сообщение для SmApple с помощью Skype™
 
По умолчанию Re: Создаем свой интерфейс

Лень читать,а так вроде бы ок.
Spyware, А можно ли расширить панельки?Например для сервера pworld?
________________
Не забываем про спасибо.
  Ответить с цитированием
Старый 12.04.2012, 22:04   #13
 Разведчик
Аватар для samsungers
 
samsungers никому не известный тип
Регистрация: 31.03.2012
Сообщений: 11
Популярность: 12
Сказал(а) спасибо: 0
Поблагодарили 1 раз в 1 сообщении
 
По умолчанию Re: Создаем свой интерфейс

Цитата:
Сообщение от SmAppleПосмотреть сообщение
pyware, А можно ли расширить панельки?Например для сервера pworld?

.
Цитата:
Сообщение от SpywareПосмотреть сообщение
Создать можно, и расширить можно. Но вот по горячим клавишам работать они не будут. Только по кликам на них. Чтобы они работали нужно редактировать elementclient.exe.


Последний раз редактировалось Sirioga; 12.04.2012 в 22:37. Причина: п.1
  Ответить с цитированием
Старый 27.08.2016, 23:29   #14
 Разведчик
Аватар для bu11et011
 
bu11et011 никому не известный тип
Регистрация: 27.08.2016
Сообщений: 1
Популярность: 10
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
 
По умолчанию Re: Создаем свой интерфейс

мда проги нет
  Ответить с цитированием
Старый 29.08.2016, 17:38   #15
 Пехотинец
Аватар для Стрелок
 
Стрелок излучает ауруСтрелок излучает ауруСтрелок излучает ауруСтрелок излучает ауруСтрелок излучает ауруСтрелок излучает ауру
Регистрация: 25.04.2009
Сообщений: 50
Популярность: 663
Сказал(а) спасибо: 11
Поблагодарили 8 раз(а) в 5 сообщениях
 
По умолчанию Re: Создаем свой интерфейс

2012 год, где же эта статья была когда редактировал рыбий интерфейс, по мне основная проблема во время редактирования была в проверке получившегося результата, а так тему со 2м интерфейсом можно оживить, если переключатель интерфейса починят
  Ответить с цитированием
Ответ

Метки
surfaces vs. interfaces

Опции темы

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

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[Подсказка] Создаем свой браузер! Q8a3H1a4_ Общение и обсуждение по World of Tanks 0 19.12.2011 20:31

Заявление об ответственности / Список мошенников

Часовой пояс GMT +4, время: 19:03.

Пишите нам: [email protected]
Copyright © 2024 vBulletin Solutions, Inc.
Translate: zCarot. Webdesign by DevArt (Fox)
G-gaMe! Team production | Since 2008
Hosted by GShost.net