Google I/O Extended | Состояние Flutter с поддержкой игр и выпуска версий для всех платформ

Привет всем, меня зовут Го Шуйю, автор книги "Практическое руководство по разработке приложений на Flutter" и ответственный за проекты серии GSY на GitHub. В рамках конференции Google I/O Extended я хочу рассказать вам о некоторых ключевых моментах, связанных с Flutter, представленных на последней конференции I/O.

На самом деле, для меня эта конференция имела особое значение, так как после неё я прошёл последнее собеседование в качестве специалиста по Dart/Flutter GDE, и мне удалось успешно пройти его. Это стало важной вехой в моей карьере. — Мои наблюдения о том, как стать GDE (Google Developer Expert)

Игры

Если говорить о ключевых моментах Flutter на конференции I/O, одним из них является официальная игра Flutter Pinball .

На самом деле это не первое взаимодействие Flutter с игровой отраслью:

• Unity имеет пакет плагинов для Flutter UIWidgets, который представляет собой пакет плагинов для Unity-редактора, помогающий разработчикам создавать, отлаживать и развертывать эффективные многоплатформенные приложения;
• Игра PUBG от Tencent использует некоторые элементы пользовательского интерфейса, разработанные с использованием Flutter;

Теперь документ полностью переведён и оформлен согласно правилам перевода.Исходя из того, что Flutter использует независимый от платформы движок рендеринга Skia, а способность Skia рендерить 2D графику на мобильных устройствах, веб-платформах и ПК уже давно достигла высокого уровня зрелости, Flutter можно рассматривать как 2D "игровой движок".

У Flutter всегда был Toolkit для создания игр, обычно игры можно разделить на две категории:

• Действия, такие как шутеры и гонки;
• Развлечения, такие как шахматы, карты, пазлы и стратегии;

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

Даже в официальном Toolkit есть инструменты, такие как google_mobile_ads, in_app_purchase, audioplayers, crashlytics и games_services, что позволяет заранее интегрировать рекламу и покупки внутри приложения.

Конечно, если вам требуется реализовать более сложные игровые сцены, такие как игра в пинбол пинбол, то возможно потребуется использовать стороннюю библиотеку Flame. Здесь GIF немного "тормозит", но при реальном использовании вы даже не заметите, что это игра, созданная с помощью Flutter Web.

Пинбол сам по себе основан на Flame SDK и является полнофункциональной игрой в пинбол, разработанной с использованием Flutter и Firebase.Flame предоставляет различные готовые к использованию функции для создания игр, такие как анимация, физика и детектор столкновений, и он также использует базовые возможности фреймворка Flutter, поэтому если вы разработчик Flutter, то у вас уже есть необходимые навыки для использования Flame для создания игр.

На самом деле, репозиторий Flame был создан ещё в 2017 году, и до этого момента были представлены примеры игр, созданных с его помощью. Однако официальное представление игры в пинбол во время конференции Google I/O стало своего рода рекомендацией для Flame.

Официальные примеры содержат демонстрацию работы камеры в игре. При нажатии на экран добавляется пицца, которую камера следует за объектом. В этом примере также показана цепочка событий, когда пицца сталкивается с доминошками, вызывая последовательность физических реакций.

class CameraExample extends DominoExample {
  static const String description = '''
    This example demonstrates the ability to follow components of a body using a camera. When the screen is tapped, pizza is added which the camera follows. Additionally, this is the same example with dominoes.
  ''';

  @override
  void onTapDown(TapDownInfo details) {
    final position = details.eventPosition.game;
    final pizza = Pizza(position);
    add(pizza);
    pizza.mounted.whenComplete(() => camera.followBodyMovement(pizza));
  }
}
```Кроме того, в 2020 году некоторые разработчики уже использовали Flutter & Flame для создания игр. Например, на платформе JiGuang [JiGuang](https://juejin.cn/post/6857049079000760334) в 2020 году была опубликована игра "Боевые танки" на основе Flame, которая представляет собой полностью открытый мини-проект.

![](http://img.cdn.guoshuyu.cn/20220528_未命名/image5.webp) Вернитесь к Pinball, и если вы посмотрите на код Pinball, то заметите, что он использует CanvasKit в Flutter Web для отрисовки, то есть реализован через WebAssembly + Skia.

![image-20220525101651021](http://img.cdn.guoshuyu.cn/20220528_未命名/image6.png)

Если вы знакомы с Flutter, то знаете, что по умолчанию Flutter Web использует CanvasKit для отображения UI на ПК, а на мобильных устройствах — Html. Однако, если вы используете Flame, то на мобильных устройствах будет использоваться CanvasKit тоже. **Это связано с тем, что только CanvasKit лучше соответствует игровым дизайнерским идеям и обеспечивает согласованность работы приложения**.

![image-20220525102914789](http://img.cdn.guoshuyu.cn/20220528_未命名/image7.png)

Однако это также приводит к проблеме медленной загрузки, так как можно заметить, что запуск pinball занимает около 3.6 секунды, что является одной из распространённых проблем при работе с Flutter Web и CanvasKit.

Основные различия между разработкой игр на Flutter и традиционных приложений заключаются в следующем:- Обычно в традиционных приложениях экран остаётся статичным до тех пор, пока не произойдёт событие или взаимодействие пользователя;
- В случае с играми всё наоборот — UI постоянно обновляется, состояние игры постоянно меняется;Поэтому в I/O Pinball игра использует цикл для реакции на положение и состояние шара на поле, такие как столкновение шара с объектами или выход шара за пределы поля.

```dart
@override
void update(double dt) {
  super.update(dt);
  final direction = -parent.body.linearVelocity.normalized();
  angle = math.atan2(direction.x, -direction.y);
  size = (_textureSize / 45) *
      parent.body.fixtures.first.shape.radius;
}

Кроме того, при создании I/O Pinball видно, что интерфейс имеет явно трехмерный эффект. Как же создать этот эффект, используя только двухмерные элементы?

На самом деле, это достигается путём сортировки компонентов и накладывания слоёв ресурсов, чтобы определить их позицию на экране, например, когда шар выпускается со склона, его уровень увеличивается, поэтому кажется, что он находится на вершине склона.dart /// Изменяет размер мяча и спрайта в зависимости от его положения на игровом поле. class BallScalingBehavior extends Component with ParentIsA<Ball> { @override void update(double dt) { super.update(dt); final boardHeight = BoardDimensions.bounds.height; const maxShrinkValue = BoardDimensions.perspectiveShrinkFactor; final standardizedYPosition = parent.body.position.y + (boardHeight / 2); final scaleFactor = maxShrinkValue + ((standardizedYPosition / boardHeight) * (1 - maxShrinkValue)); parent.body.fixtures.first.shape.radius = (Ball.size.x / 2) * scaleFactor; final ballSprite = parent.descendants().whereType<SpriteComponent>(); if (ballSprite.isNotEmpty) { ballSprite.single.scale.setValues(scaleFactor, scaleFactor); } } } На игровом поле бильярда есть некоторые элементы, такие как Android, Dash, Sparky и Chrome Dino, все они имеют анимационные эффекты.Для этих элементов используются спрайт-листы, содержащиеся в файлах с компонентом SpriteAnimationComponent. Для каждого элемента существует свой файл, который включает в себя изображения различных направлений, количество кадров в файле и время между кадрами.

Используя эти данные, компонент SpriteAnimationComponent внутри Flame циклически проходит через все изображения, что позволяет элементам выглядеть анимированными.

final spriteSheet = gameRef.images.fromCache(
  Assets.images.android.spaceship.animatronic.keyName,
);
const amountPerRow = 18;
const amountPerColumn = 4;
final textureSize = Vector2(
  spriteSheet.width / amountPerRow,
  spriteSheet.height / amountPerColumn,
);
size = textureSize / 10;
animation = SpriteAnimation.fromFrameData(
  spriteSheet,
  SpriteAnimationData.sequenced(
    amount: amountPerRow * amountPerColumn,
    amountPerRow: amountPerRow,
    stepTime: 1 / 24,
    textureSize: textureSize,
  ),
);

Наконец, библиотека Flame также включает в себя компонентный песочник, аналогичный библиотеке UI-компонентов, что является полезным инструментом при разработке игр, так как он позволяет разработчику отдельно тестировать каждый компонент игры и убедиться, что его внешний вид и поведение соответствуют ожидаемому до интеграции в игру.

Полная поддержка всех платформЕще одним важным моментом в Flutter 3.0 является стабилизация поддержки приложений для macOS и Linux, что стало значимым шагом для Flutter. Теперь благодаря Flutter 3.0 разработчики могут использовать один код для создания приложений для шести различных платформ.

С этого момента Flutter наконец получил полноценную поддержку всех платформ. Эта поддержка не ограничивается только добавлением соответствующего UI-рендера для каждой платформы: она включает новые модели ввода и взаимодействия, поддержку сборки и компиляции, доступность и локализацию, а также специфическую интеграцию для каждой платформы и многое другое. Цель команды Flutter — обеспечить разработчикам гибкость использования базовых операционных систем, одновременно максимизируя совместное использование UI и логики согласно выбору разработчика.> Например, в macOS теперь поддерживаются архитектуры Intel и Apple Silicon, предоставляется поддержка Universal Binary, что позволяет приложениям упаковывать исполняемые файлы для двух архитектур. Flutter использует поддержку Apple чипов в Dart, чтобы быстрее компилироваться на устройствах на базе M1 и поддерживать файлы Universal Binary для macOS.Замечание: Вместо https://link.juejin.cn/?target= использованы прямые ссылки на источники. На этот раз официальные представители I/O предоставили пример приложения от партнера Flutter — Superlist, которое является отличным образцом того, как Flutter реализует приложение для рабочего стола. Версию тестового приложения Superlist выпустили в день проведения I/O.

Superlist объединяет списки, задачи и свободноформатируемый контент в новые списки дел и личные планы, предоставляя возможности для совместной работы. При этом Superlist также является организатором открытого проекта super_editor, поэтому поддержка сообщества очень важна для Flutter.

Каждое выпускающееся официально версионное издание Flutter включает множество пулл-реквестов от сообщества; например, выпуск Flutter 3.0 включил слияние более чем 5248 пулл-реквестов.

Конечно, на ПК были сделаны некоторые компромиссы: отказ от поддержки Windows 7/8.

В Flutter 3.0 рекомендуется повысить версию Windows до Windows 10. Хотя ныне команда Flutter не препятствует разработке на старых версиях (Windows 7, Windows 8, Windows 8.1), Microsoft больше не поддерживает эти версии. Несмотря на то что команда Flutter продолжит предоставлять "возможность" поддержки этих старых версий, всё же она настоятельно рекомендует разработчикам обновиться.

Примечание: Поддержка для запуска Flutter на Windows 7 и Windows 8 будет продолжена; данное изменение затрагивает только среду разработки.

Кроме того, хотя Flutter пока не так богат в области ПК, как в мобильных приложениях, сообщество активно развивает качественные сторонние решения. Например, leanflutter.org уже выпустило много материалов, связанных с ПК, которые можно найти на pub или GitHub. В частности,- window_manager особенно популярен среди разработчиков ПК, он предназначен для управления размерами и положением окон на рабочем столе и поддерживает такие платформы, как macOS, Linux и Windows, поэтому этот пакет весьма полезен для работы на рабочем столе;

• flutter_distributor помогает автоматически строить и публиковать приложения на нескольких платформах

Разработчики, подобные leanflutter, уже опубликовали множество плагинов, расширяющих возможности Flutter для ПК, поэтому беспокоиться о поддержке ПК нет необходимости, стоит попробовать разработку приложений для ПК на Flutter. > Обратите внимание, что это leanflutter, а не learnflutter.

Наконец, в настоящее время Flutter для ПК также начинает активно использоваться крупными компаниями в Китае, такими как известные DianDian, ByteDance, WeChat Work. Они используют Flutter для ПК в своих проектах, что способствует здоровому развитию этой платформы. Официальная дорожная карта 2022 года отмечает следующее: неважно, насколько превосходен какой-либо SDK, если им пользуется лишь небольшая группа людей, его потенциал остаётся невостребованным; однако даже если SDK является обычным, но используется большим количеством разработчиков, он создаёт здоровую и цennую экосистему, которая позволит пользователям действительно получать выгоду от сообщества и фреймворка.