Flutter游戏制作flame官方范例（一）打蚊子

1、准备工作：vsCode https://code.visualstudio.com   &&  install the Flutter and Dart plugins for Visual Studio Code

AndroidSDK  https://developer.android.com/studio/#downloads     If you don’t want to install the whole Android Studio and only interested in the SDK, scroll down to the Command line tools only section of the download page

Flutter SDK/Framework       https://flutter.dev/docs/get-started/install

确保能跑个de'mo。 

flutter create boxgame

delete the whole test folder.

Set up the game loop

 

对异步不了解可以看下这个：https://dart.dev/codelabs/async-await

在main的下面建立 box-game.dart

import 'dart:ui';

import 'package:flame/game.dart';

class BoxGame extends Game {
  void render(Canvas canvas) {
    // TODO: implement render
  }

  void update(double t) {
    // TODO: implement update
  }
}

请注意当前插件版本，尽量用高的。

下面往页面里写一个背景和白色的Box

  Rect bgRect = Rect.fromLTWH(0, 0, screenSize.width, screenSize.height);
    Paint bgPaint = Paint();
    bgPaint.color = Color(0xff000000);
    canvas.drawRect(bgRect, bgPaint);

    double screenCenterX = screenSize.width / 2;
    double screenCenterY = screenSize.height / 2;
    Rect boxRect = Rect.fromLTWH(
      screenCenterX - 75,
      screenCenterY - 75,
      150,
      150
    );
    Paint boxPaint = Paint();
    boxPaint.color = Color(0xffffffff);
    canvas.drawRect(boxRect, boxPaint);

接下来要加入按钮动作了。

修改main.dart

  BoxGame game = BoxGame();
  TapGestureRecognizer tapper = TapGestureRecognizer();
  tapper.onTapDown = game.onTapDown;
  runApp(game.widget);
  flameUtil.addGestureRecognizer(tapper);

修改 box.dart

import 'dart:ui';

import 'package:flame/game.dart';
import 'package:flutter/gestures.dart';

class BoxGame extends Game {
  Size screenSize;
  bool hasWon = false;

  void render(Canvas canvas) {
    Rect bgRect = Rect.fromLTWH(0, 0, screenSize.width, screenSize.height);
    Paint bgPaint = Paint();
    bgPaint.color = Color(0xff000000);
    canvas.drawRect(bgRect, bgPaint);

    double screenCenterX = screenSize.width / 2;
    double screenCenterY = screenSize.height / 2;
    Rect boxRect =
        Rect.fromLTWH(screenCenterX - 75, screenCenterY - 75, 150, 150);
    Paint boxPaint = Paint();
    // boxPaint.color = Color(0xffffffff);

    if (hasWon) {
      boxPaint.color = Color(0xff00ff00);
    } else {
      boxPaint.color = Color(0xffffffff);
    }
    canvas.drawRect(boxRect, boxPaint);
  }

  void update(double t) {
    // TODO: implement update
  }

  void resize(Size size) {
    screenSize = size;
    super.resize(size);
  }

  void onTapDown(TapDownDetails d) {
    double screenCenterX = screenSize.width / 2;
    double screenCenterY = screenSize.height / 2;
    if (d.globalPosition.dx >= screenCenterX - 75 &&
        d.globalPosition.dx <= screenCenterX + 75 &&
        d.globalPosition.dy >= screenCenterY - 75 &&
        d.globalPosition.dy <= screenCenterY + 75) {
      hasWon = true;
    }
  }
}

main.dart

import 'box-game.dart';
import 'package:flame/util.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';



void main() async {
  Util flameUtil = Util();
  await flameUtil.fullScreen();
  await flameUtil.setOrientation(DeviceOrientation.portraitUp);

 

  BoxGame game = BoxGame();
  TapGestureRecognizer tapper = TapGestureRecognizer();
  tapper.onTapDown = game.onTapDown;
  runApp(game.widget);
  flameUtil.addGestureRecognizer(tapper);



}

至此这个游戏编写完成，他判断你点击的位置如果是中间白色区域，判定胜利，并变成绿色。游戏结束，无论怎么点都不能变白了。在按R后，可以重置游戏。

接下来的实例是一个更加弱智的游戏，。。。。。

如果你还有兴趣的话，就接着看。。。

1、cd ..  回到你的项目目录。flutter create langaw 创建一个新的项目。

2、删除test文件夹，修改main.dart如下图

3、添加依赖：https://github.com/flame-engine/flame，官网当前版本是这个。

添加完确保进行了packages get.

4 \照旧我们会用到设备方向 DeviceOrientation ，需要引用 util 和 Service

新建一个文件langaw-game.dart

import 'dart:ui';
import 'package:flame/game.dart';

class LangawGame extends Game{
  Size screenSize;
  void render(Canvas canvas){}
  void update(double t){}
  void resize(Size size){}
  
}

再新建一个文件 components/fly.dart 

我的颜色挑选自：https://flatuicolors.com

import 'dart:ui'; 

class Fly {    

  void render(Canvas c) {}

  void update(double t) {}

}

import 'dart:ui';
import 'package:langaw/langaw-game.dart';

class Fly {
  Rect flyRect;
  final LangawGame game;
  Paint flyPaint;

  Fly(this.game, double x, double y) {
    flyRect = Rect.fromLTWH(x, y, game.tileSize, game.tileSize);
    flyPaint = Paint();
    flyPaint.color = Color(0xff6ab04c);
  }

  void render(Canvas c) {}
  void update(double t) {}
}

最终我们的程序为：修改main.dart

import 'package:flame/util.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:langaw/langaw-game.dart';
import 'package:flutter/gestures.dart';

void main() async {
  Util flameUtil = Util();
  await flameUtil.fullScreen();
  await flameUtil.setOrientation(DeviceOrientation.portraitUp);
  LangawGame game = LangawGame();
  runApp(game.widget);

  TapGestureRecognizer tapper = TapGestureRecognizer();
  tapper.onTapDown = game.onTapDown;
  flameUtil.addGestureRecognizer(tapper);
}

langaw-game.dart:

import 'dart:math';
import 'package:langaw/components/fly.dart';
import 'dart:ui';
import 'package:flame/game.dart';
import 'package:flame/flame.dart';
import 'package:flutter/gestures.dart';

class LangawGame extends Game {
  Size screenSize;
  double tileSize;
  List<Fly> flies;
  Random rnd;

  LangawGame() {
    initialize();
  }

  void initialize() async {
    flies = List<Fly>();
    rnd = Random();
    resize(await Flame.util.initialDimensions());
    spawnFly();
  }

  void render(Canvas canvas) {
    Rect bgRect = Rect.fromLTWH(0, 0, screenSize.width, screenSize.height);
    Paint bgPaint = Paint();
    bgPaint.color = Color(0xff576574);
    canvas.drawRect(bgRect, bgPaint);

    flies.forEach((Fly fly) => fly.render(canvas));
  }

  void update(double t) {
    flies.forEach((Fly fly) => fly.update(t));
    flies.removeWhere((Fly fly) => fly.isOffScreen);
  }

  void resize(Size size) {
    screenSize = size;
    tileSize = screenSize.width / 9;
  }

  void onTapDown(TapDownDetails d) {
    flies.forEach((Fly fly) {
      if (fly.flyRect.contains(d.globalPosition)) {
        fly.onTapDown();
      }
    });
  }

  void spawnFly() {
    double x = rnd.nextDouble() * (screenSize.width - tileSize);
    double y = rnd.nextDouble() * (screenSize.height - tileSize);
    flies.add(Fly(this, x, y));
  }
}

components/fly.dart

import 'dart:ui';
import 'package:langaw/langaw-game.dart';

class Fly {
  Rect flyRect;
  final LangawGame game;
  Paint flyPaint;
  bool isDead = false;
  bool isOffScreen = false;

  Fly(this.game, double x, double y) {
    flyRect = Rect.fromLTWH(x, y, game.tileSize, game.tileSize);
    flyPaint = Paint();
    flyPaint.color = Color(0xff6ab04c);
  }

  void render(Canvas c) {
    c.drawRect(flyRect, flyPaint);
  }

  void update(double t) {
    if (isDead) {
      flyRect = flyRect.translate(0, game.tileSize * 12 * t);
    }
    if (flyRect.top > game.screenSize.height) {
      isOffScreen = true;
    }
  }

  void onTapDown() {
    flyPaint.color = Color(0xffff4757);
    isDead = true;
    game.spawnFly();
  }
}

运行结果可以点小方块，并朝下方移动，最终自己销毁。

4、新建一个view.dart

enum View {
  home,
  playing,
  lost,
}

如果向修改包名，你需要修改一下几处：

• ./android/app/src/main/AndroidManifest.xml  
•  ./android/app/src/debug/AndroidManifest.xmla
•  ./android/app/build.gradle  
• ./android/app/src/main/java/com/example/langaw/MainActivity.java).
• 还有相印的文件夹名 

签名打包命令：keytool -genkey -v -keystore d:\key.jks -keyalg RSA -keysize 2048 -validity 36500 -alias key

key.properties 放到android下，

storePassword=dongyu
keyPassword=dongyu
keyAlias=key
storeFile=D://key.jks

修改android/app/build.gradle:

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}
android {
        ....
    
    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.release
        }
    }

 最后打包命令：

flutter build apk

最终源码和打包后的文件在这里下载

https://download.csdn.net/download/ldy889/12014595