分發糖果的程式設計代碼_糖果為您設計的顫動互動引擎

分發糖果的程式設計代碼

什麼是糖果？ (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

分發糖果的程式設計代碼