パラメーター表示
パラメーター表示 作成例
- バーサイズの変更と計算例1
- HTMLを使ったステータス表示例
- 画像素材を使ったパラメーターバー作成例
- パラメーターバー増減の例
- 複数のパラメーターバーでのステータス表示例
バーサイズの変更と計算例
下記の方法以外に単純に棒画像のwidth(あるいはheight)の数値をエンティティで変更する
rpgツクールでも使われている手法
f.w(バーサイズ変数) = f.hp* 幅マックス値/ f.hpマックス値
;幅マックスは背景に使うバーのこと
;バーサイズ変数はimageにて width=&f.w といった形でエンティティを使用など工夫
画像素材を使ったパラメーターバー作成例
※このスクリプトはレイヤーを8枚使ってます。systemフォルダのcofig.tjsのレイヤー枚数を設定するかレイヤー名を調整してください!
まず画像素材を用意します。このwikiでは下記画像素材を使った方法を紹介します。
画像素材一覧 | |||||
---|---|---|---|---|---|
bar_waku.png |
bar_empty.png |
bar_green.png |
bar_red.png |
bar_blue.png |
bar_pink.png |
※ 利用規約クリエイティブコモンズ CC0 (noco作)
※ クリックしやすいように拡大表示していますが、元は1x10pixelの画像です
ティラノスクリプトのfgimageフォルダ下に「system_graphic」フォルダを作成し、その中に各画像素材を画像素材下の名前を付けて保存します↓
bar_waku.pngとbar_empty.pngを重ねて表示(※)して枠を作り、その上にbar_green.pngを数値の割合に応じて表示(※)することでパラメーターバーを表現します。
※wikiの例では枠っぽくなるよう各画像を1pxずつずらして配置しています
実際の使用例はこちら↓
スクリプトサンプル
;◆↓変数の値を設定(変更する可能性がある変数を一か所にまとめて書くと、後の調整が楽です)
[iscript]
f.shujinkou_name = "主人公";
f.para_shujinkou_HP_max = 100;
f.para_shujinkou_HP_now = 100;
f.para_bar_width = 100;
[endscript]
;◆↓メッセージレイヤが被らないように、位置を下部に変更
[position left=1 width=640 height=150 top=330 page=fore]
;◆↓パラメーターバーの枠などを描画するサブルーチンを呼び出します
[call target=*draw_para_bar_base]
;◆↓HPバーなど可変部分を描画するサブルーチンを呼び出します
[call target=*draw_para_bar]
;◆↓サブルーチンを呼ばないのに読んでしまうのを防止用。運用時はjumpタグ等で次の処理に飛んでください
[s]
;◆◆◆以下サブルーチン◆◆◆
;◆◆↓パラメーターバーの枠や主人公名など、動かさない部分をレイヤー8に描画します
*draw_para_bar_base
;◆↓パラメーターバー枠と枠内側の黒っぽい部分の横幅を設定
[eval exp ="f.para_bar_waku_width = f.para_bar_width + 4"]
[eval exp ="f.para_bar_empty_width = f.para_bar_width + 2"]
;◆↓パラメーターバー描画に使うレイヤーをアクティブに
[layopt layer=8 visible=true]
[layopt layer=9 visible=true]
;◆↓図形部分の描画
[image layer=8 x=150 y=300 width=&f.para_bar_waku_width height=10 storage="system_graphic/bar_waku.png"]
[image layer=8 x=151 y=300 width=&f.para_bar_empty_width height=10 storage="system_graphic/bar_empty.png"]
;◆↓テキスト部分の描画
[ptext text="HP:" layer=8 size=15 x=150 y=285 color=white bold=bold]
[ptext text=&f.shujinkou_name layer=8 size=18 x=150 y=310 color=white bold=bold]
[return]
;◆◆↓パラメーターのHPバー、HP数値表示など可変部分をレイヤー9に描画します
*draw_para_bar
;◆↓可変部分の描画を一旦消します
[freeimage layer = 9]
;◆↓HP値によりHPバーの長さを計算
[eval exp="f.para_bar_HP_now_width = parseInt(f.para_bar_width * f.para_shujinkou_HP_now / f.para_shujinkou_HP_max)"]
;◆↓HP最大値の3割以下にHP値が減ると赤いバーで描画、それよりHP値が高ければ緑色のバーで描画
[if exp="f.para_shujinkou_HP_now <= parseInt(f.para_shujinkou_HP_max * 0.3)"]
[image layer=9 x=152 y=300 width=&f.para_bar_HP_now_width height=10 storage="system_graphic/bar_red.png"]
[else]
[image layer=9 x=152 y=300 width=&f.para_bar_HP_now_width height=10 storage="system_graphic/bar_green.png"]
[endif]
;↓テキスト部分の描画
[eval exp="f.para_HP_draw = f.para_shujinkou_HP_now + '/' + f.para_shujinkou_HP_max"]
[ptext text=&f.para_HP_draw layer=9 size=15 x=185 y=285 color=white bold=bold]
[return]
■ 実行結果画面(動作確認:ティラノスクリプトVer3.30)
パラメーターバー増減の例
スクリプトサンプル
;◆↓変数の値を設定(変更する可能性がある変数を一か所にまとめて書くと、後の調整が楽です)
[iscript]
f.shujinkou_name = "主人公";
f.para_shujinkou_HP_max = 100;
f.para_shujinkou_HP_now = 100;
f.damage_trap_min = 70;
f.damage_trap_max = 90;
f.kouka_HP_potion = 50;
f.para_bar_width = 100;
[endscript]
;◆↓メッセージレイヤ位置を、下部に変更
[position left=1 width=640 height=150 top=330 page=fore]
;◆↓パラメーターバーの枠などを描画するサブルーチンを呼び出します
[call target=*draw_para_bar_base]
;◆↓HPバーなど可変部分を描画するサブルーチンを呼び出します
[call target=*draw_para_bar]
[font size = "20"]
[emb exp="f.shujinkou_name"]は洞窟の中にいる。真っ暗で何も見えない。[p]
;◆↓罠のダメージ処理サブルーチンを呼び出します
[call target=*trap]
;◆↓HP値が変わる処理を行う毎に、HPバーなど可変部分を描画するサブルーチンを呼び出します
[call target=*draw_para_bar]
[p]
;◆↓HPポーションの効果処理サブルーチンを呼び出します
[call target=*HP_potion]
[call target=*draw_para_bar]
;◆↓サブルーチンを呼ばないのに読んでしまうのを防止用。運用時はjumpタグ等で次の処理に飛んでください
[s]
;◆◆◆以下サブルーチン◆◆◆
;◆◆↓罠のダメージ処理。Math.random()は呼び出し毎に計算するようにサブルーチン内に書きます
*trap
[iscript]
//◆↓設定した最少~最大値の間でランダム
f.damage = Math.floor(Math.random() * (f.damage_trap_max - f.damage_trap_min) + f.damage_trap_min);
f.para_shujinkou_HP_now = f.para_shujinkou_HP_now - f.damage;
[endscript]
おっと罠だ! [emb exp="f.shujinkou_name"]に[emb exp="f.damage"]のダメージ。
[return]
;◆◆↓HPポーションの効果処理
*HP_potion
[iscript]
f.kaifuku = f.kouka_HP_potion;
f.para_shujinkou_HP_now = f.para_shujinkou_HP_now + f.kaifuku;
[endscript]
HP回復ポーションを飲んだ。[r]
[emb exp="f.shujinkou_name"]のHPが[emb exp="f.kaifuku"]回復した。
[return]
;◆◆↓パラメーターバーの枠や主人公名など、動かさない部分をレイヤー8に描画します
*draw_para_bar_base
[eval exp ="f.para_bar_waku_width = f.para_bar_width + 4"]
[eval exp ="f.para_bar_empty_width = f.para_bar_width + 2"]
[layopt layer=8 visible=true]
[layopt layer=9 visible=true]
[image layer=8 x=150 y=300 width=&f.para_bar_waku_width height=10 storage="system_graphic/bar_waku.png"]
[image layer=8 x=151 y=300 width=&f.para_bar_empty_width height=10 storage="system_graphic/bar_empty.png"]
[ptext text="HP:" layer=8 size=15 x=150 y=285 color=white bold=bold]
[ptext text=&f.shujinkou_name layer=8 size=18 x=150 y=310 color=white bold=bold]
[return]
;◆◆↓パラメーターのHPバー、HP数値表示など可変部分をレイヤー9に描画します
*draw_para_bar
[freeimage layer = 9]
[eval exp="f.para_bar_HP_now_width = parseInt(f.para_bar_width * f.para_shujinkou_HP_now / f.para_shujinkou_HP_max)"]
;↓HP最大値の3割以下にHP値が減ると赤いバーで描画、それよりHP値が高ければ緑色のバーで描画
[if exp="f.para_shujinkou_HP_now <= parseInt(f.para_shujinkou_HP_max * 0.3)"]
[image layer=9 x=152 y=300 width=&f.para_bar_HP_now_width height=10 storage="system_graphic/bar_red.png"]
[else]
[image layer=9 x=152 y=300 width=&f.para_bar_HP_now_width height=10 storage="system_graphic/bar_green.png"]
[endif]
[eval exp="f.para_HP_draw = f.para_shujinkou_HP_now + '/' + f.para_shujinkou_HP_max"]
[ptext text=&f.para_HP_draw layer=9 size=15 x=185 y=285 color=white bold=bold]
[return]
■ 実行結果画面(動作確認:ティラノスクリプトVer3.30)
複数のパラメーターバーでのステータス表示例
スクリプトサンプル
;◆↓変数や配列の値を設定(変更する可能性がある変数等を一か所にまとめて書くと、後の調整が楽です)
[iscript]
f.character = []; //f.characterは配列である旨を宣言。似たような種類の変数は配列にまとめると扱いが楽です
f.character[0] = ["名前","Lv","HP","MP","STR","DEX","VIT","INT","AGI","LUK"]; //各名称の設定
f.character[1] = ["Max値設定",100,100,100,100,100,100,100,100,100]; //各Max値設定
f.character[2] = ["主人公",10,70,80,20,10,15,11,8,0]; //キャラクターパラメーター(必要ならf.character[3],f.character[4]とキャラクターを増やします)
f.para_bar_width = 100; //パラメーターバーの幅設定
[endscript]
;◆↓メッセージレイヤが被らないように、位置を下部に変更
[position left=1 width=640 height=150 top=330 page=fore]
;◆↓パラメーターバーの枠などを描画するサブルーチンを呼び出します
[call target=*draw_para_bar_base]
;◆↓HPバーなど可変部分を描画するサブルーチンを呼び出します
[call target=*draw_para_bar]
;◆↓サブルーチンを呼ばないのに読んでしまうのを防止用。運用時はjumpタグ等で次の処理に飛んでください
[s]
;◆◆◆以下サブルーチン◆◆◆
;◆◆↓パラメーターバーの枠や主人公名など、動かさない部分をレイヤー8に描画します
*draw_para_bar_base
;◆↓パラメーターバー枠と枠内側の黒っぽい部分の横幅を設定
[eval exp ="f.para_bar_waku_width = f.para_bar_width + 4"]
[eval exp ="f.para_bar_empty_width = f.para_bar_width + 2"]
;◆↓パラメーターバー描画に使うレイヤーをアクティブに
[layopt layer=8 visible=true]
[layopt layer=9 visible=true]
;◆↓主人公名を描画
[ptext text=&f.character[2][0] layer=8 size=15 x=150 y=10 color=white bold=bold]
;◆↓"Lv"を描画
[ptext text=&f.character[0][1] layer=8 size=15 x=210 y=10 color=white bold=bold]
[iscript]
for(var i=0; i<=7; i++){
//◆↓ステータス名を描画
TG.kag.ftag.startTag("ptext",{text:f.character[0][i+2],layer:8,size:15,x:150,y:35+(i*30),color:"white",bold:"bold"});
//◆↓Max値を描画
TG.kag.ftag.startTag("ptext",{text:"/"+f.character[1][i+2],layer:8,size:15,x:220,y:35+(i*30),color:"white",bold:"bold"});
//◆↓パラメーターバーの枠と枠内側の黒っぽい部分の描画
TG.kag.ftag.startTag("image",{storage:"system_graphic/bar_waku.png",layer:8,x:150,y:50+(i*30),width:f.para_bar_width+4,height:10});
TG.kag.ftag.startTag("image",{storage:"system_graphic/bar_empty.png",layer:8,x:151,y:50+(i*30),width:f.para_bar_width+2,height:10});
}
[endscript]
[return]
;◆◆↓パラメーターのHPバー、HP数値表示など可変部分をレイヤー9に描画します
*draw_para_bar
;◆↓可変部分の描画を一旦消します
[freeimage layer = 9]
;◆↓Lv値を描画
[ptext text=&f.character[2][1] layer=9 size=15 x=230 y=10 color=white bold=bold]
[iscript]
for(var i=0; i<=7; i++){ //◆配列を順番に読んで可変部分を描画
if(i==0 && f.character[2][i+2]>0 && f.character[2][i+2]<=f.character[1][i+2]*0.3){ //◆HPがMax値の3割以下なら赤いバーを描画
TG.kag.ftag.startTag("image",{storage:"system_graphic/bar_red.png",layer:9,x:152,y:50+(i*30),width:f.para_bar_width*f.character[2][i+2]/f.character[1][i+2],height:10});
}else if(i==0 && f.character[2][i+2]>f.character[1][i+2]*0.3){ //◆HPがMax値の3割超過なら緑色のバーを描画
TG.kag.ftag.startTag("image",{storage:"system_graphic/bar_green.png",layer:9,x:152,y:50+(i*30),width:f.para_bar_width*f.character[2][i+2]/f.character[1][i+2],height:10});
}else if(i==1 && f.character[2][i+2]>0 && f.character[2][i+2]<=f.character[1][i+2]*0.3){ //◆MPがMax値の3割以下なら赤いバーを描画
TG.kag.ftag.startTag("image",{storage:"system_graphic/bar_red.png",layer:9,x:152,y:50+(i*30),width:f.para_bar_width*f.character[2][i+2]/f.character[1][i+2],height:10});
}else if(i==1 && f.character[2][i+2]>f.character[1][i+2]*0.3){ //◆MPがMax値の3割超過ならピンク色のバーを描画
TG.kag.ftag.startTag("image",{storage:"system_graphic/bar_pink.png",layer:9,x:152,y:50+(i*30),width:f.para_bar_width*f.character[2][i+2]/f.character[1][i+2],height:10});
}else if(f.character[2][i+2]>0){ //◆ステータス値が0超過なら青色のバーを描画
TG.kag.ftag.startTag("image",{storage:"system_graphic/bar_blue.png",layer:9,x:152,y:50+(i*30),width:f.para_bar_width*f.character[2][i+2]/f.character[1][i+2],height:10});
}
//◆↓各ステータス値の描画(桁数によってx座標を変えています)
if(f.character[2][i+2] >= 100){
TG.kag.ftag.startTag("ptext",{text:f.character[2][i+2],layer:9,size:15,x:190,y:35+(i*30),color:"white",bold:"bold"});
}else if(f.character[2][i+2] < 100 && f.character[2][i+2] >= 10){
TG.kag.ftag.startTag("ptext",{text:f.character[2][i+2],layer:9,size:15,x:200,y:35+(i*30),color:"white",bold:"bold"});
}else if(f.character[2][i+2] < 10){
TG.kag.ftag.startTag("ptext",{text:f.character[2][i+2],layer:9,size:15,x:210,y:35+(i*30),color:"white",bold:"bold"});
}
}
[endscript]
[return]
■ 実行結果画面(動作確認:ティラノスクリプトVer3.30)
この記事についての引用元
ゲーム画像は記事作者制作ゲームのものです。
ティラノスクリプトは© Copyright ShikemokuMK All Rights Reserved.のものです。
- 最終更新:2019-10-15 10:25:13