簡単にゲーム開発するための書籍、無料プレゼント中!!

初心者でも簡単!恋愛ゲームのメイン画面、ノベルパートの開発【吉里吉里Z】

[temp id=2]

 

前回は吉里吉里Zでの環境構築について説明しました。

 

今回はその続き、

いよいよ恋愛ゲームのメイン画面ともいえる、

ノベルパートの作り方を説明していきますね。

 

KAG3のタグを使っていきます。

恋愛ゲームのメイン画面、ノベルパートとは?

ノベルパートの説明は不要かもしれませんが、念の為(^^;

下記画面のことを指しています。

 

恋愛ゲームのノベルパート画面

 

恋愛ゲームではノベルパート画面をメインにゲームを進めていくことになります。

ノベルパート画面に必要な要素

さて、ノベルパート画面がどの画面を指しているか確認できたので、

ノベルパート画面を作るのに必要な要素について考えていきます。

ざっくり要素分けすると、ノベルパートは下記3つの要素で成り立っています。

 

  • 背景
  • キャラクター(立ち絵)
  • テキストエリア

 

これらを順番に作っていきましょう!

実は超重要!レイヤー構造ついて

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

作っていきましょうといいながら、まだ説明があるまんか?

早く作りたいまん

 

かがや
かがや

ごめん、ごめん。今後必要になる知識なので、軽く説明させてね

 

※レイヤについて、PhotoShopやSAIなどでイラストを描かれる方々はご存知だと思いますので、知っている方は読み飛ばして頂いて大丈夫です。

 

前の章で、ノベルパートはざっくりと3つの要素

 

  • 背景
  • キャラクター(立ち絵)
  • テキストエリア

 

で成り立っていると説明しました。

KAG3では上記3つの要素を

「レイヤー」と呼ばれるもので分けて使用します。

 

KAG3上では

 

  • 背景⇒背景レイヤー
  • 立ち絵⇒前景レイヤー
  • テキストエリア⇒メッセージレイヤー

 

という風に扱います。

 

これらのレイヤーが重ね合わさって、ノベルパートを作っています。

 

画面で説明すると、下記のような感じです。

 

吉里吉里Zのレイヤー構造

 

画像を見ていただくとわかる通り、画面の一番奥から順に、

 

背景レイヤー⇒前景レイヤー⇒テキストレイヤー

 

という重ね合わせになっています。

 

なおデフォルトでは、

 

  • 前景レイヤー:3枚
  • メッセージレイヤー:2枚

 

が用意されています。

 

初めてレイヤーという言葉を聞いた方は

 

かがや
かがや

レイヤー、なにそれおいしいの?

 

と軽く拒否反応を覚えるかもしれませんが、

(実は私自身がそうでした(^^;))

このことを理解していないと、

今後背景や立ち絵などが上手く表示できない問題に

遭遇することになるので、今のうちに頭に入れておくことをオススメします。

 

早速ノベルパートを作ってみよう!

それでは、吉里吉里Z開発環境(以下、KKEFZ)上で

 

「data」⇒「scenario」⇒「1.ks」

 

を開いてみましょう。

 

 

この「1.ks」というファイルに、各要素を表示させるための記述をしていきます。

 

背景を表示させる

まずは背景を表示させてみましょう。

今回はきまぐれアフターさんから背景素材をお借りしました。

 

こちらのページから背景画像をダウンロードして、

 

「data」→「bgimage」

 

の中に入れてください。

 

(そのままのファイル名を使うと長すぎるため、ここではファイル名を「forest.jpg」へ変更しました)

 

背景画像(KKEFZ)

 

次に「1.ks」に下記の記述を加えてみましょう。

;背景レイヤーに背景を表示
[image storage=forest.jpg page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
こんにちは。

 

ここで一旦、編集した「1.ks」を保存して

「Project」→「Test Project」、またはF5をクリックして

ゲーム上で確認してみましょう。

 

背景画像表示(KKEFZ)

 

上記のように、背景画像が表示されればOKです。

 

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

何も考えず書いてみたけど、英語だらけでわけがわからないまん

 

かがや
かがや

だよね。じゃあここからタグの意味の解説をするね

 

さて、ここで使用しているimageタグ。

imageタグは名前の通り、画像を表示させる時に使用するタグになります。

 

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

imageタグに、layerとかpageとか書かれているけど、これはなんだまん?

 

かがや
かがや

タグの後ろに書かれているものは「属性」と呼ばれるものだよ

layerは操作する対象のレイヤー名の指定

pageは表画面か裏画面どちらを操作するか指定しているよ

 

※表画面、裏画面の概念は少し複雑なので、ここでは理解しなくて大丈夫です。

(次回のトランジションの記事にて詳しく解説予定です)

 

layer属性で、対象のレイヤー名を指定すると説明しましたが

今回は背景画像を読み込みたいので、

背景を表示させるためのレイヤー

背景レイヤー」を指定すればよいですね!

 

背景レイヤーは「base」と表すことができるため、

 

layer=base

 

と指定しています。

 

属性について、表にまとめてみました。

 

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

storage 読み込む画像ファイル名を指定する
page これから操作したいレイヤーの表か裏かを指定する

foreだと表画面、backだと裏画面

layer これから操作したいレイヤー名を指定する

baseだと背景レイヤー、0~2だと前景レイヤーになる

 

ちなみにKKEFZ上で、タグや属性部分にマウスカーソルを合わせると

 

吉里吉里Z上でのタグ・属性の説明表示

 

上記画像のように、タグや属性の説明が表示されるので

わからなくなったら、そちらを見て頂くのもよいかと思います!

 

キャラクター(立ち絵)を表示させる

次はキャラクター(立ち絵)です。

 

今回は三日月アルペジオさまから

イケメンキャラの立ち絵素材をお借りしました。

 

このままだと今回のゲーム用には少し扱いづらいため、

今回用に加工させて頂いております。

※加工素材は今回のみの範囲としてご使用ください

 

加工させて頂いたものはこちら2点です。

立ち絵01 立ち絵02

 

まずは上記2点をクリックしてダウンロード後

「data」→「fgimage」内へ移動してください。

 

 

次に下記記述を追加してみてください。

;背景レイヤーに背景を表示
[image storage=forest.jpg page=fore layer=base]
[wait time=200]
*start|スタート
[cm]

;前景レイヤー0に、1人目のキャラクターを表示
[image layer=0 page=fore storage="chara01.png" visible=true left=-300]
;前景レイヤー1に、2人目のキャラクターを表示
[image layer=1 page=fore storage="chara02.png" visible=true left=400]
こんにちは。

 

ここまで書けたら、1.ksを保存して、実行してみましょう。

 

立ち絵表示(KKEFZ)

 

上記画面のように表示されていればOKです。

 

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

できたまん!

立ち絵表示もimageタグを使うまんね

 

かがや
かがや

うん。

ただ今回は背景レイヤーではなく、前景レイヤーを使っているよ

 

前景レイヤーは、主に立ち絵表示のときに使用するレイヤーでしたね!

※前景レイヤーってなんだっけという方は前章を確認してみてくださいね

 

今回は前景レイヤーを操作しているので

layer属性は「base」ではなく

「0」「1」と指定しています。

 

また、前景レイヤーはデフォルトでは非表示になっているため

表示させる際はvisible属性で「true」と指定する必要があります。

 

属性についてまとめた表が下記になります。

 

■今回使用したimageタグの属性

layer これから操作したいメッセージレイヤー名を指定する

baseだと背景レイヤー、0~2だと前景レイヤーになる

page これから操作したいメッセージレイヤーの表か裏かを指定する

foreだと表画面、backだと裏画面

visible 指定したレイヤーを表示するかしないか指定する

trueだと表示、falseだと非表示

left 指定したレイヤーの左端の位置を指定する

 

今回leftは「left=-300」「left=400」と指定していますが、

使用する画像サイズによって、ここの数値は変わるので

別の画像を使用する場合は書き換えてみてくださいね。

 

テキスト(文字)を表示させる

最後はテキストエリアの表示について解説します。

 

今回はテキストエリア用の画像として

下記画像を用意しました。

 

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

 

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

「data」→「image」の中に入れてください。

 

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

 

次に下記記述を「1.ks」に追加してみましょう。

 

■1.ks

;背景レイヤーに背景を表示
[image storage=forest.jpg page=fore layer=base]
[wait time=200]
*start|スタート
[cm]

前景レイヤー0に、1人目のキャラクターを表示
[image layer=0 page=fore storage="chara01" visible=true left=-300]
;前景レイヤー1に、2人目のキャラクターを表示
[image layer=1 page=fore storage="chara02" visible=true left=400]

;メッセージレイヤー0をテキスト表示に使用 
[position layer=message0 width=800 height=195 left=0 top=420 frame=text_area.png margint=40 marginb=20 marginl=60 marginr=20]テキストを表示。[l][r]
ここで改行しています。[l][r]
ここで文字を一旦消します。[l]
[er]
新しく文字を描写しました。[l]

 

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

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

 

テキストエリアの表示(吉里吉里Z)

 

上記画像のように表示されていればOKです。

 

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

あれ?表示はできたけど

表示される前に、デフォルトのテキストエリア画像が

一瞬表示されるまん

 

 

かがや
かがや

おっと、デフォルトのテキストエリア画像は

予め消しておかないとだね

 

シナリオ開始前に

デフォルトのテキストエリア画像を

非表示にすればよいので

1.ksの一番上の行に

■1.ks

;メッセージレイヤ0を非表示
;(デフォルトのテキストエリア画像を消すため)
[position layer=0 visible=false page=fore]

;背景レイヤーに背景を表示
[image storage=forest.jpg page=fore layer=base]
[wait time=200]
*start|スタート
[cm]

前景レイヤー0に、1人目のキャラクターを表示
[image layer=0 page=fore storage="chara01" visible=true left=-300]
;前景レイヤー1に、2人目のキャラクターを表示
[image layer=1 page=fore storage="chara02" visible=true left=400]

;メッセージレイヤー0をテキスト表示に使用 
[position layer=message0 width=800 height=195 left=0 top=420 frame=text_area.png margint=40 marginb=20 marginl=60 marginr=20]テキストを表示。[l][r]
ここで改行しています。[l][r]
ここで文字を一旦消します。[l]
[er]
新しく文字を描写しました。[l]
と追加しておきましょう。
ぶたまんさん
ぶたまんさん

お、これで直ったまん♪

 

さて、今回の「position」タグは

どのレイヤーに、どういった操作するのか指定するタグです。

 

今回はテキストエリアに背景画像を指定したいので、

テキストエリアを表示させるためのレイヤー

「メッセージレイヤー」を操作したいことになります。

 

さて、メッセージレイヤーは

「message0」「message1」の2つありましたね。

(忘れちゃった方はもう一度、前章をチェック!)

 

デフォルトでは「message0」が表示されるようになっているので

今回は「メッセージレイヤー0」を使用することにして、

「layer」属性で「message0」と記述しています。

 

positionタグの属性も表にまとめてみました。

 

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

layer これから操作したいメッセージレイヤー名を指定する

baseだと背景レイヤー、0~2だと前景レイヤーになる

width メッセージレイヤーの横幅を指定する
height メッセージレイヤーの高さを指定する
frame メッセージレイヤーの背景画像を指定する
marginl メッセージレイヤーの左側の余白サイズを指定する
margint メッセージレイヤーの上側の余白サイズを指定する
marginr メッセージレイヤーの右側の余白サイズを指定する
marginb メッセージレイヤーの下側の余白サイズを指定する

 

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

メッセージレイヤーの余白サイズの指定ってなんだまん?

かがや
かがや

メッセージレイヤーに対して、

どの位置からテキストの描写をしていきたいか指定しているよ。

下の画像を見てみてね。

 

余白サイズの説明(KKEFZ)

 

かがや
かがや

ちなみに今回の場合、余白指定をしない(全部0に指定)すると、

下記のような表示になります。

 

余白サイズの説明(KKEFZ)

 

次にテキストの表示についてのタグです。

こちらは簡単なのでさくっといきますね。

 

■今回使用しているテキストタグ

[r]タグ 文字を改行する
[l]タグ クリック待ちをする
[er]タグ 現在操作中のメッセージレイヤに表示されているテキストをクリアする

 

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

なるほどまん。

ところでキャラクターの名前はどうやって表示させるまん?

本文のテキストと同じレイヤーを使うまんか?

 

 

かがや
かがや

名前の表示は、本文のテキストとは別のレイヤーを使うよ

その方が扱いが便利だからね

 

ここでは

 

キャラクターの名前表示(KKEFZ)

 

という感じで名前を表示させてみたいと思います。

 

本文のテキストは「メッセージレイヤー0」を使用しましたが

名前表示には「メッセージレイヤー1」の方を使用していきたいと思います。

 

それでは下記のように書いてみてください。

;背景レイヤーに背景を表示
[image storage=forest.jpg page=fore layer=base]
[wait time=200]
*start|スタート
[cm]

;前景レイヤー0に、1人目のキャラクターを表示
[image layer=0 page=fore storage="chara01" visible=true left=-300]
;前景レイヤー1に、2人目のキャラクターを表示
[image layer=1 page=fore storage="chara02" visible=true left=400]

;メッセージレイヤー1を名前欄で使用
[position layer=message1 visible=true width=250 height=50 left=30 top=380 margint=5 marginb=0 marginl=20 marginr=0]
;これから操作するレイヤー名を指定
[current layer=message1]
;名前の描写
妖狐のお兄さん

;メッセージレイヤー0をテキスト表示に使用
[position layer=message0 width=800 height=195 left=0 top=420 frame=text_area.png margint=40 marginb=20 marginl=60 marginr=20]
;これから操作するレイヤー名を指定
[current layer=message0]

テキストを表示。[l][r]
ここで文字を一旦消します。[l][r]
[er]
新しく文字を描写しました。[l]

 

 

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

なんだかごちゃごちゃしてきて、めまいがしてきたまん・・・

 

かがや
かがや

そうだね

でも使っているタグは、本文のテキスト表示とほぼ同じだから

そんなに身構えなくても大丈夫よ

 

今回新しく出てきたcurrentタグですが、

こちらはこれから操作するレイヤー名を指定するタグです。

 

ここでは

 

  • メッセージレイヤー0
  • メッセージレイヤー1

 

の2つのメッセージレイヤーを使用するため

どちらのメッセージレイヤーに対して操作するのか

必ず指定してからテキストを書いていきます。

※使用しているタグと属性は、これまでと同じのためここでは説明を割愛します

 

かがや
かがや

ちなみに名前欄も、本文のテキスト表示の時と同様

frame属性で画像を指定することもできるよ

 

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

わかったまん。やってみるまん

 

こんな時はどうしたらいいの?

メッセージレイヤーでPNG形式の画像が透過されない(背景が白くなる)

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

自分で用意した画像を使ってみたら、

背景が白くなっちゃったまん・・・

 

メッセージレイヤーの画像透過

 

かがや
かがや

私も始め、そこでつまづいたよ

メッセージレイヤー用の画像は通常のPNG形式ではなくて

ltAddAlpha用の画像として保存する必要があるんだよね

 

 

ltAddAlpha用の画像として保存するには

画像フォーマットコンバーターが必要です。

吉里吉里Zの公式サイトで提供されているので、

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

 

画像フォーマットコンバーターはこちら

 

上記をダウンロードしたら

 

kirikiri2 ⇒ tools ⇒ krkrtpc.exe

 

でファイルを実行してみてください。

 

吉里吉里画像コンバーター設定

 

 

設定は下記画像の通りになります。

 

吉里吉里画像コンバーター設定

 

設定が終わったら、変更したい画像を

上記ツールへドラッグ&ドロップすれば変換完了です!

 

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

お~、画像が透過されたまん

 

メッセージレイヤーの画像透過

 

かがや
かがや

うん、メッセージレイヤー用の画像は

このような手順で変換してから使ってみてね

【応用編】画像をフェードイン・アウトなどアニメーションするには?

 

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

ところで、一般的なゲームみたいに、

画像をアニメーションするには

どうしたらいいまん?

 

かがや
かがや

トランジション」というものを使用すると可能だよ

今回盛りだくさんになっちゃって長くなってきたので、

こちらの記事で紹介してるよ

 

トランジションを使用すると、ゲームの演出がぐっと華やかになるので

開発している時も楽しくなってきますよ^^

初心者でもプロ並みの恋愛ゲームに!トランジション活用術【吉里吉里Z開発】

 

 

ここまでいかがでしたでしょうか?

感想、疑問点などございましたら、お気軽にコメント頂けたらと思います。

 

 

[temp id=4]

 

<ノベルゲーム、恋愛ゲームをつくる人必見!>

個人ゲーム開発歴6年&
元大手ゲーム会社プランナーの
かがやの知識を詰め込んだ
ゲーム開発の攻略本

『ノベル&恋愛ゲーム開発スタートBOOK』
期間限定無料プレゼント中!

ノベル・恋愛ゲーム開発スタートBOOK

「ゲーム開発って何をしていけばいいの?」
「ゲーム開発をかんたん・効率的に進めるためには?」
「今から開発を始めたらいつ頃完成できる?」

etc…

そんな疑問がこれ一冊で丸わかり

12件のコメント

こんにちは。吉里吉里でゲーム制作をしようとしてこちらにたどり着きました。
おかげでとてもわかりやすく、このページはクリアできました。
そしてメッセージウインドウを独自の画像にしてみたのはいいのですが、
スタートしたとき背景画像と一緒に、グレーのメッセージウインドウが一瞬現れ、
キャラクターの表示とともに消えます。

;背景レイヤーに背景を表示
[image storage=forest.jpg page=fore layer=base]
[wait time=200]
*start|スタート
[cm]

この段階で出るようですが、
どのようにしたらよいでしょうか。

ののさま

はじめまして、コメントありがとうございます。

ご質問の件ですが、背景画像の読み込みの前に
メッセージレイヤ0を消す記述を追記してみてください。

[position layer=0 visible=false page=fore]

;背景レイヤーに背景を表示
[image storage=forest.jpg page=fore layer=base]
[wait time=200]
*start|スタート [cm]

記事内容にも上記のお話を追加しましたので
そちらもご確認頂ければと思います(*^^*)

どうぞよろしくお願い致します。

かがやさま

ありがとうございます、できました……!
このようなHPがあることに感謝しております。
まだまだこれからですが、こちらを参考に頑張ってみます。

解決されたとのことでよかったです!
ゲーム開発、楽しんでくださいね(^^)

はじめの背景画像表示についてなのですが、背景画像の場所、名前、拡張子、コードの内容など、すべて合っているはずなのですが、「適切な拡張子を持ったファイルを見つけられません」というエラーが出てしまいます。
この場合どんな事が原因になっているのでしょうか?画像サイズが大きすぎるとか…?;;

同じような質問を検索してみたら「storage」が「strage」になっているのに気付きました…
初歩的なミスでご迷惑をおかけしました…!

nanasiさま
とんでもないです。
無事解決されたとのことでよかったです(^^)

現在、ゲーム開発をらくらく進めるための攻略本も
こちらで無料でプレゼントしていますので
よろしければこちらもご活用頂けたらと思います。

かがやさま

こんにちは。初心者向けにいろいろ解説してくださりありがとうございます!
他は問題なくクリアできたのですが、
デフォルトのテキストエリア画像を非表示にしたら、差し替えのテキストエリアも出てこなくなりました。

下記のような感じです。

13:46:43 Scenario loaded : 1.ks
13:46:43 1.ks : [position layer=0 visible=false page=fore]
13:46:43 1.ks : [image storage=forest.jpg page=fore layer=base]
13:46:43 forest.jpg の読み込みに 34ms かかりました
13:46:43 1.ks : [wait time=200]
13:46:43 1.ks : ラベル/ページ : *start/スタート
13:46:43 データのセーブを開始します…
13:46:43 データのセーブが完了しました (0msec)
13:46:43 1.ks : [cm]
13:46:43 1.ks : [image layer=0 page=fore storage=”chara01.png” visible=true left=-300]
13:46:43 chara01.png の読み込みに 35ms かかりました
13:46:43 1.ks : [image layer=1 page=fore storage=”chara02.png” visible=true left=300]
13:46:43 chara02.png の読み込みに 79ms かかりました
13:46:43 1.ks : [position layer=message1 visible=true width=250 height=50 left=30 top=380 margint=5 marginb=0 marginl=20 marginr=0]
13:46:43 1.ks : [current layer=message1]
13:46:43 1.ks : 妖狐のお兄さん
13:46:43 1.ks : [current layer=message0]
13:46:43 1.ks : [position layer=message0 width=800 height=195 left=0 top=420 frame=text_area.png margint=40 marginb=20 marginl=60 marginr=20]テキストを表示。[l][r]
13:46:44 警告 : 非表示になっている表メッセージレイヤ0で行クリック待ちになりました

この場合はどうすればよういのでしょうか?

ななし様

初めまして、コメントありがとうございます。(^^)
差し替えのテキストエリアが表示されなくなってしまったのですね。

ソースコードもこちらに貼り付けて頂いても
よろしいでしょうか?

お手数をおかけしますが、どうぞよろしくお願いします。

初のコメント失礼します。
追加したメッセージの方が↓
;メッセージレイヤー0をテキスト表示に使用
[position layer=message0 width=800 height=195 left=0 top=420 frame=text_area.png margint=40 marginb=20 marginl=60 marginr=20]テキストを表示。[l][r]
ここで改行しています。[l][r]
ここで文字を一旦消します。[l]
[er]
新しく文字を描写しました。[l]

これを入れて表示させても画面の端っこにちょこっとしか表示されません。
どうしたらいいですか?

すみません、解決したので問題ありませんでした。
申し訳ありません。

ひまじん様

コメント頂き、ありがとうございます。
とんでもないです。
無事解決されたようでよかったです。