Взгляните на команду, несомненно разработанную выпускником CS
Как выпускник факультета компьютерных наук, я начинаю понимать, что вижу мир иначе, чем большинство людей. И время от времени я натыкаюсь на команду, настолько загадочную, что тихонько думаю про себя: «Она определенно была разработана другим выпускником CS».
Одна из таких команд - SKWarpGeometry
в SpriteKit. Даже страница документации Apple по этой теме была создана выпускником CS. Я знаю это, потому что это тоже несколько непроницаемо. Это отличная статья на эту тему.
Присоединяйтесь ко мне в поисках, чтобы выяснить, как эта штука работает и как ее использовать.
Путешествие
Некоторое время назад я написал несколько статей о кривых Безье:
В первом я собрал приложение, чтобы помочь читателям разобраться в математических формулах, используемых в указанных кривых. Это была демонстрационная программа, которая позволяла им динамически изменять параметры, необходимые для построения кривой Безье.
Это был интересный способ попытаться понять, что происходит, поэтому я решил создать простую программу, которая будет делать то же самое с SKWarpGeometry
. Я надеялся, что это также будет отличным примером использования превосходных возможностей SwiftUI в области компоновки со SpriteKit, хотя это не совсем так.
Чужие иероглифы
Хорошо, давайте начнем с этого анимированного GIF, который показывает самую простую матрицу, которая у вас есть с геометрией деформации.
У вас есть 16 переменных для изменения основной формы квадрата с помощью набора команд warp
. Кнопки - это SwiftUI, а центральная часть - SpriteKit. Я использую Combine PassThroughSubject
, чтобы связать две платформы вместе. Код преобразований выглядит так. Значения векторов tL1
, tL2
и т.д. начинаются так же, как sourcePositions
.
Демонстрационное приложение работает так: у вас есть исходный вектор, который выглядит как одна из пар (source
или destin
), показанных здесь.
source = vector_float2(0.0, 1.0) destin = vector_float2(1.0, 0.0)
У вас есть восемь векторов или 16 чисел с плавающей запятой, которые вы можете изменить.
Когда я нажимаю кнопку с фигурой на ней, команда warp
принимает одно из этих значений и добавляет или вычитает к нему 0,1. Затем это применяется и преобразуется в новую форму. Глядя на это, я думаю об инопланетном алфавите. Изменение всего одного поплавка на 0,5 в наших восьми парах возвращает уникальную форму. Еще лучше поменять два поплавка. Действительно, если я объединю две трансформации, у меня наверняка будет достаточно вариаций, чтобы построить инопланетный алфавит.
Следующие шаги
Теперь, когда вы понимаете основную концепцию, давайте перейдем к следующему уровню. В последней демонстрационной программе используется сетка 2x2. Но ваша сетка не обязательно должна быть квадратной. Это может быть 3x2, 4x3 и т. Д. Что, возможно, немного менее очевидно (по крайней мере для меня), так это исходные значения, поэтому я написал этот небольшой фрагмент кода, чтобы выяснить это:
Давайте создадим вторую демонстрационную программу, которая даст вам возможность использовать матрицу любого размера. Эта задача кажется проще, чем есть на самом деле. Я использую его здесь, чтобы создать инопланетную букву X.
Перед вами узел спрайта, состоящий из простой текстуры. Впоследствии я сопоставил его с геометрией деформации, разрезав его на 25 векторов. Вы можете видеть векторы с белыми точками. Когда я нажимаю на точку, я получаю возможность изменить значение исходной / целевой карты. Вы видите значение индекса вектора, которое я выбираю в середине, с его значениями, отображаемыми в степперах. Я нажимаю на разные векторы и медленно, но верно меняю карту назначения, чтобы построить букву, которую вы видите постепенно.
Это отличный инструмент для понимания того, как это работает. Почему я так поступил? Потому что:
- Мне нужен был дизайн рулевых поверхностей, который можно было бы расширить и который был бы менее проработанным, чем предыдущий. Сетка имела наибольший смысл.
- Мне нужно было средство для изменения значений в векторах, чтобы проверить эффект изменений. Я остановился на паре степперов в моем интерфейсе SwiftUI. Я пытался сделать это с помощью
drag
жестов, но это было… некрасиво. - Я хотел использовать два
SKScenes
, один для элементов управления, а другой для управляемого спрайта. Я попробовал кнопки SwiftUI, но после некоторых тестов остановился на секундуSKScene
. Мне нужно было настроить непрозрачность верхней сцены, чтобы она полностью не закрывала первую. - Наконец, поскольку я начал деформировать свою фигуру внутри себя, а не только по сторонам, мне нужно было создать узел спрайта с текстурой. Без него изменения некоторых векторов просто не были видны.
Вы можете начать понимать сложность того, как это сделать правильно. В этом примере у меня есть 25 векторов, каждый из которых имеет две точки, значения которых могут как увеличиваться, так и уменьшаться. Скопируйте демонстрационный код в свой собственный проект и поэкспериментируйте. Вы скоро поймете, что я имею в виду.
Будущее
Выглядит неплохо, но как бы вы могли его улучшить?
- Вы можете попробовать раскрасить узел спрайта одним или несколькими градиентами. См. Мою статью, в которой подробно описывается, как это сделать.
- Вы можете добавить кнопку для записи последовательности, чтобы вы могли ее воспроизвести.
- Если вы записываете, вы можете добавить кнопку для сохранения последовательности в формате XML или XLIST.
- А если вы сохраняете последовательности, вам также понадобится кнопка загрузки, чтобы перечитать предыдущие дизайны.
- Я здесь ничего не делал с ротациями, но потенциал тоже большой. Возможно, будет интересен набор в SwiftUI для этого. Очевидно, вам также необходимо записать их в свои последовательности. Я написал статью о поворотах в 2D и 3D.
Больше SpriteKit
Если вы новичок в SpriteKit, вы найдете множество статей по этой теме. Некоторые из моих любимых написаны @ Artturi Jalli и @ Marc J Vandehey:
Наконец, прежде чем я уйду, вот исходный код второго демонстрационного приложения:
На этом я подошел к концу статьи. Надеюсь, вам понравилось читать это так же, как мне понравилось писать. Не стесняйтесь искать более 150 моих статей на Medium, чтобы найти больше контента на Swift.