CustomGames.ru - Dota 2 пользовательские игры

Информационное окно (самый простой шаблон)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн Илья

  • Супермодератор
  • 2031
  • Мощь: 19
Я не испытываю особой любви к JS, XML и CSS, поэтому повествование будет совсем короткое, да и рассказывать особо нечего. Более подробную инфу ищите в справочниках и документации по этим языкам разметки.

А цель этой короткой статейки - дать вам, новичкам, самый простой шаблон информационного окна.

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



Итак, с чего надо начать? Во первых, берясь за реализацию такого окошка вы не должны задаваться вопросом о папке "content" вашего мода. Если вы не знаете, где она располагается, то идите штудируйте гайды форума и прочее, вам сюда рано. Для остальных:

В папке "content" создаем папку "panorama", если её у вас еще нет. Далее в ней нужно создать еще три папки:

  • images
  • layout
  • styles

Далее в каждой из папок создаем подпапку "custom_game"
Теперь в каждой из папок нужно создать свои определенные файлы, что будут выполнять всю работу по отрисовке окна.

Самая простая - images: здесь в папке "custom_game" создаем папку "game_info" и кидаем туда картиночки, что хотите впихнуть в панельку. Я скинул туда картинку виспа и сикера (собственно, я делаю мод и параллельно решил оформить эту статейку, чтобы потом через неё все по этой теме вспоминать)

Дальше styles: здесь в папке "custom_game" создаем файл "game_info.css" - этот файл будет отвечать за стиль отрисовки всего в нашей панельки. Можете считать это "шрифтами" в worde.
Заполняем его этим
Код
/*мои комментарии здесь - это любительские комментарии, относится к ним серъезно не стоит */

.GameInfo
{
    width:100%;
    flow-children: down;
}
 
/*оформление элемента label - привязывает текст и прочее к меткам, что мы тут создаем */
Label
{
    font-size: 20px;
    color: #999999;
    vertical-align: top;
}
 
/*оформление надписи оглавления */
#Title
{
    flow-children: right;
}

#TitleName
{
    color: #4bd84e; 
    font-size: 64px;
    margin-left: 16px;
    margin-top: 16px;
    text-transform: uppercase;
    vertical-align: center;
}

/* оформление заголовков */
.Header
{
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    margin-top: 26px;
    color: #4bd84e;   
    text-transform: uppercase;
}

/* Помните в ворде оформление текста по слева, по центру и справа?
Вот далее мы создаем такие же стили */

/* привязка к правой стороне */
.InfoStringRight
{
    font-size: 20px;
    flow-children: right;
    width: 100%;
    margin-top: 18px;
}

/* привязка к левой стороне */
.InfoStringLeft
{
    font-size: 20px;
    flow-children: right-wrap;
    width: 100%;
    margin-top: 18px;
}

/* привязка к центру */
.InfoStringDown
{
    font-size: 20px;
    flow-children: down;
    width: 100%;
    margin-top: 18px;
}

/* оформление нашего текста  */
#InfoText
{   
    margin-top:  10px;
    text-align: left;
    width: 200px;
}


/* оформление наших картинок */
#InfoImage
{
    width: 150px;
    height: 187px;
}
[свернуть]

Теперь, когда подготовили свои краски, переходим к холсту и рисунку.
layout: в папке "custom_game" создаем файл "game_info.xml"
Заполняем его этим
Код
<!--Все слова, что начинаются с элемента # 
являются переменными из addon_english.txt
и прочих файлов локализации-->

<root>

<!--Прописываем источники наших стилей, один из которых делали сами, второй дефолтный-->
<styles>
<include src="file://{resources}/styles/dotastyles.css" />
<include src="file://{resources}/styles/custom_game/game_info.css" />
</styles>

<!--Оформляем нашу главную фоновую панельку-->
<Panel class="GameInfo" >

<!--Надпись оглавления в отдельной панельке-->
<Panel id="Title">
<Label id="TitleName" text="#addon_game_name" />
</Panel>

<!--Первый заголовок-->
<Label id="H1" class="Header" html="true" text="#head_wisp" />
<!--Первая картиночка с текстом-->
<Panel id="Info1" class="InfoStringDown" >
<Image id="InfoImage" src="file://{images}/custom_game/game_info/io.png" />
<Label id="InfoText" text="#Info1" />
</Panel>

<!--Второй заголовок-->
<Label id="H2" class="Header" html="true" text="#head_blood" />
<!--Вторая картиночка с текстом-->
<Panel id="Info2" class="InfoStringDown" >
<Image id="InfoImage" src="file://{images}/custom_game/game_info/bloodseeker.png" />
<Label id="InfoText" text="#Info2" />
</Panel>

</Panel>
</root>
[свернуть]

Не забываем прописывать в файлах локализации, переменные, что мы тут использовали.
Например такой addon_english.txt
Код
"lang"
{
"Language" "English"
"Tokens"
{
"addon_game_name" "High Light"

// ******************** Game Info ********************

"head_wisp" "Wisp"
"head_blood" "Bloodseeker"
"Info1" "Info 1"
"Info2" "Info 2"
}
}
[свернуть]

Последнее, что нам осталось - подключить наш холст к игре, то есть впихнуть его в элемент в дотке, что отвечает за информационную панель:
layout: в папке "custom_game" создаем файл "custom_ui_manifest.xml"
Его содержимое
Код
<root>
<Panel>
<CustomUIElement type="GameInfo" layoutfile="file://{resources}/layout/custom_game/game_info.xml" />
</Panel>
</root>
[свернуть]

Собственно, на этом все. Самый простой шаблон готов.
Вот конечное древо папок:


Естественно, можете менять стили в styles: например, сделать картинки больше, меньше; сделать расположение текста на ровне с картинкой; уменьшать или увеличивать размер блока текста и т.д. Естественно пишите свой текст в файлах локализации, свои картинки в папку картинок и прочее и прочее. Все в ваших силах. Документации и справочник по JS, XML, CSS вам в помощь.

 



« Последнее редактирование: 08-08-2016, 22:10:37 от Илья »

Оффлайн Роман

  • 88
  • Мощь: 0
Ничего не понял вроде бы просто панелька без кнопок,почему по нажатию должна вылазить эта панелька?Из-за этого <include src="file://{resources}/styles/dotastyles.css" />?Я думал что эти 2 темы сделаны из одной кнопки customgames.ru/tu...m-prostuyu-knopku

Оффлайн I_GRIN_I

  • Продвинутый
  • 517
  • Мощь: 9
  • Научиться бы скриптить...
Роман, в доте уже предусмотрена вкладка с информацией, поэтому тебе нужно ее только активировать и заполнить, чтобы она стала рабочей.

Вот сама активация:
Код
CustomUIElement type="GameInfo"
Видишь, тип ГеймИнфо

Оффлайн TopKun

  • 40
  • Мощь: 0
  • оп мизантроп

И ничего нету. Сделал всё по гайду. У меня есть предположение, что это из-за строчки <include src="file://{resources}/styles/dotastyles.css" />. Такого файла у меня нет, хотя ссылка в гейм инфо есть. Что это за дефолтный стиль?

Оффлайн Илья

  • Супермодератор
  • 2031
  • Мощь: 19
Ну его так-то и не должно быть у тебя в папках. Он, наверное, хранится где-то у них.

Ну а так этот гайд писался до 7.00 и могло что-то поменяться. Поищи на гитхабе примеры.


А вообще, проверь чтобы кодировка xml была UTF-8.

Оффлайн CryDeS

  • Друзья CG
  • 1208
  • Мощь: 12
Или можно прочитать сообщение об ошибке, которое явно намекает где проблема

Оффлайн I_GRIN_I

  • Продвинутый
  • 517
  • Мощь: 9
  • Научиться бы скриптить...
TopKun, замени ту строку на эту: <include src="s2r://panorama/styles/dotastyles.vcss_c" />

Оффлайн Илья

  • Супермодератор
  • 2031
  • Мощь: 19
Или можно прочитать сообщение об ошибке, которое явно намекает где проблема

Намекает где проблема, а вот в чем она, лично я не вижу. Предполагаю что либо в кодировке дело, либо в синтаксисе.
Если строка от GRIN действительно исправит проблему, отпишитесь, я заменю в руководстве.

Оффлайн TopKun

  • 40
  • Мощь: 0
  • оп мизантроп
Илья,
Заменил строку на строку от GRIN, поставил кодировку ютф8, всё равно тоже самое. Мб я что-то не правильно делаю, хоть проверял на чистом моде чётко по гайду, кто знает.

Оффлайн ZLOY

  • Супермодератор
  • 395
  • Мощь: 5
Тебе в консоли эта ошибка более подробно описана должна быть

Оффлайн TopKun

  • 40
  • Мощь: 0
  • оп мизантроп
Тебе в консоли эта ошибка более подробно описана должна быть

Оффлайн I_GRIN_I

  • Продвинутый
  • 517
  • Мощь: 9
  • Научиться бы скриптить...
TopKun, ааааа, удали файл гейм инфо и создай новый тхт и ручками туда впиши все как было, у меня такая херня была с аддон_инглиш

Оффлайн TopKun

  • 40
  • Мощь: 0
  • оп мизантроп
I_GRIN_I, И в правду заработало, спасибо