ページ

2014/02/11

osu!npでPOSTされた内容を画像にする&定期的にSWFが画像取得・表示させる方法

前回の記事(osu!のニコニコ生放送で曲名やARを表示させる方法)の続きになります。
osu!npの吐くテキストをNLEで定期的に読みに行くことで、
生放送で曲名やARを表示させることができました。

しかしNLEのテキスト表示の汚さ荒さに納得のいかなかった自分は、
自前でテキストを画像化させ、NLEで表示させることを考えました。

  1. osu!npがプレイ中の曲情報をPOST
  2. PHPでテキストを画像化させる
  3. その画像を、時々読みに行くSWFを作成する
  4. NLEにそのSWFをドラッグアンドドロップで追加

手順としてはこんな感じになりました。
(今回も長いので、もっと読む から続きをどうぞ)


ちなみに、開発に使ったツールは以下の通りです。

  • NetBeans IDE
  • ParaFla!
    • Adobe CSを買わなくても、簡単なFlashを作成できます。
    • ActionScriptも組めるので簡単なゲームも作成可能。
  • XAMPP
    • PHPやPerlの開発環境の土台となるWebサーバや言語などのツール群。
    • これをPCに入れることで、自宅サーバーが完成。

まず、POSTされたテキストを画像にする話。
osu!npでPOSTされたデータを知るために、$_POSTをprintr();しました。
すると、このような出力を得られます。
Array
(
    [key] => abcdefg123321
    [primary] => The Big Black - The Quick Brown Fox
    [secondary] => [WHO'S AFRAID OF THE BIG BLACK](Blue Dragon)AR:10
)

適当に分析した結果、
  1. $_POST['key'] ・・・ osu!np → Config → Upload (POST) の2個目のテキストボックスの内容
  2. $_POST['primary'] ・・・ osu!np メインウィンドウの2つのテキストボックスの内容 どちらか
  3. $_POST['secondary'] ・・・ osu!np →Config → Output の2つのテキストボックスの内容 どちらか(Output Secondaryにチェックを入れている人のみ)
こんな風な内容でPOSTしているみたいです。
なので、$_POST['primary'](と$_POST['secondary'])をPHPで画像化すればいいだけです。

そのコードを貼ってしまいます。

<?php
//osu!np.phpというファイル名でスクリプトを保存
//テキスト画像生成
$filename = 'osu!np.png';
$text1 = isset($_POST['primary']) ? $_POST['primary'] : '';
$text2 = isset($_POST['secondary']) ? $_POST['secondary'] : '';

if (isset($_POST['primary']) && isset($_POST['secondary'])) {
    $im = imagecreatetruecolor(512, 38);

    $white = imagecolorallocate($im, 255, 255, 255);
    $backgroundColor = imagecolorallocatealpha($im, 255, 255, 255, 127);
    $font = 'hoge.ttf';
    imagealphablending($im, true);
    imagesavealpha($im, true);
    imagefill($im, 0, 0, $backgroundColor);

    imagettftext($im, 13, 0, 1, 16, $white, $font, $text1);
    imagettftext($im, 13, 0, 1, 34, $white, $font, $text2);
    imagepng($im, $filename);

    imagedestroy($im);
}

?>
<meta content="text/html" charset="UTF-8">
<style>
    html {
        color: white;
        background-color: black;
    }
    img {
        border: solid white 1px;
    }
</style>
<img src="<?= $filename ?>">
<form action="./osu!np.php" method="post">
    1:<input type="text" name="primary" value="Take Me Out!! - Fear, and Loathing in Las Vegas" size="20" />
    2:<input type="text" name="secondary" value="[WHO'S AFRAID OF THE BIG BLACK](Blue Dragon) AR:10" size="20" />
    <p><input type="submit" name="submit" value="送信" /></p>
</form>


はい。読みづらい糞ーススパゲッティコードですみません。
$filenameや$fontなどは適宜環境に合わせて変更してください。

このソースコードは、$_POST['primary']と$_POST['secondary']を
背景透明の画像に白文字で書き込み、$filenameで保存するプログラムとなってます。
下部のHTMLは好きなテキストを使ってテストするためのものです。なので削除可能。

これをXAMPPのhtdocsに突っ込むなり適当なサーバに入れるなりして、
osu!npのConfig→Upload (POST)の1個目のテキストボックスにPHPのURLを入れ、
Toggle POSTにチェックボックスを入れる。
これで、osu!npの情報が常に画像として用意できるようになります。

問題は、最新の画像をどうやってNLEに表示させるか。
NLEではテキスト以外のオブジェクトは、自動再読込などの機能がありません。
なので、自動的に最新の画像を取得し表示するFlash(SWF)を作ることにしました。

ParaFla!で以下のようにスクリプトを組むとできました。

各行のスクリプトは以下の通りです。
  1. loadMovie("背景画像のURL" + "?" + random(1000000), "_level1");
  2. loadMovie("osu!np.pngへのURL" + "?" + random(1000000), "_level2");
  3. loadMovie("osu!np.pngへのURL" + "?" + random(1000000), "_level3");
  4. loadMovie("背景画像のURL", "_level2");
  5. 何もしない(この時間を変えることで再読込間隔を調整可能)
  6. [2]フレームにジャンプ(=画像の再読込)

ポイントはいくつかあります。

  1. 取得するURLの末尾にランダムの数字を付加する。
    1. キャッシュを利用されるのを防止します。
  2. 一旦取得した画像を同一座標に2枚表示させ、 片方を背景の画像に差し替えます。
    1. loadMovie関数が呼び出されるたびチラつくのを防止します。

そしてSWFを書き出し、書き出されたSWFをNLEにドラッグアンドドロップで追加すれば、
最新のosu!np.pngをNLEで表示させることができるようになります。

前回の記事の方法ではできないメリット
  1. 文字色を柔軟に変更可能
    1. グラデーションとか?
  2. 背景画像も変更可能
  3. Flashなので、テキストエフェクトなど組み合わせることも可能
  4. (私の環境では)NLEでテキスト表示させるよりもとても綺麗
 ぐらいですかね・・₍₍ ◝(-᷅_-᷄ )◟ ⁾⁾

参考にしたサイト

0 件のコメント:

コメントを投稿