ゲーム要素：Unity＆宴

このカテゴリー（ゲーム要素ラボ）は、モーションコミックにゲーム要素を加えるための研究室です。今回はゲームエンジンUnityのノベルゲーム作成ツール「宴」を取り上げます。

宴はUnityのアセット（3Dモデル・2D画像データ・機能拡張ツールなどUnityでのゲーム作りを助けてくれる部品）で提供されていて、基本的なノベルゲームをプログラミング無しに作ることができる優れものなツールです。

上の画像は、宴のサンプルゲームをベースに背景画像やキャラクター、メッセージウィンドウのテキストなどを差し替えて表示してみました。

これらの背景やキャラクター、シナリオなどの設定はExcelで管理されているので、そのファイルを書き換えるだけでもシンプルなノベルゲームなら作れそうですね。

でもこのまま宴でコンテンツを作ったらアドベンチャーゲームのジャンルになってしまいます。自分が作りたいのはモーションコミックなので...

そこで問題なのは宴のアニメーション機能がどれほどのものなのか。

目パチ、口パク、パラパラアニメ対応の他、クロスフェードやトランジションもかけられるようなのでけっこういけそうですね。

Unity対応のアニメーション制作ツールとしては、Live2DとかSpine、Sprite Studioなど強力なのがあります。そういったツールで作ったアニメを宴に取り込めるんでしょうか。

今ちょっと調べてみたところ、宴3では「Live2D Cubism3」をサポートと書いてありました。となるとかなり顔の表情などの表現力も豊に描けそうです。

つまりこれらのアニメ作成機能を使ってモーションコミックを作り、アドベンチャーゲームのような要素を加えたいときはすぐにメッセージウィンドウで会話シーンを入れることができるし、ボタンを配置してストーリー分岐も可能というわけです。

おおっ、なんかいけそうじゃないですか！

とは言え実際にとりかかってみたら、当初の目論見どおりには行かないというのが世の常。自分もいままでの経験からずいぶん慎重になってます(￣∇￣;)ゞ。

そうそうアニメーションといえば、Unityの公式アセットになったAnima2Dというボーンアニメーションができるツールがありますよね。このAnima2DとAnimation ClipでUnityエディター内でモーションコミックを作って、アドベンチャーゲーム要素は宴にバトンタッチという手もありそうです。

というわけで、この宴というツールは使い方次第でいろいろと可能性がありそうな気がしてきました。

EnchantMapEditorでマップを作る

昨年、「ゲーム要素ラボ」というカテゴリーを作りました。

その後、ぜんぜん更新してないので今年最初のブログはゲーム要素の2回目です。

そもそもゲーム要素とは何ぞや？ 自分が作りたいモーションコミックは、静止画と文字に加えて音声やアニメなどのマルチメディア要素で描いていくのですが、その中にゲーム要素も含みます。

そのゲーム要素は、読者がゲームに参加することやその結果がストーリーに影響を及ぼすようなヘビーなものから、巻末の付録ゲームまでいろいろ考えられます。

そしてその準備のために「ゲーム要素ラボ」というカテゴリーを作ったわけです。

モーションコミックを制作中に、「おっ、このシーンでちょっとしたゲームを入れたい！」と閃いてもその段階からゲームの準備をしていてはあまりにも大変ですからね。普段から「ゲーム要素ラボ」でいろいろ研究しておこうというわけです。

そんなわけで今回はマップを作るための便利ツールを試してみました。

マップデータは、RPG等で主人公達が活躍する町やダンジョンといった舞台のデータです。小さなタイル画像を並べて表示するのですが、その配列を簡単に作ってくれる便利ツールが「EnchantMapEditor」というenchant.js用のMapEditorです。

上の画像が「EnchantMapEditor」で作ったゲームの舞台。16×16のタイル状の画像で構成されています。

「EnchantMapEditor」は、こちらでダウンロードできます。

以下に「EnchantMapEditor」の使い方を簡単にまとめてみました。


　１．ダウンロードしたファイルを解凍し、mapeditor.htmlを起動する。

　２．横幅(Width) : 20
　      縦幅(Height): 20
　      画像(Image) : RPG
　      マップ拡張を有効にする(Enable Map Extension)□←チェック外す

　      上記のように設定し、［作成(Create)］をクリック。

　３．編集画面が表示される。あとは左側のマップ画面に右側のツールパレットからタイルを選択し配置し
　      ていくだけ。例えば、ツールパレットから草原や樹木などをクリックし「pen」を選択後、マップ画面を　　
　      プチプチとクリックしながらマップ画面にタイル画像を配置していく。一気に塗りつぶしたいときは
　      「fill」、削除は「-1」、「\」はライン、「■」は矩形、一番右はアンドゥ。

　４．マップの当たり判定データは、ツールパレットの一番上の「判定」を選択しマップのブロックや池など
　      プレイヤーが通れない場所をクリックし赤い枠で囲う。

　５．「判定」の右側の「tab1」「tab2」はそれぞれマップのバックグラウンド、フォアグラウンドで画像を
　      重ねて配置するときに使う。

　６．マップが完成したら、、［コード生成］ボタンをクリック。配列コードが生成されるので、自分のプログ
　      ラムのコードにコピペする。


以上です。

２の「横幅(Width) : 20」「縦幅(Height) : 20」は、16×16ピクセルのタイル画像が縦横に20個並びます。つまり320×320サイズのマップを作成しているわけです。

数字がずらっと並んだ配列のマップデータを手作業で入力するのはやっぱり大変なので、タイル画像を配置しながら自動的に生成してくれるツールは便利ですよね。

実際にゲームを作るときは、もっと個性的なオリジナルなマップにしたくなるんじゃないでしょうかね。

その時は、タイルセット画像をいじったりしてみましょう。

新カテゴリー「ゲーム要素ラボ」

新カテゴリー「ゲーム要素ラボ」を追加しました。

EPUB3形式のモーションコミックにゲーム要素を加えるという試みについてブログに時々書いてますが、「ゲーム要素ラボ」というカテゴリーにまとめることにしました。

モーションコミックの制作・進捗状況などを記したブログページに、ゲーム要素のアイディアが混在していては後で探すのが大変ですからね。

まぁゲーム要素のアイディアといってもそんなにポコポコ閃くわけじゃないし、閃いてから技術的なことを調べていては時間がかかってしょうがないので、前もってゲーム要素ラボで研究しておこうというわけです。

例えば、どのゲームエンジンが自分向きかなどについてもこのラボで試してみる予定。

さて、「ゲーム要素ラボ」の最初の記事として、ゲーム要素入りのモーションコミックをEPUB3形式にして動作チェックしてみました。

「そろそろゲーム的要素を」というタイトルで書いた記事で、SciKoとレナがゲームをするシーン。そのときのゲームを想定して、ランダムに動くキャラ画像と方向キーで動くキャラ画像を作ってみました。

正確に言うと、まだゲーム要素は入ってないけどさわりの部分を作って動作チェックです(*￣∇￣*)b。

ゲームエンジンは「enchant.js」。用意したファイルは以下の4つ。


　enchant.js （ゲームエンジン）
　gameSample.js （キャラ画像の動きを書いたJavaScript）
　gameSample.xhtml （enchant.jsやgameSample.jsを読み込むxhtmlファイル）
　chara.png （キャラ画像）


次に上記4ファイルをEPUB3ファイルにまとめます。

前に作ったEPUB3ファイル（Flashアニメを「ToolkitforCreativeJS」でパブリッシュしEPUB3ファイルにまとめたもの）に1ページ付け足して、「ePubPack」でパッケージングしました。このあたりの手順は、「シンプルなEPUB」「EPUBでモーションコミック」のページなどで詳しく書いたとおりです。

さあ出来上がったEPUB3ファイルをいつものように、「pegina-EPUB-Checker」でエラーがないか検証です。

「No error or warnings detected」と表示されました。問題なしですね。

さていよいよ動作チェック。まずはPC用のEPUBリーダー「Readium」で読み込んでみました。

Flashアニメで作ったモーションコミックが表示されました。ここまでは以前確認済み。

次のページを捲ると、『おおっ、キャラ画像がランダムに動いてる！』というわけで「Readium」での動作は問題なし。

その後、iPadに転送して動作チェックしたところ、上の画像のようにポコポコ動きました。

ちなみに上の画像は画面キャプチャーではなくイメージです。実際は残像などはありません(o^皿^o)ゞ。

それから、方向キーでキャラが動いているように描いてしまいましたが間違いです。Σ(;゜∀゜;;)今気づきました。

「Readium」では方向キーでページが捲れてしまい、iPadにはキーボードがなかったので．．．

本番では画面にバーチャルパッドを付ける予定です。