藤川帳

Studio F#の音楽とか吉里吉里とか担当の藤川ヒロヒコのブログ。
<< October 2004 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
 
Studio F# on Youtube
ARCHIVES
みんなのブログポータル JUGEM
SPONSORED LINKS
 
スポンサーサイト

一定期間更新がないため広告を表示しています

- | | - | - | pookmark
テキスト描画

引き続きコンフィグ画面を作っている藤川です。引き続きといっても、大分時間があいてしまいました。まあ仕方がありません。

音量調整を組んだことでコツをつかみ、今日は残りを一気に作り上げました。まああまり項目も多くないんですけど。BGMとSEの音量、文字表示速度、フルスクリーン切り替え、それとマウスカーソルスナップのON/OFFくらいです。ノベルゲームではないので、フォント変更はつけていません。

コンフィグ画面は変更結果がすぐわかるように作りたい、というのが目標としてありました。カーソルスナップについてはスナップする対象がないのでアレですが、それ以外、つまりBGM、SEは音量をリアルタイムに変更し、文字表示速度は変更したらサンプルテキストが流れ、スクリーンモードは……まあこれは変わるだけですけど。とにかく、どうせコンフィグ画面を作るならそういうのを作りたいな、と。そうでないなら純正のメニューバーで充分なわけです。

音量調整については前回書いた通り実装できました。スクリーンモードも、つまるところkag.onFullScreenMenuItemClick()やkag.onWindowedMenuItemClick()を呼ぶだけで、別に面倒ではありません。では、サンプルテキストはどうするか?

ところで、TJSからKAGのシナリオファイルを実行するのは案外簡単で、別ファイルにシナリオを用意しておけば、そのファイル名と開始したいラベル名をkag.process()に渡してやるだけで実現できます。が、当然この場合には文字描画がカレントレイヤで実行されるので、今回の用途には向きません。そこで自前で実装することにします。

理屈としては、用意した文字列をcharAt()で一文字ずつ切り取って、タイマーで間隔をとりつつ、順番に並べていけば良いわけです。KAG Systemの「文字描画速度」というのは実際には一文字ずつ描画するときのウェイト時間なので、「速い」ならkag.chSpeeds.fastを(どうせならConfig.tjsで用意してくれている変数を使いましょう)タイマーのintervalにしてやれば、実際の画面と同じような描画を実現できます(眠いので文章がややこしいことになってるかもしれない)。

まあとにかく、次のようなコードになります。ちなみにこのメソッドは、ちゃんとLayerを継承したクラスに置かないとちゃんと動かないので、そのつもりで。

var teststr; // テスト文字列
var timer; // タイマー
var counter; // カウンター

function speedTest(speed)
{
  teststr = "ほげほげ。";
  fillRect(0, 0, 575, 66, 0x88000000); // 前回のテスト文字列を消す
  if (speed == 0) {
    drawText(10, 35, teststr, 0xffffff);
  }
  else {
    timer = new Timer(onTimer, '');
    timer.interval = speed;
    timer.enabled = true;
  }
}

function onTimer()
{
  drawText(
    10 + font.getTextWidth(teststr.substring(0, counter)),
    35,
    teststr.charAt(counter),
    0xffffff
  );

  counter++;
  if (counter == teststr.length) {
    invalidate timer;
    timer = void;
    counter = 0;
  }
}
speedTestメソッドにはkag.chSpeeds.fastなどを渡します。

ある文字を描画するX座標は、font.getTextWidth(teststr.substring(0, counter))で表現できます。counterという変数はcharAt()とsubstring()のふたつのメソッドに渡していますが、意味はまったく違っていて、charAt()ではn文字目、substring()ではn文字分、という感じになります。上の例でいうと、teststr.charAt(2)は「ほ」が帰ってきますが、teststr.substring(0, 2)だと「ほげ」が帰ってきます。

つまりteststr.substring(0, 2)をfont.getTextWidth()に渡してやることで「ほげ」の描画幅が帰ってくるので、その値をX座標として指定することで、teststr.charAt(2)の結果である「ほ」を「ほげ」の次にうまく描画できるという寸法です。

ちょっとややこしいかもしれませんけど、落ち着いて考えればわかると思います。