1

我在这里关注flutter的flame教程，并且能够让我的代码在模拟器（iOS和chrome）上编译和运行，但是当应用程序运行时什么都没有出现。我认为应该显示我的 crate.png 的图像，但我看到的只是黑屏。

这是我的 main.dart：

import 'dart:math' as math;
import 'dart:ui';

import 'package:flame/flame.dart';
import 'package:flame/game.dart';
import 'package:flame/components.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

class MyCrate extends SpriteComponent {
  // creates a component that renders the crate.png sprite, with size 16 x 16
  MyCrate() : super(size: Vector2.all(16));

  Future<void> onLoad() async {
    sprite = await Sprite.load('crate.png');
    anchor = Anchor.center;
  }

  @override
  void onGameResize(Vector2 gameSize) {
    // We don't need to set the position in the constructor, we can it directly here since it will
    // be called once before the first time it is rendered.
    position = gameSize / 2;
  }
}

class MyGame extends FlameGame {
  MyGame() {
    add(MyCrate());
  }
}

main() {
  final myGame = MyGame();
  runApp(
    GameWidget(
      game: myGame,
    ),
  );
}

这是我的 pubspec.yaml：

name: boxgame
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  flame: ^1.0.0-releasecandidate.16
  dashbook: ^0.1.5

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0

flutter:

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/crate.png

我在项目根目录中创建了 assets 文件夹，并将其放在一个名为 images 的文件夹中。

编辑

我刚刚意识到有一些错误输出：

Error: Assertion failed:
../…/components/component.dart:323
parentGame.hasLayout
"\"prepare/add\" called before the game is ready. Did you try to access it on the Game constructor? Use the \"onLoad\" ot \"onParentMethod\" method instead."
    at Object.throw_ [as throw] (http://localhost:53993/dart_sdk.js:5083:11)
    at Object.assertFailed (http://localhost:53993/dart_sdk.js:5008:15)
at main.MyCrate.new.prepare (http://localhost:53993/packages/flame/src/game/mixins/fps_counter.dart.lib.js:2509:41)
at component_set.ComponentSet.new.addChild (http://localhost:53993/packages/flame/src/game/mixins/fps_counter.dart.lib.js:7041:19)
    at addChild.next (<anonymous>)
    at runBody (http://localhost:53993/dart_sdk.js:40127:34)
    at Object._async [as async] (http://localhost:53993/dart_sdk.js:40158:7)
at component_set.ComponentSet.new.addChild (http://localhost:53993/packages/flame/src/game/mixins/fps_counter.dart.lib.js:7040:20)
at main.MyGame.new.add (http://localhost:53993/packages/flame/src/game/mixins/fps_counter.dart.lib.js:2453:28)
at new main.MyGame.new (http://localhost:53993/packages/boxgame/main.dart.lib.js:74:10)
at main$ (http://localhost:53993/packages/boxgame/main.dart.lib.js:84:18)
at main (http://localhost:53993/web_entrypoint.dart.lib.js:36:29)
    at main.next (<anonymous>)
    at http://localhost:53993/dart_sdk.js:40108:33
    at _RootZone.runUnary (http://localhost:53993/dart_sdk.js:39979:59)
    at _FutureListener.thenAwait.handleValue (http://localhost:53993/dart_sdk.js:34926:29)
    at handleValueCallback (http://localhost:53993/dart_sdk.js:35493:49)
    at Function._propagateToListeners (http://localhost:53993/dart_sdk.js:35531:17)
    at _Future.new.[_completeWithValue] (http://localhost:53993/dart_sdk.js:35379:23)
    at http://localhost:53993/dart_sdk.js:34563:46
    at _RootZone.runUnary (http://localhost:53993/dart_sdk.js:39979:59)
    at _FutureListener.then.handleValue (http://localhost:53993/dart_sdk.js:34926:29)
    at handleValueCallback (http://localhost:53993/dart_sdk.js:35493:49)
    at Function._propagateToListeners (http://localhost:53993/dart_sdk.js:35531:17)
    at _Future.new.[_completeWithValue] (http://localhost:53993/dart_sdk.js:35379:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:53993/dart_sdk.js:35400:35)
    at Object._microtaskLoop (http://localhost:53993/dart_sdk.js:40246:13)
    at _startMicrotaskLoop (http://localhost:53993/dart_sdk.js:40252:13)
    at http://localhost:53993/dart_sdk.js:35751:9

我在调用 add 之前尝试在负载上运行，但我得到了同样的错误：

class MyGame extends FlameGame {
  MyGame() {
    MyCrate crate = MyCrate();
    crate.onLoad();
    add(crate);
  }
}
4

3 回答 3

2

您找到的解决方案工作正常，如果您想修复原始代码，您必须遵循堆栈跟踪中略显神秘的消息：

在游戏准备好之前调用“prepare/add”。您是否尝试在 Game 构造函数上访问它？请改用“onLoad”或“onMount”方法。

这意味着您必须将add组件的 ing 移动到，onLoad而不是像现在这样将它们放在游戏构造函数中。所以它看起来像这样：

class MyCrate extends SpriteComponent {
  // creates a component that renders the crate.png sprite, with size 16 x 16
  MyCrate() : super(size: Vector2.all(16));

  Future<void> onLoad() async {
    sprite = await Sprite.load('crate.png');
    anchor = Anchor.center;
  }

  @override
  void onGameResize(Vector2 gameSize) {
    // We don't need to set the position in the constructor, we can it directly here since it will
    // be called once before the first time it is rendered.
    position = gameSize / 2;
  }
}

class MyGame extends FlameGame {
  Future<void> onLoad() async {
    await super.onLoad();
    add(MyCrate());
  }
}

main() {
  final myGame = MyGame();
  runApp(
    GameWidget(
      game: myGame,
    ),
  );
}
于 2021-11-05T21:31:01.510 回答
0

我不确定为什么会这样，但以下内容使图像显示：

class MyGame extends FlameGame {
  late final SpriteComponent player;

  @override
  Future<void> onLoad() async {
    final sprite = await Sprite.load('crate.png');
    final size = Vector2.all(16.0);
    final player = SpriteComponent(size: size, sprite: sprite);

    // screen coordinates
    player.position = Vector2(0.0, 0.0);
    player.angle = 0; // 0 by default, can also be set in the constructor
    add(player); // Adds the component
  }
}

main() {
  final myGame = MyGame();
  runApp(
    GameWidget(
      game: myGame,
    ),
  );
}
于 2021-11-05T20:08:55.503 回答
-1

您应该修复资产的地址。检查以下示例：

  Future<void> onLoad() async {
        sprite = await Sprite.load('assets/images/crate.png');
        anchor = Anchor.center;
      }
于 2021-11-05T19:29:49.433 回答