集中企画
犬でもできる! 杏子とわんこのAIRNovel講座 第1回
ANBooksから始めよう ~サンプルゲームのセリフや背景を変更~
(2013/4/18 10:26)
誰でも無償で使えて、マルチプラットフォームのノベルゲームを開発できる「AIRNovel」。本企画では全4回にわたり、AIRNovelでのゲーム制作の基本から、制作したゲームを実際に公開したり、Web上でプレイできるようにするまでを対話形式で解説します。
ノベルゲーム開発はシナリオを執筆して画像などの素材を用意し、それらを組み合わせて演出することで造り上げていきます。ここでは面白いシナリオの書き方や素敵なイラストを描く方法は説明しませんが、あなたの用意した素材をAIRNovelを使ってどのようにノベルゲームという表現方法にしていくか、まずはAIRNovelの基本からご紹介します。
1-1 『わんこ、大地に立つ?』
ご主人! わんこ、ノベルゲームを作りたいんだワン!
急にどうしたの? またお散歩中に変なもの拾い食いしたの?
違うワン! わんこ、男(オス)の生き様をゲームにして、世間に知らしめたいと思い立ったんだワン!
硬派(?)なゲームを作りたいのかな?
ノベルゲームで人気があるのは、学園ものか、田舎の惨劇か、萌え萌えな作品だけど、そういうのとはちがうの?
ご主人、わんこは熱いハードボイルドなワン生(人生)をプレイヤーに届けたいんだワン。
ちょっとくらい他犬(他人)と違っていても、わんこはわんこが作りたい物語を紡ぐんだワン。
自分の道を走るわんこの生き様をみて、皆さんにも元気になってもらいたいんだワン。
やる気元気だねわんこちゃん。
いいよ~☆
それじゃあ、あたしがわんこちゃんにもわかるようにAIRNovelでのノベルゲームの作り方を教えてあげるね!
いつか友達とゲームを作ろうと思って、ちょうど勉強してたんだよ~♪
わんこのまとめ
- 犬だってゲームを作れるなら、読者のみなさんだってきっと作れる……はず?
1-2 『AIRNovelってなあに?』
AIRNovelってなんだワン?直訳したら「空気小説」……?
フリーソフトとして公開されてて、だれでも無料で使える、とっても素敵なゲームのエンジンの名前だよ☆
アドビ社の「Adobe AIR」の技術をもとに作られたノベルゲーム用のエンジンだから「AIRNovel」って名前なのよ。
アドビ、何のためにマクロメディアを買収したのかと思ったら……Flashをベースにノベルゲームを作るためだったのかワン?
いつの話よわんこちゃん……
「Adobe AIR」はアドビ社の製品だけど、AIRNovelはふぁみべえさんっていう方が作って公開しているエンジン、そこは違うから間違えないでね。
エンジンっていうから、ロータリーエンジンとか水平対向エンジンとかの仲間かと思ったワン?
わんこちゃん、そういうことは詳しいんだね?
えっとね、クルマとかバイクを動かすエンジンみたいに、「ゲームを動かすもの」を、ゲームの「エンジン」っていうんだよ。
マツダとスバルじゃぜんぜん違うクルマだワン!
そうだねー、エンジンが違うとゲームの作り方や大変さも違うんだよね。
AIRNovelは扱いやすくて、マルチプラットフォームなエンジンだから、初めてゲームを作ってみようって思った初心者の人にも、いろんなOSに対応するために乗り換えようって玄人にも、どっちにもお勧めだよ☆
わんこの好きなMSX2とかX68000とかファミリーベーシックとかでも動くのかワン?
……好きなの!?
うーんとね、あんまり古いハードは無理。
でもWindowsとMacと、AndroidとiOS、あとWebブラウザーで動くゲームを作ることができるよ。いまゲームをつくるんだったら、これで十分じゃないかな?
わんこのまとめ
- AIRNovelは無料で使える、ゲームを作るためのエンジン。
- Adobe AIRベースでマルチプラットフォームなのが特徴。
- ご主人超お勧め。
1-3 『AIRNovelの必須要件』
ご主人にもらったパソコンはMacなんだけど、アレでも大丈夫かワン?
AIRNovelは、WindowsでもMacでも開発できるし、どっちでもプレイもできるんだよ~!
すごいよねー! 便利だよねー!
そういえばわんこちゃんのMacって、いつのだっけ? OSは?
えっと、漢字Talk……
古いよっ!
AIRNovelの開発をするなら、Adobe AIRの必要システム構成を満たしているパソコンにしようね。
とりあえず、ちゃんと開発できるWindowsのパソコンをわんこちゃんに一台あげるよ。
肉球でつかえる、タッチパネルがいいワン!
わんこちゃんにあげるのは、あたしのお下がり。
だからタッチパネルはまだダメ。
でも別に、最新型じゃなくても開発できるから大丈夫☆
なにしろAdobe AIRは必須だから必ずインストールしてね?
Adobe AIRって重いのかワン?
時間がかかるなら、テレホーダイの時間にアクセスポイントに接続するワン。
なんでモデム!?
うちはブロードバンド回線だし、いまどきそんな心配いらないよ?
わんこのまとめ
- AIRNovelにはAdobe AIRが必須、Adobeのサイトからインストールする。
- Adobe AIRの必要システム構成を満たしているかどうかは要確認。
- 最新スペックでなくてもいいけど、古いパソコンだと対象外かも……?
1-4 『AIRNovelのゲームを動かしてみよう!』
じゃあ、まずは「ANBooks」をこのURLからダウンロードしてね。
http://code.google.com/p/air-novel/downloads/list
ANBooksっていうのはAIRNovelでゲームを開発するためのソフトなの。
けっこう頻繁にバージョンアップしてるから、最新のものを使うようにチェックしてね。
インストールしたワン。むっ!? こんな画面になったワン!
これでどうやってゲームを作るのかワン?
これでゲームを新規作成して、
サンプルゲームにちょっとずつシナリオとか素材とかを足しこんで、
自分のゲームにしていくのがおすすめだよ~。
システム設定とか、自分でイチから作らなくていいのかワン?
楽ちんそうだワン!
うん☆
そういう面倒なところは、サンプルゲームをテンプレートにして流用してもいいよ~。
テンプレートって何だワン?
ゲームに使う素材はともかく、システム画面や仕組みまで、なにも無いところから全てを作るのは大変でしょ?
だから用意されたテンプレートから自分のゲームの元となるプロジェクトを作って、それをどんどん改造して、自分のゲームにしていくの。その元となるデータの事ね。
あ、でも、立ち絵とか背景とか音楽ファイルなんかの素材は、自分のゲームとして公開するときはテンプレートをそのまま使わないでね!
とにかく開発中はそのままでもいいけど、公開時にはテンプレートから流用した素材をそのまま出さないようにチェックしないといけなさそうだワン。
ANBooksでゲームを作るには、まずはプロジェクト名を決めてね。
わかりやすければなんでもいいけど、今回は「sora」にしようか?
で、[メニュー]ボタン→[新規作成]ボタンを押して、プロジェクト名を入力したら[空を飛べたら Win Mac版を元に作成]ボタンを選択してね。
「空を飛べたら sora」……ご主人の顔アイコンの項目が増えたワン!
プロジェクトを作成したら、クリックしてプロジェクト詳細画面を開いて、[最初から読む]を選んでみよっか。
どんなゲームが作れるのか、だいたいわかってもらえると思うよ~。
(肉球でキーボードをたたき、ゲームをプレイ)
……ほほぅ。
どおかな? イメージつかめた?
ご主人、14歳にもなって空を飛びたいとか魔法を使いたいとか、ちょっと子供っぽ過ぎないかワン?
……シナリオの中身じゃなくて、「どんなゲームが作れそうか」ってことを見てよね!
わんこのまとめ
- ANBooksを起動して、まずはサンプルゲームをプレイしてみる。
- 動かしてみると、ノベルゲームに必要な一通りのシステムは用意されているのがわかる。
- サンプルゲームをテンプレートにしてゲームを作ろう。
- テンプレートに含まれる画像や音楽ファイルはそのまま自分のゲームに使っちゃダメ。
- 逆に言うとそれらの素材を差し替えるだけで、すぐに自分のゲームが作れちゃう。
杏子からひとこと「AIRNovelのサンプルゲーム」
ここでは「空を飛べたら」をサンプルゲームとして紹介しましたが、AIRNovelは「桜の樹の下には」というサンプルも用意されています。梶井基次郎の小説をもとに、絵師のことりさんが素敵な絵を付けてくれたゲームです。
「桜の木の下には」はメッセージが縦に表示されるタイプのサンプルです。自分のイメージに近い方をテンプレートにするといいと思います☆
1-5 『セリフを変えてみよう!』
じゃあ、このサンプルゲームをもとにして、実際にセリフの変更をしてみよっか。
プロジェクトの詳細画面から[ツール]→[フォルダをエクスプローラーやFinderで開く]を選ぶとプロジェクトの保存されたフォルダが開くから、「scenario」フォルダの中にある「ss_000.an」を開いてみて?
セリフっぽいとことか、なんとなくわかるでしょ?
拡張子「.an」ファイルって、どんなアプリで開けばいいのかワン?
「.an」ファイルはテキストファイルだから、Windowsだったら「Mery」とか「EmEditor」とか、Macだったら「mi」とかのテキストエディターがいいと思うよ~。
あ、窓の杜ライブラリの「テキストエディター」ジャンルもチェックしてね!
ちなみに、今回の記事でサンプルに使っているのはMeryだよ~。
わんこ、Wordとか、一太郎でスタイリッシュに編集したいワン。
文字の色とかフォントの変更とか、あと画像とかの貼り込みは結構得意だワン。
ダメだよわんこちゃん、ワープロソフトで編集しても、AIRNovelには反映されないの。
フォントを替えたり、文字の大きさを変えたりするのは、「テキストベースで」「AIRNovel用の記述」が必要なの。
だからテキストエディターが必要なんだ。
じゃあ、「ss_000.an」をテキストエディターで開いて。
25行目あたりの文章
「ともだちが引っ越した。\」
の前に、自分のシナリオを書き加えてみて。
書いたら、「ss_000.an」を保存してから、ANBooksでゲームを起動してみてね。
さっそくやってみたワン!
あとはファイルを保存してゲームを起動、簡単だワン!
……きゃいーん! エラーになったワン!
えっ? いきなり?
……あ、わんこちゃん、セリフが長すぎるよ。文字が画面に入りきってないからエラーになっちゃうの。
サンプルゲームのウィンドウだったら、全角100文字をめどに、文末に『\』を入れて。
お金の『\』マーク? 「コインいっこいれる」みたいな感じかワン?
お金は関係なくて、半角『\』は、改ページの記号で「一文字マクロ」っていう機能なの。
とりあえず文末に半角『\』で改ページの意味って覚えてくれたらいいよ。
書き換えたら、ファイルを保存してからANBooksでゲームを起動してみて。
おおっ、いぶし銀の魅力あふれるセリフが輝くようだワン!
「風が語りかける。 うまい、うますぎるワン!」
「うますぎるワン!」とか言われてもねえ……。
わんこのまとめ
- テキストエディタで「.an」ファイルを編集してゲームを作っていく。
- 文末に半角『\』で改ページ。
- 適度に改ページしないと、文字があふれてエラーになる。
杏子からひとこと「テキストエディター用色分け設定ファイル」
AIRNovelの公式ブログでは、「Mery」「EmEditor」「mi」に対応する、テキストエディター用の色分け設定ファイルが公開されています。
これを使うと、AIRNovelでのゲーム制作に使うキーワードなどが色分けされるので、「.an」ファイルが見やすくなりますよ☆ これらのエディターを使っているなら、ぜひ試してみてくださいね。
今回の記事に掲載しているエディターの画面も、「Mery」にこの設定ファイルを適用したものを使っています。
- 電子演劇部 テキストエディタ向けシンタックスハイライト
- http://famibee.blog38.fc2.com/blog-entry-329.html
1-6 『背景を変えてみよう!』
じゃあ、次は超ダンディ&マッシヴなわんこのポートレイトに差し替えるワン!
ダンディなの? ……それで、画像って、立ち絵?背景?イベント絵?
わんこ四足だから立てないワン?
おすわりしてる画像だワン。
そうじゃなくてね、ゲームの画像は大きく分けて2種類あるんだよ。
全画面に表示される絵(背景・イベント絵)と、キャラクターだけの絵(立ち絵)と。
サンプルゲームで言うと、
背景とイベント絵は「ubasute_spring.jpg」「yamagiwa.jpg」とか、
立ち絵は「anko00-2-ff.png」「anko00-2-ws.png」とかだよ。
画像の種類や大きさに決まりはあるのかワン?
立ち絵は、透過度情報(透明な部分の情報)を含めたPNGファイルで。
大きさはサンプルを参考に、横300~400ピクセルくらいがいいかな。
背景とイベント絵は、画面のサイズと同じサイズ。
今回のサンプルを使うなら、1,024×768ぴったりのサイズのJPEGファイルを用意してね。
画像が用意できたら、どうしたらいいのかワン?
まず、立ち絵は「fgimage」フォルダに、
背景とイベント絵は「bgimage」フォルダにコピーするんだよ。
必ず名前通りのフォルダに入れないといけないのかワン?
うーん、システム的にはバラバラのフォルダに入れてもいいんだけど、
あとでつくるわんこちゃん自身がわかりにくくなっちゃうから、
用途が同じファイルは同じフォルダに入れるようにしようね。
じゃあ、わんこが用意した画像を「bgimage」フォルダに入れて、差し替えるワン。
差し替えたい箇所のサンプルファイルを見てみるワン。
「scenario」フォルダの中、「ss_000.an」をもう一回開いてみて? 21行目あたりにこうあるよね。
『[grp bg="2013_an02_evening" time=2500]』
ここが背景を指定している場所だよ。
「bgimage」フォルダの中には、「2013_an02_evening.jpg」ってファイルがあるワン。じゃあ、
[grp bg="(わんこが自分で作った画像ファイル名)" time=2500]
ってファイル名のところを書き換えたらよさそうだワン!
……できたワン!
ちなみに「time=2500」っていうのは、2,500msec(ミリセコンド)、つまり2.5秒かけて画像を表示するって意味なの。
2500だと切り替えが遅いかも。通常は1000くらいの値のほうがいいと思うよ。
台詞の差し替えのときは、『[~]』という半角の角括弧はいらなかったけど、画像の差し替えのときは必要なのかワン?
半角の角括弧『[~]』は『タグ』っていって、『この括弧の中身は何かしらの指示ですよ、素の台詞じゃないですよ』って意味なの。
タグの記述に慣れないうちは、後ろの『]』を間違えて消しちゃって、エラーになったりしがちだから気をつけてね。
ご主人、それはHTMLのタグが『<~>』で、『>』だけがなかったらダメなのと同じではないかワン?
すごいねわんこちゃん! ゲームの実装経験はなくても、そのあたりがわかるならこの先もばっちりだよ!
わんこのまとめ
- 立ち絵は透過度情報つきのPNGファイルで作成する。
- 背景は画面サイズぴったりののJPEGファイルで作成する。
- AIRNovelのタグは『[~]』、半角角括弧。
- 背景の切り替え基本的な書式は、[grp bg="(画像ファイル名)" time=(切り替え時間)]
杏子からひとこと「タグとマクロの違いについて」
AIRNovelでゲームを作るには、タグとマクロを使います。マクロとは、「タグや他のマクロをまとめて1つにしたモノ」で、使い勝手はタグもマクロも同じです。
というわけなので、ゲームを作る側は「それがタグなのかマクロなのか」の違いは意識しなくてよくて、タグやマクロの動作・能力だけを知っていれば大丈夫です☆
1-7 『次回予告!』
どうだった? なんとなく、わんこちゃんでもゲーム作れそうだなあ、って思ってもらえた?
作れそうどころでないワン。
作ったゲームがめちゃ売れそうな気がしてきたので、DVD5千枚くらいプレスすることにしたワン!
えっ!? ゲーム作る前からプレスする枚数だけ決めちゃうの?
最初は控えめの方がいいと思うよ? 売れたら焼き増ししたっていいわけだからさ。
あとは台詞と背景だけじゃあなくて、立ち絵や音楽、効果音の差し替え方も詳しく知りたいワン!
じゃあ次回はわんこちゃんのご要望にお応えして、基本的なゲームの作り方の続きを教えるね☆
あ、タグの中身の書き方とかもレクチャーしないとだねえ。
PC版の完成と、Android版と、ブラウザーで動くWeb版の作り方まで掲載する予定だから、読者のみなさん、よろしくだワン!