Flutter,Flameのキャッチアップメモ
CkRealコメントの入れ方
// 単行コメント
import 'package:flutter/widgets.dart';
/*
複数行ブロックコメント
*/
void main() {
}
参照
CkRealWidget
FlutterのUIを構成しているパーツ
Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.
【DeepL訳】
Flutterのウィジェットは、Reactからインスピレーションを得たモダンなフレームワークを使用して構築されています。中心的なアイデアは、ウィジェットからUIを構築することです。ウィジェットは、現在の構成と状態を考慮して、ビューがどのように見えるべきかを記述します。ウィジェットの状態が変わると、ウィジェットはその記述を再構築します。フレームワークは、ある状態から次の状態に移行するために、基盤となるレンダー ツリーに必要な最小限の変更を決定するために、以前の記述との差分を取ります。
import 'package:flutter/material.dart';
void main() {
runApp(
const Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
The runApp() function takes the given Widget and makes it the root of the widget tree. In this example, the widget tree consists of two widgets, the Center widget and its child, the Text widget. The framework forces the root widget to cover the screen, which means the text “Hello, world” ends up centered on screen. The text direction needs to be specified in this instance; when the MaterialApp widget is used, this is taken care of for you, as demonstrated later.
【DeepL訳】
runApp()関数は、指定されたウィジェットを受け取り、それをウィジェットツリーのルートにします。この例では、ウィジェットツリーは、Center ウィジェットとその子である Text ウィジェットの 2 つのウィジェットで構成されています。フレームワークでは、ルート・ウィジェットが画面を覆うように強制されます。つまり、"Hello, world" というテキストは画面の中央に表示されることになります。この場合、テキストの方向を指定する必要がありますが、MaterialApp ウィジェットを使用すると、後で説明するように、この処理を行うことができます。
参照
CkRealFlameでできること
ここに掲載されていることを用途に応じて選んでいく。
以下に、サンプルコードやドキュメントの和訳をメモ。
File Structure
Flame has a proposed structure for your project that includes the standard Flutter assets directory in addition to two children: audio and images.
【DeepL訳】
Flameには、標準のFlutter assetsディレクトリに加え、audioとimagesという2つの子ディレクトリを含むプロジェクトの構造が提案されています。
.
└── assets
├── audio
│ └── explosion.mp3
└── images
├── enemy.png
└── player.png
pubspec.yamlにも記述を行う
flutter:
assets:
- assets/audio/explosion.mp3
- assets/images/player.png
- assets/images/enemy.png
サンプルコード
import 'package:flame/flame.dart';
import 'package:flame_audio/flame_audio.dart';
void main() {
FlameAudio.play('explosion.mp3');
Flame.images.load('player.png');
Flame.images.load('enemy.png');
}
利用パッケージ
Game Widget
The GameWidget is a Flutter Widget that is used to insert a Game inside the Flutter widget tree.
It can directly receive a Game instance in its default constructor or it can receive a GameFactory function on the controlled constructor that will be used to create the game once the GameWidget is inserted in the widget tree.
【DeepL訳】
GameWidgetはFlutter Widgetで、Flutterのウィジェットツリー内にGameを挿入するために使用される。
デフォルトのコンストラクタでGameインスタンスを直接受け取るか、コントロールされたコンストラクタでGameFactory関数を受け取ることができ、GameWidgetがウィジェットツリーに挿入されるとゲームを作成するために使われる。
サンプルコード
void main() {
final game = MyGame();
runApp(GameWidget(game: game));
}
Or:
void main() {
runApp(GameWidget.controlled(gameFactory: MyGame.new));
}