日本語によるマークアップ言語でブラウザゲームを開発できる統合開発環境を開発してみた③

# はじめに
<a href="https://qiita.com/what/items/865f1c218046704ea64b">前回②</a>の続きになります。
今回は、キャラクターに自己紹介をさせる方法について説明していきたいと思います。
タグでいうと、「人物参照」機能と「変数表示」機能ですね。

# 自己紹介のさせ方

さっそく、ボタンの中から人物参照ボタンを探してクリックしてみましょう。
するとフォームが表示させるので
「＄選択中」の「名前」を「＄システム変数文字列1」に代入する
を選択して生成ボタンをクリックしましょう。

<img width="404" alt="スクリーンショット 2020-07-05 14.56.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/3769b1ed-5513-cab0-dbdc-ca7c397a119d.png">

するとこんなコードが生成されます。

```
<人物参照 代入先="$システム変数文字列1" 役割="$選択中" 属性="名前" />
```
システム変数というのは、ゲームを作成したときに、はじめから用意されている変数の名前ですね。小さなゲームイベントなどを作るたびに新しい変数を作成するのが面倒くさいなと感じたときは、この変数だけで片付けちゃいましょう！

これでキャラクターの名前を変数に格納しましたのでこれを表示させてみましょう。

変数表示ボタンをクリックしてみましょう。
そしたら、このようなフォームが表示されるので、「＄システム変数文字列1」を選択して、クリックしましょう。

<img width="408" alt="スクリーンショット 2020-07-05 15.21.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/f0de15e2-bcc8-61b8-7906-d3dcb47aa3fa.png">

以下のコードが生成されるはずです。

```
<変数表示 変数="$システム変数文字列1" />
```

変数表示タグは小説タグか会話タグの中でしか、効果を発揮しないので、こんな感じに会話タグの中に入れてみましょう。

```
<会話 役割="$選択中"  性別="男" 速度="60" >
  俺の名前は<変数表示 変数="$システム変数文字列1" />だ！<クリック />
</会話>
<会話 役割="$選択中"  性別="女" 速度="60" >
  私の名前は<変数表示 変数="$システム変数文字列1" />よ！<クリック />
</会話>
```

かっこよく自己紹介してくれます。

<img width="250" alt="スクリーンショット 2020-07-05 15.27.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/b6285ded-5f3b-ed22-e65c-1d6d008f6562.png">

一人称に「俺」「私」を使いましたけど、これもキャラクター固有のものに置き換えることができます。


```
<人物参照 代入先="$システム変数文字列1" 役割="$選択中" 属性="名前" />
<人物参照 代入先="$システム変数文字列2" 役割="$選択中" 属性="一人称" />

<会話 役割="$選択中"  性別="男" 速度="60" >
 <変数表示 変数="$システム変数文字列2" />の名前は<変数表示 変数="$システム変数文字列1" />だ！<クリック />
</会話>
<会話 役割="$選択中"  性別="女" 速度="60" >
  <変数表示 変数="$システム変数文字列2" />の名前は<変数表示 変数="$システム変数文字列1" />よ！<クリック />
</会話>
```


<img width="250" alt="スクリーンショット 2020-07-05 15.33.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/6cf2f4b4-db68-5207-bd6f-0fd430dadc8e.png">


propsgamesの主人公は４人いますので、４人全員に順番に自己紹介させてみましょう。

<img width="250" alt="スクリーンショット 2020-07-09 19.49.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/e9cb3059-c735-fdb8-cf06-6adec9369c24.png">

場面編集画面のコード編集フォームに戻り、赤い色をしたループボタンをクリックすると、以下のようなポップアップが表示されます。

<img width="300" alt="スクリーンショット 2020-07-09 19.51.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/8236ed2c-248c-df71-102f-a8f89b7cad54.png">


ここでループ対象を味方全体にしたまま、それぞれボタンを押すと以下のようなコードが生成されます。


```
<それぞれ 対象="味方全体">

</それぞれ>
```

これは、プログラミング言語のforeach文と同じで、キャラクターの人数分だけ(４人)、同じ処理を繰り返します。

この中にさっき作った自己紹介イベントを入れ込みましょう。こんな感じに！

```
<それぞれ 対象="味方全体">
  <人物参照 代入先="$システム変数文字列1" 役割="$選択中" 属性="名前" />
  <人物参照 代入先="$システム変数文字列2" 役割="$選択中" 属性="一人称" />

  <会話 役割="$選択中"  性別="男" 速度="60" >
   <変数表示 変数="$システム変数文字列2" />の名前は<変数表示 変数="$システム変数文字列1" />だ！<クリック />
  </会話>
  <会話 役割="$選択中"  性別="女" 速度="60" >
    <変数表示 変数="$システム変数文字列2" />の名前は<変数表示 変数="$システム変数文字列1" />よ！<クリック />
  </会話>
</それぞれ>
```

ゲームを実行すると４人が順番に自己紹介をしてくれる姿を見せてくれるはずです。




なお、キャラクターの名前や一人称などについてはアカウントを作成したユーザーは自由に変更することができます。

一人称や名前以外に参照できるキャラクターデータは以下の通りです。

<img width="101" alt="スクリーンショット 2020-07-05 15.34.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/a262442e-73f4-562f-3015-4e89e053550f.png">

最大HP キャラクターの体力の最大値です。体の値の２倍が最大HPになります。
HP キャラクターの体力の現在値です
知　キャラクターの知力です
力　キャラクターのパワーです
技　キャラクターの技術力です
速　キャラクターの速度です
種族　キャラクターの種族です。主人公４名の場合ファイター,ハンター,マジシャン,エンジニアのいずれかです
性別　propsgamesでは男か女の２択です
陣営　敵か味方のいずれかが選択されます
一人称　俺、私、僕などなどです

キャラクターの能力値についてはゲーム編集画面で設定を行うことができます。

<img width="431" alt="スクリーンショット 2020-07-05 15.41.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/c1575823-84b4-a115-d8e5-b43a40cf0308.png">







# おわりに
「人物参照」機能はキャラクターのデータを参照することができ、データを画面に表示させたり、データの内容によって、処理を分岐させることができます。