TankCombat series of articles

Flutter&Flame — TankCombat game development (part 1)

Flutter&Flame — TankCombat game development part 2

Flutter&Flame — TankCombat game development part 3

Flutter&Flame — TankCombat game development (4)

preface

Nowadays, in order to increase user stickiness, some small games are always inserted into App development. Currently, the mainstream mobile terminal game development engines include:

Cocos2dx (mainly used for 2D game development) Unity3D (used for 3D game development, AR,VR can be used)Copy the code

But for the development of small games (such as taobao draw a prize, catch a fish, build a building and so on), the learning cost of these two is obviously too large (2dx I have not used, u3d you need to learn the use of software and c#).

On further reading, I found that Flutter also has a game engine called Flame and SpriteWidget. The difference between the two is not that big because the SpriteWidget has not been updated for a long time. I chose Flame, which I will show you next.

Flame

Taking advantage of a few days off, I studied Flame and wrote a tank battle from a previous example. I was surprised how well it worked.

Tank war (TankCombat) my exercise project, there are many imperfect places, here is only to demonstrate the player is blue tank did not deal with the enemy bullet effect, because the fight but.........Copy the code

Mobile effect

Web side effect

What’s even more amazing is that in browser mode, it works almost without any changes (no adaptation, so the display scale is a bit of a problem)

Having seen the above results, you must be interested in Flame, so keep reading.

Introduction to the

Flame is a minimalist Flutter game engine that provides a complete solution to the common problems encountered by every game developed with Flutter.

Its official website:

https://github.com/flame-engine/flame
Copy the code

Currently supported features:

- Game Loop - Component/object system - Built-in physics Engine (Box2D) - Audio support - Special effects and particle effects - Gesture and input support - Images, sprites and Sprites - basic Rive support - and some utility classes to simplify developmentCopy the code

The principle of

Flame is written in pure DART, so it makes Flutter even better with its cross-platform effects!

The Flame engine is powered primarily by a Game loop, as shown below.

As you can see from the figure, the update and Render methods (which contain a series of instructions) run endlessly after startup and initialization. In update we can do all kinds of calculations, and in render we can render our results.

Update (double time) animation keeps adding time to render(Canvas Canvase) Canvas, where you can make various rendersCopy the code

Learning materials

Tanks war

Recently, the company added the requirement of live broadcast, the tutorial may be slightly delayed, here is the address first (everyone can learn from the official Demo, very detailed) :

https://github.com/bladeofgod/tank_combat
Copy the code

Introduction:

The player tanks are blue and are born in the middle of the screen. Green and yellow are enemy tanks. They are born in four corners of the screen at the same time. The left rocker controls hull steering and the right rocker controls turret steering. Both small buttons can fire shellsCopy the code

The official Demo

Flame document is supported in Chinese, I would like to thank the translator for his help and inspiration:

https://github.com/flame-engine/flame/blob/master/README-ZH.md
Copy the code

At the same time, the official also provides the introductory Demo, wall crack suggestions can start from here to learn

Also available in Chinese ~ thanks again for providing translationCopy the code

The Chinese version of

Develop 2D casual games: Kill flies

The English version

2D Casual Mobile Game Tutorial

Finally, I believe that you can also develop your own game by learning the above tutorial. I will complete the tank Wars tutorial as soon as possible. 🙂

TankCombat series of articles

Flutter&Flame — TankCombat game development (part 1)

Flutter&Flame — TankCombat game development part 2

Flutter&Flame — TankCombat game development part 3

Flutter&Flame — TankCombat game development (4)