Flame公式ドキュメントを読み下していく第7弾の今回はエフェクトコントローラーです。 エフェクトコントローラーというのはエフェクトと同時に使ってエフェクト処理側に、エフェクト処理の1周を100%としたとき、0～100%のいまどこかを伝えるためのものです。…

Flame公式ドキュメントを読み下していく第6弾の今回はエフェクトです。 エフェクトというのは、フィールド上にアイテムが出現して、それが一定時間で点滅しだして、消えてしまう、といったような時間とともに色や形、大きさや透明度などが変わるものをワンタ…

Flame公式ドキュメントを読み下していく第5弾の今回は当たり判定です。 キャラクタの表示と、そして当たり判定とその処理がゲームでは欠かせないものですよね。逆に言うとこの仕組さえわかればゲームづくりの骨子はもう見えてきた段階です。 あとは動きを簡…

前回に引き続き、Flame公式ドキュメントを読み下していく第4弾をやっていきます。 今回は前回までのコンポーネントと次の章の当たり判定という主役級の登場人物に挟まれたおまけみたいな章です。 特にウェブ向けを意識した開発での注意・アドバイスですので…

今回はFlame公式ドキュメントを読み下していく第3弾、Componentの続き編です。 序盤でいきなりボスラッシュのように様々なComponentが脈絡もなく紹介され続けますが、今回で一段落しますのでじっくり見ていきましょう。 相変わらず顔見せをチラチラしていく…

前回に引き続き、Flameの公式サイトを頭から読み下していくシリーズの第2弾です。 ここからは2Dゲームエンジンの主役中の主役であるキャラクタやその組み合わせ、そして画面そのものを扱うComponentの概念になります。 Componentが中心なだけに非常に長く、…

Flutter2.8が発表されていまして、同じタイミングでゲームエンジンのFlameがバージョン1を迎えたということで注目を集めていますね。 Flutter民はあまりゲームプログラミングに興味がある人が多くないかもしれませんが、自分は大好きですので、せっかくFlame…

今回はアプリ起動時のスプラッシュスクリーンと、初回起動時のアプリの使い方説明画面について見ていきます。 Flutterアプリは起動時にFlutterモジュールの読み込みと起動のために少し間があります。この部分を埋めるため、ネイティブのスプラッシュスクリー…

今回はFlutterの画像インポート～表示をやっていきます。 表示自体はとても簡単な仕組みになっていまして、画像ファイルを予め用意して、そのパスを指定して読み込むか、ネットワーク上から読み込むかを指定するだけです。 表示も簡単ですが、リサイズなども…

今回は定期的に処理を実行するためのタイマーと、おまけで後半は見栄えの良いタイマーをお手軽に作れるパッケージを紹介していきます。 重要なのは「定期的に処理を実行できる」仕組みということで、使いみちは様々あります。ゲームやアニメーション処理で定…

今回はFlutterアプリ上でYoutube動画を再生するお手軽な方法を見ていきたいと思います。 最近はYoutube動画も溢れにあふれて、情報収集を効果的にできるかどうかは重要なスキルになりつつありますよね。 そして見たら見っぱなしでもだめですし、いちいち手で…

今回はBottom Navigation BarとPageViewについて見ていきたいと思います。これでアプリの足場を固めていきましょう。 Bottom Navigation Barはアプリの下に配置されるスマホでお馴染みの、画面切り替えによく使われるメニューです。今手元でぱっと見ただけで…

今回はFlutterによるTodoリストアプリの続きとして各タスクにサブタスクのリストを追加していきたいと思います。 実装の観点からいうと、HiveListによるリレーションを含めた永続化、そして画面遷移しない形でのリスト編集がポイントになります。 タスクもサ…

はじめに 前回は順序変更可能リストのシンプルな例を単体で示しましたが、今回は少し実用的に、簡単なアプリのなかでの活用例を示していきます。ここでは順序を変えた結果を永続化し、アプリを再起動しても順序を変更した結果を反映して再開するようにしてい…

はじめに 本記事ではリスト表示の並び替えについてポイントを述べていきます。まずはシンプルに順序変更可能なリストビューの基本的な使い方について見ていきます。殆どの部分でいつものListViewと使い方に変わりがない事がわかると思います。ここではオフィ…

はじめに 本サイトのサンプルでは簡単お手軽Flutter開発に欠かせないGetXとHiveを毎回のように使います。そこでGetXとHiveのそれぞれを導入するお決まりの手順を記事としてまとめておこうと思います。Flutterの新しいプロジェクトを立ち上げたらまずこちらの…

Flutterアプリサンプル・Todoリストの項目タップについて

本記事ではFlutterによるシンプルなTodoリストの実装を解説していきたいと思います。 スマホアプリの登竜門中の登竜門がTodoリストかと思います。これがちゃんと作れれば、ほかのアプリも結構な割合作れる基礎ができてきたという感じですよね。 ここでは今ま…

本記事ではFlutterにおけるデータの永続化のポイントを説明していきます。 永続化というのは、端末にデータを記録して、アプリを終了したり端末の電源を切ったりしてもデータが存続するようにすることです。ゲームでいうところのセーブですね。 ここで永続化…

本記事ではテキスト入力を受け付ける一番基本のウィジェット、TextFieldウィジェットについてまとめていきます。 TextFieldに関しては十分な機能をスッキリ備えて使い方も非常に直感的ですので、書き方を認識しておけば必要に応じて属性を設定するだけで簡単…

本記事ではFlutterの状態管理についてポイントを説明していきます。 ここでいう状態とはアプリの状態のことを指します。ユーザの操作、入力されたデータ、時間の経過や外部データの到着などによって状態が刻々と変化していきます。 この状態の変化に合わせて…

前回に引き続き今回もFlutterのページ遷移についてポイントをまとめて行きます。今回は特に遷移時のパラメタ渡しとページ遷移アニメーションの設定にフォーカスを当てていきます。 前回と同じ画面の例題を使いますので、サンプルコードがごついのですが、今…

本記事はFlutterのページ遷移についてポイントを説明していきます。 ここでは、次回に取り扱う状態管理も見据えてGetXというパッケージを使う方式を採用します。GetXは主にFlutterのコードをシンプルにすることを目的とした様々な機能を提供していて、非常に…

本記事ではFlutterのListViewについてポイントを見ていきます。まずは準備運動ということで、基本的な出力の仕方にフォーカスをあてます。 実際に動くListViewに関しては以後の記事で扱っていきます。 ListViewというと、スマホアプリの中でも最頻出GUIパー…

本記事ではGUIデザインの起点となるMateraialAppウィジェットとScaffoldウィジェットについてポイントを述べていきます。 MaterialAppはGoogleが標準デザインとしてスマホアプリやウェブサービスのデザインとして広く採用しているマテリアルデザインに基づく…

今回はレイアウト系の最頻出ウィジェット、RowとColumnのポイントについて述べていきます。 Rowがウィジェット要素を横に並べるもの、Columnがウィジェット要素を縦に並べるものです。これを組み合わせて、縦に何分割、そのそれぞれを横に何分割、そのさらに…

本記事ではFlutterのContainerウィジェットについてポイントを述べていきます。 Containerウィジェットは囲みを作るためのパーツです。スペースなどを調整するレイアウト系の働きもありますが、丸角の枠を作ったり背景色を塗ったりという目に見える側面もあ…

本記事ではFlutterの手始めとして、テキストを出力するTextWidgetの基本的な使い方を見ていきます。 これを通して徐々にWidgetの設定をしていく雰囲気をつかんでいければOKです。 最初に意味のわからないおまじないのように見える部分もあるかもしれませんが…

Flutterをはじめるに当たり、最も基本的な要素について簡単に述べておきます。 FlutterのアプリはWidget(ウィジェット)というパーツの組み合わせでできています。下の図で一番トップに書いてあるのがルートのWidgtetで、その子Widgetが1つあるいは複数あって…

本記事ではFlutterの開発環境立ち上げと、Flutterプロジェクトの立ち上げについてポイントを述べていきます。 ここではWindowsとAndroid Studioを使っていきます。Android StudioはAndroid公式のフリーの統合開発環境(IDE)です。 Visual Studio Codeも人気＆…