まめ畑

ゆるゆると書いていきます

NicoCanvas製作中

ニコニコ動画 Flex ActionScript

Chumbyでニコニコ動画が見れるようにしたいと以前エントリで書きましたが、コメントが重ならないように流すところを考えていたら、モジュールにでもして重ねるだけでどこでもコメント流れる物を作ろうかなぁと思い立って作ってます。
最近Flexの勉強をしようと思っていたので、Flexで作成しています。
しかし、NicoCanvasはActionScriptコンポーネントですが･･･。


VideoDisplayなりの上に重ねてCanvasにコメントを追加するだけでニコ動みたいに動画やLiveストリーミングの動画の上にコメントが流れます。
現状ではコメントの衝突判定と上・下コメントの実装はできているのですが、稀にコメントが重なってしまう事があるので改良中です。
ニコニコ動画の様にシークする事でコメントを戻す機能や、後から受信したコメントを挿入するために位置の再設定などの機能は実装していないので、生放送のようにリアルタイムでコメントを流していくアプリ向けかと思います。


テスト中の画面はこんなかんじです。
コメントの入力部分は用意していただく必要があります。


弾幕作ってたらキャプチャーが遅れてしまいました・・・。
真ん中あたりのあいてる場所は高速コメントが流れていった後です。


NicoCanvasパッケージには、ニコ動で使用しているコマンド(位置・コメントサイズ・色)をパースするものも含まれているので、コマンドを渡すだけでカラーコードなどを返してくれます。
NicoCanvas上に流すコメントモジュールも含まれているので、「コマンド・コメント受信→パースして必要な情報だけをコメントに設定→NicoCanvasに追加」で流れてくれます。
コメント色はニコ動で使用されている全てをサポートしています。後、カラーコードでの指定も可能です。(プレミアムカラーも使用可能)
現在使用しているコメントのサイズはニコ動と同じサイズです。


公開は現状ではしていませんが、もう少しコメントの衝突判定と自由に設定できる項目を作りこんだら公開したいと思います。



コメントを流す前と流れ終わり始めるところでコメントがはみ出してしまっていたのですがマスク処理で解決しました。

/**
 * UIComponentのcreateChildrenメソッドをoverride
 * 
 * NicoCanvasがChildに設定されたタイミングでマスクを設定し
 * Canvasをはみ出したコメントが見えないようにする
 * コメント入場時と退場時にNicoCanvasの領域外
 * 
 */		
protected override function createChildren():void{
	super.createChildren();
	var mask:Sprite = new Sprite();
	mask.graphics.clear();
	mask.graphics.lineStyle(1);
	mask.graphics.beginFill(0xffffff);
	mask.graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
	mask.graphics.endFill();
	addChild(mask);
	this.mask = mask;			
}

これで、NicoCanvasがaddChildされたタイミングでマスクが設定されます。