Взгляните на команду, несомненно разработанную выпускником 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.