雪碧没有出现在使用火焰的颤振应用程序中

Question

我正在学习 flutter 的 flame 教程 here 并且能够让我的代码在模拟器上编译和运行（iOS 和 chrome）但是当应用运行s 时什么也没有出现。我认为应该显示我的 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

我在项目根目录中创建了我的资产文件夹，并将其放在名为 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 之前尝试运行ning on load 但我得到了同样的错误：

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

Answer 1

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

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

Answer 2

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

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,
    ),
  );
}

Answer 3

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

"prepare/add" called before the game is ready. Did you try to access it on the Game constructor? Use the "onLoad" or "onMount" method instead.

这意味着您必须将组件的 adding 移动到 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,
    ),
  );
}

雪碧没有出现在使用火焰的颤振应用程序中

Sprite not showing up in flutter application using flame

sprite

dart

flutter

flame