開発したゲームを多くの人にプレイしてもらう秘訣公開中!

恋愛ゲーム開発で絶対かかせない、選択肢をさくっと作る方法【初心者向け】

恋愛ゲーム開発で絶対かかせない、選択肢の作り方【初心者向け】 吉里吉里Z/KAG3
かがや
かがや

こんにちは、オリジナルゲーム制作アカデミー主催のかがやです。

個人開発者向けにゲーム開発に約立つ情報の提供、開発サポートをしています。詳しいプロフィールはこちら

 

 

今回は恋愛ゲームに絶対欠かせない

「選択肢」の作り方について説明していきます。

 

選択肢は説明する部分が多いため

「基本編」「応用編」2つの記事に分けて解説予定です。

 

この記事では「基本編」で解説していきますね。

 

 

今回もFlash Developerを使用して

説明していきますので

 

「まだ開発環境を作ってないんだけど・・・」

 

という方は下記記事を一読頂いてから、

本記事を読んで頂くことをおすすめします。

たった5分!吉里吉里Zでの環境構築【PCでのノベル(恋愛)ゲームの作り方】
吉里吉里Zでの環境構築って難しくないの? の記事で、ノベルゲームのゲーム開発には、 『吉里吉里Z』がオススメと書きました。 とはいえ、ゲーム開発をしたことがない方にとっては 「環境構築ってなん...

 

 

また画像として、下記2つ使用しておりますので

ダウンロードをお願いします。

(背景画像はきまぐれアフターさまからお借りしております)

 

①背景画像

上記をクリックしてダウンロード。

その後、「data」→「bgimage」の中へ入れてください。

 

②テキストエリア画像

メッセージレイヤー用画像

上記をクリック後、ダウンロードして「data」→「image」の中に入れてください。

 

それでは一緒に選択肢を作っていきましょう^^

 

選択肢をさくっと簡単に作る方法

今回は選択肢でよく使われる

 

吉里吉里Z/KAG選択肢画面

 

のような、選択肢の画像の上に

文字を描写させる選択肢を作っていきます。

 

実は、吉里吉里Z/KAGでは

画像+文字の選択肢をそのままの機能で実装しようとすると

結構大変なのです^^;

 

・・・が、プラグインを使用すると簡単に実装ができます!

 

プラグインの準備

プラグインは「TJSに挑戦!」さまが配布されている

プラグインを使用させて頂きます。

 

まずはこちらより

「0706script.zip」をダウンロードしてください。

 

吉里吉里/KAGプラグインダウンロードページ

 

ここで1点注意点ですが

ダウンロードしたプラグインは

文字コードがSJISになっています。

 

吉里吉里ZではUTF-8を利用しているので

プラグインを使用する前に、文字コードを変更する必要があります。

 

ぶたまんさん
ぶたまんさん

文字コード??聞き慣れない言葉だまん

 

かがや
かがや

簡単に言うと、コンピュータが文字を処理するための固有番号のことだよ。

 

コンピュータでは、データをすべて数値で処理しています。

そのため、文字の数値へ変換して処理するわけですが

どう数値に変換するかというのを定義するものとなります。

 

 

・・・といっても、聞き慣れていない方からすると

 

「なんじゃそりゃ、更にわからん」

 

という感じかと思いますので

ここでは

 

「扱うファイルの中で文字コードが違うファイルがあると、プログラムにエラーが起きる」

 

ぐらいで覚えて頂けたら大丈夫です。

 

 

というわけで、このままプラグインを使用すると、

文字コードが違うので上手くゲームが動きません。

 

文字コードをUTF-8へ変更しましょう。

 

ここでは公式サイトでもおすすめされている

 

KanjiTranslator

 

を使用します。

 

上記よりKanjiTranslatorをダウンロードしてください。

 

ダウンロードが完了したら

 

KanjiTranslator160フォルダ内の

KanjiTranslator.exeをダブルクリックして、

ツールを立ち上げましょう。

 

次にダウンロードしたプラグイン

 

「0706script」→「template」→「scenario」内の

 

ButtonLinkPlugin.ksを

KanjiTranslator上へドラッグします。

 

そして変換先文字コードを

「UTF-8(BOM無し)」へ変更してください。

※改行=CR+LFはそのままにしていただいてOKです。

 

KanjiTranslater画面

 

最後に「変換」ボタンを押せば、

文字コードの変換は完了です!

 

 

あとは文字コードを変換したButtonLinkPlugin.ksを

「data」→「scinario」フォルダへ移動させればOKです。

 

さて、

次は選択肢で使用する画像ファイルを移動します。

 

「0706script」→「template」→「image」フォルダ内の

 

  • buttonlink_bg.png

 

をご自身のゲームフォルダの中に移動させます。

 

つまり

 

「data」→「image」フォルダ内に移動させればOKです。

 

選択肢の実装方法

ここまで終えたら、

あとはFlash Developer上で

コードを変更していきましょう。

 

「data」→「scinario」→「first.ks」

 

を開き、下記記述を加えてください。

 

[call storage="ButtonLinkPlugin.ks"]

 

記述する箇所は、プラグイン定義の部分がよいかと思います。

下記のような感じですね。

 

■first.ks

;プラグイン定義

;BGM・効果音(OggVorbis)を鳴らすためのプラグイン
[loadplugin module="wuvorbis.dll"]

[call storage="ButtonLinkPlugin.ks"]
;プラグイン定義ここまで

 

次に

 

「data」→「scinario」→「1.ks」

 

を開き、下記のように書いてみてください。

 

■1.ks

;背景レイヤーに背景を表示
[image storage=BG20b_80.jpg page=fore layer=base]
[wait time=200]
*start

[cm]
;メッセージレイヤー0をテキスト表示に使用
[position layer=message0 width=800 height=195 left=0 top=420 frame=text_area.png margint=40 marginb=20 marginl=60 marginr=20]

どこへ行く?

[blink text="商店街" graphic="buttonlink_bg" left=120 top=101 target=*mall]
[blink text="公園" graphic="buttonlink_bg" left=120 top=189 target=*park]
[blink text="家に帰る" graphic="buttonlink_bg" left=120 top=276 target=*home]
[s]

*mall
[cm]
買いたいものもあるし、商店街に寄って行こう。[p]
;以下略
[s]

*park
[cm]
公園にでも行ってみようかな。[p]
;以下略
[s]

*home
[cm]
今日はもう疲れたし、家に帰ろう。[p]
;以下略
[s]

 

ここまで書けたら、1.ksを保存して、

「Project」→「Test Project」、またはF5ボタンを押して

ゲームを実行してみましょう。

 

 

・・・いかがでしょうか?

完成形の画像通りの表示になったら無事動いています。

 

ぶたまんさん
ぶたまんさん

なるほど。画像+文字の選択肢を作る場合は

blinkタグを使用するまんね

 

かがや
かがや

うん。blinkタグも解説していくね

 

blinkタグの属性を下記表にまとめました。

 

■今回使用しているblinkタグの属性

text 表示する選択肢の文字の指定
graphic 選択肢で使用する画像名を指定
left 選択肢の左端位置を指定
top 選択肢の上端位置を指定
target 次に飛ぶシナリオの場所を指定する

※指定する際は必ず「*」を先頭につける

 

なお、選択肢の終わりには

下記の通り、必ずsタグを入れてください

 

[blink text="商店街" graphic="buttonlink_bg" left=120 top=51 target=*mall] 
[blink text="公園" graphic="buttonlink_bg" left=120 top=139 target=*park]
[blink text="家に帰る" graphic="buttonlink_bg" left=120 top=226 target=*home]
[s]

 

↑どこかというと、赤いハイライトにしてある部分です。

 

sタグでシナリオを一時停止しているのですが

sタグを忘れてしまうと、プレイヤーの選択肢の入力を待たずに

次のシナリオに進んでいってしまいます^^;

 

ちなみにblinkタグでは

下記のようなことも可能です。

 

  • 選択肢をクリックした時に音を鳴らす
  • 選択肢の上にマウスカーソルをあわせると、色が変わる

 

その他、どういったことができるかは

今回入れたプラグインファイル内、

 

「data」→「scinario」→「ButtonLinkPlugin.ks」

 

の225行目以降に記載されているので、

そちらを参考にしてみてください。

 

念の為、こちらでも記載させて頂きますね。

; blink マクロ:選択肢の項目を作成します
;
; (指定できる属性)
;    graphic : 背景に表示する画像(button タグの graphic 属性に相当)
;       left : 左端位置(image タグの left 属性に相当)
;        top : 上端位置(image タグの top 属性に相当)
;       text : 表示するテキスト
;    storage : クリックした時ジャンプするシナリオファイル名(button/link タグの storage 属性に相当)
;     target : クリックした時ジャンプするラベル名(button/link タグの target 属性に相当)
;        exp : クリックした時実行する TJS 式(button/link タグの exp 属性に相当)
;       hint : マウスカーソルが乗った時表示するツールチップヒント(button/link タグの hint 属性に相当)
;    onenter : マウスカーソルが乗った時実行する TJS 式(button/link タグの onenter 属性に相当)
;    onleave : マウスカーソルが出て行った時実行する TJS 式(button/link タグの onleave 属性に相当)
;  countpage : ジャンプする時にこの場所のラベルを読んだとみなすか(button/link タグの countpage 属性に相当)
;    clickse : クリックした時再生する効果音(button/link タグの clickse 属性に相当)
; clicksebuf : クリックした時効果音を再生するのに使う効果音バッファ(button/link タグの clicksebuf 属性に相当)
;    enterse : マウスカーソルが乗った時再生する効果音(button/link タグの enterse 属性に相当)
; entersebuf : マウスカーソルが出て行った時効果音を再生するのに使う効果音バッファ(button/link タグの entersebuf 属性に相当)
;    leavese : マウスカーソルが出て行った時再生する効果音(button/link タグの leavese 属性に相当)
; leavesebuf : マウスカーソルが出て行った時効果音を再生するのに使う効果音バッファ(button/link タグの leavesebuf 属性に相当)
;       font : テキストを表示する時に使用するフォント名(デフォルト:現在ユーザが選択しているフォント)
;   fontsize : テキストの文字の大きさ(デフォルト:デフォルトの文字サイズ)
;      color : 通常時のテキストの色(デフォルト:0x000000(黒))
;    oncolor : マウスカーソルが乗っている時のテキストの色(デフォルト:0xFF0000(赤))
; clickcolor : クリックしている時のテキストの色(デフォルト:0xFF0000(赤))

 

補足

blinkタグですが、

これは元々KAG3で使用できるタグではなくて

今回のプラグインを導入したことにより

使用することができるようになったタグです。

 

吉里吉里Z/KAGでは、このように

独自で作ったコードを使うことができます。

 

これをマクロといいます。

 

マクロの説明は

別記事で解説予定のため、ここでは省きますが

blinkタグが元々KAG3で使えるタグと思われる方が

いらっしゃるかなと思い、念の為、補足でした。

 

 

以上、ここまで読んでいかがでしたでしょうか?

 

今回は説明しませんでしたが、

恋愛ゲームでよくある

 

好感度によって、シナリオを分岐させ、エンディングを変える

 

方法は、選択肢の応用編として、

別記事で紹介させて頂く予定です。

 

 

次回はご要望が多かった

セーブ・ロード機能の記事をアップ予定です。

 

その後の予定は

 

  • 選択肢(応用編)
    •  好感度によってシナリオ分岐、ファイル分割方法
  • 開発を超効率化させるマクロ活用術

 

の順に記事を作成していこうと考えていますが

他に

 

「この部分について先に解説してほしい!」

 

などございましたら

なるべくみなさまのご要望にお応えしたいと思いますので

お気軽にコメントください^^

 

その他感想なども受け付けておりますので

お気軽にコメント頂けたらと思います。

 

 

本記事が少しでもあなたのゲーム開発の

手助けになることを願っております。

コメント

タイトルとURLをコピーしました