ぴーさんログ

だいたいXamarin.Formsのブログ

艦これ第二期がスタートしたのでスクリーンショットを撮るChrome拡張を作った

Chrome 艦これ

8月17日(金)に艦これ第二期がスタートして、FlashからHTML5に移行しました。リニューアルオープンです。

ゲーム画面が 800x480 から 1200x720 になりました。大きい！

それに合わせて艦娘の立ち絵などの画像素材も高解像度化されました。う、美しすぎる！

綺麗になったら艦娘たちのスクリーンショットたくさん撮りたいですね。

という訳で艦これ二期のスクリーンショットを撮るChrome拡張を作ってみました。ボタンひと押しでスクショが撮れます。 (初Chrome拡張たのしかったです)

せっかく作ったので公開します。

chrome.google.com

ソースコード

制限事項

スクロールしたりウィンドウを縮小していると正しく取れない

Chrome APIでタブの見えている範囲をキャプチャしてゲーム画面部分を切り抜いています。 なのでスクロールするとずれちゃいます。(スクロール量を取得すれば対応可能？)

高DPI環境で使うと正しく撮れない

例えばMacBook Proのような高DPIで画面が拡大表示されている環境。

切り抜く範囲をDPIに応じて調整すれば対応できるけど、拡大された画像を縮小し直すことになるので画質劣化しそう。

スクショを撮るたびにいちいち保存場所を選ばされる

作り始める前はFileSystem APIでローカルに保存できると思っていたのですがChrome拡張からは使えないようなので、諦めてファイルとしてダウンロード形に落ち着きました。

保存場所を選ぶダイアログが出ている間も次のスクショが撮れるので連写は可能。

アイコンが無い

せっかく公開したので何か作ります。

試したけどダメだったアプローチ

ゲーム画面を描画しているcanvas要素から直接描画内容を画像化

canvas.toDataURL()しても真っ黒な画像しか取得できませんでした。

ゲーム側で使ってるPixiJS(？)の設定でレンダラーのバッファを保持するように使っていないと取得できない模様。