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

Илья

Супермодератор
Команда форума
25 Сен 2015
2,348
34
Я не испытываю особой любви к JS, XML и CSS, поэтому повествование будет совсем короткое, да и рассказывать особо нечего. Более подробную инфу ищите в справочниках и документации по этим языкам разметки.

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

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



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

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


  • [li]images[/li]
    [li]layout[/li]
    [li]styles[/li]

Далее в каждой из папок создаем подпапку "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>

Не забываем прописывать в файлах локализации, переменные, что мы тут использовали.
Код:
"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 вам в помощь.
 
Последнее редактирование модератором:

Роман

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

I_GRIN_I

Друзья CG
15 Мар 2016
1,334
99
Роман, в доте уже предусмотрена вкладка с информацией, поэтому тебе нужно ее только активировать и заполнить, чтобы она стала рабочей.

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

TopKun

Пользователь
22 Июл 2016
44
0

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

Илья

Супермодератор
Команда форума
25 Сен 2015
2,348
34
Ну его так-то и не должно быть у тебя в папках. Он, наверное, хранится где-то у них.

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


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

CryDeS

Друзья CG
14 Июл 2015
1,210
5
Или можно прочитать сообщение об ошибке, которое явно намекает где проблема
 

I_GRIN_I

Друзья CG
15 Мар 2016
1,334
99
TopKun, замени ту строку на эту: <include src="s2r://panorama/styles/dotastyles.vcss_c" />
 
Последнее редактирование модератором:

Илья

Супермодератор
Команда форума
25 Сен 2015
2,348
34
Или можно прочитать сообщение об ошибке, которое явно намекает где проблема
Намекает где проблема, а вот в чем она, лично я не вижу. Предполагаю что либо в кодировке дело, либо в синтаксисе.
Если строка от GRIN действительно исправит проблему, отпишитесь, я заменю в руководстве.
 
Последнее редактирование модератором:

TopKun

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

ZLOY

Администратор
Команда форума
27 Июн 2016
683
77
Тебе в консоли эта ошибка более подробно описана должна быть
 

I_GRIN_I

Друзья CG
15 Мар 2016
1,334
99
TopKun, ааааа, удали файл гейм инфо и создай новый тхт и ручками туда впиши все как было, у меня такая херня была с аддон_инглиш
 

SniperX

Друзья CG
26 Фев 2018
318
32
steamcommunity.com
Проект
Белоозерская Потасовка - Updated
CompileStylesAndScripts: File does not exist "panorama/styles/dotastyles.css"
\panorama\layout\custom_game\game_info.xml
Спамится ошибка
 

SniperX

Друзья CG
26 Фев 2018
318
32
steamcommunity.com
Проект
Белоозерская Потасовка - Updated
Реклама: