分发糖果的程序设计代码_糖果为您设计的颤动交互引擎

分发糖果的程序设计代码

什么是糖果？ (What Is Candy?)

The Candy engine was designed and developed by the Xianyu technical team.

Candy引擎是由仙宇技术团队设计和开发的。

• It is an app-embedded, lightweight, easy-to-develop, and stable interaction engine.
  它是应用程序嵌入式，轻量级，易于开发且稳定的交互引擎。
• The game series complies with industry standards.
  该游戏系列符合行业标准。
• The rendering system is highly integrated with the Flutter system. Game scenes can be seamlessly mixed with the Flutter UI.
  渲染系统与Flutter系统高度集成。 游戏场景可以与Flutter UI无缝地混合在一起。
• The animation system provides strong support for mainstream formats and features easy extensibility.
  动画系统为主流格式提供了强大的支持，并具有易于扩展的特点。

This article mainly explains why and how we developed this engine.

本文主要解释了为什么以及我们如何开发此引擎。

背景 (Background)

Recently, app gamification has emerged as a new trend. It applies some fun and enticing entertainment methods or scenes used in games to other apps to improve user stickiness and increase daily active users (DAU) at a lower cost. In addition, in some scenes that require user guidance, gamification makes it easier for users to accept and complete guidance tasks and encourages users to remain immersed in tasks by means of incentives, forming a virtuous circle.

最近，应用游戏化已成为一种新趋势。 它将一些有趣且诱人的娱乐方法或游戏中使用的场景应用于其他应用程序，从而以更低的成本提高了用户的粘性并增加了每日活跃用户(DAU)。 另外，在一些需要用户指导的场景中，游戏化使用户更容易接受和完成指导任务，并通过激励手段鼓励用户保持沉浸于任务中，形成良性循环。

Apps generally use embedded HTML5 mini-games, but these present some hidden dangers and are not recommended by many app stores. Therefore, we needed to find a new and safe method to develop app-based embedded mini-games. We wanted this method will feature easy development, stable performance, and complete functionality. These three desires informed our search for a new method.

应用程序通常使用嵌入式HTML5迷你游戏，但这些游戏存在一些潜在的危险，因此许多应用商店都不推荐这样做。 因此，我们需要找到一种新的安全方法来开发基于应用程序的嵌入式迷你游戏。 我们希望这种方法具有易于开发，性能稳定和功能完善的特点。 这三个愿望为我们寻找一种新方法提供了依据。

思维 (Thinking)

We had three main ideas about app-based embedded mini-games:

关于基于应用程序的嵌入式迷你游戏，我们有三个主要想法：

• Using the native game capabilities
  使用本机游戏功能

Currently, the ecosystem for native game development is not very mature. Moreover, using Native development requires two sets of code on both sides, incurring relatively high development costs and subsequent maintenance costs.

当前，用于本机游戏开发的生态系统还不太成熟。 此外，使用本机开发在两侧都需要两组代码，从而产生相对较高的开发成本和后续维护成本。

• Using game engines, such as Cocos2d-x and Unity
  使用游戏引擎，例如Cocos2d-x和Unity

Currently, game engines are very mature. However, they are generally used to develop intensive games. The engine size is relatively large, and therefore introducing a game engine will significantly increase the package size. In addition, due to complexity, it takes a lot of time to start the engines, difficult to achieve opening game pages in seconds. After a game engine is loaded, the memory consumption is very large. Communication and interaction between the game engine and app are relatively complicated. Currently, there is no proper hybrid stack to support it. Game engines have weak UI capabilities and cannot be used for complex app UI logic. If a game engine is used to develop embedded mini-games, it cannot integrate UIs on mini-game pages, such as game scenes and feeds.

当前，游戏引擎非常成熟。 但是，它们通常用于开发密集型游戏。 引擎尺寸相对较大，因此引入游戏引擎将大大增加包装尺寸。 此外，由于复杂性，启动引擎需要花费大量时间，很难在几秒钟内打开游戏页面。 加载游戏引擎后，内存消耗非常大。 游戏引擎与应用之间的通信和交互相对复杂。 当前，没有合适的混合堆栈来支持它。 游戏引擎的UI功能较弱，不能用于复杂的应用程序UI逻辑。 如果使用游戏引擎来开发嵌入式微型游戏，则它无法将UI集成在微型游戏页面上，例如游戏场景和供稿。

• Using the Flutter lightweight interaction engine
  使用Flutter轻量级交互引擎

Flutter itself is a cross-terminal app solution based on Skia, a 2D rendering engine. It has intrinsic 2D rendering capabilities. Therefore, Flutter offers a promising method for the development of app-based embedded mini-games. Currently, Flutter has some lightweight game engines, such as Flame. Flame supports simple game logic and animation capabilities. At the same time, the entire game is ultimately inserted into an app as a widget. This allows seamless integration of the game part and the UI part on mini-game pages.

Flutter本身是基于2D渲染引擎Skia的跨终端应用程序解决方案。 它具有固有的2D渲染功能。 因此，Flutter为开发基于应用程序的嵌入式迷你游戏提供了一种有前途的方法。 当前，Flutter具有一些轻量级的游戏引擎，例如Flame。 Flame支持简单的游戏逻辑和动画功能。 同时，整个游戏最终将作为小部件插入到应用程序中。 这允许在迷你游戏页面上无缝集成游戏部分和UI部分。

Based on the above considerations, we decide to use a Flutter lightweight interaction engine.

基于以上考虑，我们决定使用Flutter轻量级交互引擎。

火焰或独立设计 (Flame or Independent Design)

The Flame engine is a good mini-game engine in the Flutter ecosystem, but still has the following problems:

在Flutter生态系统中， Flame引擎是一个很好的迷你游戏引擎，但是仍然存在以下问题：

1. Incomplete game system: The engine provides only Game and Component. Scene and GameObject concepts do not exist. As a result, the nesting of game objects is complex and not well-suited to multiple scenes.
   不完整的游戏系统：引擎仅提供游戏和组件。 场景和GameObject概念不存在。 结果，游戏对象的嵌套是复杂的，并且不适合于多个场景。
2. The engine is entirely implemented using Canvas. Partial refresh is not supported in game scenes, posing performance risks.
   该引擎完全使用Canvas实现。 游戏场景中不支持部分刷新，这会带来性能风险。
3. Lack of a GUI system: It is difficult to nest UIs in a scene.
   缺少GUI系统：很难将UI嵌套在场景中。
4. The engine lacks a gesture event system.
   该引擎缺少手势事件系统。
5. Support for non-mainstream animation formats: Skeletal animation is supported through Flare. DragonBones is not supported. Particle animation was only implemented recently, and it does support mainstream formats well.
   支持非主流动画格式：Flare支持骨骼动画。 不支持DragonBones。 粒子动画仅在最近才实现，并且确实支持主流格式。
6. Memory problems exist in resource management. Resources are not released after they are loaded.
   资源管理中存在内存问题。 资源加载后不会释放。
7. The engine lacks device model adaptability.
   引擎缺乏设备模型的适应性。

Based on these concerns, we decide to design a new Flutter interaction engine.

基于这些考虑，我们决定设计一个新的Flutter交互引擎。

1. We improved the game system based on the EVA engine of the Alibaba Group and the Unity engine in the industry.
   我们基于阿里巴巴集团的EVA引擎和业界的Unity引擎改进了游戏系统。
2. We reused Flutter’s partial refresh.
   我们重用了Flutter的部分刷新。
3. We reused the Flutter UI as the GUI.
   我们将Flutter UI重用为GUI。
4. We reused Flutter gesture management.
   我们重用了Flutter手势管理。
5. We implemented skeletal animation and particle animation that support mainstream formats.
   我们实现了支持主流格式的骨骼动画和粒子动画。
6. We reused the app resource library (image library).
   我们重用了应用程序资源库(图像库)。
7. We implemented global 750 adaptation.
   我们实施了全球750适应。

Among the preceding points, 2 to 4 essentially integrate the rendering system of the interaction engine into the Flutter rendering system. The following introduces our engine design in order based on how it solves the preceding problems.

在前述要点中，2到4实际上将交互引擎的渲染系统集成到Flutter渲染系统中。 下面根据解决上述问题的方式依次介绍我们的发动机设计。

糖果引擎设计 (Candy Engine Design)

框架设计 (Framework Design)

First, we analyze what capabilities are required for the gamification business. After analyzing our business scenes, we obtained the capabilities shown in Figure 4–1.

首先，我们分析游戏化业务所需的功能。 在分析了我们的业务场景之后，我们获得了图4-1中所示的功能。

After decomposition, the interaction engine needs to have a game system, rendering system, lifecycle system, GUI system, physical system, animation system, resource system, and event system (gesture management).

分解后，交互引擎需要具有游戏系统，渲染系统，生命周期系统，GUI系统，物理系统，动画系统，资源系统和事件系统(手势管理)。

According to our previous idea, interactive game rendering needs to be integrated into the Flutter rendering system. Based on this idea, we can reuse the Flutter UI system and also need to integrate the gesture management of the game and Flutter. Finally, we obtain a framework as shown in Figure 4–2.

根据我们以前的想法，交互式游戏渲染需要集成到Flutter渲染系统中。 基于此想法，我们可以重用Flutter UI系统，还需要将游戏和Flutter的手势管理集成在一起。 最后，我们获得如图4–2所示的框架。

The interaction engine architecture consists of four parts.

交互引擎体系结构包括四个部分。

• Interface layer
  接口层

This provides externally exposed game interfaces, including interfaces for creating games, creating game objects, and adding game components. It also encapsulates factory interfaces for some commonly used game objects and game components.

这提供了外部公开的游戏界面，包括用于创建游戏，创建游戏对象和添加游戏组件的界面。 它还封装了一些常用游戏对象和游戏组件的工厂接口。

• Game system
  游戏系统

The game world management system manages organizational relationships among Games, Scenes, GameObjects, and Components and controls the startup and shutdown of the game subsystems and rendering system.

游戏世界管理系统管理游戏，场景，游戏对象和组件之间的组织关系，并控制游戏子系统和渲染系统的启动和关闭。

• Game subsystem
  游戏子系统

This supplements gamification capabilities with a lifecycle system, physical system, animation system, and resource system, which are called by the game system.

这通过游戏系统调用的生命周期系统，物理系统，动画系统和资源系统来补充游戏化功能。

• Rendering system
  渲染系统

This is responsible for game rendering. The rendering system of the engine is highly integrated with the Flutter rendering logic. Therefore, it is compatible with the GUI system and event system (gesture management).

这负责游戏渲染。 引擎的渲染系统与Flutter渲染逻辑高度集成。 因此，它与GUI系统和事件系统(手势管理)兼容。

游戏系统 (Game System)

Using the Unity design as a benchmark, the game system has the following four elements:

以Unity设计为基准，游戏系统包含以下四个元素：

1. Game: game class. It is responsible for overall game management, Scene loading management, and subsystem management and scheduling.
   游戏：游戏类。 它负责整体游戏管理，场景加载管理以及子系统管理和调度。
2. Scene: game scene class. It is responsible for the management of each game object in game scenes.
   场景：游戏场景类。 它负责管理游戏场景中的每个游戏对象。
3. GameObject: game object class. It is the smallest unit of game objects in the game world. Any object in the game world is a GameObject.
   GameObject：游戏对象类。 它是游戏世界中最小的游戏对象单元。 游戏世界中的任何对象都是GameObject。
4. Component: game component class. These indicate the capability attributes of a game object. For example, SpriteComponent, the sprite component, indicates the sprite rendering capability.
   组件：游戏组件类。 这些指示游戏对象的能力属性。 例如，SpriteComponent(Sprite组件)指示Sprite渲染功能。

A GameObject possesses different capabilities by combining various Components. Different combinations make GameObjects distinctive. Figure 4–3 shows the organizational relationships of the entire game system.

通过组合各种组件，GameObject具有不同的功能。 不同的组合使GameObjects与众不同。 图4–3显示了整个游戏系统的组织关系。

生命周期 (Lifecycle)

Based on Unity and Flutter features, we designed a lifecycle with eight callbacks, as listed in Table 4–1. It basically meets the needs of interactive game business development.

基于Unity和Flutter功能，我们设计了具有八个回调的生命周期，如表4–1所示。 它基本满足了互动游戏业务发展的需求。

渲染系统 (Rendering System)

Considering the integration with the Flutter rendering system, we cannot use Canvas for comprehensive rendering management of the entire game. Instead, we need to combine GameObject with RenderObject (Flutter render object), as shown in Figure 4–4.

考虑到与Flutter渲染系统的集成，我们不能将Canvas用于整个游戏的全面渲染管理。 相反，我们需要将GameObject与RenderObject(Flutter渲染对象)结合起来，如图4-4所示。

First, the number of game objects must be effectively integrated with the three trees of Flutter. Therefore, each GameObject must correspond to a Widget, Element, and RenderObject.

首先，游戏对象的数量必须与Flutter的三棵树有效整合。 因此，每个GameObject必须对应于一个Widget，Element和RenderObject。

The integration process helps solve the following problems:

集成过程有助于解决以下问题：

1. Conversion and integration between the coordinate system of the Flutter layout
   Flutter布局的坐标系之间的转换和积分
2. Processing for dynamically adding and deleting game objects
   动态添加和删除游戏对象的处理
3. Processing for dynamically modifying the game rendering depth
   动态修改游戏渲染深度的处理
4. Support for game objects by Flutter Inspector
   Flutter Inspector支持游戏对象

The overall rendering integration is relatively complex and many BadCases need to be eliminated. Subsequent articles will describe the process of integrating the interaction engine rendering with the Flutter rendering system in detail. Therefore, we will not give a detailed description here.

总体渲染集成相对复杂，需要消除许多BadCases。 随后的文章将详细描述将交互引擎渲染与Flutter渲染系统集成的过程。 因此，在此将不进行详细描述。

GUI系统 (GUI System)

Rendering has been integrated into the Flutter system, and each GameObject corresponds to a Widget. Therefore, we can design a special GameObject that supports the insertion of a Flutter Widget tree. We can reuse the Flutter UI instead of implementing the GUI separately. This logic is basically the same as for rendering integration. The inserted Widget tree operates as the child of the GUI Widget. The layout, paint, and hitTest logic is implemented in GUIRenderObject.

渲染已集成到Flutter系统中，每个GameObject都对应一个Widget。 因此，我们可以设计一个特殊的GameObject，它支持Flutter Widget树的插入。 我们可以重用Flutter UI，而不是单独实现GUI。 此逻辑基本上与渲染集成相同。 插入的小部件树用作GUI小部件的子级。 布局，绘制和hitTest逻辑在GUIRenderObject中实现。

The following provides a segment of GUI sample code. The development process is relatively simple.

下面提供了一部分GUI示例代码。 开发过程相对简单。

final GUIObject gui = IdleFishGame.createGUI(
  'gui',
  child: GestureDetector(
    child: Container(
      width: 100.0,
      height: 60.0,
      decoration: BoxDecoration(
        color: const Color(0xFFA9CCE3),
        borderRadius: const BorderRadius.all(
          Radius.circular(10.0),
        ),
      ),
      child: const Center(
        child: Text(
          'Flutter UI example',
          style: TextStyle(
            fontSize: 14.0,
          ),
        ),
      ),
    ),
    behavior: HitTestBehavior.opaque,
    onTap: () {
      print('UI is clicked');
    },
  ),
  position: Position(100, 100),
);
game.scene.addChild(gui);

活动系统 (Event System)

On the basis of integrating rendering into the Flutter system, we have integrated the event system and added the gesture processing component GestureBoxComponent, as shown in Figure 4–5:

在将渲染集成到Flutter系统的基础上，我们集成了事件系统，并添加了手势处理组件GestureBoxComponent，如图4-5所示：

The integration process is as follows:

集成过程如下：

1. GestureBoxComponent registers gesture callback methods registered by the developers with the gesture detector.
   GestureBoxComponent注册开发人员通过手势检测器注册的手势回调方法。
2. The RenderObject corresponding to the GameObject duplicates the hitTest logic and processes the click hitTest according to Flutter specifications. The GestureBoxComponent determines whether a click can be consumed.
   对应于GameObject的RenderObject复制了hitTest逻辑，并根据Flutter规范处理click hitTest。 GestureBoxComponent确定是否可以使用点击。
3. The GameObject duplicates handEvent to send a click event to the GestureBoxComponent for consumption.
   GameObject复制handEvent以将click事件发送到GestureBoxComponent以供消费。
4. After receiving the click event, GestureBoxComponent sends it to the gesture detector.
   收到点击事件后，GestureBoxComponent将其发送到手势检测器。
5. The gesture detector transmits the click to the gesture arena for gesture competition. The winning gesture is returned to the gesture detector and finally is returned for the gesture event response. Naturally, this step belongs to the Flutter logic.
   手势检测器将点击发送到手势竞技场以进行手势竞争。 获胜的手势返回到手势检测器，最后返回以进行手势事件响应。 自然，此步骤属于Flutter逻辑。

其他子系统 (Other Subsystems)

Animation System

动画系统

Currently, we support skeletal animation and particle animation. The supported resources are DragonBones for skeletal animation and EgretFeather for particle animation. Due to space constraints, the specific animation implementation will be discussed in detail in subsequent articles.

当前，我们支持骨骼动画和粒子动画。 支持的资源包括用于骨骼动画的DragonBones和用于粒子动画的EgretFeather。 由于篇幅所限，将在后续文章中详细讨论特定的动画实现。

Resource System

资源系统

Currently, the resource system of the interaction engine is relatively simple. This article gives a brief introduction. The resource system was designed by reusing the app resource system. This ensures that the app has only one resource library, reducing memory overhead and increasing the resource reuse rate. Figure 4–6 shows the resource system architecture. A proxy layer compatible with the app resource system and backup resource system is added between the game system and resource system. The backup resource system is automatically called if the app resource system is not registered.

当前，交互引擎的资源系统比较简单。 本文作了简要介绍。 通过重用应用程序资源系统来设计资源系统。 这样可确保该应用程序只有一个资源库，从而减少了内存开销并提高了资源重用率。 图4–6显示了资源系统架构。 在游戏系统和资源系统之间添加了与应用程序资源系统和备份资源系统兼容的代理层。 如果未注册应用程序资源系统，则会自动调用备份资源系统。

The backup resource system is currently divided into two parts:

备份资源系统当前分为两部分：

Backup image library: reuses Flutter ImageCache. This part reuses Flutter capabilities for memory management.

备用图片库：重复使用Flutter ImageCache。 该部分将Flutter功能重新用于内存管理。

Animation JSON resource management: Currently, only the JSON read logic is implemented. Cache management is not implemented due to low JSON reusability.

动画JSON资源管理：当前，仅实现JSON读取逻辑。 由于JSON可重用性较低，因此未实施缓存管理。

The resource system does not have remote loading and preloading capabilities, which we plan to implement in the future. Later articles will share the specific design implementation.

资源系统没有远程加载和预加载功能，我们计划在将来实现。 以后的文章将分享具体的设计实现。

结论 (Conclusion)

This article describes the design of the Candy interaction engine, and also analyzes and introduces the ongoing Flutter interaction engine design from a global perspective. In the future, we will detail some specific system designs, such as the rendering system and animation system, through a series of articles about the Candy engine.

本文介绍了Candy交互引擎的设计，还从全局角度分析和介绍了正在进行的Flutter交互引擎设计。 将来，我们将通过一系列有关Candy引擎的文章详细介绍一些特定的系统设计，例如渲染系统和动画系统。

We have encountered many problems during the design and implementation process of the Candy engine. For example, Flutter experiences some memory leakage during the rendering process and memory collection is not prompt. Later articles will detail the troubleshooting and solutions to these problems and the testing and analysis of the Candy engine’s performance and stability, so stay tuned.

在Candy引擎的设计和实现过程中，我们遇到了许多问题。 例如，Flutter在渲染过程中会遇到一些内存泄漏，并且内存收集不及时。 后面的文章将详细介绍这些问题的故障排除和解决方案，以及对Candy引擎的性能和稳定性的测试和分析，敬请关注。

(Original article by Chen Xuwei陈绪伟)

(Chen Xuwei陈绪伟的原创文章)

阿里巴巴科技 (Alibaba Tech)

First hand and in-depth information about Alibaba’s latest technology → Facebook: “Alibaba Tech”. Twitter: “AlibabaTech”.

关于阿里巴巴最新技术的第一手和深入信息→Facebook： “阿里巴巴技术” 。 Twitter： “阿里巴巴技术” 。

翻译自: https://medium.com/@alitech_2017/candy-for-you-design-of-a-flutter-interaction-engine-1d7f1196130b

分发糖果的程序设计代码