ようこそぷっこ村へ、ししゃもだよ。
(・∀・)ノ
前回いじくり回したアクションバーはこちら。
今回は JSON UI 第2回、タイトルの出る位置や大きさを条件によって変えてみたいと思います。前回はアクションバーの位置を条件によって変えましたが、タイトルはそれとはちょっと違う方法です。
以下のように分けてみたいと思います。↓
左は普通のタイトルの場合と同じで時間経過で消えていきます。右は消すまでずっと残る仕様にしてみます。
動画の様に分けることができます。用途の幅が広いのが最高やね。
タイトルの表示位置を条件によって変える、全体
まずは全体を。
//もとのタイトルを編集、背景画像をつける
"hud_title_text": {
"type": "stack_panel",
"orientation": "vertical",
"offset": [ 0, -19 ],
"layer": 1,
"alpha": "@hud.anim_title_text_alpha_in",
"propagate_alpha": true,
"controls": [
{
"title_frame": {
"$update_string": "update",
"type": "panel",
"size": [ "100%", "100%cm" ],
"controls": [
{
"title_background": {
"type": "image",
"texture": "textures/ui/halloween_quest_libbon",//テクスチャを指定
"anims": [
"@hud.anim_title_background_size_in"
],
"offset": [ 0, 25 ],
"controls": [
{
"title": {
"type": "label",
"anchor_from": "center",
"anchor_to": "center",
"color": "$title_command_text_color",
"text": "#text",
"layer": 31,
"localize": false,
"font_size": "extra_large",
"variables": [
{
"requires": "(not $title_shadow)",
"$show_shadow": false
},
{
"requires": "$title_shadow",
"$show_shadow": true
}
],
"shadow": "$show_shadow",
"text_alignment": "center",
"offset": [ 0, 0 ],
"bindings": [
{
"binding_name": "#hud_title_text_string"
},
{
"binding_type": "view",
"source_property_name": "(((#hud_title_text_string - $update_string) = #hud_title_text_string))",
"target_property_name": "#visible"
},
{
"binding_name": "#hud_title_text_string",
"binding_name_override": "#text",
"binding_type": "global"
}
]
}
}
],
"bindings": [
{
"binding_name": "#hud_title_text_string"
},
{
"binding_type": "view",
"source_property_name": "((#hud_title_text_string - $update_string) = #hud_title_text_string))",
"target_property_name": "#visible"
}
]
}
}
]
}
},
//以下サブタイトルに続きますが割愛
"hud_title_right_preserved_text": {
"type": "panel",
"$update_string": "update",
"layer": 1,
"propagate_alpha": true,
"anims": [
"@hud.anim_title_background_right_preserved_in"
],
"controls": [
{
"title_background": {
"offset": [ 0, "20%" ],
"type": "image",
"anchor_from": "top_right",
"anchor_to": "top_right",
"size": [ "100%cm + 20 px", "100%cm + 8px" ],
"texture": "textures/ui/right_reserved",
"controls": [
{
"title": {
"type": "label",
"anchor_from": "top_right",
"anchor_to": "top_right",
"color": [0.0, 0.0, 0.0],
"text": "#text_preserved",
"$text": "#text_variable",
"layer": 31,
"localize": false,
"font_size": "normal",
"shadow": false,
"text_alignment": "center",
"offset": [ -10, 4 ],
"bindings": [
{
"binding_name": "#hud_title_text_string",
"binding_name_override": "#text_variable",
"binding_type": "global"
},
{
"binding_name": "$text",
"source_property_name": "($text - $update_string)",
"target_property_name": "#text_preserved",
"binding_type": "view"
}
]
}
}
]
}
}
],
"bindings": [
{
"binding_name": "#hud_title_text_string"
},
{
"binding_type": "view",
"source_property_name": "(not ((#hud_title_text_string - $update_string) = #hud_title_text_string))",
"target_property_name": "#visible"
}
]
},
//右上が右からにゅるっと出てくるアニメーション
"anim_title_background_right_preserved_in": {
"anim_type": "offset",
"easing": "out_cubic",
"duration": "$title_fade_in_time",
"from": [ 100, 0 ],
"to": [ 0, 0 ]
},
//タイトルの背景が真ん中から端に向かって伸びるアニメーション
"anim_title_background_size_in": {
"anim_type": "size",
"easing": "out_back",
"duration": 1.0,
"from": [ -10, -10 ],
"to": [ "100%", 70 ],
"resettable": false
},長いけどしかたないね。適宜変えて使ってください。
真ん中に出るパターンを考える
真ん中に出るパターンは、基本の型を書き換えて実現します。文字位置の微調整と、背景画像の設定をすればいいだけです。
大事なのは↑のコード内のテクスチャの指定と、binding の部分です。バインディングは調べるとどんなものかあっさり出てきます。
"bindings": [
{
"binding_name": "#hud_title_text_string"
},
{
"binding_type": "view",
"source_property_name": "(not ((#hud_title_text_string - $update_string) = #hud_title_text_string))",
"target_property_name": "#visible"
}
]で、大事なのはこの部分で、条件を設定して非表示にしている部分です。アクションバーと違い、visibleは使えないようです。試したけどダメでした。
ざっくりとした仕組みですが、タイトルに表示したい文字列、ここでは $update_string 変数に指定してある、update という文字列が含まれていた場合、非表示にします。例として
表示したいよ – update = 表示したいよ
↑の様なパターンの場合、そもそもこの式では update が引けない(含まれていない)ので式が成り立ちます。not が付いてるので、成り立った場合は反転してfalseになって非表示にします。また、
updated – update =d
↑の様なパターンの場合、式が成り立ってないので、反転してtrueになって表示されます。
右上に出るパターンを考える
基本は同じですが、新しく表示領域を作っています。表示条件は真ん中のパターンの逆で、updateが含まれていた場合に表示されます。見比べながら確認してみてください。
ここで大事なのは、update の文字を消して表示させないと、まぎれこんで表示されてしまうってことですね。タイトルの文字列をつかさどってる部分を見ていきます。
"title": {
"type": "label",
"anchor_from": "top_right",
"anchor_to": "top_right",
"color": [0.0, 0.0, 0.0],
"text": "#text_preserved", //表示させる文字列
"$text": "#text_variable", //本来の文字列が入る部分
"layer": 31,
"localize": false,
"font_size": "normal",
"shadow": false,
"text_alignment": "center",
"offset": [ -10, 4 ],
"bindings": [
////ここから
{
"binding_name": "#hud_title_text_string",
"binding_name_override": "#text_variable",
"binding_type": "global"
},
////ここまででタイトルの文字列を $text に紐付けする感じ
{
"binding_name": "$text",
"source_property_name": "($text - $update_string)",
"target_property_name": "#text_preserved",
"binding_type": "view"
}
////紐づけた $text から $update_string を引いた結果を text に紐づけ
]
}↑のようにすることで、文字列の編集も可能です。上手く使うことで割と好き放題できます。あくまで割とですが。
まとめ
アニメーションを工夫すれば一定時間で消せるし、全く見えないようにする条件を加えることで、任意のタイミングで消すことも簡単にできるようになります。JSON UI侮りがたし！
まぁ、正直この記事、1か月近く寝かせてまして、今見ると汚いのなんの……。っていう言い訳しとく。もう笑っちゃうね。すでにもっとマシな方法を使っているのですが……、そんなん言いよったらマジで何にも書けないし……。どうせこんな記事誰も見てないしええやろ。テヘペロリ。
結局、rootpanel いじって条件変える方法が移植するのに便利で汎用性高いし、割とスッキリするんだよなぁ、と思う今日この頃。それが正しいのかは不明なんだけどな!!
てな感じで、もっとブラッシュアップ的な何かをした状態の記事も書きたいです。
それではこの辺で、お帰りの際はお気をつけて～(・∀・)ﾉｼ
コメント
すいません！こちらもコピーできません、、、
変えておきましたので試してみてください～。
それにしても、ここまで辿り着くとは面白いですね～。どうせこんなん誰も見んやろと思ってたので驚きました。
ローディング画面は理解できてるってことですよね。なかなかの変態発見ｗ
マイナージョブのアドオン職人同士、お互い頑張りましょう～(・∀・)b
他にもUIのブログ出して欲しいです
(*･ω･)*_ _)ﾍﾟｺﾘ
ボタン追加とかも面白いかもしれないので、上手く体系化できそうなら書いてみますね～
(*･ω･)*_ _)ﾍﾟｺﾘ
はい！
頑張りましょう！
あなたのブログ好きですよ(❁´ω`❁)
わかりやすいので！