Избранное Все заметки GitHub icon Мой Github Обо мне
11 заметок с тегом

интерфейс

Обновил Infinite Scroll

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

Теперь все ячейки могут быть любой высоты! Работает также быстро и с помощью одного скрипта.

Ссылка на Github

2018   android   ios   unity   интерфейс   проекты   разработка   с#

Двойной слайдер на Unity

Понадобилось тут сделать двойной слайдер... И я не придумал ничего проще, чем использовать уже имеющиеся слайдеры, просто объединив два в один :)

Получилось как-то так:

Можно настраивать как и обычные слайдеры, также есть опция ограничения между ползунками, ну и выбор цвета, картинки для заполнителя между ними.

Скрипт
Структура префаба

Исходники на Github

2018   unity   интерфейс   разработка   с#

Unity Mobile Input

Выложил на Github плагин нативного ввода для мобильных устройств. Это небольшая надстройка над стандартным Unity InputField UI. Работает на iOS и Android.

Зачем он нужен:

  1. Нативное поле ввода и клавиатура
  2. Отсутствует раздражающее дополнительное поле над клавиатурой в Android
  3. Для iOS можно добавить кнопку «Готово»
  4. Настройка кнопки Return для клавиатуры: стандартная, далее, готово, поиск
  5. Для работы нужно просто повестить скрипт MobileInput на родной InputField UI

До этого, было временное решение, которое не обладало необходимыми опциями, да и ошибки были. Собственно, на то оно и временное :) Но в Unity до сих пор нет таких возможностей для ввода, поэтому пришлось сделать такой плагин.

В моей версии исправлены ошибки и отрефакторен почти весь код от старого и неподдерживаемого плагина UnityNativeEdit.

Исходники на Github

2018   android   git   ios   plugin   unity   интерфейс   проекты

Автоподстановка полей в UI

Нашёл интересное решение, которое сохранит дорогое время разработки, взяв на себя рутинные операции по присвоению объектов со сцены полям класса. Как-то так.

Например: вы сделали новый объект интерфейса, создали для него класс, добавили соответствующие поля и потом ручками в инспекторе Unity присвоили текстовое поле к Text и кнопку к Button.

А если таких полей 10-15? И окошек столько же... Я думаю мысль понятна.

Вот как раз для таких дел этот скрипт и есть. Только делает он всё сам. Работает это так:

using UnityEngine;
using UnityEngine.UI;

public class DialogWindow : AutoReferencer<DialogWindow> {
   public Text DialogLabel;
   public Button ConfirmButton;
}
Главное, чтобы названия полей и имена объектов совпадали. И типы соответственно.

Ну и сам скрипт. Конечно, вряд ли есть возможность использовать его везде — всё-таки архитектура приложения у всех отличается, однако, полезность какая-то в нём есть.

using System.Linq;
using UnityEngine;

public class AutoReferencer<T> : MonoBehaviour where T : AutoReferencer<T> {

   #if UNITY_EDITOR
   // Этот метод вызывается один раз, когда мы добавляем компонент на объект
   protected new virtual void Reset()
   {
       // Магия рефлексии
       // Для каждого поля в классе/компоненте, мы ищем только пустые или null
       foreach (var field in typeof(T).GetFields().Where(field => field.GetValue(this) == null))
       {
           // Теперь ищем объект с таким же именем
           Transform obj;
           if (transform.name == field.Name)
           {
               obj = transform;
           }
           else
           {
               obj = transform.Find(field.Name); // Или нужно сделать рекурсию, чтобы пойти глубже по иерархии
           }

           // Если находим объект с таким же именем как и поле - пытаемся присвоить его к этому полю
           if (obj!=null)
           {
               field.SetValue(this, obj.GetComponent(field.FieldType));
           }
       }
   }
   #endif
}

Подглядел на The Knights of Unity ;)

2017   unity   интерфейс   разработка   с#

Emoji в Unity

Обновлено 1.03.2017
TextMeshPro теперь входит в состав Unity и стал бесплатным!

Как добавить поддержку эмоджи в Unity? К сожалению, решения из коробки нет. Но есть самый лучший ассет для работы с текстом Text Mesh Pro. Да, он не дешевый, но он этого стоит. Может когда-нибудь Unity его купит, и это будет стандартным решением, как они сделали с Anima2D.

В версии TMP, которая скоро должна пойти в релиз, разработчик добавил поддержку Emoji. Точнее, можно делать свои атласы, юникод эмоджи будет автоматически заменяться на картинку. Чтобы были доступны все эмоджи, нужен большой атлас. Я использовал EmojiOne. Также понадобится одна отличная программа — TexturePacker и расширение для Unity TexturePacker Importer.

  1. Загружаем все эмоджи в программу и экспортируем в формат Unity — Texture2D sprite sheet.
  2. После этого меняем Data format на JSON (Array) и делаем экспорт еще раз.
  3. Теперь полученные три файла: Emoji.png, Emoji.json и Emoji.tpsheet загружаем в Unity.

Осталось с помощью TMP Sprite Importer сгенерировать атлас для Text Mesh Pro. В результате, на iOS и Android можно использовать эмоджи.

2017   android   ios   unity   интерфейс

Как убрать InputBox в Android над клавиатурой

Обновлено 04.10.2018
Моя версия «unity mobile input» для iOS и Android.

Если вы не знаете, о чем речь, то эта заметка не для вас :)

Другие же, наверняка гуглили «unity hide mobile input». И не находили стандартного решения — потому что его нет. Все написано в документации:

Note: Android: only TouchScreenKeyboard.visible input field is supported, hence this value is always false.

Конечно, пользовательский ввод в играх нужно сводить к нулю, но бывают исключения. Ради такого исключения, чтобы избавиться от панели над клавиатурой, я сделал этот плагин.

Идея в том, что на экран добавляется нативное невидимое поле ввода откуда потом забирается текст. Все просто. Да, это не изящное решение, а грязный хак, но он работает — верхнего поля ввода нет и появляется стандартная клавиатура Android или iOS. Если к этому добавить ассет Text Mesh Pro, то будут еще и эмоджи. Да, еще не видно курсора. Я думаю над этим... :)

Если есть более красивое решение — киньте ссылку :)

Ссылка на Github

2016   android   ios   plugin   unity   интерфейс   разработка

Unity UI data binding

Как отделить логику от интерфейса в Unity, чтобы не получилась каша?

Есть давно устоявшиеся паттерны и «best practices». Хотя для Unity последних не так уж и много, как например для node.js. Можно использовать эвенты, делегаты, обсерверы, вот это все, если говорить об использовании C# в Unity. Есть и готовые ассеты в Asset Store.

В общем, это то, что я начал писать сам, но вовремя нашел почти готовое решение, которое меня устраивает. После небольшого допиливания будет вообще супер — библиотека для простого биндинга в Unity.

Работает все очень просто:

  1. Импортируете DataBind.unitypackage в Unity
  2. Добавляете скрипт DataBindContext к родительскому объекту
  3. Добавляете скрипт Bind[нужный тип] к основным объектам
  4. Вызываете dataBindContext[key] = value для биндинга
  5. Все. Присвоили значение переменной — оно поменялось в UI Text, например.

Можно связывать любые параметры, использовать готовые биндинги которые идут в пакете, можно написать свой. И все достаточно просто и не ресурсоемко.

Ссылка на Github

Обновление 25.01.2017
У Leopotam «прокачанная» версия биндинга https://github.com/Leopotam/LeopotamGroupLibraryUnity/tree/master/SystemUi/DataBinding

2016   unity   интерфейс   разработка   ссылки

Использование альфа маски

Обновлено 19.10.2018
Эта маска не работает внутри стандартной маски и RectMask2D :(

В Unity стандартная маска (компонент Mask) работает без альфа канала, т. е. красивые «мягкие» края сделать не получится. Особенно это актуально, если у вас маска сложной формы.

Но тут нас спасет очень хорошая библиотека скриптов от Simon Jackson — Unity UI Extensions. И один из скриптов из этой библиотеки как раз и позволяет делать «soft smooth ui alpha mask».

Нужно скопировать в свой проект скрипт SoftMaskScript.cs и шейдер с таким же именем. И кинуть скрипт на UI Image.

Получим такой результат. Намного лучше чем стандартная маска.

Да и вообще, в этой либе много других интересных и полезных вещей, рекомендую.

2016   unity   графика   интерфейс   ссылки
2016   unity   интерфейс   расширение   ссылки

Бесконечный скроллинг в Unity

Обновлено 07.09.2018
Теперь можно использовать ячейки разной высоты!
Добавил новые демки

Когда делаешь игру под мобильную платформу, пусть Android или iOS, иногда хочется использовать стандартные для этой платформы компоненты, потому что они проверены, оптимизированы и быстро работают. Например, списки. Кто делал в Unity интерфейс с большим количеством прокручивающихся элементов в Scrollrect, наверняка замечали, что после определенного количества, вся эта конструкция начинает притормаживать. Наиболее оптимально использовать т. н. data driving подход, когда количество видимых элементов не меняется, а данные подгружаются динамически в нужную ячейку.

Для одного проекта понадобилось сделать списки друзей и лидеров. Количество пользователей сотни тысяч. Естественно, создавать такое количество ячеек было бы неверно. Быстрый поиск показал несколько рабочих вариантов, но после тестов на реальных устройствах, при быстрых прокрутках лаги все равно были заметны и еще по ряду причин не подошли. Последний найденый вариант лег в основу и после доработок, отлично функционирует.

Была сделана такая знакомая мобильным разработчикам функция, как pull-to-refresh, также, ячейки можно настраивать как угодно под ваш проект, нужное количество создается автоматически в зависимости от высоты экрана. Единственное ограничение — высота ячейки не динамическая.

Использовать очень легко — все делает один скрипт, вещаем его на Scrollview настраиваем параметры и коллбеки и все. Демо есть. Если будут какие-то вопросы и пожелания, не стесняйтесь писать. Удачи!

Ссылка на Github

2016   unity   интерфейс   разработка
Ранее Ctrl + ↓