シングルプレイミッションの概要を表示する(overview.html) -ArmA訓練所-

ArmA訓練所
2007/05/20

ここではシングルミッションをちょっとかっこよく見せるための説明書き、Overviewについて説明します。
ArmAに最初から入っているシングルミッションは、ミッション名をクリックしたときに
画像と簡単なミッション内容を表示するようになっています。
この表示は自作ミッションでも作成することが出来ます。

目次

Overviewを表示するには

表示するのにそう難しいことをする必要はありません。
マイドキュメント\ArmA\missions\ミッション名\overview.html
というoverview.htmlファイルを追加するだけでよいのです。(ArmAの箇所はArmA Other Profilesの場合有り)
中身はおよそHTMLと大差ありませんが、書き方についてはArmAとOFP独特の記述を要求されます。

overview.htmlの中身

ウェブページ制作をしたことがある人ならおよそHTMLの知識はあるかもしれません。
ただ、ホームページビルダーやDreamWeaverなどのデザイン編集モードでこのHTMLはまず作れません。
ちょっと面倒ですが、テキストエディタを使ってoverview.htmlを作成します。 

<html>
<head><title>Overview or anything you like or nothing at all</title></head>
<body>
<h2 align="center">YOUR WAR</h2>
<p align="center"><img src="Apicture.jpg" width="230" height="170"></p>
<p>a single sentence description</p>
<p>another  sentence if you must</p>
</body>
</html>

これがBISのサンプルとして表示されているhtmlなのですが、
これだけを見て真似ようとするといろいろとトラブルが発生するので、少々日本語と説明を追加したいと思います。 

01:<html>
02:<head><title>Overview</title></head>
03:<body>
04:<br>
05:<p align="center"><img src="harrierlanding_overview.jpg" width="155" height="95"></p>
06:<br>
07:<h2 align="center">Harrier Landing</h2>
08:<p>
09:Welcome to a Training mission.<br>
10:This is a training of Harrier Landing.<br>
11:</p>
12:<p>Challenge usual landing.</p>
13:<p>Challenge VTOL.</p>
14:<br>
15:<p align="right">made by SKY</p>
16:<p align="right">ver1.03</p>
17:</body>
18:</html>

上記の例は、私が作ったミッションのoverview.htmlです。
これをコピペしてもらえばおおよそ普通のoverview.htmlができますが、
これを元に説明し、変更することでoverview.htmlの完成をめざしましょう。

2行目のheadタグ内にあるtitleタグは、いかにもミッションタイトルを表示しそうですが、
この箇所での指定は特に意味をなさないようです。そのままにしておきましょう。
5行目のimgタグで画像を表示します。
ファイル名はミッションフォルダに置いたjpegファイルかpaaファイルのファイル名を指定します。
widthとheight属性で画像の表示サイズを指定します。
ここでは特に問題ない限り155x95サイズで表示した方がよいでしょう。
このサイズは公式シングルミッションで採用されている表示サイズで、見栄えを整えるのに便利です。
特に注意が必要なのがjpegやpaa画像ファイルのサイズです。
表示サイズとは別に、元画像の縦と横の大きさに制約があります。
画像の制約については次のセクションで説明します。
7行目でミッションのタイトルを表示しています。
中央表示より左寄せがよければalign="center"の記述を消します。
8～13行目の間にミッションの概要や説明、あらすじなどを記入しています。
残念なことに記述できるのはアルファベットくらいで、日本語は記入できません。
日本語を記入するには、日本語を書いた画像ファイルを貼り付けるしかありません。
15,16行目に作者名やバージョン名などを記入しています。
もちろん、表示スペースをフルに使ってミッション内容を表示してもかまいませんし、
空白を開けておいてもかまいません。
ただ、ArmAのバージョンアップによって、ミッションがうまく動かなくなったり、
ミッションにバグがあって不具合修正した際に、バージョンが分かった方がよいと個人的に思います。
HTMLタグの知識があれば難しくはありませんが、以下のタグが分かれば作成できると思います。

h2タグ
見出しを定義するタグ。タイトルなどをこのタグで囲う。
pタグ
段落を定義するタグ。文章のまとまりをこのタグで囲う。
brタグ
改行を定義するタグ。文章で改行を入れたいところで記述します。
imgタグ
画像を表示するタグ。文章の途中に画像を入れたいところで記述します。

画像の制約

元画像の縦と横の大きさは、128、256、512といった数字でなければなりません。
例えば、256x256サイズや512x256サイズは問題ありませんが、
155x95や500x200といったサイズはエラーで表示することが出来ません。
また、表示サイズと元画像の縦と横の長さの比が異なるため、画像が引き延ばされたり潰れたりします。
この画像の縦横比を正しくするための方法を紹介します。
まず、縦横比の正しい元の画像を155x95の倍数の大きさで作成します。たとえば、310x190や620x380などです。
こうして出来た画像を256x256などに大きさにリサイズします。この時点で縦横比が崩れます。
しかし、これを155x95で表示すると、崩れた比率が元の比率に引き延ばされます。
画像の出来映えに気を配るなら是非こうした調整を加えてみましょう。

表示テスト

作成中のミッションを保存します。
Save as: Export to single missionsを選んでシングルミッションとして出力(エクスポート)してみましょう。
こうすることで、ミッションフォルダ内にあったミッションデータとoverview.htmlがセットになります。
エクスポートされたミッションはArmAをインストールしたフォルダのmissionsフォルダに入っています。
エクスポートした直後からシングルミッションメニューに表示されるので便利です。
ArmAの起動後のメニューでシングルミッションを開き、作ったミッションをクリックしてみましょう。
うまく出来ていればミッションリストに合わせて先ほどのoverviewが表示されるはずです。
この表示を参考に、文字数や改行位置を修正します。
明らかに表示がおかしい場合はHTMLタグがおかしい可能性があります。
タグの開始と終了が間違っていないか、タグの名前が間違っていないか確認してください。
これで微調整が済めばかっこいいOverviewの出来上がりです。

補足

overview.htmlはミッションの概要だけでなく、カスタムフォルダの概要も表示出来ます。
自作シングルミッションにストーリーをもうけたりして、ステージ1～ステージ10まで作ったとしましょう。
ミッションを公開するときにミッションをフォルダにまとめて、そのフォルダにoverview.htmlを入れることで、
フォルダを選択した時点でoverviewを表示させることが出来ます。
シングルミッションでストーリー制作をしている方は雰囲気作りにチャレンジしてみるといいかもしれません。

Homeへ