今回のゲーム、醍醐くんの飯活！！で初めてギャラリーを作成したので、その感覚を記事にまとめておきたいと思います。
ギャラリー機能を使う為の条件
まずギャラリーを使うにはティラノスクリプトのバージョンがV400以上必要なのだそうです。いちもんじはティラノスタジオの安定板でティラノスクリプトも安定板を使っているので無事に使えたっぽいです。最新版を使っているわけでもないので、恐らくですがほとんどの方が普通に使えるのではないかと思います。もしもまだ作り始めてないけれどティラノスクリプトアプデしておきたい！と言う方はこちらの記事を参考になさってくださいませ。
ギャラリーを付け足す予定が確定しているなら前もって準備
まずですが、ギャラリーにイラストなどを追加する際、その画像を表示した後などに[cg]というタグを置く必要があります。この[cg]を置く作業、沢山イラストがあるのに後からやろうとすると結構な手間です。なので、もしギャラリーを付けようかな？と最初から考えているようであれば、画像を表示させた次の瞬間にはもう[cg]タグを置いておく方がスムーズだと思います。いちもんじは後からギャラリー付け足した方が良いよね…？と思って付け足したので、手間が増えてしまいました…。
やり方
- イラストを配置する
- [cg]タグを直後に追加する
- [cg_image_button]タグをcg.ksに追加する
- 必要ならば画像の大きさなどいろいろ調整
- 次ページなどを作成する
イラストを配置する
やり方はハッキリ言って簡単です。
例えばcgモード（ギャラリー）に追加したいイラストを表示しますね。この表示させるイラストを置いておく位置はbgimageフォルダでもfgimageフォルダでもどっちでも良いですが、後から[cg_image_button]でbgimageフォルダを使って画像を指定するのでbgimageフォルダの方が良いかも知れません。
もしfgimageに入れているイラストをギャラリーに指定したいのであれば、その画像と同じものをbgimageフォルダに入れる必要があります。
[bg storage=”black.png” time=”100″]
[cg]タグを直後に追加する
[cg]タグとは、この画像を見たことがありますよ～っていう判定のタグになっています。どのセーブデータからでも共通のやつです。なので１度通ってしまえばそのイラストはギャラリーで解放されたままなのでご安心ください。
[bg storage=”black.png” time=”100″]
[cg storage=”black.png”]
[cg storage=”ここに画像名を指定.拡張子はそれぞれの素材に合わせて”]
なお動画mp4などのイラストではないものを指定してみましたがダメでした。やっぱりイラストじゃないとダメみたいです。gifは大丈夫でした！なのでgifで表現したイラストもギャラリーに追加できそうです。
[cg_image_button]タグをcg.ksに追加する
まずはcg.ksを開きましょう。そしてこんな感じのスクリプトを探してみましょう。
いちもんじのだと47行目にありました。
[cg_image_button graphic=”toile.jpg” no_graphic=”noise.jpg” x=60 y=100 width=160 height=140 folder=”bgimage” ]
このスクリプトのこの部分を変更していきます。
[cg_image_button graphic=”toile.jpg” no_graphic=”noise.jpg” x=60 y=100 width=160 height=140 folder=”bgimage” ]
とは言っても先ほど[cg]タグで追加した画像名に変えるだけです。
[cg_image_button graphic=”black.png” no_graphic=”noise.jpg” x=60 y=100 width=160 height=140 folder=”bgimage” ]
これで無事にcgモードに画像を１枚追加することが出来ました。
必要ならば画像の大きさなどいろいろ調整
デザインがデフォルトだと青くて太い文字でCGモードみたいな画像が配置されると思いますが、それが嫌だったら（笑）これの部分をコメントアウトするなどすればよいと思います。
;[image layer=1 left=0 top=0 storage=”config/label_cg.png” folder=”image” ]
また一文字は基本的に1280×720の画面サイズでゲームを制作しています。それ故デフォルトのままだとサムネイルが変な風に変形してしまうので、サムネイル画像の大きさ、それに伴って位置などの変更をしました。参考までに、こんな感じに配置したければどのようにスクリプトを組んだのか書いておきます。ここに貼ると何故か””が変な風に変換されてしまうので、コピペの際はご注意ください。
完成イメージはこんな感じです。↓
*page_0
;１行目、上から順に左から右へ
[cg_image_button graphic="tomon.png" no_graphic="../../tyrano/images/system/noimage.png" x=83 y=145.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=311 y=145.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=539 y=145.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=767 y=145.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=995 y=145.375 width=202 height=113.625 folder="bgimage" ]
;２行目、上から順に左から右へ
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=83 y=287.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=311 y=287.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=539 y=287.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=767 y=287.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=995 y=287.375 width=202 height=113.625 folder="bgimage" ]
;３行目、上から順に左から右へ
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=83 y=429.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=311 y=429.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=539 y=429.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=767 y=429.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=995 y=429.375 width=202 height=113.625 folder="bgimage" ]
;４行目、上から順に左から右へ
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=83 y=571.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=311 y=571.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=539 y=571.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=767 y=571.375 width=202 height=113.625 folder="bgimage" ]
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=995 y=571.375 width=202 height=113.625 folder="bgimage" ]未開放の画像のデザインについてですが、デフォルトでtyrano→images→systemフォルダの中にあるnoimage.pngというデータを指定してあります。なので、このデザインが嫌だと言う方はここに上書き保存をすれば置き換えがスムーズです。
次ページなどを作成する
デフォルトの段階ではギャラリーは１ページしかありません。もしも何ページにもわたる場合はページを追加しなければならないのですが、やり方を検索しても出てこなかったので自分で作ることにしましたorz
前ページと後ページに飛ぶためのボタンを作成する
一応いちもんじはdata→image→configフォルダの中にボタンを作成して保存しました。
フラグを使ってページの管理をする
醍醐くんの～のページが６ページにも及びそうだったので、フラグを足すことにしました。コードはこんな感じです。赤文字が追加した文字です。左右のボタンを押したらピッと音が鳴るようにしています。
有識者の方から見ると余計なことをしてるな～ｗとお思いかも知れませんが、いちもんじには既に書いてある内容が何なのか分かり兼ねたので、自分なりに分かる方法を取るしかありませんでした…。
;=========================================
; CG モード 画面作成
;=========================================
@layopt layer=message0 visible=false
[freeimage layer="1" time="0"]
@clearfix
[hidemenubutton]
[cm]
;ページ分岐のフラグ使用
[eval exp="f.cgmode=1"]
[bg storage="cg.png" time=100]
[layopt layer=1 visible=true]
;CGを見終わった後どのページに戻って来るかの判定
*cgview
[if exp="f.cgmode==1"]
@jump target="*page_0"
[elsif exp="f.cgmode==2"]
@jump target="*page_1"
[elsif exp="f.cgmode==3"]
@jump target="*page_2"
[elsif exp="f.cgmode==4"]
@jump target="*page_3"
[elsif exp="f.cgmode==5"]
@jump target="*page_4"
[elsif exp="f.cgmode==6"]
@jump target="*page_5"
[endif]
・
・
・
*page_0
[cm]
;１行目、上から順に左から右へ
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=83 y=145.375 width=202 height=113.625 folder="bgimage" ]
・
・
・
[button graphic="config/migi.png" enterimg="config/migi2.png" target="*pagehanteimigi" x=1225.964 y=388.854 ]
[button graphic="config/hidari.png" enterimg="config/hidari2.png" target="*pagehanteihidari" x=32.524 y=388.854 ]
[button graphic="config/menu_button_close.png" enterimg="config/menu_button_close2.png" target="*backtitle" x=1150 y=40 ]
[s]
;２ページ目
*page_1
[cm]
;１行目、上から順に左から右へ
[cg_image_button graphic="tomon.png" no_graphic="../../tyrano/images/system/noimage.png" x=83 y=145.375 width=202 height=113.625 folder="bgimage" ]
・
・
・
[cg_image_button graphic=".png" no_graphic="../../tyrano/images/system/noimage.png" x=995 y=571.375 width=202 height=113.625 folder="bgimage" ]
[button graphic="config/migi.png" enterimg="config/migi2.png" target="*pagehanteimigi" x=1225.964 y=388.854 ]
[button graphic="config/hidari.png" enterimg="config/hidari2.png" target="*pagehanteihidari" x=32.524 y=388.854 ]
[button graphic="config/menu_button_close.png" enterimg="config/menu_button_close2.png" target="*backtitle" x=1150 y=40 ]
[s]
;３ページ目
*page_2
・
・同じ流れがあと３つ
・
;右のボタンを押された時の判定
*pagehanteimigi
[playse storage="pi.ogg" ]
[if exp="f.cgmode==1"]
[eval exp="f.cgmode=2"]
@jump target="*page_1"
[elsif exp="f.cgmode==2"]
[eval exp="f.cgmode=3"]
@jump target="*page_2"
[elsif exp="f.cgmode==3"]
[eval exp="f.cgmode=4"]
@jump target="*page_3"
[elsif exp="f.cgmode==4"]
[eval exp="f.cgmode=5"]
@jump target="*page_4"
[elsif exp="f.cgmode==5"]
[eval exp="f.cgmode=6"]
@jump target="*page_5"
[elsif exp="f.cgmode==6"]
[eval exp="f.cgmode=1"]
@jump target="*page_0"
[endif]
;左を押された時の判定
*pagehanteihidari
[playse storage="pi.ogg" ]
[if exp="f.cgmode==1"]
[eval exp="f.cgmode=6"]
@jump target="*page_5"
[elsif exp="f.cgmode==2"]
[eval exp="f.cgmode=1"]
@jump target="*page_0"
[elsif exp="f.cgmode==3"]
[eval exp="f.cgmode=2"]
@jump target="*page_1"
[elsif exp="f.cgmode==4"]
[eval exp="f.cgmode=3"]
@jump target="*page_2"
[elsif exp="f.cgmode==5"]
[eval exp="f.cgmode=4"]
@jump target="*page_3"
[elsif exp="f.cgmode==6"]
[eval exp="f.cgmode=5"]
@jump target="*page_4"
[endif]
・
・
・
;拡大してCGを見る際、見終わった際のクリックの時にも音が鳴るように
*cg_next_image
[playse storage="pi.ogg" ]
[image storage=&tf.selected_cg_image[tf.cg_index] folder="bgimage" ]
[l]
[playse storage="pi.ogg" ]
[bg storage="cg.png" time=10]
