ホーム / ゲームの作り方 /

ティラノスクリプトのコンフィグ画面を作る

ゲームの作り方

t f B! P L

ティラノスクリプトのコンフィグ画面の構造

コンフィグ画面はボタンがいっぱい並んでいて作るのが難しそうですが、実際はそんなに難しくない（ただめんどくさい）ので頑張って作ってみよう

コンフィグ画面でよくある機能

とりあえず、デフォルトのコンフィグ画面で設定できる項目を挙げてみた
これくらいあればフリゲとしては充分すぎるでしょ…

BGM音量

サンプルの「config.ks」では、BGM音量を設定する部分はこんな感じで書かれています。
;------------------------------------------------------------------------------------------------------
;▼BGM音量
;------------------------------------------------------------------------------------------------------
;BGM音量-1０
[button name="bgmvol,bgmvol_10"  fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=300 y=170 exp="tf.current_bgm_vol=10"]
;BGM音量-20
[button name="bgmvol,bgmvol_20"  fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=340 y=170 exp="tf.current_bgm_vol=20"]
;BGM音量-30
[button name="bgmvol,bgmvol_30"  fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=380 y=170 exp="tf.current_bgm_vol=30"]
;BGM音量-40
[button name="bgmvol,bgmvol_40"  fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=420 y=170 exp="tf.current_bgm_vol=40"]
;BGM音量-50
[button name="bgmvol,bgmvol_50"  fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=460 y=170 exp="tf.current_bgm_vol=50"]
;BGM音量-60
[button name="bgmvol,bgmvol_60"  fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=500 y=170 exp="tf.current_bgm_vol=60"]
;BGM音量-70
[button name="bgmvol,bgmvol_70"  fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=540 y=170 exp="tf.current_bgm_vol=70"]
;BGM音量-80
[button name="bgmvol,bgmvol_80"  fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=580 y=170 exp="tf.current_bgm_vol=80"]
;BGM音量-90
[button name="bgmvol,bgmvol_90"  fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=620 y=170 exp="tf.current_bgm_vol=90"]
;BGM音量-100
[button name="bgmvol,bgmvol_100" fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=660 y=170 exp="tf.current_bgm_vol=100"]

;BGM音量-ミュート（音量=0）
[button name="bgmvol,bgmvol_0"    fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=780 y=170 exp="tf.current_bgm_vol=0"]
長くてｳﾜｯってなりますが、ひとつひとつ見ていきましょう。

まず、ゲーム画面を見てみると、BGM音量の部分は、丸いアイコンが10個並んでいます。
さらに、いちばん右のアイコンだけ黄色になっています。黄色のアイコンが、現在選択されている音量です。

この10個のアイコンが、音量を10段階で変更するためのボタンになっています。
いちばん左がいちばん音量が小さく、右に行くほど大きい音量を設定できます。

そして、少し離れた位置に音量をミュートにするボタンがあります。

config.ksでは、まずBGM音量を設定するボタンを11個表示させています。
;BGM音量-1０
[button name="bgmvol,bgmvol_10"  fix="true" target="*vol_bgm_change" graphic="config/c_btn.png" width=35 height=35 x=300 y=170 exp="tf.current_bgm_vol=10"]
それぞれのパラメータを見ていきましょう。

  • name：ボタンのclass名を指定、ここはあんまり重要じゃない
  • fix：trueを指定し、fixボタンにする
  • target：ラベル「*vol_bgm_change」へジャンプ、ジャンプ先で実際に音量を変更する処理をする
  • graphic：ボタン画像を指定
  • width：ボタン画像の横幅を指定
  • height：ボタン画像の高さを指定
  • x：ボタン画像の横表示位置を指定
  • y：ボタン画像の縦表示位置を指定
  • exp：ボタンをクリックしたときに実行するJS式を指定、ここはとても重要
x、yパラメータについては、11個のボタンそれぞれの表示位置を指定してやります。

特に重要なのは、targetパラメータとexpパラメータです。

よく見ると、11個のボタン全てでtargetパラメータの値が同じことに気づくと思います。

音量を変更する処理は、11個のボタンそれぞれで「音量を10に設定する処理」「音量を20に設定する処理」…「音量を100に設定する処理」となります。

音量の設定値が変わるだけで、「音量を変更する」部分は同じです。

expパラメータでは、この内の「音量の設定値」の部分を設定しています。
「tf.current_bgm_vol」という変数に、それぞれのボタンで10、20、…100という値を代入しています。

つまり、「音量を「tf.current_bgm_vol」という変数に代入された値に設定する処理」をしているのです。

それでは次に、実際に音量を変更している部分、ラベル「*vol_bgm_change」を見てみましょう。
;--------------------------------------------------------------------------------
;▼BGM音量
;--------------------------------------------------------------------------------
*vol_bgm_change
[iscript]
 $(".bgmvol").attr("src","data/image/config/c_btn.png");
 $(".bgmvol_"+tf.current_bgm_vol).attr("src","data/image/config/c_set.png");
[endscript]
[bgmopt volume="&tf.current_bgm_vol"]
[return]
JavaScriptで書かれている部分もあって難しそうですが、ひとつずつ見ていきます。

まず、[iscript]～[endscript]の部分では、ボタン画像の変更をしています。
ボタン画像は、通常は青色ですが、「現在設定されている音量のボタン」だけは黄色になります。

なので、ここでは、「いったんすべてのBGMボタン画像を青色にする」処理と、そのあとに「選択した（プレイヤーがクリックした）ボタンのみ画像を黄色のものにする」処理をしています。

[iscript]～[endscirpt]部分は、難しければ無理に理解する必要はありません。

大事なのはそのあと、[bgmopt]タグです。

[bgmopt]タグでは、volumeパラメータを「tf.current_bgm_vol」変数の値に変更しています。
「tf.current_bgm_vol」は、さっき出てきましたね。
「音量の設定値」が代入された変数です。

その後、[return]タグでボタンを表示している部分に戻っています。
音量設定ボタンはfixパラメータにtrueが指定されているので、[return]で元の場所に戻る、という処理が必要になります。

SE音量

これもBGM音量の設定とそこまで変わりはありません。[button]タグのtargetパラメータ、expパラメータで指定しているJS式の、「SE音量の設定値」を代入する変数名が違うくらいです。

targetパラメータのジャンプ先での処理も、BGMとほとんど同じです。
[bgmopt]タグが[seopt]タグになっているくらいですかね

テキスト速度

文字の表示速度の設定です。
これも、BGM、SEの設定と基本は同じです。

違うのは、[buttan]タグのtargetパラメータのジャンプ先での処理です。
ちょっと見てみましょう。
;---------------------------------------------------------------------------------
;▼テキスト速度
;--------------------------------------------------------------------------------
*ch_speed_change
[iscript]
 $(".ch").attr("src","data/image/config/c_btn.png");
 $(".ch_"+tf.set_ch_speed).attr("src","data/image/config/c_set.png");
[endscript]
[configdelay speed="&tf.set_ch_speed"]

;テキスト速度サンプル
[position layer=message1 left=40 top=490 width=880 height=110 page=fore visible=true opacity=0]
[layopt layer=message1 visible=true]
[current layer=message1]
[font color="0x454D51"]
このスピードで表示されます
[iscript]
tf.system.backlog.pop(); // 上の「このスピードで表示されます」のテキストを履歴から削除
[endscript]
[wait time=2000]
[er]
[layopt layer=message1 visible=false]
[return]
まず、[iscript]～[endscript]タグ内では、ボタン画像の変更を行っています。
これはBGM、SE音量と同じです。

そして、[configdelay]タグで文字速度の変更を行っています。

その後が重要です。
[position layer=message1 left=40 top=490 width=880 height=110 page=fore visible=true opacity=0]
[layopt layer=message1 visible=true]
[current layer=message1]
テキストの表示速度を変更したとき、画面下に「この速度で表示されます」というようなメッセージが表示されます。
上の部分で、そのメッセージを表示させるメッセージレイヤーの設定を行っています。
メッセージレイヤーは、デフォルトで（メインシナリオで）使っているmessage0レイヤーではなく、message1レイヤーを一時的に使っています。 
[font color="0x454D51"]
このスピードで表示されます

[iscript]
tf.system.backlog.pop(); // 上の「このスピードで表示されます」のテキストを履歴から削除
[endscript]
そして、「このスピードで表示されます」というメッセージを表示します。 表示したあとの[iscript]～[endscirpt]では、このままでは「このスピードで～」のメッセージがバックログに残ってしまうので、その部分のログを消す処理を行っています。
これは、メッセージ表示前に[nolog]タグを使って、メッセージ表示後に[endnolog]タグを使えば同じことができます。 
[wait time=2000]
[er]
[layopt layer=message1 visible=false]
[return]
最後です。
[wait]タグで2秒待ったあと、[er]タグでメッセージを消しています。
[cm]タグを使っていないのは、そうするとカレントのメッセージレイヤーがmessage0に戻ってしまうからです。
その後、[layopt]タグでmessage1レイヤーを非表示にしています。これは表示しっぱなしに変えても問題ないと思います。

オートモード速度

こっちも、[button]タグでやっていることはこれまでと同じです。
ジャンプ先ラベルでやってることもそんなに難しくありません。 
[iscript]
 $(".auto").attr("src","data/image/config/c_btn.png");
 $(".auto_"+tf.set_auto_speed).attr("src","data/image/config/c_set.png");
[endscript]
[autoconfig speed="&tf.set_auto_speed"]
[return]
これまでどおり[iscript]～[endscript]でボタン画像変更、[autoconfig]でオートモードのページ送り速度を変更しています。

未読スキップ

さて、これまでボタンがずらっと並んでる画面が続いていましたが、未読スキップの有効・無効を設定するこちらでは、ボタンは2つあるだけです。

それではスクリプトを見てみましょう。
;------------------------------------------------------------------------------------------------------
;▼未読スキップ
;------------------------------------------------------------------------------------------------------
; 未読スキップ-OFF
[button name="unread_off" fix="true" target="*skip_off" graphic="config/c_btn.png" width=125 height=35  x=300 y=420]
; 未読スキップ-ON
[button name="unread_on" fix="true" target="*skip_on" graphic="config/c_btn.png" width=125 height=35 x=435 y=420]
これまで、expパラメータに設定値を代入し、同じtargetパラメータを指定することで処理の共通化を行っていました。
ですが、未読スキップではtargetパラメータの値はそれぞれ別になっています。
それでは、それぞれのジャンプ先を見てみましょう。 
*skip_off
[iscript]
 $(".unread_off").attr("src","data/image/config/c_uts_off.png");
 $(".unread_on").attr("src","data/image/config/c_btn.png");
 tf.text_skip="OFF";
[endscript]
[config_record_label skip=false]
[return]

*skip_on
[iscript]
 $(".unread_off").attr("src","data/image/config/c_btn.png");
 $(".unread_on").attr("src","data/image/config/c_uts_on.png");
 tf.text_skip="ON";
[endscript]
[config_record_label skip=true]
[return]
上が未読スキップオフ、下がオンです。
[iscript]～[endscirpt]の中ではこれまでどおりボタン画像の設定を行っています。

それに加えて、tf.text_skipという変数に、スキップオフにする処理なら「OFF」を、オンにする処理なら「ON」を代入しています。
これについてはまた後で説明します。

その後、それぞれ[config_record_label]タグでスキップの設定を変えています。

ここまでのまとめ

これまで、BGMとか文字速度とかの設定をする部分を見てきました。

ボタン画像は、「現在設定されている値」と「それ以外の値」では画像を変えて表示しています。
そして、ボタン画像を変更する処理は、設定値の変更と同じタイミングで行っていました。

しかし、最初にコンフィグ画面に入ったときも、ボタン画像は「現在の設定値」と「それ以外」で別の画像が表示されていたと思います。

コンフィグ画面に入って来たときの処理はこうです。

  1. コンフィグ画面の背景とか表示
  2. 現在の設定値を一時変数に代入
  3. 各ボタン画像を表示
  4. 現在の設定値のボタン画像を変更
1は他の画面を作る場合でも同じなので割愛
2は、こんな感じで書かれています。
[iscript]

 tf.current_bgm_vol=parseInt(TG.config.defaultBgmVolume);
 tf.current_se_vol=parseInt(TG.config.defaultSeVolume);
 
 tf.current_ch_speed=parseInt(TG.config.chSpeed);
 tf.current_auto_speed=parseInt(TG.config.autoSpeed);
 
 tf.text_skip ="ON";
 
 if(TG.config.unReadTextSkip != "true"){
  tf.text_skip ="OFF";
 } 

[endscript]
3についてはここまでで説明してきました。
4については、こんな感じで書かれています。
;------------------------------------------------------------------------------------------------------
;▼コンフィグ起動時の画面更新
;------------------------------------------------------------------------------------------------------
; BGM音量・SE音量・テキスト速度・オート速度・未読スキップの順
; $(セレクタ).attr("src","画像ファイルの場所");

;※画像差し替え版を使用するときは c_set.gif を c_set.png に書き換えてね

[iscript]
 $(".bgmvol_"+tf.current_bgm_vol).attr("src","data/image/config/c_set.png");

 $(".sevol_"+tf.current_se_vol).attr("src","data/image/config/c_set.png");

 $(".ch_"+tf.current_ch_speed).attr("src","data/image/config/c_set.png");

 $(".auto_"+tf.current_auto_speed).attr("src","data/image/config/c_set.png");

 if(tf.text_skip == 'OFF'){
  $(".unread_off").attr("src","data/image/config/c_uts_off.png");
  }else{
   $(".unread_on").attr("src","data/image/config/c_uts_on.png");
   }
[endscript]

[s]
2で書かれている「TG.config～」みたいな変数は、「現在のBGM音量」とか「現在のテキスト速度」とかが入っている変数です。
TG.config～の値を、一時変数に一旦代入しています。

その後、4でその一時変数を使ってボタン画像を変更していることに気づくと思います。

なんで一時変数に一旦代入しているのかというと、いちいちTG.config～とか書くのがめんどくさいからというのもあります。

が、いちばん大事なのは、うっかり現在の設定値を変えてしまわないようにするためです。

「現在の設定値」を変えるのは、実際にプレイヤーがボタンを押したときでなければいけません。
スクリプトを書いていく都合上、プレイヤーがボタンを押したとき以外にも「現在の設定値」の値を使う必要はあります。上のボタン画像の更新みたいにな
そんなときに、間違えて「TG.config～」の変数に入った値を変えてしまわないように、一時変数を使っているわけです。

ゲームに戻る

最後に、コンフィグ画面を終了しメインのゲームに戻る処理を見ていきます。
;--------------------------------------------------------------------------------
; タイトルに戻る
;--------------------------------------------------------------------------------
*backtitle

[iscript]
tf.flag_back=$(".message1_fore").css("display");
[endscript]

[if exp="tf.flag_back=='none'"]

[cm]
[layopt layer=message1 visible=false]
[freeimage layer=1]
[clearfix]
;コンフィグの呼び出しに sleepgame を使っているので、必ず awakegame で戻してやってください
[awakegame]

[endif]
ここでやっていることは、

  • コンフィグ画面の背景などを消す
  • message1レイヤーを非表示にする
  • カレントレイヤーをmesasge0に戻す
  • ボタン画像を消す
  • ゲームに戻る
です。

重要なのは、最後の「ゲームに戻る」部分です。
[awakegame]タグがそれにあたります。

このあと説明するんですが、コンフィグ画面には「sleepgame」という機能でジャンプしてきます。
sleepgameでジャンプしてきた画面からゲームに戻るときには、必ず[awakegame]タグを使わなければいけません。

sleepgameについては次の項で説明します。

コンフィグ画面の呼び出し

ここまで、コンフィグ画面の中を見てきました。
それでは、こうして作ったコンフィグ画面は、タグで呼び出さないと使うことができません。
書き方はこんな感じです

[button x=100 y=530 graphic="title/button_config.png" role="sleepgame" storage="config.ks" ]
[button]タグのroleパラメータに、「sleepgame」を指定しています。

roleパラメータは、ボタンにいろいろな役割をもたせるもので、セーブ画面へジャンプするボタンなら、「save」、ロード画面なら「load」とか書くのですが、コンフィグ画面にジャンプするためには「sleepgame」と書きます。
「config」ではないので注意してください。
「sleepgame」とは、「ゲームを一時停止する」というパラメータです。

roleパラメータにsleepgameを指定した場合、必ずstorageパラメータかtargetパラメータの指定が必要です。
sleepgameでメインのゲームを一時停止し、コンフィグ画面に寄り道するイメージです。

寄り道から元の道に戻るには、必ず[awakegame]タグを使います。これは前の項で説明したとおりですね。

おわり

ひとまずコンフィグ画面の基本的な機能を説明してきました。
ここまでの機能や処理の流れを理解していれば、他の設定項目の追加なんかもできるはずです。

ここまでの応用だけでは難しいものなんかは、また別の機会に説明したいと思います。

タグ一覧最初から表示

このブログを検索

連絡先

名前

メール *

メッセージ *

QooQ