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

[temp id=2]

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

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

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

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

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

今回もFlash Developerを使用して

説明していきますので

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

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

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

https://ykagaya.com/krkrz/krkrz_-environment/

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

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

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

①背景画像

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

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

②テキストエリア画像

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

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

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

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

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

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

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

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

結構大変なのです＾＾；

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

プラグインの準備

プラグインは「ＴＪＳに挑戦！」さまが配布されている

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

まずはこちらより

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

ここで１点注意点ですが

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

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

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

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

ぶたまんさん

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

かがや

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

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

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

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

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

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

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

ここでは

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

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

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

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

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

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

KanjiTranslator

を使用します。

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

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

KanjiTranslator160フォルダ内の

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

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

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

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

ButtonLinkPlugin.ksを

KanjiTranslator上へドラッグします。

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

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

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

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

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

あとは文字コードを変換した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(赤))