【オリジナルのノベルゲームを作ろう】名称未設定【ゲーム制作日記 Pt.2】

スーチーパイ セガサターン sega サターン ドキドキナイトメア テキスト アドベンチャー ゲーム

 セガサターン版のスーチーパイやっていたら、テキストアドベンチャーゲームを作りたくなりました。

【Devlog】pocket music GB #01【ゲーム製作日記】

 制作中のゲームボーイソフト、"pocket music GB"と並行していきます。

tyranobuilder ティラノビルダー ノベルゲーム アドベンチャーゲーム 制作ツール 無料 有料

 今回、制作に用いるツールは、STRIKEWORKS さんが配布している"Tyranobuilder"を使用します。無料の方でも良かったかも知れませんが、1480円のPRO版をポチッ!

ゲーム 制作 にしの 西野竜平

 それでは早速、作っていこうと思います。

シナリオライター 募集

 とはいえ、ノベルゲームで肝心のシナリオなのですが、シナリオライター不在のため、ありません。誰か助けてください。助けて。

 なので、受け入れ準備をバッチグーにしておく為、下準備だけでも整えておこうと思います。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 プロジェクト名は適当に"Test_1"にし、

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 ゲームタイプは"アドベンチャー形式"。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 画面サイズは、16:9が好みなので、1280 * 720を選択。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 ゲーム設定はチェックマークを入れません。

 それでは、早速プロジェクト作成。ティラノビルダーの世界にレッツゴーです。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 これがTyranobuilderの画面です。とてもわかり易そう。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 昔Unityアセットに出ていたVinomaっぽいなぁ、って思ったり。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 Tyranobuilderには、"UIテーマ一括変換"というゲームの見た目を大きく変え、ゲームを一気に高品質っぽく見せる便利なのがあります。

 これを使っても良いのですが、それでは個人的に面白くないので、デフォルトでイジり倒してみようと思います。

フォトショップ photoshop

 まず、画像素材をPhotoshopで作っていきます。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 メッセージウインドウ、各種ボタン、ラベル、歯車、コンフィグ画面に背景などなど、結構たくさんあって大変ですが、無事に完成しました。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 セーブやロードなどのボタン類は、マウスオーバー時に色が変化する事を想定して2枚ずつ作っています。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 早速作った素材をプロジェクト内にブチ込んでいこうと思います。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 "プロジェクト"から”UIデザインツール”で画像をはめていきます。

 ここで気付いたのですが、マウスオーバーの設定項目が無いんです。

 あと、マウスオーバーとマウスクリックの際にも音が"クリッ!"って鳴る設定項目もありません。

ゲーム 制作 にしの 西野竜平

 どうしようかなぁってプロジェクトフォルダを漁りながらネットサーフィンしていると、

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ
ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 どうやら data → scenario にある title_screenと、その次のsystemフォルダにあるmessage_windowという"ksファイル"をイジると設定できるみたい。

TyranoBuilder\myproject\TEST\data\scenario

TyranoBuilder\myproject\TEST\data\scenario\system

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 とりあえず、マウスオーバー時に画像が切り替わり、クリック音が鳴るようにしました。

▶message_windowの例

[button role="save" graphic="save_button.png" x="480" y="512" width="70" height="35" visible="false" enterimg="save_button2.png" clickse="mouseclick_sound.ogg"]

▶title_screenの例

[glink color="black" text="はじめから" x=75 y=370 size=20 target="*start" clickse = "mouseclick_sound.ogg"]
[glink color="black" text="つづきから" x=75 y=470 size=20 target="*load" clickse = "mouseclick_sound.ogg"]
コマンド効果
enterimgマウスオーバー時に任意の画像に切り替える
enterseマウスオーバー時に任意の効果音を鳴らす
clickseマウスクリック時に任意の効果音を鳴らす
ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ マウスオーバー スクリプト

 これで全部かなって思ったら、セーブ画面・ロード画面・メニュー画面・バックログ画面の記述がどうも見当たらない。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 どこだどこだと探していたら、それぞれのhtmlファイル発見。

 場所は、TyranoBuilder\myproject\TEST\tyrano\html

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ マウスオーバー スクリプト

 まず、マウスオーバー時に画像を変えるために、.pngがあるところ全てに追加記述。

    	<div class="menu_item" style="float:right">
    	<a href="javascript:void(0)"><img class="menu_close" src="tyrano/images/system/_builder/c_btn_back.png" onmouseover="this.src='tyrano/images/system/_builder/c_btn_back2.png'" onmouseout="this.src='tyrano/images/system/_builder/c_btn_back.png'" style="width: 90px;"></a>
    	</div>

 HTMLではおなじみの、"onmouseover"ですね。マウスオーバーが発生したとき、どうしますか?というやつです。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 それに加えて音がちゃんと鳴るようにそれぞれのhtmlファイルの最後にこのスクリプトをブチ込みました。

<script>
    $(".menu_close").click(function () {
        tyrano.plugin.kag.ftag.startTag("playse", { storage: "mouseclick_sound.ogg", stop: "true" });
    });
    $(".menu_save").click(function () {
        tyrano.plugin.kag.ftag.startTag("playse", { storage: "mouseclick_sound.ogg", stop: "true" });
    });
    $(".menu_load").click(function () {
        tyrano.plugin.kag.ftag.startTag("playse", { storage: "mouseclick_sound.ogg", stop: "true" });
    });
    $(".menu_window_close").click(function () {
        tyrano.plugin.kag.ftag.startTag("playse", { storage: "mouseclick_sound.ogg", stop: "true" });
    });
    $(".menu_skip").click(function () {
        tyrano.plugin.kag.ftag.startTag("playse", { storage: "mouseclick_sound.ogg", stop: "true" });
    });
    $(".menu_back_title").click(function () {
        tyrano.plugin.kag.ftag.startTag("playse", { storage: "mouseclick_sound.ogg", stop: "true" });
    });
</script>

 では、完成した画面を御覧ください。

ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ
ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ
ティラノビルダー tyranobuilder ノベルゲーム ゲーム制作 日記 ブログ novel game 制作ブログ

 いつの日かノベルゲームお披露目できたら良いなぁって思ってます。

 それでは、また

アバター

About Ryuhei Nishino

イラストレーター/音楽講師/パソコン講師/ネット関係のお仕事をしています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA