Урок [Гайд] Кастомизация Загрузочного экрана(Лоадскрина)

28 Июн 2017
123
17
18
Проект
HOOK WARS REBORN
Реакции
30 0 1
#1
Здесь я опишу несколько вариантов различной кастомизации загрузочного экрана. Это вроде мой второй гуид, так что могу где-то допустить ошибку, уж сорри, но тапком кинуть можно.

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

У кого ещё нет обычного лоадскрина - вам сюда: Тык

Собсна, всякие штуки писать я буду в таком виде:

Что эта штука делает
Это в custom_loading_screen.xml:
Код:
Код, который надо кинуть в custom_loading_screen.xml будет тута
А это в custom_loading_screen.css:
Код:
Код, который надо кинуть в custom_loading_screen.css будет здеся

Ну и конечно в таких штуках всегда будут параметры, которые нужно выбирать и менять вам, в основном это местоположение этих самых штук в custom_loading_screen.css

Ну вроде всё, что надо было объяснил, теперь можно и начинать.

Кнопка с ссылкой (Например на группу в ВК вашей кастомки)
Это в custom_loading_screen.xml:
Код:
	<Panel id="VKmain">
	  <Label text="ВАШЕ ОПИСАНИЕ ССЫЛКИ"/>
  	  <Button id="VK" onactivate="DOTADisplayURL('ВАША ССЫЛКА');">
	     <Image class="avatar" src="file://{images}/custom_game/loading_screen/ВАША КАРТИНКА ДЛЯ КНОПКИ.png" />
      </Button>		
	</Panel>
А это в custom_loading_screen.css:
Код:
#VKmain /*Тут выбираете позицию, просто меняйте значения и сами поймёте, как тут и что работает(Ну я так делал). */
{
	flow-children: down;
	horizontal-align: left;
	vertical-align: top;
	position: 438px 0px 0px; 
}

#VKmain Label /*Тут параметры текста "ВАШЕ ОПИСАНИЕ ССЫЛКИ"*/
{
	color: white;
	font-size: 20px;
	horizontal-align: center;
}

#VK /*Тут параметры самой кнопки*/
{
	width: 60px;
	height: 60px;
	background-color: black;
	vertical-align: middle;
	horizontal-align: center;	
}

.avatar /*Тут параметры картинки, можете не менять,*/
{
	width: 60px;
	height: 60px;
	background-color: black;
	vertical-align: middle;
	horizontal-align: center;
}

Если разобрались с кнопкой и сделали всё, как вам и надо было, то дальше без проблем должны справиться. Если же не получается что-то, то отпишите в этой же теме, постараюсь помочь.

Дота профиль автора
Это в custom_loading_screen.xml:
Код:
	<Panel id="Developers">
	  <Label text="ВАШ НИК"/>
		<Panel id="Creator" class="column">
			<DOTAAvatarImage class="avatar" steamid="ВАШ STEAM ID" />
		</Panel>
	</Panel>
А это в custom_loading_screen.css:
Код:
#Developers
{
	flow-children: down;
	horizontal-align: left;
	vertical-align: top;
	position: 351px 0px 0px;
	padding-bottom: 41px;
	padding-right: 3px;
}
#Developers Label
{
	color: white;
	font-size: 20px;
	horizontal-align: center;
}

.column
{
	width: 100%;
	flow-children: down;
}

.avatar
{
	width: 60px;
	height: 60px;
	background-color: black;
	vertical-align: middle;
	horizontal-align: center;
}

Способность и её описание при нажатии
Это в custom_loading_screen.xml:
Код:
	<Panel id="AbilityInfomain1">
	    <Button id="AbilityButton" onactivate="DOTAShowAbilityTooltip(ИМЯ_АБИЛКИ)">
	      <Image src="file://{images}/custom_game/loading_screen/ИКОНКА АБИЛКИ(ДА МОЖНО ПРОЩЕ УКАЗАТЬ, НО ДРУГОЙ СПОСОБ НЕ ВСЕГДА РАБОТАЕТ С КАСТОМНЫМИ ИКОНКАМИ).png" />
      </Button> 	 
  </Panel>
А это в custom_loading_screen.css:
Код:
#AbilityInfomain1
{ 
  horizontal-align: left;
  vertical-align: top;
  margin-top: 180px;
  margin-left: 180px;
  flow-children: right;
}

#AbilityInfomain1 Label
{
	color: white;
	font-size: 20px;
	horizontal-align: center;
}

#AbilityButton
{
	width: 60px;
	height: 60px;
	background-color: black;
	vertical-align: middle;
	horizontal-align: center;	
}

Портрет героя(без анимации)
Это в custom_loading_screen.xml:
Код:
  <Panel id="HookerImage"> 
   <DOTAHeroImage heroname="ИМЯ ГЕРОЯ, НАПРИМЕР: npc_dota_hero_rattletrap" heroimagestyle="portrait" />
  </Panel>
А это в custom_loading_screen.css:
Код:
#HookerImage
{
  margin-top: 155px;
  margin-left: 438px;
}

Дота профиль и ник игрока(Каждый видит свой профиль и свой ник(ХЗ, ЗАЧЕМ ВАМ ЭТО).)
Это в custom_loading_screen.xml:
Код:
	<Panel id="Statsmain">
    <Label text="ТЕКСТ КАКОЙ-НИБУДЬ ЗДЕСЯ"/>	
      <DOTAAvatarImage class="avatar" steamid="local" />
	  <DOTAUserName class="username" steamid="local" />
  </Panel>
А это в custom_loading_screen.css:
Код:
#Statsmain
{ 
  horizontal-align: left;
  vertical-align: center;
  margin-top: 225px;
  margin-left: 0px;
  flow-children: right;
  background-color: #000000cc;
  padding-bottom: 75px;
  padding-right: 105px;
}

#Statsmain Label
{
	color: white;
	font-size: 20px;
	horizontal-align: center;
}

.avatar
{
	width: 60px;
	height: 60px;
	background-color: black;
	vertical-align: middle;
	horizontal-align: center;
}

.username
{
	color: yellow;
	font-size: 40px;
}

Типа опрос, нравится ли игроку кастомка(Хотя на самом деле результаты никуда не отправляются и ничего не решают, но зато игрок может подумать, что нам интересно его мнение)
Это в custom_loading_screen.xml:
Код:
<Panel id="Opinionmain">
  <Label text="А ЧТО ВЫ ДУМАЕТЕ О НАШЕЙ КАСТОМКЕ???"/>	
	<RadioButton checked="checked" group="opinion" id="opinion1" text="УЖАСНАЯ" onactivate="DOTAShowTitleTextTooltip(БОЛЬШОЕ СПАСИБО!, ВАШЕ МНЕНИЕ НАМ ОЧЕНЬ ВАЖНО!!!)"/>
    <RadioButton group="opinion" id="opinion2" text="УЖАСНОЕ ГОВНЕЦО" onactivate="DOTAShowTitleTextTooltip(БОЛЬШОЕ СПАСИБО!, ВАШЕ МНЕНИЕ НАМ ОЧЕНЬ ВАЖНО!!!)"/>
</Panel>
А это в custom_loading_screen.css:
Код:
#Opinionmain
{ 
  horizontal-align: left;
  vertical-align: top;
  margin-top: 300px;
  margin-left: 0px;
  flow-children: right;
  background-color: #000000cc;
}

#Opinionmain Label
{
	color: white;
	font-size: 20px;
	horizontal-align: center;
}

#Opinion
{
	width: 60px;
	height: 60px;
	background-color: black;
	vertical-align: middle;
	horizontal-align: center;	
}

Название кастомки с анимацией
Это в custom_loading_screen.xml:
Код:
   <Panel id="TitlePanel"> 
     <Label id="AddonTitle" text="#addon_game_name" style="" />
  </Panel>
А это в custom_loading_screen.css:
Код:
#TitlePanel
{
 horizontal-align: left;
 vertical-align: bottom;
 margin-bottom: 150px;
 margin-left: 100px;
 flow-children: right;
 animation-name: gamemode_anim;
 animation-delay: AnimationDelay;
 animation-duration: TotalLength;
 animation-timing-function: TimingFunc;
 animation-iteration-count: IterationCount;
}

#AddonTitle
{
 margin-bottom: -15px; 
 vertical-align: center;
 text-transform: uppercase;
 font-size: 80px;
 color: #cccccc;
 text-shadow: 2px 2px 2px #000000;
}

@keyframes 'gamemode_anim'
{
 0%
 {
  transform: translateX( 0px ) translateY( 0px );
  pre-transform-scale2d: .8;
 }

 100%
 {
  transform: translateX( 0px ) translateY( -200px );
 }
}

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

proxy.php?image=https%3A%2F%2Fpp.userapi.com%2Fc841231%2Fv841231170%2F1abec%2F034uLsYfPmA.jpg&hash=e25314614bb48d9f974fe7a4b877e35b
 
Последнее редактирование модератором:

I_GRIN_I

Друзья CG
15 Мар 2016
981
42
28
19
Реакции
57 0 1
#2
Дикий Пёс, зачем танцы с бубном при добавлении иконки спелла? Есть класс панельки, называется DOTAAbilityImage
 
28 Июн 2017
123
17
18
Проект
HOOK WARS REBORN
Реакции
30 0 1
#3
I_GRIN_I, Я же писал, что этот способ не всегда работает с кастомными иконками
 

I_GRIN_I

Друзья CG
15 Мар 2016
981
42
28
19
Реакции
57 0 1
#4
Дикий Пёс, у меня всегда работал
 

destructioN

Пользователь
16 Сен 2018
67
0
6
20
Проект
Great Labyrinth
Реакции
1 0 0
#5
Дайте инфу, где находится custom_loading_screen.xml ?
 
Реклама:
28 Июн 2017
123
17
18
Проект
HOOK WARS REBORN
Реакции
30 0 1
#6

Thunder Lane

Активный
30 Сен 2018
81
10
8
19
Проект
Thunder's COT RPG
Реакции
11 0 0
#8
После добавления кнопки на группу вк вылезла такая ошибка , как исправить и в чем проблема ?
 

Вложения

Thunder Lane

Активный
30 Сен 2018
81
10
8
19
Проект
Thunder's COT RPG
Реакции
11 0 0
#9
Всё я разобрался , спасибо , но было бы хорошо добавить пояснение что надо внутрь скобок вставлять код , а я отдельно делал .
 

Thunder Lane

Активный
30 Сен 2018
81
10
8
19
Проект
Thunder's COT RPG
Реакции
11 0 0
#10
А как сделать что бы баннер с ссылкой был над выбором пика , а не под ?
 

Вложения

Реклама:

LAPKI

Новичок
26 Окт 2018
7
2
3
20
Реакции
2 0 0
#11
А как сделать что бы баннер с ссылкой был над выбором пика , а не под ?
XMLку с баннером бы приклепляли и стиль элемента, а так, попробуйте с стилями поиграться(.css файл), а именно с position , ну или с align
 

Thunder Lane

Активный
30 Сен 2018
81
10
8
19
Проект
Thunder's COT RPG
Реакции
11 0 0
#12

LAPKI

Новичок
26 Окт 2018
7
2
3
20
Реакции
2 0 0
#13
Во первых, если вам нужна вот эта вот часть в стилях
#VKmain
{
color: white;
font-size: 20px;
horizontal-align: center;
}
перенесите содержимое в
#VKmain
{
flow-children: down;
horizontal-align: left;
vertical-align: top;
position: 363px 800px 0px;
}

а не плодите несколько типов стилей под 1 объект.
.ProBg
{
background-repeat: repeat;
background-position: 50% 50%;
background-size: 100% 100%;
}
у вас нету ни 1 объекта с классом ProBg, так что это ни с чем не взаимодействует.

#VKmain
{
flow-children: down;
horizontal-align: left;
vertical-align: top;
position: 363px(!!ЧЕМ БОЛЬШЕ ЧИСЛО ТЕМ ЛЕВЕЕ ВАША ПАНЕЛЬКА VKmain!!) 800px(!!ЧЕМ БОЛЬШЕ ЧИСЛО ТЕМ НИЖЕ ВАША ПАНЕЛЬКА VKmain!!) 0px;
}

меняете значение так чтобы вам было удобно, если, к примеру, вам надо поднять вашу панельку с кнопкой, просто уменьшаете 2 значение в position (выше я подписал как это работает). Лень переписывать ваши файлы и корректировать под вас, так что я дал мини-объяснение.
 
Последнее редактирование:

Thunder Lane

Активный
30 Сен 2018
81
10
8
19
Проект
Thunder's COT RPG
Реакции
11 0 0
#14
Во первых, если вам нужна вот эта вот часть в стилях
#VKmain
{
color: white;
font-size: 20px;
horizontal-align: center;
}
перенесите содержимое в
#VKmain
{
flow-children: down;
horizontal-align: left;
vertical-align: top;
position: 363px 800px 0px;
}

а не плодите несколько типов стилей под 1 объект.
.ProBg
{
background-repeat: repeat;
background-position: 50% 50%;
background-size: 100% 100%;
}
у вас нету ни 1 объекта с классом ProBg, так что это ни с чем не взаимодействует.

#VKmain
{
flow-children: down;
horizontal-align: left;
vertical-align: top;
position: 363px(!!ЧЕМ БОЛЬШЕ ЧИСЛО ТЕМ ЛЕВЕЕ ВАША ПАНЕЛЬКА VKmain!!) 800px(!!ЧЕМ БОЛЬШЕ ЧИСЛО ТЕМ НИЖЕ ВАША ПАНЕЛЬКА VKmain!!) 0px;
}

меняете значение так чтобы вам было удобно, если, к примеру, вам надо поднять вашу панельку с кнопкой, просто уменьшаете 2 значение в position (выше я подписал как это работает). Лень переписывать ваши файлы и корректировать под вас, так что я дал мини-объяснение.
Жалко только что моя панелька уже на нужном месте , просто её на половину перекрывает панелька пика команды
 

Вложения

20 Дек 2016
505
66
28
10
Проект
DI:LS
Реакции
84 0 0
#15
Жалко только что моя панелька уже на нужном месте , просто её на половину перекрывает панелька пика команды
А зачем ты пытаешься налепить баннер на панель пика из файла лоадскрина, который полностью рисуется перед этой панелью? Скопируй xml прегейма для кастомок (он где-то есть в файлах доты) и добавляй баннер туда (не забудь соответствующий худ в манифесте прописать).
Либо вообще в js баннер создавать, если умеешь, но при этом лень возиться с xml.
А еще можешь просто баннер влево переместить..
 
Реклама:

Thunder Lane

Активный
30 Сен 2018
81
10
8
19
Проект
Thunder's COT RPG
Реакции
11 0 0
#16
А зачем ты пытаешься налепить баннер на панель пика из файла лоадскрина, который полностью рисуется перед этой панелью? Скопируй xml прегейма для кастомок (он где-то есть в файлах доты) и добавляй баннер туда (не забудь соответствующий худ в манифесте прописать).
Либо вообще в js баннер создавать, если умеешь, но при этом лень возиться с xml.
А еще можешь просто баннер влево переместить..
Вот не давно сделал по рандому в панораму доты в файле team_select вставлял кнопку и получилось
 

LAPKI

Новичок
26 Окт 2018
7
2
3
20
Реакции
2 0 0
#17
Вот не давно сделал по рандому в панораму доты в файле team_select вставлял кнопку и получилось
Я изначально понял вашу проблему не правильно. Ну, не суть, в общем, за расположение слоев отвечает property z-index (z-index : integer_num;), по дефлоту у элементов z-index стоит 0, чем больше число, тем выше слой(отображается поверх тех, у которых число меньше). Но, даже прописав максимальный доступный слой, кнопка всё равно оказывалась ниже. Либо этот элемент занимает всегда самый верхний слой, либо он просто подгружается из кода поверх всей UI , скорее всего 2е. В общем, делайте левее вашу кнопку, не представляю как сделать её в дефолтном окне выбра команды. Ну а если она вам очень сильно нужна сделайте свой выбор команды и вкиньте эту кнопку туда. забейте, я слепой, бывает.
 
Последнее редактирование:
20 Дек 2016
505
66
28
10
Проект
DI:LS
Реакции
84 0 0
#18
А о чем он по-вашему только что написал? За панель с выбором команды отвечает отдельный файл, который хранится в исходниках доты.
Он вписал туда то, что надо и проблема, как я понял, решилась.
 

rosomaxa12

Пользователь
24 Авг 2018
41
0
6
23
Проект
colosseum arena
Реакции
0 0 0
#19
Создал кнопку.Все работает только не могу никак изменить расположение

Менял тут все что угодно но картинка вверху лева

flow-children: up;
horizontal-align: right;
vertical-align: down;
position: 0px 0px 0px;
 

Thunder Lane

Активный
30 Сен 2018
81
10
8
19
Проект
Thunder's COT RPG
Реакции
11 0 0
#20
Создал кнопку.Все работает только не могу никак изменить расположение

Менял тут все что угодно но картинка вверху лева

flow-children: up;
horizontal-align: right;
vertical-align: down;
position: 0px 0px 0px;
Смотри , включи карту с помощью hammer editor потом на стадии выбора команды зайди в неопределившиеся и потом меняй цифры в positon (например моя кнопка с ссылкой на дискорд в такой позиции position: 978px 350px 0px; )
 
Реклама:
Реклама: