画像を表示してみよう | スマホ対応HTML5アドベンチャーゲームエンジン – Almight

画像を表示してみよう
背景を表示させてみる
真っ黒な画面では寂しいので、背景を表示させてみましょう。

まず、1行目の下に以下のマクロを入力してみてください。

@show_bg file=”bg01.jpg”
@action
このようになりましたか？

@call storage=”macro.ks”

@show_bg file=”bg01.jpg”
@action
Almightへようこそ！[m]
このゲームエンジンで、[m]
どんなゲームを作りますか？
@s
すると、このように画像がフェードイン表示されます。

02_001

では、少し掘り下げて見てみましょう。

@show_bg file=”bg01.jpg”
@action
[show_bg]を使うと、背景を読み込むことができます。

この場合は、「game」フォルダの「jpg」フォルダ内にある、bg01.jpg が読み込まれていますね。 [show_bg]のfile属性に、ファイル名を指定しています。このマクロは、jpgファイルに限り拡張子を省略出来ます。

基本的に、プロジェクトフォルダに素材を追加するときは「game」フォルダ以下の「＜ファイルの拡張子＞」フォルダにファイルを追加してください。

しかし、[show_bg]のみを使っても画面に画像は表示されません。
このマクロは、画像を読み込むだけで、画面に表示することはしないからです。

そこで、そのあと[action]を実行することで、読み込んだ画像を表示することが出来ます。

[action time=3000] のように、time属性を指定することでフェードする時間を3秒間に伸ばしたり、timeに0を指定して即時切り替えたりも出来ます。

では、次に立ち絵イラストを表示していきましょう。

立ち絵を表示させてみる
では、ゲームの登場人物たちを表示してみましょう。

先ほど入力した2行の下に、以下を追加してみましょう。

@show_c file=”pra01.png”
@action
このようになりましたか？

@call storage=”macro.ks”

@show_bg file=”bg01.jpg”
@action

@show_c file=”pra01.png”
@action

Almightへようこそ！[m]
このゲームエンジンで、[m]
どんなゲームを作りますか？
@s
すると、このように立ち絵がフェードイン表示されます。

02_002

今回は[show_c]を使って立ち絵を中心に読み込みました。

立ち絵を読み込むマクロは他にもあります。

[show_l] 左端に読み込む
[show_lc] 中心より左寄りに読み込む
[show_rc] 中心より右寄りに読み込む
[show_r] 右端に読み込む
[show_c] 中心に読み込む
キャラを2人表示するには、以下のように変更します。

@call storage=”macro.ks”

@show_bg file=”bg01.jpg”
@action

@show_lc file=”pra01.png”
@show_rc file=”ele01.png”
@action

Almightへようこそ！[m]
このゲームエンジンで、[m]
どんなゲームを作りますか？
@s
02_003

立ち絵は背景より上、メッセージレイヤーより下に表示されます。

新しく立ち絵を追加するときは、PNG形式で画像サイズをゲームの画面サイズと同じにし、他の部分を透過するようにしてください。

ユニバーサルトランジション
[action]は、属性なしだと1秒かけてクロスフェードで画像を切り替えますが、ルール画像と呼ばれるモノクロ画像を使うとユーザーが自由にトランジションを設定することができます。

「png」フォルダに「rule01.png」というファイルがありますが、これがルール画像と呼ばれるものです。

02_004

では、先ほど追加した2行目のactionに、以下の属性を追加してみましょう。

@action rule=”rule01.png”
このようになりましたか？

@call storage=”macro.ks”

@show_bg file=”bg01.jpg”
@action

@show_lc file=”pra01.png”
@show_rc file=”ele01.png”
@action rule=”rule01.png”

Almightへようこそ！[m]
このゲームエンジンで、[m]
どんなゲームを作りますか？
@s
02_005

ルール画像の模様にそって、トランジションが実行されます。

このように[show_*]を使って画像を読み込んで、[action]で実行して画像を表示する。
というのが、画像表示の基本になります。

なお、画像を消すときは[hide_*]を使って、[action]を実行します。

@hide_lc
@action
を追加すると、[show_lc]で表示された立ち絵のみ非表示になります。

02_006

全ての立ち絵を消す[hide_all]というもあります。

以下で、今回使ったマクロの詳細を解説していますので、見てみてくださいね。

今回使ったマクロ
背景を読み込む

[show_bg file=”ファイル名”]

背景を読み込みます。その後、[action]を使って実行してください。
jpgの場合のみ拡張子は省略可能になります

背景を非表示にする

[hide_bg]
背景を非表示にします。その後、[action]を使って実行してください。

立ち絵などの画像を読み込む

左端 [show_l file=”ファイル名”]
右端 [show_r file=”ファイル名”]
左寄り [show_lc file=”ファイル名”]
右寄り [show_rc file=”ファイル名”]
中心 [show_c file=”ファイル名”]
立ち絵を読み込みます。その後、[action]を使って実行してください。
pngの場合のみ拡張子は省略可能になります

立ち絵などの画像を非表示にする

左端 [hide_l]
右端 [hide_r]
左寄り [hide_lc]
右寄り [hide_rc]
中心 [hide_c]
すべて消す [hide_all]
立ち絵を非表示属性にします。その後、[action]を使って実行してください。

処理を実行する

[action (time=”フェード時間” rule=”ルール画像のファイル名” skip=”trueまたはfalse(デフォルト)”)]
画像処理を実行します。全て省略すると、1秒かけてクロスフェードで実行されます。
ルール画像を指定すると、そのルール画像でフェードします。ルール画像はjpgの場合のみ拡張子は省略可能になります
なお、メッセージレイヤーはルール画像を指定してもクロスフェードで実行されます。
skipにtrueを指定すると、フェード処理がクリックでスキップ可能になります