ブラウザゲームで表示された画像を抽出して保存する方法
お気に入りの娘を保存したかったら何が悪い！
ブラウザゲームで見かけた女の子のキャラクターがかわいくて、何とか保存したいんだけどそんな事できるのかな？
キモイ！
なっ・・・！
そっちもイケメン画像欲しいだろ？！
もちろん
ありますよ、保存する方法・・・
教えてくれ！
早く！
（ダメな先輩たち・・・）
ゲームでお気に入りのキャラクターを見かけたら、思わずスクリーンショットを撮ったりしたことはありませんか？
お気に入りのキャラをいつでも見ることが出来るように保存しておきたいですよね。
今回は、ブラウザゲームで表示された画像を抽出して保存する方法を解説します。
今回の画像の抽出は個人で楽しむ範囲の利用にしておきましょう。
ゲーム制作会社様の迷惑にならないようにしましょう。
Contents
保存する前の前提条件
画像を抽出する前に、前提として必要な事を書いておきます。
一度表示させないと保存できない
ブラウザゲームは、ゲーム内で使われるデータのすべてを一度にダウンロードしてきたりはしません。
必要になった時に初めてダウンロードして表示させます。
なので、表示されたことのないキャラクターの画像は抽出できません。
もし欲しいキャラクターがいれば、そのキャラクターを手に入れるところまで進めましょう。
ブラウザはChromeを使用する
他のブラウザでも抽出はできるようですが、今回調べたのはChromeでの抽出方法なので、Chromeを使ってゲームをプレイするようお願いします。
ブラウザーゲームの画像を抽出する方法
では、解説していきます。
普通にゲームをプレイする
こちらはぺんぺんZの画像です。
抽出したい画像のゲームを、とりあえずは普通にプレイします。
前提の所でも書きましたが、画面に表示されない事には画像データをゲームがダウンロードしてきません。
なので、抽出したい画像が出るまでゲームをプレイします。
Chromeのデベロッパーツールを使って画像を表示させる
F12キーを押す、またはCtrl+Shift+Iキーを押すとChromeの右半分がデベロッパーツールと呼ばれる表示になります。
デベロッパーツールは上部がタブになっているので、その中から「Application」をクリックします。
デベロッパーツールを使って、画像を表示している部分を確認していきます。
Frames→top にマウスカーソルを合わせると、左側のゲーム画面が青くなります。
これは、topの中にこのゲームに表示されている要素がありますよ。という意味です。
なので、topを展開していきます。
今回はtopという名前になっていますが、別のゲームではtopという名前ではない可能性があります。
マウスカーソルを合わせて、色が青くなる場所を探しましょう。
topの横にある▼をクリックすると、topの中に含まれている要素がずらっと表示されました。
この要素に対して、またマウスカーソルを合わせて、左側のゲーム画面が反応するフォルダーを探していきます。
game_frameに合わせた時に画面が反応したので、game_frameを開いていきます。
game_frameを開いた後の要素は少ないので、特定しやすいですね。
fanza.pentwo.netに合わせると、左側のゲーム画面が反応しました。
先ほどは画面全体が反応しましたが、今度はゲーム画面だけですね。
範囲が絞られてきたようです。
次はcontentですね。
contentを展開します。
contentを展開した先には「images」と「scripts」がありますが、どちらにカーソルを乗せても、左側のゲーム画面が反応しなくなりました。
という事は、この「images」が目当てのフォルダという事になります。
「images」を展開します。
「images」を展開すると中に画像ファイルが入っていて、クリックすると右のプレビュー画面で画像の中身が表示されます。
ゲームを進めていくと、画像が表示されるたびにこのフォルダーの中にたまっていきます。
一度ブラウザを閉じると、中身の画像はリセットされるようです。
お目当ての画像がなければ、もう一度ゲームを進めて画像を表示させましょう。
保存したい画像が見つかったら、画像名を右クリックします。
表示されるメニューから「open in new tab」をクリックします。
「新しいタブで開く」って意味ですね。
新しいタブに画像が単体で表示されるので、画像を右クリックすると「名前を付けて画像を保存」が表示されるのでクリックして保存します。
ファイルとして保存されました。
これでお気に入りのあの娘をゲットできますね。
保存が無理そうなもの
保存が無理そうな画像もあります。
アニメーションしているもの
アニメーションが動画形式になっていて、それを再生しているものは保存が出来なさそうです。
このあたりは調べてまた何とかできそうなら追記します。
差分で動きをつけているもの
差分とは、動かす必要がある部分だけ書き直して、別の絵とすることですね。
例えば、女の子の笑い顔・泣き顔・怒り顔を作っておいて、それを差し替えて表情を作るといった場合、体は共通のものを使って、顔だけ表示したり非表示にしたりすれば、その分、ゲーム全体として軽く動作するものが出来上がります。
そしてパーツごとに分かれているので、データとしてはバラバラになっていることもあります。
完全な一枚絵としては作られていないので、ゲームで表示されているような絵にするには自分で重ねないといけないですね。
ミストトレインガールズのクインズウェイちゃんですが、
データ上ではのっぺらぼうの立ち絵と、周囲に表情が配置されています。これらを重ねて表示させてかわいらしく表示しているんですね。
データのつくりはゲームごとに違うので、どのような形でデータが保存してあるかは確認してみるまで分かりません。
差分のあるゲームでも、一枚のきちんとした絵を入れ替えているゲームもあります。ぺんぺんZのように。
Unityで作られているゲーム
Unityで作られているゲームは、Unity内で使用できる形式のデータ形式になっているため、画像をそのままやり取りしているわけではありません。
なので、いったんはそのUnityの形式のデータをダウンロードして、そのデータを画像データに変換する必要があります。
その方法は別記事にまとめましたのでよかったら参考にして見てください。
＞＞＞Unityを使ったブラウザゲームで表示された画像を抽出して保存する方法
https://around40-dt-tokamachip.info/2021/01/22/post-16424/かわいい子がたくさん出るゲーム
fanza系のゲームの記事を書いていますので、こちらからお気に入りの子が見つかるかもしれません。
おわりに
本来の画像の使用方法ではないので、あくまでも個人で楽しむ用にしておきましょう。
今回は以上です。
お疲れ様でした！