Моё первое самостоятельное iOS приложение на Unity: Карманные деньги за математику

Сразу скажу, что по 3D здесь мало, но зато есть о Unity, плюс небольшой рассказ и одна моя просьба 🙂 Потестируйте, пожалуйста, моё приложение и посоветуйте взглянуть на него всем знакомым родителям с детьми по пятый класс.

Если коротко, то года два назад я создал 2D iOS приложение для своей дочери (на движке Unity), чтобы мотивировать её заниматься английским. За каждое выученное слово полагалась награда в виде реальных денег. По сути, у неё был свой собственный электронный счёт на iPod-е, который она пополняла каждый раз, как изучала новое английское слово (за процессом обучения следило само приложение). Потом, когда ей нужны были деньги, она приходила ко мне с айподом и просила обналичить нужную ей сумму. Что я и делал: заходил в админку приложения и снимал со счёта сумму равную выплаченной наличными.

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

Но написать приложение для себя - это одно, а выпустить его для других родителей (и чтобы им было понятно как пользоваться без моих получасовых объяснений) - это совершенно другое. В общем, я решил по быстренькому переписать приложение по математике (поскольку оно было намного проще и веселее, чем приложение для изучения английского), так чтобы им могли пользоваться все.

Я подумал, что за недельку, ну от силы за месяц, управлюсь. Где-то так и вышло. Сегодня (спустя полгода) моё приложение Pocket Money: Math опубликовали в AppStore.

Кстати, если вы не сторонник платить детям деньги за что бы то ни было, то (как показали тесты на детях моих друзей) приложение затягивает детей решать примеры, даже в том случае, когда о деньгах им никто не сообщил 😉

Риг, скин и анимация 2D персонажа в Unity.

Ну а теперь бонус для тех, кто изучает Unity. Я расскажу немного о моём опыте создания, анимации и программирования 2D персонажа (на примере своего персонажа - копейка, он на заглавной картинке) в Unity.

После того, как Unity анонсировала покупку плагина Anima2D, я решил его испробовать. Всё оказалось очень просто (особенно, если вы знакомы с принципом сетапа 3D персонажей) и гибко.

Логика создания 2D персонажа.

1. Рисуете атлас с персонажем (текстура, где все части тела персонажа лежат отдельно).
2. Создаёте скелет.
3. Скините части тела к скелету.
4. Настраиваете колайдеры и поведение.

Атлас персонажа.

Атлас 2D персонажа выглядит так:

Важно, чтобы все части (даже одинаковые или симметричные были отдельно). Всё дело в том, что (если простым языком) под каждую часть тела создаётся плоский 3D объект, который и скинится потом к кости. Т.е. каждую нарисованную часть тела - вы должны представлять как отдельный ОБЪЕКТ, который нельзя сдублировать и использовать в другом месте. Если вы хотите продублировать глаз, то это нужно делать на текстуре, а не в движке.

После того, как вы нарисовали и импортировали атлас персонажа - вот настройки для импорта:

Поназывайте части тела по человечески, чтобы проще потом было работать с ними:

Иерархия персонажа.

И можно приступать к формированию иерархии персонажа:

1. Вначале вам нужно создать только выделенную синим часть иерархии из пустых объектов (просто чтобы красивая структура была)
2. Дальше заполняете ветку SpriteMeshes (оранжевую) просто перетягивая туда части тела из вашего атласа и двигаете их во вьюпорте, чтобы получить нужный вам вид персонажа.
3. Дальше в окне Hierarchy кликаете на каждой части тела правой кнопкой мышки (ПКМ) и выбираете 2D Object --> SpriteMesh, чтобы превратить вашу текстуру в 3D меш.

Если один объект спрятался за другим, то используете сортировочные слои, чтобы контролировать очерёдность отрисовки спрайтов (кто за кем должен прятаться):

Создаёте новый сортировочный слой (в моём случае Coin) и меняете цифру Order in Layer (чем больше значение, тем выше будет слой над другими слоями). Можно использовать и отрицательные значения.

После того, как вы довольны внешним видом персонажа, можно приступать к костям.

Скелет.

Чтобы создать первую корневую кость, нужно на закладке Hierarchy кликнуть ПКМ по пустому объекту Bones и выбрать 2D Object --> Bone. Далее двигаете кость куда хотите или крутите как хотите.

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

Чтобы кость была иерархически связана с предыдущей костью можно:

• либо создавать её, кликая по предыдущей кости,
• либо создавать где угодно, а потом на закладке Иерархии перетащить новую кость на какую-то старую кость.

Во вьюпорте вы сразу же увидите полупрозрачную связь между костьми.

Скин.

Чтобы привязать кость к SpriteMesh-объекту нужно:

1. Выбрать нужную часть тела и залочить инспектор - нажать маленький замочек (чтобы при выборе другого объекта, случайно не слетело данное выделение).

2. Перетянуть из Иерархии нужную кость в поле Set bones (возможно, появятся разные предупреждающие знаки - не обращайте внимания).

3. После того, как связь установлена, выделяете нужную часть тела и открываете SpriteMesh Editor (через меню Window --> Anima2D), где и происходит магия скининга.

4. Нажимая на кнопку Slice, вы сможете, по сути, редактировать 3D меш вашей части тела (с помощью ползунков).

5. А нажимая кнопку Bind - вы создаёте связь кость-мешу (скин).

Не забывайте нажимать кнопку Apply, чтобы применить ваши изменения.

Чтобы визуально увидеть, что нужная часть тела прискинилась к кости (после нажатия на кнопку Bind) нужно активировать галочку Overlay. Вы должны будете увидеть кость и меш, окрашенные в один цвет - красный (ну либо в два цвета, если вы ДВЕ кости прискиниваете к одному мешу, чтобы он красиво гнулся, как рука в локте, к примеру).

Чтобы было меньше глюков во время редактирования меша, нужно сначала отвязать кость (нажать кнопку Unbind), отредактировать, а потом привязать снова.

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

Анимация.

Чтобы эта копеечка-персонаж отрабатывал физику поведения (падала, ударялась, отскакивала), я навесил на пустой объект CoinCharacter круглый 2D колайдер и компонент Rigidbody 2D:

Недостатки:

• Каждый персонаж - это отдельный рендер проход. Т.е. если на экране будет 10 копеек (которые по идее используют одну и ту же текстуру/материал), то все они НЕ будут отрисовываться за один проход (автоматический batching не сработает).
• Даже если у персонажа есть одинаковые или зеркальные части, их нельзя переиспользовать. Т.е. нельзя, чтобы на текстуре был только один глаз. Нужно поместить на текстуру правый и левый глаза, даже если они абсолютно идентичны.

P.S. Кстати, осваивать движок Unity лучше всего со знанием (хотя бы элементарным) языка C#. В этом вам помогут курсы программирования c#, а написание своей игры или приложения на Unity даст вам бесценную практику, без которой ЛЮБОЕ знание бесполезно.