タイトルロゴ
同人ゲーム制作を語らうゆっくりとしたメディア

すろ〜ふ〜ど
HowTo企画

『吉里吉里いったっきり 』



今回の挑戦は「絵を表示したり音を鳴らしてみよう」。
相変わらずド素人の二人はきちんとゲームを組み上げることはできるのでしょうか?
なお、今回も説明用に画像を多く使用しております。




夏海 では第二回目を始めましょうか。 今回は、絵を表示してみたり、音を鳴らしてみたり、絵にエフェクトをかけたりしてみましょうかねー。

鯱丸 おお! ではまずは絵からですね。 やっとゲームらしくなってきますな! っと・・・・・・うーん……
夏海 脂汗流して、どうしました?

鯱丸 ど、どこを…… な、何をどうすればいいんでしたっけ?
夏海 えー、もう忘れちゃったんですか? しょうがない、前回のおさらいをしましょう。 吉里吉里/KAGフォルダ→kirikiri2フォルダ→krkr.eXeをクリック。 しばらくしたら表示されるフォルダ/アーカイブの選択画面で、とりあえず前回作った「練習」フォルダを選択します。 いいですか、フォルダですよっ。フォルダの中のファイルじゃないですよー。

鯱丸 おおっ! 前回のフーとか言ってるやつが出てきましたぞ!
夏海 で、今回は「練習」フォルダ→「scenario」フォルダのなかのファイル「first.ks」をいじくって、あれこれしてみようというわけです。

鯱丸 なるほどなるほど。 おお、「first.ks」の中に前回書いたスクリプトがありますね。 この要領でやっていけばいいんですな。
夏海 まず画像の表示からやってみましょうか。 使える画像フォーマットはー、と……
夏海 普段慣れ親しんでるフォーマットで言うと BMP、JPEG、PNGといったところですか。 他はTLG5、TLG6、ERIのほか、Susie Plug-inを使えば色々な形式に対応できるようです。

鯱丸 なるほどなるほど。 では画像を用意しますね。 どれ、ではとりあえずJPGのを…… って、画像サイズはどんくらいのを用意すればいいんでしょう?
夏海 まずは背景から表示してみたいですので、デフォルトでは640×480ピクセルの画像を用意してみましょう。 「練習」フォルダ→「system」フォルダの中のConfig.tjsで指定すれば他のサイズも可能なようですけど、とりあえず。

鯱丸 ほいほい。
夏海 ではとりあえず適当な画像くださいよ。

鯱丸 以前うちのゲームで使った画像ですけど・・・・・・ ほいこれを。
bg01『bg01.jpg』

夏海 サンキューです。 ではこの画像を「練習」フォルダ→「bgimage」フォルダの中に放り込んでみましょう。 「〜このファイルは削除してかまいません〜.txt」なるものが入ってますけど、消すのも何となくもったいないからそのまんまで……

bg01


鯱丸 で、さっきの「first.ks」からスクリプトでもってこの画像をゲーム画面に読み込むんですな。
夏海 では以下のようにスクリプトを打ってみます。


[image storage="bg01" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
こんにちは。[r]
こにゃにゃちわフー。[p]
[cm]
クレクレタコラ。[r]



鯱丸 うおおっっっと! フッフッフッ。何ですかな? コリャ。
夏海 え、何ですかその勝ち誇ったような笑みは……

鯱丸 ふ。 この背景ファイルの指定の仕方さ! つまりbg01の部分にjpgの拡張子が記述されてなかったんだよー!!
夏海 なんだってー! じゃなくて、リファレンスをよく見てみなさいよ。 拡張子は省略できるって書いてありますよ。 面倒くさいから書かなかったんですよー!

鯱丸 なっ! なんだってぇぇえ!!!??
夏海 まったくもう。
さて、早速krkr.eXeを起動して「練習」フォルダを選択して、と……おお、背景が表示された!

背景が表示されたところ


鯱丸 おおーーっ!! ほ、ほんまやー! ほ、ほんまもんのビジュアル・ノベルみたいやんですやん!!
夏海 ではページを切り替えるときに背景も変えてみることにしてみよーっと。
新しい背景『bg02.jpg』を用意して、先ほど同じように『bgimage』フォルダに入れます。

bg02 『bg02.jpg』



[image storage="bg01" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
こんにちは。[r]
こにゃにゃちわフー。[p]
[cm]
[image storage="bg02" page=fore layer=base]
クレクレタコラ。[r]


鯱丸 ほい起動〜っと……おや。 確かに背景は変わったけど、いまいち面白味に欠けますねー。

背景が切り替わったところ 背景が切り替わりました


夏海 うう……一瞬で変わっちゃいましたしね。 エフェクトをかけるような方法とかないもんかな。リファレンスリファレンス……

鯱丸 あ、これこれ、チュートリアルん中に「トランジションを使おう」ってのがありますよ。
夏海 おお、本当だ。 えーと、なにやら長い文章が……吉里吉里の画面(のレイヤ)構成はこうなってるのかー、ふんふん……。
吉里吉里の画面構成


夏海 ふむふむ……自分なりに噛み砕いて解釈したのは、 『吉里吉里/KAG』で表示されている画面は、セル画アニメみたいな紙芝居になっていて、
・文字だけが表示されるセル画
・立ち絵(前景)が表示されるセル画
・観客から見えるように表示されている背景
・絵を差し替えるときのために、観客からは見えないように裏側で、こっそり用意しておく絵
が重なって表示されてるって感じですかね。

鯱丸 だいたいそんな感じですなー。
背景だけ、あるいは立ち絵だけ切り替えるときは、変えたい絵のセル画を抜き取りながら、裏で用意しておいた絵とすり替える。
このときに『ルール画像』を使ったりすることで、絵を差し替えるときにいろんなエフェクトをかけられるようですな。
夏海 ルール画像を使った切り替えが面白そう。 ではオリジナルの適当ルール画像、この『t_rule.png』を使ってみよう。 ルール画像を『rule』フォルダに放り込んで……と。

ruleフォルダ『rule』フォルダ


t_rule.pngルール画像『t_rule.png』


[image storage="bg01" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
こんにちは。[r]
こにゃにゃちわフー。[p]
[cm]
[backlay]
[image storage="bg02" layer=base page=back]
[trans method=universal rule="t_rule" vague=64 time=1500]
[wt]

クレクレタコラ。

夏海 うひゃひゃひゃ、なんじゃこりゃ、面白ーい!


切り替わっている途中切り替わっている途中



鯱丸 こんなかんじでグレスケ画像を用意すれば色々楽しめそうですねーって聞いてます?
夏海 うひゃひゃ……おっと、聞いてますよ。
では次は、立ち絵の表示をしてみたいですね。
しゃちさん、立ち絵を描いてください。


鯱丸 はいはいっておい! 今からっすか!?
夏海 そうですよ。ウチは立ち絵じゃなくてフェイス絵でゲーム作ってるから丁度いい立ち絵サンプルが無いんですよ。
それとも大昔の絵を……

鯱丸 うぎゃーー!! やめろーーそれだけはヤ・メ・ロー!!!
夏海 ではキリキリ描いてくださいな。 吉里吉里入門だけに……ぷくくく。

鯱丸 うあーうーうー……

(ン時間経過)

鯱丸 はいはい。描きましたよ。こんなんでどないや!

fig01.png fig01.png


夏海 受け取った!
では早速表示してみよう、るるるんるん。
fig01.pngをfgimageフォルダに入れて、それからタグを打ち込んで、と……

fgimageフォルダfgimageフォルダ



[image storage="bg01" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
[image layer=0 page=fore storage="fig01" visible=true key=0xff00ff left=340 top=100]
こんにちは。[r]
こにゃにゃちわフー。[p]
[cm]
[backlay]
[image storage="bg02" layer=base page=back]
[trans method=universal rule="t_rule" vague=64 time=1500]
[wt]
クレクレタコラ。[r]

立ち絵の表示

夏海 おお、表示できた! すごい、ゲームっぽくなってきやがった!
(この画像では見やすくするためゲーム画面を右クリックしてメッセージウィンドウを消しています)


鯱丸 まぁ、はしたない言葉遣いですこと。 あとマスクを使ってアルファ合成も出来るみたいですねー。
夏海 あ、アルファ合成ってなんですかい?

鯱丸 今の立ち絵だと透過色との境界あたりのドットがカクカクしてるでしょ? そこを滑らかにしてくれるスグレものなのです。 この画像を……

ドットがカクカクしてる ドットがカクカクしてます


夏海 ほいほい。 なんか2枚ありますねえ?

fig03.png「fig03.png」 fig03_m.png「fig03_m.png」



鯱丸 一枚は元画像。もう一枚はマスク用の画像です。 チュートリアルの「前景を表示しよう」>「マスクを使った前景 」あたりに詳しいやり方が書かれているみたいですよ。
夏海 なるほどなるほど。 そうすると、マスク画像を使った場合のタグはこうなりますな。

[image storage="bg01" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
[image layer=0 page=fore storage="fig03" visible=true left=340 top=100]
こんにちは。[r]
こにゃにゃちわフー。[p]
[cm]
[backlay]
[image storage="bg02" layer=base page=back]
[trans method=universal rule="t_rule" vague=64 time=1500]
[wt]
クレクレタコラ。[r]

夏海 ほいほいっと……まぁー。 今度は絵の輪郭がなめらかに表示されてる!

なめらかになりました 輪郭がなめらかになりました



鯱丸 背景と立ち絵が表示されると軒並みゲームっぽくなりますねー。うんうん。 では次に音響系に行きましょうか。
夏海 ではBGMを鳴らしてみますかねー。 以前作ったゲームで使用したBGMを用意してみます。 おっと、CD-ROMの音楽トラックを再生する(CD-DA)ほかに、MIDIやWave系も使えるみたいですが、どれがいいのかな?

鯱丸 最近はCD-DAやMIDIより、Wave系の方が主流みたいですからねー。 ネットで配布する事も考えて今回はWave形式(拡張子.wav)で攻めてみましょう。
夏海 リファレンスでは、CD-DAを使用する場合のやり方になっているので、えーとえーと…… まずはConfig.tjs(『吉里吉里/KAG』フォルダ→『kirikiri2』フォルダ→『練習』フォルダ→『system』フォルダの中)の、BGMの設定項目をいじらなきゃならないようです。

鯱丸 フムフム。
夏海 // ◆ BGM再生メディア
の下がデフォルトでは『;type="CDDA";』になってて、CD-DAを使用するように指定されてました。
なので『;type= "Wave";』に変更して……


Config.tjs Config.tjsの編集。


鯱丸 ほうほう。
夏海 用意した音源ファイル、sen-21.wav1を『練習』フォルダ→『bgm』フォルダに放り込んで……
タグをこのように打ってみてっと……ぱちぱち。

bgmフォルダ「bgmフォルダ」



[image storage="bg01" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
[image layer=0 page=fore storage="fig03" visible=true left=340 top=100]
こんにちは。[r]
[playbgm storage="sen-21.wav"]
こにゃにゃちわフー。[p]
[cm]
[backlay]
[image storage="bg02" layer=base page=back]
[trans method=universal rule="t_rule" vague=64 time=1500]
[wt]
[stopbgm]
クレクレタコラ。[r]

夏海 おお! ちゃんと音楽が聞こえる!

鯱丸 ほうほう。
夏海 って、聞いてないな! 無理矢理大音量で聴かせてやる。ヘッドホンで最大出力だぁ!

鯱丸 うぎゃあああ!! きーこーえーるーーー!!!
夏海 しゃちさんは地獄耳ってことがわかったところで、効果音を鳴らしてみよう。

鯱丸 はーいーー(涙目)
夏海 では、また適当な効果音のファイルを、ごそごそ…… この[bell.wav]
を『練習』フォルダ→『sound』フォルダに入れてーっと。


soundフォルダ『sound』フォルダ


鯱丸 あ、効果音も何か設定をイジらないといけないんじゃないっすかー!(ビシッと指差しつつ勝ち誇った表情で)
夏海 フンッ。効果音はPCM系、wavでいいんですよーだ。

鯱丸 うわっ! なんだそりゃ赤ッ恥もいいトコじゃん俺ってばハズカシー!!
夏海 では、効果音を一回だけ鳴らす場合のタグを入れてみましょー。

[image storage="bg01" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
[image layer=0 page=fore storage="fig03" visible=true left=340 top=100]
[playse storage=bell.wav]
[ws]

こんにちは。[r]
[playbgm storage="sen-21.wav"]
こにゃにゃちわフー。[p]
[cm]
[backlay]
[image storage="bg02" layer=base page=back]
[trans method=universal rule="t_rule" vague=64 time=1500]
[wt]
[stopbgm]
クレクレタコラ。
夏海 おお、ちゃんと一回だけベルの音が聞こえましたよ。

鯱丸 おお! あの鐘を鳴らすのはア・ナーーーターーー♪
夏海 あーなーたーにいてほしーいっと。 さて、効果音をループ再生させるにはこうタグを打ってみました。

[image storage="bg01" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
[image layer=0 page=fore storage="fig03" visible=true left=340 top=100]
[playse storage=bell.wav loop=true]
こんにちは。[r]
[playbgm storage="sen-21.wav"]
こにゃにゃちわフー。[p]
[cm]
[backlay]
[image storage="bg02" layer=base page=back]
[trans method=universal rule="t_rule" vague=64 time=1500]
[wt]
[stopbgm]
[stopse]
クレクレタコラ。

夏海 うん、ちゃんと[stopse]で指定した箇所に行くまでループで再生されてましたよ。

鯱丸 いや、それ歌が違うし…… ともあれこれで一通り画像と音響を呼び出す事ができましたね! それでは次回からはとうとうノベルゲームの根幹、テキスト制御のやり方とか行きますよ!
夏海 おお、ついに! では選択肢やセーブ・ロードに対応した感じで、いっちょそれなりのゲームを作ってみますか!

鯱丸 何ノンキに構えてるです? 次回までに一本まるまるゲームのシナリオを上げてくるんですよアナタが。
夏海 えー。聞いてないし! ばかじゃないの〜(小須田課長風に)!

鯱丸 アンタが! イキナリ立ち絵描けとか言い出すからいけないんだー!! うわーん(泣)
夏海 よかれと思ってぇ!




ネタも微妙に古い、いったっきりコンビですが、次は選択肢をつけたり、セーブ・ロードに対応させるなどしつつ、
短めなゲームを一本、作ってみようと思います。
では、どきどきしながらまた次回!


文責:漣 夏海&銛 鯱丸(グリーンティミルク。)

第一回目に戻る
第三回目へ進む
第四回目へ進む

− 戻る −


inserted by FC2 system