セーブロード画面(など)でテキストを絶対位置指定して表示したい

 こちらお問い合わせ頂いた質問ですが、回答が他の方にも有用かと思い、質問者の館山緑さまに許可を頂いて転載致します。


(前略)
テキストウィンドウについての質問ではなく、セーブデータの「場所」や「ゲーム内時間」
「セーブした時間」などのテキスト表示部分ができなかったという内容でした。


 つまり「160201館山氏.jpg」が最終目標なわけですね。



 十六夜さんのご考察の通り、基本的にはテキストを絶対位置指定して表示する考え方では無く、
【余白、タブ、行間などで表示位置を調整&変数の文字数を調整して整える】方向で正解です。
吉里吉里などと同様ですね。

 ただ、AIRNovelはもう一つの表示手段を持っています。
 設定画面がそうなのですが、「HTMLによる表示」が行えます。
 これなら【テキストを絶対位置指定して表示】が可能です。
【2012-01-30】電子演劇部 AIRNovel更新:HTMLレイヤー追加
http://famibee.blog38.fc2.com/blog-entry-235.html

 ※ただし「HTMLレイヤはFlash環境では使用不可」なのでブラウザ表示が出来なくなります。
(セキュリティ的に、ブラウザ内でブラウザを動かすのが禁止されているようです)
 特にブラウザ上で、或いはセーブロード画面を表示するつもりが無ければ、こちらが手軽に思います。
 それぞれ解説していきます。


//---------------------------
★第一の手法、Webページ的表示(ブラウザ・Flash環境では使用不可)
//---------------------------

 概要を云いますと、
a・「設定画面のように」【起動後一度だけ】HTMLレイヤを[add_lay]し(_config.an:11行)
b・「設定画面のように」【起動後一度だけ】htmlファイルをロードし(_config.an:13行)
c・「(略)」HTMLレイヤを表示し(_config.an:79,82行)
d・「(略)」htmlに表示する値を渡し(_config.an:120〜132行)
e・「(略)」html内のJavaScript、関数 refresh() を呼んで渡した値で表示更新させ(_config.an:133行)
f・「(略)」セーブロード画面が終わるときに非表示(_config.an:207,243行)

 と、とにかく設定画面が参考になると思います。(画面中央の%とかmsecとかです)
 値セットの具体的方法は、次に解説する【第二の手段】での [for_call] ループが参考になるかと思います。ここで【d・「(略)」htmlに表示する値を渡し】て、全て渡し終わったら【e・…refresh()…表示更新】です。

 仕組みさえ作ってしまえば、開発はhtmlファイルの手直しが中心となるでしょう。
Chromeをお持ちなら「新規シークレットウインドウ」で開き(試しに config/_config.htmを)、htmlファイルをテキストエディタで編集して見た目を微調整する感じです。
 (シークレットウインドウを使うのは、キャッシュが残ると「あれ、編集したのに変わってない」というHTML製作あるあるを防ぐためです)

 HTML・CSS・JavaScriptの知識は少々必要ですが、その分応用が利きます。
簡単なJavaScriptライブラリも取り入れて利用出来ます。(設定画面ではjqueryとjquery-uiを使用)
 ※最新のブラウザエンジンでは無いので、あまり高度な事は出来ません。

 おすすめはリアルタイムで編集結果を確認できるHTMLエディターです。一例は……
Brackets - 窓の杜ライブラリ http://www.forest.impress.co.jp/library/software/brackets/

 一番解りやすいので、この手段をおすすめします。


//---------------------------
★第二の手段、吉里吉里的手法
//---------------------------

 ボタンを表示するのにテキストレイヤ(名前は_syslay.mes、アルバムとか他の画面で流用)を
使ってますので、これに表示することにしましょうか。ここに文字を表示することが可能です。
 例えば設定画面(_config.an:85行)でバージョン【現在 ver x.xx】を表示しています。


 有用な例なので、引用します。(本題に無関係箇所を省略)

[ch layer="_syslay.mes" wait=0 record=false text="&'現在 ver '+ tmp:const(略)versionNumber@str" cond=(略)]
;#FONT 現在ver0.123456789

 属性解説すると、
wait=0   ── 一瞬で表示(本文みたいに一文字ずつ出さない)
record=false ── 履歴に残さない(本文じゃないので)
text    ── 「現在 ver 」という固定文字に、バージョン変数を文字としてそのまま表示(@str)

 ここでtext属性に @str が付いてるのは割と重要なポイントで、これがないと……
例えば変数の中身が「1.00」という値の時、数字表示し「1」と丸められてしまうのです。
日時とかで「1-31」なんて表記をしますが、数字表示すると演算されてしまい、「-30」にされます。

 その次の行に「;#FONT〜」がありますが、これは「本文に無い文字でも、フォントを組み込みたい」ので、「この後ろの文字もフォント、入れといてね」という指定です。「【ant font】フォントswfビルド」ボタンを押すと、この後ろの文字についてもフォントを組み込みます。
 ※自由に名前を入れられる場合など、可能性がほぼ無限にある場合は【ant font_all】で全文字のフォント情報をswfに組み込んだ方がいいかもしれません。(「;#FONT〜」も無意味になり、不要です)
 それでも元のotf/ttfファイルに存在しない字形は入らず、OSのシステムフォントで表示されてしまいますが。


 さて、実際の組み込みですが……
1)129行目で「文字色、余白、タブ……」を指定。
(例:設定画面では→) [lay layer="_syslay.mes" visible=false b_alpha=0 r_size=6 max_col=20 bura_col=2 max_row=4 layout='lineHeight="18" paddingTop="6" paddingLeft="827" fontSize="12" color="0x000000" fontFamily="ipam" fontLookup="embeddedCFF”']

 ただしこれ、page=foreです。
 セーブロードの129行目は [lay layer="_syslay.mes" page=back visible=true float=true]
 ですので、page=backです。152〜154行目で[trans]〜[wt]してますので、
[trans layer="_syslay.mes" time=200 cond="同画面遷移か"]
[trans layer="_syslay.mes" time=0 cond="! 同画面遷移か"]
[wt]

2)その前に、145〜146行目のサムネイル表示&透明ボタン起き
[call label=*btn_save cond="しおりモード == 'Save'"]
[call label=*btn_load cond="しおりモード == 'Load'"]
 内で、page=back に対して文字表示するわけです。
 具体的には、
 66行目 [macro name="_sl.put_save_button”] の中を変更でセーブ時の処理、
 74行目 [macro name="_sl.put_load_button"] の中を変更でロード時の処理、
 あと共通化できそうな処理なら 44行目 [macro name="_sl.put_common”] の中に書くのを推奨、という感じです。以下はテンプレになりそう。
[ch layer="_syslay.mes" page=back wait=0 record=false text="&'現在 ver '+ (略)@str"]

3)で、出来れば【絶対位置指定して表示】すると話がシンプルなのですが出来ないので、
 [_sl.put_common][_sl.put_save_button][_sl.put_load_button]の中では文字表示(page=back)のみ行い、位置調整はこれらを呼ぶループの途中で行なう感じかな、と。

 具体的には(loadもsaveも同じなのでloadの話をすると)、
 *btn_load_row 内の[for_call]を呼んだ後に、改行をすると良いかなと。
[ch layer="_syslay.mes" page=back wait=0 record=false text=“[r]”]
(「[r]」という文字列を表示しようとすると、改行になります。
[r]タグを使わないのは、属性 record=false がないため)

 また *btn_load_cell 内の[for_call]を呼んだ後に、一つ右隣のサムネイルへ移動するため必要分だけ空白文字表示を行い、次回の表示位置へ移動し準備する、イメージかなと。

//---------------------------
スポンサーサイト
プロフィール

ふぁみべぇ

Author:ふぁみべぇ
 →@famibee
 →メアド(四角を@に)

カテゴリ
リンク
検索フォーム
最新記事
月別アーカイブ