プレイヤーを作ってみよう | 人生ゲームを作る。サイコロ処理・イベント分岐・プレイヤー管理・データ設計・アニメーション | Flutterアプリケーション開発概論

忙しい方はここだけ見て

この章で触る場所は、ここです。

List<PlayerState> _createInitialPlayers() {
  return <PlayerState>[
    PlayerState(
      id: 0,
      name: 'Player 1',
      color: AppColors.red,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
    PlayerState(
      id: 1,
      name: 'Player 2',
      color: AppColors.blue,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
  ];
}

まず変えるなら、ここだけでOKです。

name: 'Player 1',

例えば、こう変えます。

name: '太郎',

所持金を変えたい場合は、ここです。

cash: 1500,

例えば、3000から始めたい場合です。

cash: 3000,

最初は、名前と所持金だけ変える のがおすすめです。

この章でやること

この章では、人生ゲームに登場するプレイヤーを作る場所を確認します。

プレイヤーには、名前・色・現在地・所持金・物件情報があります。

ゲーム中に変わる情報が多いので、プレイヤーのデータはとても大事です。

誰がプレイしているか
今どこのマスにいるか
現金はいくらか
どの物件を持っているか
ゴールしたか

これらをまとめているのが、PlayerState です。

今日のゴール

この章のゴールは、次の3つです。

1. プレイヤー情報がどこで作られているか分かる
2. 名前・色・所持金を変更できる
3. positionやpropertiesの意味が分かる

全部を覚えなくても大丈夫です。

まずは、「プレイヤーは _createInitialPlayers() で作る」と分かればOKです。

Step 1：_createInitialPlayers()を探す

lib/main.dart を開きます。

検索で、次の文字を探してください。

_createInitialPlayers

このようなコードがあります。

List<PlayerState> _createInitialPlayers() {
  return <PlayerState>[
    PlayerState(
      id: 0,
      name: 'Player 1',
      color: AppColors.red,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
    PlayerState(
      id: 1,
      name: 'Player 2',
      color: AppColors.blue,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
  ];
}

ここで、最初に登場するプレイヤーを作っています。

Step 2：PlayerStateとは？

PlayerState は、プレイヤー1人分の情報です。

class PlayerState {
  const PlayerState({
    required this.id,
    required this.name,
    required this.color,
    required this.position,
    required this.cash,
    required this.properties,
    required this.isFinished,
  });

  final int id;
  final String name;
  final Color color;
  final int position;
  final int cash;
  final Set<int> properties;
  final bool isFinished;
}

最初は、こう覚えればOKです。

PlayerState = プレイヤー情報を入れる箱

Step 3：プレイヤー情報の中身

PlayerState には、次の情報があります。

項目	意味	例
`id`	プレイヤー番号	`0`, `1`
`name`	プレイヤー名	`Player 1`
`color`	コマの色	`AppColors.red`
`position`	今いるマス	`0`
`cash`	所持金	`1500`
`properties`	持っている物件	`<int>{}`
`isFinished`	ゴールしたか	`false`

最初は、name、color、cash を見れば大丈夫です。

Step 4：名前を変えてみよう

まずは、名前だけ変えてみます。

変更前です。

name: 'Player 1',

変更後です。

name: '太郎',

2人目も変えます。

変更前です。

name: 'Player 2',

変更後です。

name: '花子',

このようになります。

List<PlayerState> _createInitialPlayers() {
  return <PlayerState>[
    PlayerState(
      id: 0,
      name: '太郎',
      color: AppColors.red,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
    PlayerState(
      id: 1,
      name: '花子',
      color: AppColors.blue,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
  ];
}

保存して画面に反映されれば成功です。

Step 5：所持金を変えてみよう

所持金は、cash で決めます。

変更前です。

cash: 1500,

3000から始めたい場合は、こうします。

cash: 3000,

2人とも同じ条件にしたい場合は、両方変えます。

cash: 3000,

所持金を増やすと、物件を買いやすくなります。

所持金を少なくすると、少し難しいゲームになります。

Step 6：色を変えてみよう

プレイヤーのコマの色は、color で決めています。

color: AppColors.red,

2人目は青です。

color: AppColors.blue,

例えば、2人目を緑にするならこうします。

color: AppColors.green,

紫にしたい場合です。

color: AppColors.purple,

使える色は、AppColors に書かれています。

AppColors.red
AppColors.blue
AppColors.green
AppColors.purple
AppColors.orange
AppColors.gold

まずは、この中から選ぶと安全です。

Step 7：positionを理解しよう

position は、今いるマスの番号です。

position: 0,

0 は、最初のマスです。

つまり、プレイヤーはゲーム開始時にスタート地点にいます。

position: 0
↓
0番目のマス
↓
人生のはじまり

基本的に、最初は 0 のままでOKです。

途中から始めたいとき以外は変えません。

Step 8：propertiesを理解しよう

properties は、プレイヤーが持っている物件です。

properties: <int>{},

<int>{} は、空っぽのセットです。

つまり、最初は物件を何も持っていません。

properties: <int>{}
↓
持っている物件なし

ゲーム中に物件を買うと、ここに物件マスの番号が追加されます。

初心者のうちは、ここは変えなくてOKです。

Step 9：isFinishedを理解しよう

isFinished は、ゴールしたかどうかです。

isFinished: false,

false は、まだゴールしていないという意味です。

ゲーム開始時は、まだ誰もゴールしていません。

そのため、ここは false のままでOKです。

false = まだ
true = 完了

Step 10：3人目を追加するときの考え方

慣れてきたら、3人目を追加することもできます。

追加例です。

PlayerState(
  id: 2,
  name: '三郎',
  color: AppColors.green,
  position: 0,
  cash: 1500,
  properties: <int>{},
  isFinished: false,
),

全体では、このようになります。

List<PlayerState> _createInitialPlayers() {
  return <PlayerState>[
    PlayerState(
      id: 0,
      name: '太郎',
      color: AppColors.red,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
    PlayerState(
      id: 1,
      name: '花子',
      color: AppColors.blue,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
    PlayerState(
      id: 2,
      name: '三郎',
      color: AppColors.green,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
  ];
}

ただし、最初は2人のままで大丈夫です。

3人以上にすると、画面が少し狭くなることがあります。

Step 11：idは重ならないようにする

プレイヤーを追加するときは、id が重ならないようにします。

良い例です。

id: 0
id: 1
id: 2

悪い例です。

id: 0
id: 1
id: 1

id は、プレイヤーを見分ける番号です。

同じ番号があると、物件の所有者などが分かりにくくなります。

Step 12：まずおすすめのカスタマイズ

初心者の方は、まずこの3つだけ変えるのがおすすめです。

変更するもの	例
名前	`Player 1` → `太郎`
色	`AppColors.red` → `AppColors.green`
所持金	`1500` → `3000`

この3つなら、ゲームの仕組みを壊しにくいです。

触ってみよう

今回は、プレイヤー名と所持金を変えてみましょう。

変更前です。

PlayerState(
  id: 0,
  name: 'Player 1',
  color: AppColors.red,
  position: 0,
  cash: 1500,
  properties: <int>{},
  isFinished: false,
),

変更後です。

PlayerState(
  id: 0,
  name: '太郎',
  color: AppColors.red,
  position: 0,
  cash: 3000,
  properties: <int>{},
  isFinished: false,
),

2人目も変えます。

PlayerState(
  id: 1,
  name: '花子',
  color: AppColors.blue,
  position: 0,
  cash: 3000,
  properties: <int>{},
  isFinished: false,
),

保存して、画面に「太郎」「花子」と出れば成功です。

よくあるエラーと直し方

1. カンマを消してしまった

悪い例です。

name: '太郎'
color: AppColors.red,

正しくはこちらです。

name: '太郎',
color: AppColors.red,

各行の最後にカンマを残します。

2. 文字の `'` を消してしまった

悪い例です。

name: 太郎,

正しくはこちらです。

name: '太郎',

文字は ' で囲みます。

3. cashを文字にしてしまった

悪い例です。

cash: '3000',

正しくはこちらです。

cash: 3000,

数字は ' で囲みません。

4. 色の名前を間違えた

悪い例です。

color: AppColors.pink,

AppColors に pink がない場合、エラーになります。

まずは、すでにある色を使いましょう。

color: AppColors.red,
color: AppColors.blue,
color: AppColors.green,
color: AppColors.purple,

5. idが重なっている

悪い例です。

id: 0,

id: 0,

正しくは、プレイヤーごとに変えます。

id: 0,

id: 1,

3人目なら、

id: 2,

です。

この章で覚えること

この章で覚えることは、3つだけです。

1. プレイヤーは _createInitialPlayers() で作る
2. PlayerState はプレイヤー情報をまとめる箱
3. 最初は name・color・cash だけ変えると安全

これだけで大丈夫です。

やる気を維持するコツ

プレイヤー名を変えると、一気に自分のゲームらしくなります。

Player 1
Player 2

よりも、

太郎
花子

の方が、ゲームを作っている感じが出ます。

さらに、学校用なら「Aチーム」「Bチーム」。

ビジネス教材なら「起業家A」「投資家B」。

授業用なら「チーム1」「チーム2」にしても面白いです。

まずは小さく変えて、画面で確認する。

それだけで、プログラミングは少し楽しくなります。

チェックリスト

□ _createInitialPlayers() を見つけた
□ PlayerState がプレイヤー情報だと分かった
□ name の意味を確認した
□ color の意味を確認した
□ position の意味を確認した
□ cash の意味を確認した
□ properties の意味を確認した
□ isFinished の意味を確認した
□ プレイヤー名を変更した
□ 所持金を変更した
□ 保存して画面で確認した

まとめ

この章では、プレイヤーを作る場所を確認しました。

プレイヤーは _createInitialPlayers() の中で、PlayerState として作られています。

name を変えるとプレイヤー名が変わり、cash を変えると最初の所持金が変わります。

最初は、id や position を大きく変えずに、名前・色・所持金だけ変更するのがおすすめです。

次の章では、ランダムイベントを作って、収入・出費・仕事・投資などのイベントを追加していきます。

忙しい方はここだけ見て

この章で触る場所は、ここです。

List<PlayerState> _createInitialPlayers() {
  return <PlayerState>[
    PlayerState(
      id: 0,
      name: 'Player 1',
      color: AppColors.red,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
    PlayerState(
      id: 1,
      name: 'Player 2',
      color: AppColors.blue,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
  ];
}

まず変えるなら、ここだけでOKです。

name: 'Player 1',

例えば、こう変えます。

name: '太郎',

所持金を変えたい場合は、ここです。

cash: 1500,

例えば、3000から始めたい場合です。

cash: 3000,

最初は、名前と所持金だけ変える のがおすすめです。

この章でやること

この章では、人生ゲームに登場するプレイヤーを作る場所を確認します。

プレイヤーには、名前・色・現在地・所持金・物件情報があります。

ゲーム中に変わる情報が多いので、プレイヤーのデータはとても大事です。

誰がプレイしているか
今どこのマスにいるか
現金はいくらか
どの物件を持っているか
ゴールしたか

これらをまとめているのが、PlayerState です。

今日のゴール

この章のゴールは、次の3つです。

1. プレイヤー情報がどこで作られているか分かる
2. 名前・色・所持金を変更できる
3. positionやpropertiesの意味が分かる

全部を覚えなくても大丈夫です。

まずは、「プレイヤーは _createInitialPlayers() で作る」と分かればOKです。

Step 1：_createInitialPlayers()を探す

lib/main.dart を開きます。

検索で、次の文字を探してください。

_createInitialPlayers

このようなコードがあります。

List<PlayerState> _createInitialPlayers() {
  return <PlayerState>[
    PlayerState(
      id: 0,
      name: 'Player 1',
      color: AppColors.red,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
    PlayerState(
      id: 1,
      name: 'Player 2',
      color: AppColors.blue,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
  ];
}

ここで、最初に登場するプレイヤーを作っています。

Step 2：PlayerStateとは？

PlayerState は、プレイヤー1人分の情報です。

class PlayerState {
  const PlayerState({
    required this.id,
    required this.name,
    required this.color,
    required this.position,
    required this.cash,
    required this.properties,
    required this.isFinished,
  });

  final int id;
  final String name;
  final Color color;
  final int position;
  final int cash;
  final Set<int> properties;
  final bool isFinished;
}

最初は、こう覚えればOKです。

PlayerState = プレイヤー情報を入れる箱

Step 3：プレイヤー情報の中身

PlayerState には、次の情報があります。

項目	意味	例
`id`	プレイヤー番号	`0`, `1`
`name`	プレイヤー名	`Player 1`
`color`	コマの色	`AppColors.red`
`position`	今いるマス	`0`
`cash`	所持金	`1500`
`properties`	持っている物件	`<int>{}`
`isFinished`	ゴールしたか	`false`

最初は、name、color、cash を見れば大丈夫です。

Step 4：名前を変えてみよう

まずは、名前だけ変えてみます。

変更前です。

name: 'Player 1',

変更後です。

name: '太郎',

2人目も変えます。

変更前です。

name: 'Player 2',

変更後です。

name: '花子',

このようになります。

List<PlayerState> _createInitialPlayers() {
  return <PlayerState>[
    PlayerState(
      id: 0,
      name: '太郎',
      color: AppColors.red,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
    PlayerState(
      id: 1,
      name: '花子',
      color: AppColors.blue,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
  ];
}

保存して画面に反映されれば成功です。

Step 5：所持金を変えてみよう

所持金は、cash で決めます。

変更前です。

cash: 1500,

3000から始めたい場合は、こうします。

cash: 3000,

2人とも同じ条件にしたい場合は、両方変えます。

cash: 3000,

所持金を増やすと、物件を買いやすくなります。

所持金を少なくすると、少し難しいゲームになります。

Step 6：色を変えてみよう

プレイヤーのコマの色は、color で決めています。

color: AppColors.red,

2人目は青です。

color: AppColors.blue,

例えば、2人目を緑にするならこうします。

color: AppColors.green,

紫にしたい場合です。

color: AppColors.purple,

使える色は、AppColors に書かれています。

AppColors.red
AppColors.blue
AppColors.green
AppColors.purple
AppColors.orange
AppColors.gold

まずは、この中から選ぶと安全です。

Step 7：positionを理解しよう

position は、今いるマスの番号です。

position: 0,

0 は、最初のマスです。

つまり、プレイヤーはゲーム開始時にスタート地点にいます。

position: 0
↓
0番目のマス
↓
人生のはじまり

基本的に、最初は 0 のままでOKです。

途中から始めたいとき以外は変えません。

Step 8：propertiesを理解しよう

properties は、プレイヤーが持っている物件です。

properties: <int>{},

<int>{} は、空っぽのセットです。

つまり、最初は物件を何も持っていません。

properties: <int>{}
↓
持っている物件なし

ゲーム中に物件を買うと、ここに物件マスの番号が追加されます。

初心者のうちは、ここは変えなくてOKです。

Step 9：isFinishedを理解しよう

isFinished は、ゴールしたかどうかです。

isFinished: false,

false は、まだゴールしていないという意味です。

ゲーム開始時は、まだ誰もゴールしていません。

そのため、ここは false のままでOKです。

false = まだ
true = 完了

Step 10：3人目を追加するときの考え方

慣れてきたら、3人目を追加することもできます。

追加例です。

PlayerState(
  id: 2,
  name: '三郎',
  color: AppColors.green,
  position: 0,
  cash: 1500,
  properties: <int>{},
  isFinished: false,
),

全体では、このようになります。

List<PlayerState> _createInitialPlayers() {
  return <PlayerState>[
    PlayerState(
      id: 0,
      name: '太郎',
      color: AppColors.red,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
    PlayerState(
      id: 1,
      name: '花子',
      color: AppColors.blue,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
    PlayerState(
      id: 2,
      name: '三郎',
      color: AppColors.green,
      position: 0,
      cash: 1500,
      properties: <int>{},
      isFinished: false,
    ),
  ];
}

ただし、最初は2人のままで大丈夫です。

3人以上にすると、画面が少し狭くなることがあります。

Step 11：idは重ならないようにする

プレイヤーを追加するときは、id が重ならないようにします。

良い例です。

id: 0
id: 1
id: 2

悪い例です。

id: 0
id: 1
id: 1

id は、プレイヤーを見分ける番号です。

同じ番号があると、物件の所有者などが分かりにくくなります。

Step 12：まずおすすめのカスタマイズ

初心者の方は、まずこの3つだけ変えるのがおすすめです。

変更するもの	例
名前	`Player 1` → `太郎`
色	`AppColors.red` → `AppColors.green`
所持金	`1500` → `3000`

この3つなら、ゲームの仕組みを壊しにくいです。

触ってみよう

今回は、プレイヤー名と所持金を変えてみましょう。

変更前です。

PlayerState(
  id: 0,
  name: 'Player 1',
  color: AppColors.red,
  position: 0,
  cash: 1500,
  properties: <int>{},
  isFinished: false,
),

変更後です。

PlayerState(
  id: 0,
  name: '太郎',
  color: AppColors.red,
  position: 0,
  cash: 3000,
  properties: <int>{},
  isFinished: false,
),

2人目も変えます。

PlayerState(
  id: 1,
  name: '花子',
  color: AppColors.blue,
  position: 0,
  cash: 3000,
  properties: <int>{},
  isFinished: false,
),

保存して、画面に「太郎」「花子」と出れば成功です。

よくあるエラーと直し方

1. カンマを消してしまった

悪い例です。

name: '太郎'
color: AppColors.red,

正しくはこちらです。

name: '太郎',
color: AppColors.red,

各行の最後にカンマを残します。

2. 文字の `'` を消してしまった

悪い例です。

name: 太郎,

正しくはこちらです。

name: '太郎',

文字は ' で囲みます。

3. cashを文字にしてしまった

悪い例です。

cash: '3000',

正しくはこちらです。

cash: 3000,

数字は ' で囲みません。

4. 色の名前を間違えた

悪い例です。

color: AppColors.pink,

AppColors に pink がない場合、エラーになります。

まずは、すでにある色を使いましょう。

color: AppColors.red,
color: AppColors.blue,
color: AppColors.green,
color: AppColors.purple,

5. idが重なっている

悪い例です。

id: 0,

id: 0,

正しくは、プレイヤーごとに変えます。

id: 0,

id: 1,

3人目なら、

id: 2,

です。

この章で覚えること

この章で覚えることは、3つだけです。

1. プレイヤーは _createInitialPlayers() で作る
2. PlayerState はプレイヤー情報をまとめる箱
3. 最初は name・color・cash だけ変えると安全

これだけで大丈夫です。

やる気を維持するコツ

プレイヤー名を変えると、一気に自分のゲームらしくなります。

Player 1
Player 2

よりも、

太郎
花子

の方が、ゲームを作っている感じが出ます。

さらに、学校用なら「Aチーム」「Bチーム」。

ビジネス教材なら「起業家A」「投資家B」。

授業用なら「チーム1」「チーム2」にしても面白いです。

まずは小さく変えて、画面で確認する。

それだけで、プログラミングは少し楽しくなります。

チェックリスト

□ _createInitialPlayers() を見つけた
□ PlayerState がプレイヤー情報だと分かった
□ name の意味を確認した
□ color の意味を確認した
□ position の意味を確認した
□ cash の意味を確認した
□ properties の意味を確認した
□ isFinished の意味を確認した
□ プレイヤー名を変更した
□ 所持金を変更した
□ 保存して画面で確認した

まとめ

この章では、プレイヤーを作る場所を確認しました。

プレイヤーは _createInitialPlayers() の中で、PlayerState として作られています。

name を変えるとプレイヤー名が変わり、cash を変えると最初の所持金が変わります。

最初は、id や position を大きく変えずに、名前・色・所持金だけ変更するのがおすすめです。

次の章では、ランダムイベントを作って、収入・出費・仕事・投資などのイベントを追加していきます。