#mopsicus: заметки с тегом интерфейс

Градиентный текст в Unity

Игорь Лопатин — Tue, 12 May 2020 15:48:53 +0300

В пакете TextMeshPro уже есть встроенная градиентная заливка, но для моей задачи она не совсем подходила, потому что работает для каждого символа отдельно. Выглядит это так:

Пришлось написать небольшой скрипт, который вешается на текстовый компонент, берёт цвета градиента из свойств и применяет его для всего текста. Стало выглядеть так:

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

Исходник

Теперь будет гуглится по full text gradient unity :)

Анимации в UX

Игорь Лопатин — Wed, 02 Oct 2019 11:06:56 +0300

Отличная статья про использование анимаций в UX. Просто и понятно. Примеры того, как делать не надо. В общем, однозначно в закладки.

В догонку, есть старый сайтик с примерами функций плавности (easing).

Полезные ассеты и расширения #4

Игорь Лопатин — Wed, 27 Feb 2019 10:51:48 +0300

Hierarchy Icons

Позволяет быстро оценить и увидеть какие типы объектов находятся у вас на сцене и как они расположены в иерархии. Не нужно каждый раз смотреть в инспектор.

Selection History Navigator

Интересный ассет от автора предыдущего — позволяет быстро перемещаться по истории выделенных объектов. Есть хоткеи для Mac и Windows.

SoftMaskForUGUI

Да, снова «мягкая» альфа маска для UI :) Но этот бесплатный ассет примечателен тем, что работает внутри стандартной маски и поддерживает TextMeshPro.

ZombieObjectDetector

Ассет от Unity, позволяет диагностировать сцену и находить «зомби-объекты», которые где-то не очистились, зависли и не используются. Лог пишется в отдельный файл, который потом можно изучить.

Luna console free

Неплохой ассет мобильной консоли для дебага непосредственно на устройстве. Есть поиск, фильтры, копирование в буфер и отправка на почту, исходный код открыт.

Обновил Infinite Scroll

Игорь Лопатин — Fri, 07 Sep 2018 15:00:47 +0300

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

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

Ссылка на Github

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

Игорь Лопатин — Tue, 07 Aug 2018 14:25:59 +0300

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

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

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

Скрипт

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

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

Unity Mobile Input

Игорь Лопатин — Tue, 10 Apr 2018 11:31:43 +0300

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

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

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

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

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

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

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

Игорь Лопатин — Fri, 20 Oct 2017 00:26:36 +0300

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

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

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

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

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 ;)

Emoji в Unity

Игорь Лопатин — Tue, 07 Feb 2017 11:35:17 +0300

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

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

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

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

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

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

Игорь Лопатин — Fri, 30 Dec 2016 16:30:05 +0300

Обновлено 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

Unity UI data binding

Игорь Лопатин — Wed, 21 Dec 2016 10:47:19 +0300

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

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

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

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

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

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

Ссылка на Github

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

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

Игорь Лопатин — Mon, 21 Nov 2016 15:47:44 +0300

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

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

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

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

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

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

Раскрашиваем папки в Unity

Игорь Лопатин — Fri, 11 Nov 2016 14:39:30 +0300

Просто супер расширение для редактора Unity. Позволяет назначать папкам различные цвета. Очень удобно. Рекомендую!

https://github.com/PhannGor/unity3d-rainbow-folders

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

Игорь Лопатин — Mon, 29 Aug 2016 11:30:29 +0300

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

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

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

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

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

Ссылка на Github

Применение материала к нескольким объектам

Игорь Лопатин — Mon, 15 Aug 2016 12:48:11 +0300

На самом деле, заголовок не полностью отображает возможности этого скрипта — изменять можно не только материал, а вообще производить над объектами какие-либо манипуляции: изменение параметров, добавление компонентов, и т. д. Нужно лишь немного изменить код.

Суть в том, что когда сцена построена, а вам необходимо применить изменения к 30 объектам (или больше), то это может занять время. Конечно, нужно обязательно все делать через префабы, чтобы такие случаи свести к минимуму, но все же, ситуации бывают разные.

using UnityEngine;
using System;
using UnityEditor;
using UnityEngine.UI;
 
public class AssignMaterial : ScriptableWizard {
    public bool isRecursively =  true;
    public Material material;
    string label = "Select Game Objects";
    GameObject[] objects;
   
    void OnWizardUpdate () {
        helpString = label;
        isValid = (material != null);
    }
   
    void OnWizardCreate () {
        objects = Selection.gameObjects;
        foreach (GameObject go in objects){
            changeMaterial(go);
        }
    }
 
    void changeMaterial (GameObject go) {
        if (go.GetComponent<YOUR_COMPONENT> ()) {
            go.GetComponent< YOUR_COMPONENT> ().material = material;
        }
        if (isRecursively) {
            for (int i = 0; i < go.transform.childCount; i++) {
                changeMaterial(go.transform.GetChild(i).gameObject);
            }
        }
    }
 
    [MenuItem ("Custom/Assign Material", false, 4)]
    static void assignMaterial () {
        ScriptableWizard.DisplayWizard ("Assign Material", typeof(AssignMaterial), "Assign");
    }
}

Создав такой скрипт и положив его в папку Editor вы создадите свой пункт в главном меню Unity. Выбираете Custom → Assign Material и появляется окно применения материала. Выбираете нужный материал, а на сцене объекты к которым его применить и жмете Assign. Готово.

В данном примере, я применял новый материал к компоненту Image.

#mopsicus: заметки с тегом интерфейс

Градиентный текст в Unity

Градиент для каждой буквы

Градиент для каждой буквы

Градиент для всего текста

Градиент для всего текста

Анимации в UX

Полезные ассеты и расширения #4

Hierarchy Icons

Selection History Navigator

SoftMaskForUGUI

ZombieObjectDetector

Luna console free

Обновил Infinite Scroll

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

Unity Mobile Input

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

Emoji в Unity

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

Unity UI data binding

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

Раскрашиваем папки в Unity

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

Применение материала к нескольким объектам