こんにちは。

今回は、作ったCGモードの作り方についてのメモとして、記事にさせて頂きます。

ゲームのツールは吉里吉里です。

じゃあまず、素材作りから。

素材作りで必要な物。

【map.png】

【map_p.png】

【目隠し用の画像】

【スチル】

の４つの画像です。

上の画像の左から、「map.png」「map_p.png」「目隠し用画像」です。

１．map.pngの作り方

map.pngは、作りたいCGモードをpictbearやPhotoshopなどを使って好きに作ってください。

ここではPhotoshopを使って作っていますので、それに沿って解説します。

2.map_p.png（領域画像）の作り方

私は、ここで失敗して4時間もプログラミングと戦うはめになりました。

ここさえ間違わなければ、後は簡単です。

他にも応用できます。

作り方ですが、

最初に作った「map.png」のクリックできる範囲の場所を赤、緑、黄などの色別で作ります。

この場合、スチルの部分をクリックできるようになります。

ここで注意する点はwindowsインデックスカラー（256色）で制作するということです。

Photoshopでは、スウォッチの設定の一番下にある「windows」を選ぶと、

windowsインデックスカラーがパレットに出てきます。
出てきた色を順番に上の画像のよう、範囲を設定して塗りつぶします。

次に、「イメージ」⇒「モード」⇒「インデックスカラー」でインデックスカラーにします。

最後に保存ですが、
クリッカブルマップに使う元画像、ここでは「map.png」ですね。

その「map.png」に【_p】を付け加えた「map_p.png」で保存してください。

「_p」を付けることによってプログラムが自動で読み込んでくれます。

3．目隠し画像

これは、スチル解放条件が達成されていなければクリックして見れないようにするのを防止するカバーみたいな役割の画像です。

画像は、ＣＧモードのスチルが隠れる大きさで作ればいいでしょう。

以上で画像の作り方は終わりです。

プログラミングする際に必要なデータは

【cg.ma（アクションファイル）】

【cg.ks（シナリオファイル）】

の二つです。

１．アクションファイルの作り方

テキストファイルに書いていきます。

内容は、先ほどの「map_p.png」のクリック出来る範囲の、
どの色を触ったら、どこのシナリオへ飛ぶかという設定です。

以下がそのプログラム

1:if(sf.cg01==1){storage="cg_mode.ks"; target="*evcg01";}

2:if(sf.cg02==1){storage="cg_mode.ks"; target="*evcg02";}

3:if(sf.cg03==1){storage="cg_mode.ks"; target="*evcg03";}

4:if(sf.cg04==1){storage="cg_mode.ks"; target="*evcg04";}

5:if(sf.cg05==1){storage="cg_mode.ks"; target="*evcg05";}

6:if(sf.cg06==1){storage="cg_mode.ks"; target="*evcg06";}

では解説です。

1:if(sf.cg01==1){storage="cg_mode.ks"; target="*evcg01";}の意味は

「if(sf.cg01==1)」は、変数「cg01」の中に1の数字が入っていれば、のif関数。

「storage="cg_mode.ks";」は、シナリオファイル「cg_mode.ks」を指定してる。

「target="*evcg01";」は、「*evcg01」を指定してる。

まとめると、

もし変数「cg01」の中に1の数字が入っているならば、

シナリオファイル「cg_mode.ks」の

「*evcg01」の部分に飛ばしてね

っていう意味です。

後は同じ意味で、変数の部分をチョチョイっと変えればいいです。

２．シナリオファイルの作り方

最初の画面を作る時と要領は似ています。

*cg_start
; メッセージ欄を透明にする

[position layer=message0 page=fore opacity=0]

;クリッカブルマップに使う画像を前景レイヤ０に読み込む

;↓レイヤ情報の表ページから裏ページへのコピー

[backlay]

[image storage="map" layer=base page=back]

；↑この時点で、map_p.pngとcg.maは読み込まれています

；↓ここから目隠しの画像を張り付けるプログラムです

[pimage storage="not.png" layer=base page=back dx=32 dy=38 cond="sf.cg01==0"][pimage storage="not.png" layer=base page=back dx=285 dy=38 cond="sf.cg02==0"]

[pimage storage="not.png" layer=base page=back dx=536 dy=38 cond="sf.cg03==0"]

[pimage storage="not.png" layer=base page=back dx=32 dy=248  cond="sf.cg04==0"]

[pimage storage="not.png" layer=base page=back dx=285 dy=248 cond="sf.cg05==0"]

[pimage storage="not.png" layer=base page=back dx=536 dy=248 cond="sf.cg06==0"]

;クロスフェードトランジション

[trans method=crossfade time=500][wt][s]

;＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

*evcg01
[image storage="ngm01" layer=base page=back]

[trans method=crossfade time=500]

[wt]

[waitclick]

[jump target="*cg_mode_start"]

;＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

*evcg02[backlay]
[image storage="ngm01.png" layer=base page=fore visible=true]

[wt canskip=false]

[waitclick]

[jump target="*cg_mode_start"]

;＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

*evcg03

[backlay]
[image storage="ngm01" layer=base page=back]

[trans method=crossfade time=500]

[wt]

[waitclick]

[jump target="*cg_mode_start"]

;＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

*evcg04

[backlay]
[image storage="ngm01.png" layer=base page=fore visible=true]

[wt canskip=false]
[waitclick]
[jump target="*cg_mode_start"]

;＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

*evcg05
[backlay]
[image storage="ngm01.png" layer=base page=back visible=true]

[wt canskip=false]
[waitclick]
[jump target="*cg_mode_start"]

;＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

*evcg06[backlay]
[image storage="ngm01.png" layer=base page=fore visible=true]

[wt canskip=false]
[waitclick]
[jump target="*cg_mode_start"]

;＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

では次にプログラムの解説です。

背景画像の指定などは、他のサイトの方がわかりやすく載ってるので、

今回はこのクリッカブルマップの際に使うプログラムについて解説します。