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

Дикий Пёс

Друзья CG
28 Июн 2017
411
96
Проект
Petri Reborn
Здесь я опишу несколько вариантов различной кастомизации загрузочного экрана. Это вроде мой второй гуид, так что могу где-то допустить ошибку, уж сорри, но тапком кинуть можно.

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

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

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

Что эта штука делает
Это в 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 );
}
}

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

034uLsYfPmA.jpg
 
Последнее редактирование:

I_GRIN_I

Друзья CG
15 Мар 2016
1,335
105
Дикий Пёс, зачем танцы с бубном при добавлении иконки спелла? Есть класс панельки, называется DOTAAbilityImage
 

Дикий Пёс

Друзья CG
28 Июн 2017
411
96
Проект
Petri Reborn
I_GRIN_I, Я же писал, что этот способ не всегда работает с кастомными иконками
 

destructioN

Пользователь
16 Сен 2018
68
0
Проект
Great Labyrinth
Дайте инфу, где находится custom_loading_screen.xml ?
 

Thunder Lane

Активный
30 Сен 2018
87
16
Проект
Thunder's COT RPG
После добавления кнопки на группу вк вылезла такая ошибка , как исправить и в чем проблема ?
 

Вложения

  • error.png
    error.png
    58.4 KB · Просмотры: 56

Thunder Lane

Активный
30 Сен 2018
87
16
Проект
Thunder's COT RPG
Всё я разобрался , спасибо , но было бы хорошо добавить пояснение что надо внутрь скобок вставлять код , а я отдельно делал .
 

Thunder Lane

Активный
30 Сен 2018
87
16
Проект
Thunder's COT RPG
А как сделать что бы баннер с ссылкой был над выбором пика , а не под ?
 

Вложения

  • хелп.png
    хелп.png
    253.8 KB · Просмотры: 82

LAPKI

Продвинутый
26 Окт 2018
271
61
А как сделать что бы баннер с ссылкой был над выбором пика , а не под ?
XMLку с баннером бы приклепляли и стиль элемента, а так, попробуйте с стилями поиграться(.css файл), а именно с position , ну или с align
 

LAPKI

Продвинутый
26 Окт 2018
271
61
Во первых, если вам нужна вот эта вот часть в стилях
#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
87
16
Проект
Thunder's COT RPG
Во первых, если вам нужна вот эта вот часть в стилях
#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 (выше я подписал как это работает). Лень переписывать ваши файлы и корректировать под вас, так что я дал мини-объяснение.

Жалко только что моя панелька уже на нужном месте , просто её на половину перекрывает панелька пика команды
 

Вложения

  • abb96f046d1fc75bb649d3759b720546.jpg
    abb96f046d1fc75bb649d3759b720546.jpg
    34.5 KB · Просмотры: 4
20 Дек 2016
892
170
Жалко только что моя панелька уже на нужном месте , просто её на половину перекрывает панелька пика команды
А зачем ты пытаешься налепить баннер на панель пика из файла лоадскрина, который полностью рисуется перед этой панелью? Скопируй xml прегейма для кастомок (он где-то есть в файлах доты) и добавляй баннер туда (не забудь соответствующий худ в манифесте прописать).
Либо вообще в js баннер создавать, если умеешь, но при этом лень возиться с xml.
А еще можешь просто баннер влево переместить..
 

Thunder Lane

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

Вот не давно сделал по рандому в панораму доты в файле team_select вставлял кнопку и получилось
 

LAPKI

Продвинутый
26 Окт 2018
271
61
Вот не давно сделал по рандому в панораму доты в файле team_select вставлял кнопку и получилось
Я изначально понял вашу проблему не правильно. Ну, не суть, в общем, за расположение слоев отвечает property z-index (z-index : integer_num;), по дефлоту у элементов z-index стоит 0, чем больше число, тем выше слой(отображается поверх тех, у которых число меньше). Но, даже прописав максимальный доступный слой, кнопка всё равно оказывалась ниже. Либо этот элемент занимает всегда самый верхний слой, либо он просто подгружается из кода поверх всей UI , скорее всего 2е. В общем, делайте левее вашу кнопку, не представляю как сделать её в дефолтном окне выбра команды. Ну а если она вам очень сильно нужна сделайте свой выбор команды и вкиньте эту кнопку туда. забейте, я слепой, бывает.
 
Последнее редактирование:
20 Дек 2016
892
170
А о чем он по-вашему только что написал? За панель с выбором команды отвечает отдельный файл, который хранится в исходниках доты.
Он вписал туда то, что надо и проблема, как я понял, решилась.
 

rosomaxa12

Активный
24 Авг 2018
72
2
Проект
colosseum
Создал кнопку.Все работает только не могу никак изменить расположение

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

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

Thunder Lane

Активный
30 Сен 2018
87
16
Проект
Thunder's COT RPG
Создал кнопку.Все работает только не могу никак изменить расположение

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

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

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