集中企画

犬でもできる！　杏子とわんこのAIRNovel講座　第2回

もっともっと作り込もう　～立ち絵、BGM、タイトル画面について～

（2013/4/19 10:31）

　誰でも無償で使えて、マルチプラットフォームのノベルゲームを開発できる「AIRNovel」。本企画では全4回にわたり、AIRNovelでのゲーム制作の基本から、制作したゲームを実際に公開したり、Web上でプレイできるようにするまでを対話形式で解説します。

　前回はANBooksでの開発の基本や改ページ、背景の変更について杏子ちゃんが解説してくれました。今回は立ち絵を表示してみたり、BGMを鳴らしてみたり、タイトル画面をカスタマイズしてみましょう。

森里杏子（もりさとあんこ）　ハンドルネーム：AN子

日本一のあんずの生産地、千曲市に住んでいる14歳。友人とゲームを作るためAIRNovelによるゲーム制作を勉強している。ハンドルネームはAIRNovelから。弦蔵（げんぞう）という珍妙な柴犬を飼っている。

「4月だからあんず祭りに来てくれるお客さんのことも気になるけど、わんこちゃんのゲームの行方も気になるんだよね……」

弦蔵（げんぞう）

杏子が飼っている、なぜか人語をしゃべる、マニアックで非常識な黒い柴犬。愛称は『わんこ』。

男（オス）の生き様をゲームにして、世間に知らしめたいと思い立ち、杏子にゲーム作りを教わり始める。

「わんこの常識非常識！　元気があれば、わんこだってゲームを作れるワン！」

2-1　『本文を改行・改ページしよう』

ご主人！　前回教えてもらった内容でゲーム作ってるけど、なんかエラーになったワン！
見てほしいワン！

わんこ、前回と同じミス

どれどれ？　……ん、バグだよわんこちゃん。
前回も教えたじゃない？　台詞は文字があふれないように、改ページしたい位置に『\』を入れるんだよって～。

PCが壊れたのかと思ってあせったワン。
……というか、よくみたらこれって前回と同じバグだワン。

最初のうちは同じミスをしてしまいがちだけど、焦らずバグを直しながら進めていこうね☆
バグを直す作業を「デバッグ」って言うの。ゲーム作りにデバッグはつきものだよ。
タイトルバーにエラーの詳細が出てるから一緒に読んでみようか。

『*** fn:ss_000 line:39文字出力例外 mes=[hyph] カーソルが表示領域を超えました。表示行数が max_col を越え、文字がページを越えて溢れています』

……わんこにもわかるように書いてほしいワン！

わんこちゃんも読み方を覚えようよ。
「fn:ss_000 line:39」は「ss_000.anっていうファイルネームのスクリプトの、39行目で」例外……つまりエラーが発生したということなの。
「カーソルが表示領域を超えました」「文字がページを越えて溢れています」っていうのは、テキストが長すぎてウィンドウをあふれちゃったからエラーになりました、ってことよ。

タイトルバーじゃあなくて、不具合の理由がちゃんと表示されるようになってほしいワン。

そんなわんこちゃんには便利なソフトがあるよ☆　「Alcon」ていうフリーソフトなんだけどね、Alconを起動してからゲームを実行するだけだから簡単なの。
エラーが発生したらAlconのウィンドウに詳しく表示されるから、デバッグのヒントにしてね。

Alcon ≫ Tetragon Engine | Tetragon Engine（下の方にある“Download”からダウンロード可能）: http://www.tetragonengine.com/alcon/

「Alcon」の画面

ゲームを実行すると、エラーが表示された

それなら、わんこみたいな初心者は開発中はいつもAlconを起動しておく方が良さそうだワン。
エラーが発生してからAlconを起動して、またそこまでプレイするのはちょっと面倒だワン。

そういうちょっとした工夫の積み重ねが、効率アップにつながるよ♪

ところで、改ページしないでクリックを待つようにしたいときはどうしたらいいのかワン？

クリック待ちのときは『@』を使うんだよ。読者がクリックするまでテキスト送りが止まってくれるよ。
[r]とセットで使うことが多いかな。
[r]は「改行する」タグだよ。『@』と組み合わせて『@[r]』とすれば、クリックするたびに次の行を表示できるわけ。

『@』のあるところで止まったワン！　ここでクリックすると少しずつ文字が出るワン！
なんかノベルゲームっぽくなってきたワン！

というわけで、テキストの読みやすさなどを考えて、適切に改行・改ページをしてあげてね。

わんこのまとめ

ゲーム作りにデバッグはつきもの。
開発中は常時Alconを同時起動しておくのがおすすめ。
（おさらい）文末に半角『\』で改ページ。
テキスト送りを止めてクリック待ちをするには『@』。
改行は[r]。
組み合わせて『@[r]』とすれば、「クリックで1行ずつ読み進める」というノベルゲームらしい文章を作れる。

2-2　『立ち絵を表示しよう』

立ち絵表示の基本

前回立ち絵について簡単に教えてもらったけど、実際に表示する方法を知りたいワン。
とりあえずこのご主人の絵を表示してみたいワン。

ん？　あたしの立ち絵を用意したの？
じゃあ、画像素材を用意できたら「fgimage」フォルダに入れてね。
立ち絵の表示には[fg]マクロを使うよ。
画像ファイル名が「anko01-1-bs.png」なら、
[fg fn="anko01-1-bs"]
って記述してね。

ご主人が表示されたけど、なんかおかしいワン。立ち絵の周りに変な色がついてて、背景から浮いてるワン。

立ち絵素材にJPEGファイルを使ったからだね。
立ち絵を作るときは、背景は透過するようにして、PNG形式で保存してね。
あ、あと画像を再作成したら、JPEGのほうは忘れないように削除するんだよ。

PNG形式で背景を透過した画像に作り直したら、立ち絵だけが表示されたワン！

それじゃあ、わんこもご主人の横に出してみるワン！
こんな風に書いたらいいのかな……っと。

……あれ？　ご主人が消えて、代わりにわんこが出てきたワン？
同時に2人目の立ち絵を表示したい場合はどうしたらいいのかワン？

同時に2人以上出したいときは、「レイヤ」を使い分けるんだよ。
マクロ[fg]の使い方をAIRNovel公式サイトのリファレンスで調べてみようね。
http://famibee.web.fc2.com/tag_dev/macro.htm#fg

『引数は[lay]（画像レイヤ）、[trans]（ページ裏表を交換）の物を指定。立ち絵なら主にlayer、fn、pos、rule、time属性を使用すれば表現できる』とあるね。
次に[lay]タグを調べるてみると……。
http://famibee.web.fc2.com/tag_dev/tags.htm#lay
「layer」という属性があるから、これに「0」「1」「2」を、半角数字で指定するの。
サンプルゲームでは立ち絵を3人まで出せるよ。

……ご主人。
その説明、わんこには何の事だかさっぱりわからないワン。
とりあえず、[fg fn="（画像のファイル名）"]って記述すると、立ち絵が表示できる、ここまでしかわかんないワン。

えーっとね、実際の記述を見てみようか。
[fg fn="(画像のファイル名)"]に、「この立ち絵のレイヤ属性は何番ですよ」っていう指定を追加するの。

こんな風に、画像のファイル名の後ろに半角スペースを1つ入れて、その後ろに「layer=(レイヤ属性番号)」って追加するのね。
layer=0なら、0番目のレイヤ、
layer=1なら、1番目のレイヤ、
layer=2なら、2番目のレイヤ、
……ってことだよ。

レイヤのイメージ図

同じキャラの表情を変えた立ち絵を表示したいときは同じレイヤ属性番号を指定して、違うキャラを立たせたいときは今表示しているキャラとは違うレイヤ属性番号を指定すればいい、ということかワン？

その通りだよわんこちゃん☆
さっきの例だと、あたしはレイヤ0、わんこちゃんはレイヤ1、っていうふうにあたしとわんこちゃんをそれぞれ違う番号に指定すれば、別々に表示できるってことだよ～。
レイヤ属性番号を省略すると、0に割り振られるよ。

ちょっと面倒だけど、ゲーム作りになれるまでは、省略しないで毎回レイヤ属性番号を指定したほうがわかりやすそうだワン。

立ち絵の表示位置変更

で、レイヤ属性番号を指定してみたワン。
わんことご主人、同時に出たけど立ち位置が重なっているワン。

表示位置を変更する属性「pos」を追加してみようか。
posの値には「c」「l」「r」「横座標」を指定することができるよ。

横座標については今回はとりあえず置いておいて、「c」はcenter（中央）、「l」はleft（左）、「r」はright（右）、って意味だよ。
同時に2人の立ち絵を表示するときは、「l」「r」を使い分けるといいよ～。

さっきのレイヤ属性番号みたいに、タグの中に
pos=（c/l/r）
っていう記述を追加すれば、立ち絵を右とか左とかに表示できるってことかワン？

そうだよ☆　実際に書いてみるとわかりやすいかなあ。
やってみて！

立ち位置を指定したら、ご主人もわんこの凛々しい立ち絵も両方表示できたワン！

わんこのまとめ

立ち絵は、背景が透過したPNG形式のファイルを使う。
立ち絵には、レイヤ属性番号と立ち位置の指定をする。
立ち絵表示の基本的な書式は[fg fn="(画像のファイル名)" layer=(0/1/2) pos=(c/l/r)]

杏子からひとこと「立ち絵の表示は3人まで？」

　サンプルゲームでは、とりあえず立ち絵用のレイヤは3つ用意されていますが、これはmain.anというファイルの冒頭に「こういうレイヤを使いたい」って記述したものです。

　ここにタグを増やすと、扱えるレイヤも増やせます。でもとりあえず最初の頃は、「拡張もできる」ってことだけわかっていれば、いいんじゃないかなあ。

2-3　『背景を【ダイナミックに】変更しよう』

背景の変更方法は前回やったけど、もっとダイナミックに変更してみない？
前回は表示する画像ファイルを変更したけど、これは[grp]マクロのbg属性を変更したわけね。
これをダイナミックにしちゃうよ！
[grp]マクロに「rule=爆発」って記述を加えてみてね。

おお！　内側から外側に徐々に画像が切り替わるワン！
トンネルを抜けるとそこはわんこの国って感じだワン！

「rule」フォルダ内にある「爆発.png」っていう「ルール画像」を使って、画像を切り替えているの。
白黒で、爆発みたいなグラデーションの絵だよ。

これは、ルール画像の「最も黒い部分」から「最も白い部分」へ順番に表示を切り替えていくっていう仕組みなのよ。
たとえば右の黒から左の白へのグラデーションなら、右から左にページをめくるような効果になるよ。

わんこにもオリジナルのルール画像が作れそうだワン……。

立ち絵にだってルール画像を使えるし、工夫次第でさまざまな演出ができるから、重要なテクニックだよ。
あ、画面サイズと同じサイズにすることと、グレースケールにすることだけは忘れないでね。
ルール画像は「トランジション」なんて名前で無料公開している人も居るから、使用条件を確認して使わせてもらったりするのもいいと思うよ。

わんこのまとめ

「ルール画像」を使って、ダイナミックに画像を切り替えることができる。
[grp]マクロのrule属性に「ルール画像」を指定する。
「ルール画像」を自分で作るときは、画面と同じサイズで、グレースケールで作成する。

2-4　『BGMと効果音を鳴らそう！』

BGMの鳴らし方も知りたいワン！

BGMを鳴らし始めたり、切り替えたりするなら[bgm]マクロだよ☆
BGMフォルダにBGMとして流すmp3形式の音楽ファイルを入れてね。

サンプルゲームの文字列を見てみるワン。
お？　「ss_000.an」の最初の方に
『;ここでBGMを指定します
[bgm fn="09-摂氏9度"]』
って書いてあるワン。
ということは、こう書けばBGMを鳴らせるってことかワン。
[bgm fn="(BGMのファイル名)"]
ん？　よく見たらさっきの立ち絵の表示によく似てるワン。

じゃあ、それでゲームを起動して、確認してみて。
……やったぁ☆　ちゃんとBGMがなってるね♪
それから、BGMを止めるときは
[stopbgm]
って書いてね。

BGMを切り替えたいときは、
[bgm fn="(BGMのファイル名)"]
で、次に鳴らしたいBGMのファイル名を指定すればいいのかワン？

うーん、ゲームの実装の仕方としては間違いではないんだけど、BGMが鳴っているところで急に次のBGMに切り替わるとけっこう違和感があるんだ……。
おかしいなと思ったときは、BGMを切り替えるときにまず[stopbgm]で、いま鳴らしているBGMを止めてから、そのあとでタイミングをとって、次のBGMを鳴らすようにするのがおすすめだよ。
ちょっとしたテクニックだけど、プレイした時の印象が全然違うよ。

BGMを止めずに切り替えたいときはどうすればいいワン？

ええとね、「クロスフェード」で切り替える方法もあるよ。
[bgm fn="(BGMのファイル名)" time=1000]
というふうにtime属性をつけると、timeで指定したmsec（ミリセコンド）かけて再生中の曲をフェードアウトして、同時に指定した曲をフェードインするの。この例だと1,000msec＝1秒で切り替わるね。
結構自然に切り替わるから、続けて鳴らしたい場合はお勧めだよ。

なにしろ「いったん止めて別のBGMを再生する」やり方と、「ちょっとずつ次のBGMに切り替えていく」やり方の2パターンあるということがわかったワン。

シーンに合わせて使い分けてみてね！

効果音も鳴らしてみたいから、サンプルゲームの文字列を見てみるワン。
サンプルゲームだと、わんこが吠える声があったはずだワン。
『;犬の鳴き声の効果音
[se fn="dog00x5"]』
って書いてあるワン。

わかってきたねわんこちゃん☆
[se fn="(効果音のファイル名)"]
こう書けば効果音を鳴らせるってことだよ。

わんこにもだんだんわかるようになってきたワン！
AIRNovelはわかりやすいエンジンだワン！