Technology World (@technologyworld.bsky.social)

Flutter Flameで2Dゲームを素早く簡単に作成 | Codemagic Blog Ivy Walobwaさんが、Flutter Flameを使ったゲームの作り方をご紹介いたします。 Flutterでは、単一のコードベースからAndroid、iOS、デスクトップ、ウェブなどのプラットフォーム向けのアプリケーションを開発することが可能です。マルチプラットフォームのUIツールキットとして、Flutterチームは、あらゆる開発者が迅速にアプリケーションを構築し、リリースできるようにすることに専念しています。例えば、ゲーム開発者は、パフォーマンスやロード時間、アプリサイズを気にすることなく、美しいゲームアプリを作ることができるようになりました。本チュートリアルでは、Flutter Flameゲームエンジンの入門編をご提供いたします。Flutter Flameのゲームの設定と構築、スプライトの読み込み、アニメーションの追加をご紹介いたします。本チュートリアルは、DartとFlutterの知識をお持ちであることを前提にしております。 Flameエンジン Flameは、Flutter上で動作する2Dゲーム開発フレームワークです。Flameエンジンでは、ゲームループをはじめ、アニメーション、衝突・跳ね返り検出、視差スクロールなど、必要な機能を簡単に実装できます。 Flameはモジュール化されており、以下のような機能拡張に利用できる独立したパッケージが提供されています： Flutter Flameの設定 Flameを使い始めるには、パッケージのインストールが必要です。pubspec.yaml ファイルに、以下のように依存関係を追加します： dependencies: flame: ^1.1.1 ゲームをレンダリングするには、GameWidgetを使用します。以下のコードスニペットを main.dart ファイルに追加すると、現在黒い画面であるFlameゲームがレンダリングされます。 void main() { final game = FlameGame(); runApp( GameWidget( game: game, ), ); } これで、ゲームにグラフィックを追加する準備が整いました。スプライトの読み込み静的な画像をレンダリングするには、SpriteComponentクラスを利用する必要があります。ゲームグラフィックを assets/imagesフォルダに追加し、アセットを読み込むためにpubspec.yamlファイルを更新します。本チュートリアルでは、プレイヤー画像と背景画像が読み込まれます。以下の3つのファイルを libフォルダに作成・更新します： dino_player.dart はプレイヤーの読み込みと配置を行います： import 'package:flame/components.dart'; class DinoPlayer extends SpriteComponent with HasGameRef { DinoPlayer() : super(size: Vector2.all(100.0)); @override Future onLoad() async { super.onLoad(); sprite = await gameRef.loadSprite('idle.png'); position = gameRef.size / 2; } } … https://seekknowledge.online/flutter-flame%e3%81%a72d%e3%82%b2%e3%83%bc%e3%83%a0%e3%82%92%e7%b4%a0%e6%97%a9%e3%81%8f%e7%b0%a1%e5%8d%98%e3%81%ab%e4%bd%9c%e6%88%90-codemagic-blog/