カーちゃんのAVAとosu!のブログ: osu!npでPOSTされた内容を画像にする＆定期的にSWFが画像取得・表示させる方法

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

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

osu!npがプレイ中の曲情報をPOST
PHPでテキストを画像化させる
その画像を、時々読みに行くSWFを作成する
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
)

適当に分析した結果、

$_POST['key'] ・・・ osu!np → Config → Upload (POST) の2個目のテキストボックスの内容
$_POST['primary'] ・・・ osu!np メインウィンドウの2つのテキストボックスの内容どちらか
$_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!で以下のようにスクリプトを組むとできました。

各行のスクリプトは以下の通りです。

loadMovie("背景画像のURL" + "?" + random(1000000), "_level1");
loadMovie("osu!np.pngへのURL" + "?" + random(1000000), "_level2");
loadMovie("osu!np.pngへのURL" + "?" + random(1000000), "_level3");
loadMovie("背景画像のURL", "_level2");
何もしない（この時間を変えることで再読込間隔を調整可能）
[2]フレームにジャンプ（＝画像の再読込）

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

取得するURLの末尾にランダムの数字を付加する。

キャッシュを利用されるのを防止します。

一旦取得した画像を同一座標に2枚表示させ、片方を背景の画像に差し替えます。

loadMovie関数が呼び出されるたびチラつくのを防止します。

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

前回の記事の方法ではできないメリット

文字色を柔軟に変更可能

グラデーションとか？

背景画像も変更可能
Flashなので、テキストエフェクトなど組み合わせることも可能
（私の環境では）NLEでテキスト表示させるよりもとても綺麗

ぐらいですかね・・₍₍ ◝(-᷅_-᷄ )◟ ⁾⁾

参考にしたサイト

カーちゃんのAVAとosu!のブログ

ページ

2014/02/11

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

0 件のコメント:

コメントを投稿