◎画像文字講座◎　2007.9.19更新


自分のHPを改めて見直しまして、LiveMakerのコーナーには現在では意味のなさそうな記事があるのに気づきました。
「汎用プロジェクト１・数値表示」がそれで、最近では「画像文字」機能が追加されているそうで、これを使うとややこしい計算や表示処理をせずに変数値をオリジナル画像に変えることができるようになっていました。
また、｢時間制限処理」も遠い昔の過去の遺物となっていますので、リンクを解除いたしました。

このプロジェクト・ファイルは「通常版ver.02.07.09.08」で動作確認しています。
プロジェクト・ファイルはご自由にお使いくださってかまいません。


　LiveMaker用プロジェクト・ファイル 　画像文字表示（zip圧縮）　0.29MB


◎実行画面



上と中央に7桁の数字が表示されていますが、これが「画像文字」で表示させている文字列変数「入力文字」の中身です。
わざわざ2つも同じ内容を表示させていのは、後述になりますが「画像文字」の「親/子画面」についてとそのインターフェイスへの影響をみせるためです。
インターフェースにつきましては「○インターフェースについて」で説明しています。


◎解説
○チャート


今回はこのメインチャート１つだけです。流れも中身もシンプルで、<シナリオノード>と<文字列入力>のみになっています。


○変数表


変数も１つだけです。
文字列入力で数値を入れてもらうための受取用です。
文字列変数なのは、数値変数だと数値以外が入力されたときに困るからです。
また、半角「z」が入力されると何も表示されないようにするためです。
これについては後述の「何も表示させないためには」で説明します。


○プロジェクトオプション-画像文字


今回のメイン項目です。
プロジェクトオプションを開き、画像文字を選択してこの画面をだします。
「設定リスト｣は任意につける名前なので「数字表示」としました。
「元画像」は、今回は数値のみと決めていましたので「0〜9」と「空白」をあわせた下の画像を用意。
グラフィックフォルダに「数字画像」というフォルダを新たに作り、いれておきました。



この画像はもちろんgal形式で、数字の周囲は透過処理しています。
「9」の右にある一文字分の余白は、わざと作っています(後に不必要と判明）。
「一文字の幅」や「一文字の高さ｣は用意した素材に合わせて数値を入力してください。
「文字列」は、画像の説明にあるとおり左から順に対応する文字をいれています。
今回は数値を扱うので、「半角数字」と「z」で対応させました。
「z」は一番右の余白に対応しています。

では改めてメインチャートにそって説明をしたいと思います。



○シナリオノード<画像文字背景設定>


[システムメニュー]と[メッセージボックス表示]の説明はいらないと思います。
これをわざわざつけたのは、「画像文字」もインターフェース扱いにできるのを説明するためです（「○インターフェースについて」」参照）。


[画像表示]-「#画像文字_親」


続いての画像表示の内容は上のとおりです。
画像文字は、あらかじめ用意された画面に貼り付けられます。
例えとしては、予定の書かれたホワイトボードにポストイットで一言メモを貼り付けるようなものです。
このホワイトボードが「親」画面、ポストイットが「子」画面（画像文字の本体)です。
上記の「インターフェース扱い」の話に戻りますが、親となるホワイトボードが隠されれば、貼り付いてるポストイットも隠れるというのはわかると思います。
今回、親となる画像は640×480ドットで、画面の大きさそのものの「透明画像｣です。
「名前」は他の画像の「名前」と被らないように付けてください。
自分の失敗談ですが、この「名前」と[画像文字表示]の「名前」を一緒にしてしまったため、表示されないという自体が起きました。


[画像文字表示]-「画像文字_子」


二個続いて[画像文字表示]がありますが、両者の違いは「縦の位置」だけで、その他の項目は同じです。
親画面１つに対して、子画面（画像文字）は複数付けられるという説明のためだけに二個目をつけてみました。
「設定」は、「プロジェクトオプション_画像文字」で設定した「設定リスト」から選択します。
「名前」は他の[画像表示/変更]と被らない名前をつけてください。
「親の名前」は「親｣画面と決めた[画像表示]の名前です。
ここは設定しなくても動作はします。
「横/縦の位置」は、「親」画面から見た位置になります。
「親」画面の位置がずれると、それにあわせて画像文字の位置も移動します。
ためしに[画像表示]-「#画像文字_親」の位置数値をいじってみてください。
「揃え」は複数行に渡る表示がされたときに、「右寄せ」などに設定できます。
一行のときは必ず「左寄せ」のようです。
「行間」はそのまま行間です。
「プライオリティ」は画像の並び順です。
数値が大きいほど手前に表示されます。
「文字列」は表示したい文字です。
「式として記述」にチェックを入れると、変数で指定できます。
今回は<文字列入力>で入れた値を表示させるのでチェックをつけました。


○文字列入力ノード<半角数字入力>
ここでは文字列変数「入力受付」に7文字までの入力をするように指示しているだけなので、詳しい解説は省きます。

○シナリオノード<画像文字表示>


こちらも[画像文字表示]同様、2つ続けて[画像文字変更]がありますが、上段と下段の表示変更をしているだけ内容は同じです。
[画像文字変更]-「画像文字_子」


変更の場合は「名前」と「文字列」の指定だけです。
変数内容を表示したいときはチェックボックスにチェックを入れてください。
今回の場合は、文字列変数「入力受取」を表示したいのでチェックがされています。

[画面揺らし]
「親｣画面を揺らしています。
「子｣画面（画面文字本体)は指定できないようです。


説明としては以上となります。
以下に補足事項を上げておきたいと思います。

○インターフェースについて
インターフェースというのは、メッセージボックスのようにシステムメニューの「文字消去」で一時的に画面から消せる機能を受けるものです（たぶん）。
今回は親画像([画面表示]の「名前」で言うと「画像文字_親」）を、このインターフェース扱いにしています。
試しに文字列入力で数値を入れたあと、右クリックでシステムメニューを開き、「文字を消す」を実行してみてください。
もしくはスペースキーでも同様の操作ができます。
インターフェース扱いにするには、[画像表示/変更]命令での「名前」に半角#をつけてください。
以前、他の項目でも説明いたしましたが、この半角#のある名前とない名前、例えば「#画像文字_親」と「画像文字_親」は違う「名前」として扱われますからご注意ください。
また、親画面を指定すると他の子画面すべてが同じようになります。
個別で指定したいときは、子画面のみに「#」をつけてください。

○何も表示させないためには
わたしは普段、[画像表示/変更]で表示されている画像を一時的に消すときは[画像消去]を使いません。
かわりに[画像変更]で透明画像を表示させて見えないようにだけしています。
今回もわざわざ[画像文字消去]を使わないでも見えなくさせればいいだろうと思い、「z」が入力されたときは透明画像を表示するようにしました。
が、どうやらそれは無駄なようで、プロジェクトオプションで設定された文字列以外は空白として扱われ、何も表示されないようです。
試しに、文字列入力で「12３４5」と半角と全角を混ぜて入力してみてください。
「３４」の部分が空白になると思います。
ですから何も表示させたくないときは指定文字以外を表示させればいいという結論になり、「z」は無駄となったわけです。

○親画面と子画面の実際
今まで、画像文字は親画面と子画面で一つのような説明してきましたが、実はこの親画面は必須ではありません。
これがなくても[画像文字表示]のみで問題なく動作します。
ただし、親画面がないと[画面揺らし]やその他のエフェクト効果の恩恵を受けることはできません。
もしそのような効果がいるなら親画面を用意し、必要なければ用意しなくてかまいません。

○数値変数は文字列変数に変換しなくても大丈夫
文字列を表示させる[画像文字]が、数値変数をそのまま扱えるのか調べました。
試したところ、数値変数でもそのまま表示できたので、わざわざ計算ノードで文字列に変換しなくてもよいようです。
ただ、数値は基本的に半角なので、「プロジェクトオプション_画像文字」の「文字列｣の項目は半角で指定おいたほうがよいようです。


簡単ですが、これで今回は終わりになります。 わかりづらい点などがあればお気軽にメールをください。
時間がとれしだいお答えしたいと思います。



　　　　ホームへ戻る