Flutterでアドベンチャーゲームもどきを作ってみる 文字送り編

Flutterで、アドベンチャーゲームっぽい感じの文字送り。

画面を作る

Stackを使うことで、背景画像と人画像を重ねて表示。
メッセージ表示領域はあんまり真面目に作る気がなかったのでボタンで代用。
Alignment.topLeftを指定してボタンのテキストを左上に表示させ、メッセージウィンドウ風に。

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Stack(
              children: <Widget>[
                // 背景画像
                Align(
                  alignment: Alignment.center,
                  child: Image.asset(
                    'images/bg_natural_sougen.jpg',
                  ),
                ),
                // 前面画像
                Align(
                  alignment: Alignment.center,
                  child: Image.asset(
                    'images/keirou_couple2.png',
                  ),
                ),
              ],
            ),
            // メッセージ表示領域(ボタン)
            SizedBox(
                width: MediaQuery.of(context).size.width,
                height: 200,
                child: RaisedButton(
                  child: Align(
                      alignment: Alignment.topLeft,
                      child: new Text("$_showMsg")),
                  color: Colors.blue.withOpacity(0.3),
                  textColor: Colors.white,
                  onPressed: () {
                    updateMsg();
                  },
                ))
          ],
        ),
      ),
    );
  }

文字送りを実装する

そういうパッケージが既にありそうな気はするけど、自前で実装。
画面に表示したい文字列を分割して、表示用の変数(_showMsg)に1文字ずつ追加する。
追加の度にDelayをかけると、文字送りっぽい感じの見た目になる。

await Delayしている最中に、ボタン連打されてしまうと色々と不都合なので、
bool値(_isAdding)を使って原始的なガードをかける。
ガード内でDelayする時間を0に変更することで、なんだかより"それっぽい"感じの挙動になってくれた。

  // メッセージリスト
  static const _msgList = [
    "むかしむかし、おじいさんとおばあさんが住んでいました。",
    "おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。"
  ];

  // メッセージ表示中であることを示すフラグ
  var _isAdding = false;
  // 現在表示中のメッセージリスト行番号
  var _msgCount = 0;
  // 画面に表示される文字列
  var _showMsg = "";
  // Delay時間
  var _delayMilliSeconds = 0;

  void updateMsg() async {
    if (_isAdding) {
      // メッセージ表示中にボタンタップされた場合、待ち時間を0にする。
      _delayMilliSeconds = 0;
      return;
    }

    _isAdding = true;
    _delayMilliSeconds = 100;

    // 文字追加前に_showMsgを初期化
    setState(() {
      _showMsg = "";
    });

    for (var i = 0; i < _msgList[_msgCount].length; i++) {
      // メッセージリストの内容を1文字ずつ追加する
      setState(() {
        _showMsg += _msgList[_msgCount].substring(i, i + 1);
      });
      // 文字列を追加した後、Delayする
      await new Future.delayed(new Duration(milliseconds: _delayMilliSeconds));
    }
    _msgCount++;
    _isAdding = false;
  }

画像変更編に続く？