Flutter Game Engine Flame Series Notes- 1. Overview of Flame Engine

insert image description here

Flutter game engine Flame series notes
1. Flame engine overview

- Article information -
Author: 李俊才(jcLee95)
Visit me at: https://jclee95.blog.csdn.net
Email: [email protected].
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/132119035

【介绍】:本文介绍Flame引擎安装和该模块的整体信息。

Previous section: " None " | Next section: " Create your first game with Flame "


1. Current status of Flutter game development

Currently, the application of Flutter in the field of game development is gradually increasing, especially for simple 2D games and some lightweight 3D games. Although Flutter is primarily positioned for mobile application and UI development, its powerful drawing and animation capabilities make it suitable for game development as well.

In terms of 2D game development, Flutter provides powerful drawing functions, allowing developers to easily create 2D games. You can use Canvas to draw custom game interfaces, handle user input, and implement game logic.

For 3D games, although Flutter's 3D graphics capabilities are relatively weak, some lightweight 3D games can also be implemented in Flutter. At present, there are relatively few 3D game developments in Flutter, because specialized 3D game engines are more powerful and applicable in this regard.

Flutter is built on the Skia graphics engine, and its main focus is on user interface and UI animation, rather than highly optimized game performance. Therefore, for complex 3D games or games that require higher performance, traditional game engines (such as Unity, Unreal Engine, etc.) may be more suitable, but you can also choose to embed some traditional game engines into Flutter applications.

In Flutter, popular game engines and libraries include Flame , Flare , Unity for Flutter .

Among them:
(1) Flame is an open source game engine for creating 2D games in Flutter . It provides a series of easy-to-use components, such as sprites, animations, collision detection, etc., which help to develop simple 2D games, and it is the subject of this series of notes. Its official address is: https://docs.flame-engine.org/ .

(2) Flare is a tool for creating vector graphics and animations. Its core engine is written in C++ and SDL2, and it can also be used in Flutter. While it's not a game engine in the traditional sense, you can use Flare to create complex character animations and integrate them into your games. Its official address is: https://flarerpg.org/

(3) Unity for Flutter is a powerful 3D game engine that supports multi-platform publishing. Although not a native solution for Flutter , Unity provides the option to embed games into Flutter applications , thereby displaying Unity game content in Flutter applications . The module flutter_unity_widget (the warehouse address is: https://github.com/juicycleff/flutter-unity-view-widget ) is used to embed unity in flutter, and according to its introduction, it is available on Android, iPad OS, iOS, Web platforms All works great.

The following blog records how to embed a Unity game into a Flutter App , with pictures and texts, interested readers can refer to: How to embed an Android Unity game in a Flutter app : https://blog.codemagic.io/how -to-embed-an-android-unity-game-in-a-flutter-app/ .

2. Introduction to the overall situation of the Flame engine

2.1 About Flame

Flame is the most lightweight and minimal game engine powered by Flutter. It provides some simple and useful APIs, allowing developers to easily develop 2D games based on Flutter . Since Flame uses the Flutter platform, you can use various functions of Flutter , including but not limited to Flutter's rich UI tools, cross-platform features, and so on.

According to its official introduction, Flame is a modular Flutter game engine that provides a complete set of remote solutions for games. It leverages the powerful infrastructure provided by Flutter, but simplifies the code required to build your project.

The official documentation address of Flame is: https://docs.flame-engine.org/ .
insert image description here

In Flmae , a simple yet efficient implementation of the game loop is provided, along with the necessary functionality you may need in your game. Including Input , Images , Sprites , Sprite Sheets , Animations , Collision Detection , and Flame Component System ( FCS ) . _ _ _ _ _ _ _ _

2.2 Features of Flame

The main features of the Flame game engine are deliberately summarized into the following four points:

  1. First, Flame can be seamlessly integrated with Flutter . If you are already familiar with the Flutter development environment, using Flame will be very easy. Flame does not introduce any new construction concepts, it is completely built on the native Flutter environment;
  2. Second, Flame has excellent rendering performance . According to the official introduction and feedback from developers, Flame has excellent performance and can reach full FPS (frames per second) on most devices;
  3. Support cross-platform development . Flame games can run on iOS and Android, and even web and desktop (although web and desktop are currently in preview);
  4. Flame provides basic but powerful game development components . Flame has built-in components commonly used in game development such as Sprite (sprite map), sprite sheet, tile map, and particle system.

2.3 Independent software package officially provided by Flame

module describe home page
flame_audio It uses the Audioplayers package to provide audio functionality.
If you want to play background music, ambient sounds, sound effects, etc., add it as a dependency to your Flame game.
https://pub.dev/packages/flame_audio
flame_forge2d It uses Flame's own Box2D port called Forge2D to provide physics functionality. https://pub.dev/packages/flame_forge2d
flame_tiled This provides integration with the Tiled module package. https://pub.dev/packages/flame_tiled
flame_svg This module provides integration with the flutter_svg module. https://pub.dev/packages/flame_svg

3. Flame installation

Installing Flame is very simple, mainly requires several steps, let's look at it step by step.

Step 1: Install Flutter

Since Flame is built on Flutter, you need to make sure Flutter is installed and properly configured before installing Flame.

If you haven't installed it yet, visit the official Flutter installation page ( https://flutter.dev/docs/get-started/install ) and follow the installation steps.

Step 2: Create a Flutter project

You can install Flame on an existing Flutter project, or create a new Flutter project. The specific creation command is as follows:

flutter create my_game

Step 3: Add Flame dependencies to the project

Go into your Flutter project and pubspec.yamladd the Flame dependency to the file. For specific dependency versions, please visit the official documentation to view the latest version. Below is an example:

dependencies:
  flutter:
    sdk: flutter

  flame: ^1.8.1

And execute in the console flutter packages getto download and install dependencies.

After the above steps, Flame has been successfully installed in the project. Then you can start using Flame to build your game.

4. Flame's infrastructure

Before diving into how Flame develops games, we need to understand some basic concepts and core components in Flame. This section summarizes six concepts in the Flame framework, namely game loop , component , layer , input processing , resource management , and collision detection .

4.1 Game Loop

The game loop is a very basic concept in game development. It is actually a process that is continuously looped during the running of the game. There are two main operations in the game loop: Update and Render. Updating handles game logic, such as character movement, collision detection, etc.; rendering is responsible for displaying the game screen. There is an Gameabstract class named Flame. Developers need to inherit this class and implement the corresponding updatemethods render.

4.2 Components

In Flame, components represent all elements in the game, such as characters, buttons, background images, etc. Components are designed following the principle of "composition is better than inheritance". This makes it possible to achieve complex functions by combining different components during game development. Common components in Flame include: SpriteComponent(sprite), TextComponent(text), AnimationComponent(animation), etc.

4.3 Layers

Flame supports placing components on different layers for in-game cascading effects. Layers help you manage the organization of your game scene and control the order in which components are drawn.

4.4 Input Handling

Flame provides input handling functions such as touch, drag, click, etc. that are seamlessly integrated with the Flutter platform. You can easily add event listeners to components to implement interactive functions in the Flutter environment.

4.5 Assets Management

During the game development process, many resources are involved, such as pictures, audio and so on. Flame provides a set of resource management mechanisms that allow you to load, cache and access the resources required by the game.

4.6 Collision Detection

Flame also supports collision detection. Adding collision detection components to game elements can add judgment conditions for game logic, such as collisions between characters and enemies.

You should now have a general understanding of Flame's basic architecture. In the actual development process, there are many more advanced functions waiting for us to explore. In the next chapters, we'll dive into how to create scenes, characters, interactions, and other interesting features in Flame.

5. Sample projects about Flame

You can find a large number of Flame examples on the https://examples.flame-engine.org page. The website page elements are as follows:

insert image description here
Among them, click the "Navigation" on the left to see a directory organized based on different knowledge points: the
insert image description here
description button on the right can open the introduction or guidance of the current game project: the
insert image description here
"View Source" button can see the source of the current project Code, which usually opens the github page address of the current project through the browser:
insert image description here
"Device preview" button can select the device and device properties of the game preview:
insert image description here

Guess you like

Origin blog.csdn.net/qq_28550263/article/details/132119035