「HP表示を手軽に自作する」の編集履歴（バックアップ）一覧はこちら
「HP表示を手軽に自作する」(2018/05/28 (月) 15:33:06) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
アクエディ４のHP表示は画面上部で棒グラフのようになっていますが、
ゲームによっては画面にハートマークがあり、攻撃を受けるたびに減っていく・・・
というタイプのものもあります。
今回は、ピクチャー表示機能を使ってそんなHP表示をつくってみましょう。
まず、HPの画像を用意します。
#ref(kokoro.bmp)
大きさなどは自由ですが、今回は３２☓３２のサイズのものを用意します。
この画像はbmp形式なのでダウンロードして実際に使っていただいてかまいません。
用意した画像をbmpフォルダの中にあるpictureフォルダに入れます。
次に、エディターをひらいてピクチャーの登録をします。
まず、データベースウィンドウのピクチャータブを開き、登録画面を出します。
次に「新規」ボタンをクリックして空白のピクチャーをつくり、そこに画像を指定します。
#ref(01.jpg)
名称は分かりやすく「ハートマーク」に、
「参照」ボタンをクリックして「kokoro.bmp」（用意した画像の名前）をひらいて登録します。
これでピクチャーの登録は終わりです。
これができたら、追加キャラクターにピクチャーを表示させるフローをつくります。
キャラパレットのプレイヤーキャラ（ヤシーユ）を開き、以下のようなフローを追加します。
#ref(02.jpg)
条件を「キャラのHPが１以上」にし、コマンドに「ピクチャーの表示」を挿入します。
#ref(03.jpg)
ピクチャーの表示はこんな感じ。
ピクチャーはさっき用意した「ハートマーク」に
表示位置は「画面座標」に
画面座標はXもYも１にします。これは「左上から１マス右、１マス下の位置にする」という意味です。
表示時間「時間で指定」でかつ「瞬間表示」にチェックを入れます。
こうすることで、実行条件に合わなくなった（HPが１以上ではなくなった）時に瞬時にピクチャーが消えるようになります。
「一時停止」のチェックは外しておきましょう。ピクチャーが表示されているあいだ操作が効かなくなってしまうと
HPは常に表示されているピクチャーなので、常に操作が効かなくなってしまうことになってしまいます。
また、画面がスクロールするステージにする場合は「画面に追従する」にチェックを入れておいてください。
（画面がスクロールしないステージで使用すると、ガタガタが無くなるので、ガタガタが苦手な方はチェック推奨）
これで、「HPが１以上の時にピクチャーを１個表示する」というフローが完成しました。
同じように「HPが２以上の時にピクチャーを１個表示する」というフローもつくります。
『HPが２以上の時は２個ピクチャーが必要ではないか』と思うかもしれませんが、
１個目のピクチャーはHPが１以上の時に表示するピクチャーで間に合うので必要ありません。
つくったフローをコピーして新しくつくります。
#ref(04.jpg)
条件を「HPが２以上」に変えて、ピクチャーの設定も少し変えます。
#ref(05.jpg)
同じ場所に何枚もピクチャーを表示しても重なって一つに見えてしまいます。
そこで、座標Xを２に変えます。これで、「画面の左上から２マス右に、１マス下に表示」という意味になります。
これで「HPが２以上の時にピクチャーを１個表示する」というフローも完成しました。
あとは、同じようなことを繰り返せばHPはどこまでも増やせます。
#ref(06.jpg)
例としてHPを主人公の最大値である４まで表示できるようにしました。
この技は手軽に実装できますが、フローの数が多くなってしまうので、１００などの大きいHPを扱うには不向きです。
多くても１０までにしておきましょう。
・HPバーを作成してHPと同期する
アクエディ４のHP表示は画面上部で棒グラフのようになっていますが、
見た目がちょっと自分のゲームとそぐわない、もしくは自分のUIをつくったので
そちらで棒型のHP表示をしたい、という方も多いのではないでしょうか。
今回は、ピクチャー表示機能を使ってそんなHP表示をつくってみましょう。
まず、HPバーの画像を用意します。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/85/hpbar.bmp)
大きさなどは自由ですが、規格上横幅が４の倍数のものである必要と、
できればできるだけ割るのに便利な数であると望ましいです。
今回は１００×１５のサイズのものを用意します。
この画像はbmp形式なのでダウンロードして実際に使っていただいてかまいません。
用意した画像をbmpフォルダの中にあるpictureフォルダに入れます。
まず、HPバーを入れる枠の画像を用意します。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/86/HPbarframe.bmp)
これはさっきの枠が収納できるようであれば横幅が４の倍数なら何でもいいです。
今回は１３０×２３のサイズのものを用意します。
この画像はbmp形式なのでダウンロードして実際に使っていただいてかまいません。
次に、エディターをひらいて２つのピクチャーの登録をします。
この辺は上の項目を参照してください。
これができたら、追加キャラクターにピクチャーを表示させるフローをつくります。
キャラパレットのプレイヤーキャラ（ヤシーユ）を開き、以下のようなフローを追加します。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/80/1.png)
ピクチャーの表示後そのフローを削除するコマンドを入れるのを忘れずに。
HPフレームの表示位置は 「画面座標」に画面座標はXを０，ｙを０にします。ピクチャ番号は指定しなくてもいいです。
HPバーの表示位置は 「画面座標」に画面座標はXを０，ｙを４にします。ピクチャ番号は０に。
表示時間「ステージ終了まで」にチェックを入れます。
こうすることで、実行条件に合わなくなった（HPが１以上ではなくなった）時に瞬時にピクチャーが消えるようになります。
「一時停止」のチェックは外しておきましょう。ピクチャーが表示されているあいだ操作が効かなくなってしまうと
HPは常に表示されているピクチャーなので、常に操作が効かなくなってしまうことになってしまいます。
また、画面がスクロールするステージにする場合は「画面に追従する」にチェックを入れておいてください。
（画面がスクロールしないステージで使用すると、ガタガタが無くなるので、ガタガタが苦手な方はチェック推奨）
ついでに、ステータスバーはもう要らなくなるのでステージの設定からチェックを外しておきましょう。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/90/t.png)
これで最初の分は完成です。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/87/HPzissou.png)
とりあえず表示されましたね。
次はダメージを受けたときのHPをずらす処理です。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/81/2.png)
自分（主人公）のHPを、コモン変数３（全体であっていれば変数番号は何でもいいです）に代入します。
この変数は「主人公HPずれ」と名付けておきましょう。
次に コモン変数３を１００倍します。
そしてコモン変数３を次分の最大HPで割ります。
そしてコモン変数３から１００引きます。
これは最大HPとのズレを１００分率で表したものです。
この一連の流れはコードの実行を使うと簡単に代用できます。 が、今回は省略。
そしてアレンジします。
アレンジの対象をピクチャー、Xのズレをコモン変数３に。
そして先程のフローで使ったHPバーの文を貼り付けます。完成。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/82/3.png)
これを死亡したときにもつけましょう。
回復したときも、以下のようなフローを使って発動できます。回復するときに変数２を１にして、
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/83/4.png)
だいたいこんな感じです。応用すれば敵にもHP表示させることができます。
更に応用すればこんな
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/88/eruri.png)
ステータスを作ったり
こんな
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/89/SCO.png)
ステータスを作ったりも。夢が膨らみますね！
アクエディ４のHP表示は画面上部で棒グラフのようになっていますが、
ゲームによっては画面にハートマークがあり、攻撃を受けるたびに減っていく・・・
というタイプのものもあります。
今回は、ピクチャー表示機能を使ってそんなHP表示をつくってみましょう。
まず、HPの画像を用意します。
#ref(kokoro.bmp)
大きさなどは自由ですが、今回は３２☓３２のサイズのものを用意します。
この画像はbmp形式なのでダウンロードして実際に使っていただいてかまいません。
用意した画像をbmpフォルダの中にあるpictureフォルダに入れます。
次に、エディターをひらいてピクチャーの登録をします。
まず、データベースウィンドウのピクチャータブを開き、登録画面を出します。
次に「新規」ボタンをクリックして空白のピクチャーをつくり、そこに画像を指定します。
#ref(01.jpg)
名称は分かりやすく「ハートマーク」に、
「参照」ボタンをクリックして「kokoro.bmp」（用意した画像の名前）をひらいて登録します。
これでピクチャーの登録は終わりです。
これができたら、追加キャラクターにピクチャーを表示させるフローをつくります。
キャラパレットのプレイヤーキャラ（ヤシーユ）を開き、以下のようなフローを追加します。
#ref(02.jpg)
条件を「キャラのHPが１以上」にし、コマンドに「ピクチャーの表示」を挿入します。
#ref(03.jpg)
ピクチャーの表示はこんな感じ。
ピクチャーはさっき用意した「ハートマーク」に
表示位置は「画面座標」に
画面座標はXもYも１にします。これは「左上から１マス右、１マス下の位置にする」という意味です。
表示時間「時間で指定」でかつ「瞬間表示」にチェックを入れます。
こうすることで、実行条件に合わなくなった（HPが１以上ではなくなった）時に瞬時にピクチャーが消えるようになります。
「一時停止」のチェックは外しておきましょう。ピクチャーが表示されているあいだ操作が効かなくなってしまうと
HPは常に表示されているピクチャーなので、常に操作が効かなくなってしまうことになってしまいます。
また、画面がスクロールするステージにする場合は「画面に追従する」にチェックを入れておいてください。
（画面がスクロールしないステージで使用すると、ガタガタが無くなるので、ガタガタが苦手な方はチェック推奨）
これで、「HPが１以上の時にピクチャーを１個表示する」というフローが完成しました。
同じように「HPが２以上の時にピクチャーを１個表示する」というフローもつくります。
『HPが２以上の時は２個ピクチャーが必要ではないか』と思うかもしれませんが、
１個目のピクチャーはHPが１以上の時に表示するピクチャーで間に合うので必要ありません。
つくったフローをコピーして新しくつくります。
#ref(04.jpg)
条件を「HPが２以上」に変えて、ピクチャーの設定も少し変えます。
#ref(05.jpg)
同じ場所に何枚もピクチャーを表示しても重なって一つに見えてしまいます。
そこで、座標Xを２に変えます。これで、「画面の左上から２マス右に、１マス下に表示」という意味になります。
これで「HPが２以上の時にピクチャーを１個表示する」というフローも完成しました。
あとは、同じようなことを繰り返せばHPはどこまでも増やせます。
#ref(06.jpg)
例としてHPを主人公の最大値である４まで表示できるようにしました。
この技は手軽に実装できますが、フローの数が多くなってしまうので、１００などの大きいHPを扱うには不向きです。
多くても１０までにしておきましょう。
・HPバーを作成してHPと同期する
アクエディ４のHP表示は画面上部で棒グラフのようになっていますが、
見た目がちょっと自分のゲームとそぐわない、もしくは自分のUIをつくったので
そちらで棒型のHP表示をしたい、という方も多いのではないでしょうか。
今回は、ピクチャー表示機能を使ってそんなHP表示をつくってみましょう。
まず、HPバーの画像を用意します。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/85/hpbar.bmp)
大きさなどは自由ですが、規格上横幅が４の倍数のものである必要と、
できればできるだけ割るのに便利な数であると望ましいです。
今回は１００×１５のサイズのものを用意します。
この画像はbmp形式なのでダウンロードして実際に使っていただいてかまいません。
用意した画像をbmpフォルダの中にあるpictureフォルダに入れます。
まず、HPバーを入れる枠の画像を用意します。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/86/HPbarframe.bmp)
これはさっきの枠が収納できるようであれば横幅が４の倍数なら何でもいいです。
今回は１３０×２３のサイズのものを用意します。
この画像はbmp形式なのでダウンロードして実際に使っていただいてかまいません。
次に、エディターをひらいて２つのピクチャーの登録をします。
この辺は上の項目を参照してください。
これができたら、追加キャラクターにピクチャーを表示させるフローをつくります。
キャラパレットのプレイヤーキャラ（ヤシーユ）を開き、以下のようなフローを追加します。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/80/1.png)
ピクチャーの表示後そのフローを削除するコマンドを入れるのを忘れずに。
HPフレームの表示位置は 「画面座標」に画面座標はXを０，ｙを０にします。ピクチャ番号は指定しなくてもいいです。
HPバーの表示位置は 「画面座標」に画面座標はXを０，ｙを４にします。ピクチャ番号は０に。
表示時間「ステージ終了まで」にチェックを入れます。
こうすることで、実行条件に合わなくなった（HPが１以上ではなくなった）時に瞬時にピクチャーが消えるようになります。
「一時停止」のチェックは外しておきましょう。ピクチャーが表示されているあいだ操作が効かなくなってしまうと
HPは常に表示されているピクチャーなので、常に操作が効かなくなってしまうことになってしまいます。
また、画面がスクロールするステージにする場合は「画面に追従する」にチェックを入れておいてください。
（画面がスクロールしないステージで使用すると、ガタガタが無くなるので、ガタガタが苦手な方はチェック推奨）
ついでに、ステータスバーはもう要らなくなるのでステージの設定からチェックを外しておきましょう。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/90/t.png)
これで最初の分は完成です。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/87/HPzissou.png)
とりあえず表示されましたね。
次はダメージを受けたときのHPをずらす処理です。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/81/2.png)
自分（主人公）のHPを、コモン変数３（全体であっていれば変数番号は何でもいいです）に代入します。
この変数は「主人公HPずれ」と名付けておきましょう。
次に コモン変数３を１００倍します。
そしてコモン変数３を次分の最大HPで割ります。
そしてコモン変数３から１００引きます。
これは最大HPとのズレを１００分率で表したものです。
この一連の流れはコードの実行を使うと簡単に代用できます。 が、今回は省略。
そしてアレンジします。
アレンジの対象をピクチャー、Xのズレをコモン変数３に。
そして先程のフローで使ったHPバーの文を貼り付けます。完成。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/82/3.png)
これを死亡したときにもつけましょう。
回復したときも、以下のようなフローを使って発動できます。回復するときに変数２を１にして、
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/83/4.png)
一連の処理が成功したらダメージを受けたときなどに
ちゃんとHPがずれるようになってくれます。
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/84/hp.png)
だいたいこんな感じです。応用すれば敵にもHP表示させることができます。
更に応用すればこんな
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/88/eruri.png)
ステータスを作ったり
こんな
#image(https://img.atwikiimg.com/www47.atwiki.jp/acedi4wiki/attach/110/89/SCO.png)
ステータスを作ったりも。夢が膨らみますね！
