Редактирование:Введение в GUI

<div class="mw-parser-output"><p>Для создания GUI (графический интерфейс пользователя) в Inner Core предусмотрены огромные возможности, которые позволяют не только создавать сложный интерфейс в стиле MCPE (и не только), но и эффективно интегрировать его с остальными игровыми элементами, которые добавляются модами с помощью контейнеров.
</p>
<h3> Единицы измерения </h3>
<p>Все размеры и координаты в интерфейсе задаются в юнитах, где 1 юнит это 1/1000 от ширины окна, в котором создается интерфейс. Если юниты используются для задания позиции и размера окна, то 1 юнит составляет 1/1000 от ширины экрана (как и в случае, когда окно открыто на весь экран).
</p>
<h3> Параметры Элементов </h3>
<p><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">
//Частые параметры
type: &quot;тип_элемента&quot; - задает тип элемента.
x: число - положение элемента по горизонтали.
y: число - положение элемента по вертикали.
scale: число - сколько юнитов приходится на 1 пиксель текстуры, если этот параметр не указан, он будет равен 1.
bitmap: &quot;текстура&quot; - задает текстуру элементу.
//Для других элементов(частный случай)
text: &quot;текст&quot;- задает текст элементу.
color: цвет - задает цвет,
 font: шрифт_текста- задает параметры шрифта, имеет следующий вид:
 {color: цвет, shadow: тень(число от 0 до 1), size: размер(в юнитах)}
bg: &quot;текстура&quot; - задает текстуру фона
bitmap2: &quot;текстура&quot; - аналогично.
width: число - ширина элемента.
height: число - высота элемента.

</syntaxhighlight></pre>
</p>
<h3> Текстуры и цвет </h3>
<p>Текстуры интерфейса, которые находятся в папке gui вашего мода, будут загруженны и доступны под именем файла без расширения: "gui/slot.png" будет загружен как "slot". Если в папке gui у вас есть папка и в ней картинка к который вы хотите обратиться то вместо / надо использовать точку, например: папка gui/gui1/image.png - обращение gui1.image
Также возможно использование объекта <a href="https://developer.android.com/reference/android/graphics/Bitmap" alt="https://developer.android.com/reference/android/graphics/Bitmap" title="https://developer.android.com/reference/android/graphics/Bitmap">Bitmap </a>вместо имени файла, если возникает такая необходимость.
</p><p>Цвет задается с помощью метода класса android.api.android.graphics.Color.rgb(r, g, b) - где r, g и b - красная, зеленая и синяя составляющие цвета от 0 до 255 каждая.
</p><p>Фонт текста задается как объект с 3 значениями: {size: ..., color: ..., shadow: ...}, где size - размер текста, color - цвет, shadow - тень со значением от 0 до 1.&#160;
</p><p>Текстурой рамки является текстура размера 16x16, изображающая нужную рамку самого маленького размера, которая будет потом растянута до любых размеров.
&lt;/div&gt;
</p>
<h3> Объект описания </h3>
<p>Любой интерфейс имеет объект описания, позволяющий задать данный интерфейс и динамично изменять его, меняя этот объект, пока интерфейс открыт. Объект описания любого типа имеет значения drawing (массив) и elements (объект), которые задают отрисовку фона и элементы соответственно. Их изменение из любого места ведет к динамичному изменению интерфейса, если он открыт. Т.е если вы изменените параметры какого-то элемента или команды отрисовки, то интерфейс изменится в соответствии с вашими изменениями.
</p>
<h3> Отрисовка элементов на фоне </h3>
<p>Элементы отрисовки задаются в объекте описания в массиве drawing и отвечают за отрисовку фона интерфейса.
Стоит учесть что каждый элемент будет накладываться послойно(т.е 2й элемент будет сверху 1го и тд).
</p>
<h4> Формат: </h4>
<p><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">drawing: [
     {/* параметры элемента 1 */},
     {/* параметры элемента 2 */},
     {/* параметры элемента 3 */},
     //....
]</syntaxhighlight></pre>
</p>
<h4> Элементы отрисовки: </h4>
<p><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">
 /*Background*/ {type: &quot;background&quot;, color: цвет}
 /*Bitmap*/ {type: &quot;bitmap&quot;, bitmap: &quot;текстура&quot;, x: число, y: число, scale: число}
 /*Frame*/ {type: &quot;frame&quot;, x: число, y: число, width: число, height: число, bitmap: &quot;текстура_рамки&quot;, color: цвет, sides: bool,  scale: число}
 /*Text*/ {type: &quot;text&quot;, text: &quot;текст&quot;, x: число, y: число, font: шрифт_текста}
 /*Line*/ {type: &quot;line&quot;, x1: число, y1: число, x2: число, y2: число, width: число, color: цвет}
</syntaxhighlight></pre>
<i><b>Background</b></i> Заполняет весь фон указанным цветом.<br />
<i><b>Bitmap</b></i> Отрисовывает данную текстуру на данных координатах.<br />
<i><b>Frame</b></i> Отрисовывает рамку данного размера на данных координатах.<br />
<i><b>Text</b></i> Отрисовывает данный текст на данных координатах с данным шрифтом.<br />
<i><b>Line</b></i> Отрисовывает линию от x1 и y1 до x2 и y2. width - толщина линии в юнитах, по-умолчанию 1, color - цвет линии, по-умолчанию черный.<br />
</p>
<h3> Элементы </h3>
<p>Элементы задаются в объекте описания в объекте elements, каждый элемент должен иметь уникальное имя. По этим именам с ними можно будет взаимодействовать позже.
</p>
<h4> Формат: </h4>
<p><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">elements: {
     &quot;name1&quot;: {/* элемент 1 */},
     &quot;name2&quot;: {/* элемент 2 */},
     &quot;name3&quot;: {/* элемент 3 */},
     //....
}</syntaxhighlight></pre>
</p>
<h4> Объект функций клика </h4>
<div>Такой объект используется в некоторых элементах, например в кнопках, чтобы определить действие при нажатии.</div> 
<p>Формат объекта:
<pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">{
     onClick: function(position, container, tileEntity, window, canvas, scale){ 
          // если задан, задает функцию короткого нажатия
     },
     onLongClick: function(position, container, tileEntity, window, canvas, scale){
          // если задан, задает функцию долгого нажатия
     }
     //возвращаемые параметры
     //position - возвращает позицию касания
     // container - контейнер, для которого открыт данный интерфейс
     // tileEntity - если интерфейс открыт для какого то tile entity, то передаст его, иначе null
     //window - возвращает окно с которого было воспроизведено нажатие
     //canvas - возвращает канвас ??
     //scale размер элемента ??
}</syntaxhighlight></pre>
</p>
<h4>Стандартные элементы:</h4>
<ul>
	<li><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">{type: &quot;slot&quot;, x: число, y: число, size: число, isValid: function, visual: bool, bitmap: &quot;текстура&quot;, clicker: объект функций клика, needClean: bool, isTransparentBackground: bool}</syntaxhighlight></pre>- создает слот размера size, если параметр visual задан и равен true, то слот не может быть выделен и из него ничего нельзя забрать, если clicker задан, то стандартные функции клика будут заменены на определенные в нем, если isTransparentBackground или needClean равняется true, то включается прозрачность текстуры слота. isValid - проверка соответствия фильтру который вы создаете, содержит id, count, data. функция isValid: function(id, count, data){}</li>
	<li><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">{type: &quot;invSlot&quot;, x: число, y: число, size: число, index: число, bitmap: &quot;текстура&quot;}</syntaxhighlight></pre> - создает слот с привзякой к слоту инвентаря - слот инвентаря размера size, синхронизированный со слотом инвентаря с индексом index (от 9 до 45, слоты 0-8 - хотбар)</li>
	<li><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">{type: &quot;button&quot;, x: число, y: число, bitmap: &quot;текстура&quot;, bitmap2: &quot;текстура&quot;, scale: число, clicker: объект функций клика}</syntaxhighlight></pre> - создает кнопку, функции клика будут вызываться при нажатии на кнопку, если задан bitmap2, то при нажатии кнопку изменит временно текстуру на него. <br /></li>
	<li><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">{type: &quot;closeButton&quot;, x: число, y: число, global: лог.значение, bitmap: &quot;текстура&quot;, bitmap2: &quot;текстура&quot;, scale: число}</syntaxhighlight></pre> - создает кнопку закрытия окна, если параметр global равен true, то кнопка закроет всю группу окон, а не только данное окно.</li>
	<li><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">{type: &quot;scale&quot;, x: число, y: число, direction: число, bitmap: &quot;текстура&quot;, scale: число, invert: bool, overlay: &quot;текстура&quot;, overlayScale: число, overlayOffset: {x: число, y: число}}</syntaxhighlight></pre> - создает шкалу в направлении direction, value значение от 0 до 1 - заполненность шкалы(для тестов). Если invert задан и равен true, то позиция вырезки из текстуры будет инвертирована, что создаст видимость того, что шкала как бы выдвигается, а не заполняется.
overlay - если задан, накладывает на шкалу дополнительную текстуру, которая перекрывает ее.
overlayScale - параметр scale для перекрытия.
overlayOffset: {x: , y: } - если задан, задает позицию перекрытия, относительно позиции шкалы.

	Направления:
	<ul>
		<li>0 - право</li>
		<li>1 - верх</li>
		<li>2 - лево</li>
		<li>3 - низ</li>
	</ul>
	</li>
	<li><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">{type: &quot;text&quot;, x: число, y: число, width: число, height: число, multiline: bool, format: bool, formatMaxCharsPerLine: число, text: &quot;текст&quot;, font: шрифт_текста}</syntaxhighlight></pre> - создает динамичный текст.</li>
	<li><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">{type: &quot;image&quot;, x: число, y: число, bitmap: &quot;текстура&quot;, scale: число, overlay: &quot;текстура&quot;, overlayScale: число, overlayOffset: {x: число, y: число}, clicker: объект функций клика}</syntaxhighlight></pre> - создает динамичную картинку.</li>
        <li><pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">{type: &quot;scroll&quot;, x: число, y: число, length: число, min: число, max: число, isInt: true, value: число}</syntaxhighlight></pre> - создает динамичный слайдер с минимальным значением и максимальным, также текущим значением по умолчанию равное value.</li>
</ul>
<h3> Стилизация </h3>
<p>Кроме drawing и elements в объекте описания можно определить объект стилизации интерфейса для изменения стандартных текстур элементов.
</p><p>Если какое-то из нижеприведённых значений будет указано в объекте стилизации, оно заменит стандартый параметр.
<pre class="fck_mw_syntaxhighlight"><syntaxhighlight lang="Javascript">params: {
     slot: &quot;текстура слота&quot;,
     invSlot: &quot;текстура слота инвентаря&quot;,
     frame: &quot;текстура обычной рамки&quot;,
     selection: &quot;текстура выделения слота&quot;,
     closeButton: &quot;текстура кнопки закрытия&quot;,
     closeButton2: &quot;текстура нажатой кнопки закрытия&quot;,
}</syntaxhighlight></pre>
</p>
<div class="mw-parser-output">
<h3> Типы интерфейса </h3>
<p>Интерфейсы бывают 3 типов: <a href="InnerCore%2F%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B2%20GUI%2F%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B9%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81">Стандартный</a>, <a href="InnerCore%2F%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B2%20GUI%2F%D0%9E%D0%B4%D0%BD%D0%BE%D0%BE%D0%BA%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81">Однооконный</a> и <a href="InnerCore%2F%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B2%20GUI%2F%D0%9C%D0%BD%D0%BE%D0%B3%D0%BE%D0%BE%D0%BA%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81">Многооконный</a>. Объект интерфейса во всех этих случаев создается как объект класса одного из типов, после создания такой объект класса может быть настроен и открыт для любого контейнера.
</p><p>Любой интерфейс может быть протестирован с помощью функции UI.testUI(объект интерфейса);
</p>
</div>
</div>