Battlefieldのエンブレムの解析

BattleFieldのエンブレムの解析をやったのでそれについて書いていきます。
この内容をがんばって応用すればBattlelogのエンブレム編集画面よりも使いやすい自作のエンブレムエディターが作れるかもしれないです。というか公式のエンブレム編集のやつ使いづらいから誰か作って。あと公式はUndo&Redoくらいつけといてよ

 エンブレムのエクスポート

1.エクスポートしたいエンブレムの編集画面に入る
スクリーンショット 2016-07-04 23.33.34.jpg
2.開発者コンソールを開き、コンソールに下記を入力してエンター

$(‘body’).html(‘<pre style=”color:#000;”>emblem.emblem.load(‘+JSON.stringify(emblem.emblem.data,null,2)+’);</pre>’);

スクリーンショット 2016-07-04 23.50.00.jpg

IEだと開発者コンソールはF12キーで表示できる。

3.エンブレムのJSONが表示されるので、すべて選択してメモ帳とかにペーストして保存する
一見何も表示されてないように見えるけど、背景と文字色が同じなので何も表示されてないように見えるだけ。すべて選択するとちゃんと表示されていることがわかる。(最初は何も表示されてないように見えたので10分くらい悩んだ)
スクリーンショット 2016-07-04 23.44.32.jpg
スクリーンショット 2016-07-04 23.44.42.jpg

エンブレムのインポート

ググれ。

エンブレムの解析

エンブレムのデータ形式

スクリーンショット 2016-07-05 00.05.47.jpgたとえば、こんな感じに白い旗の上に黒いドクロを重ねたエンブレムのエクスポートをすると、こんな感じの文字列が得られる。

emblem.emblem.load({
“objects”: [
{
“asset”: “Flag”,
“left”: 150.2493284380624,
“top”: 183.39210448011778,
“angle”: 0,
“width”: 258.7502145085236,
“height”: 226.25442194393437,
“opacity”: 1,
“fill”: “#FFFFFF”,
“flipX”: false,
“flipY”: false,
“selectable”: true
},
{
“asset”: “Skull2”,
“left”: 160.625,
“top”: 164.33127403259277,
“angle”: 0,
“width”: 159.50155763239874,
“height”: 123.88685358255451,
“opacity”: 1,
“fill”: “#000000”,
“flipX”: false,
“flipY”: false,
“selectable”: true
}
]
});

最初の”emblem.emblem.load(“と末尾の”);”はエンブレムを読み込む関数を呼び出しているんだと思う。
で、こいつらに囲まれた部分(つまりemblem.emblem.loadの引数)をみてみる。

{
“objects”: [
{
“asset”: “Flag”,
“left”: 150.2493284380624,
“top”: 183.39210448011778,
“angle”: 0,
“width”: 258.7502145085236,
“height”: 226.25442194393437,
“opacity”: 1,
“fill”: “#FFFFFF”,
“flipX”: false,
“flipY”: false,
“selectable”: true
},
{
“asset”: “Skull2”,
“left”: 160.625,
“top”: 164.33127403259277,
“angle”: 0,
“width”: 159.50155763239874,
“height”: 123.88685358255451,
“opacity”: 1,
“fill”: “#000000”,
“flipX”: false,
“flipY”: false,
“selectable”: true
}
]
}

これはJSONですね・・・間違いない。BFのエンブレムはJSONで記述されていることがわかる。
あとはこのJSONの内容について解説していく。

レイヤーの重なり

{
“objects”: [
{
1枚目のレイヤーについての情報
},
{
2枚目のレイヤーについての情報
},
{
3枚目のレイヤーについての情報
}

]
}

1枚目のレイヤーが一番下で、そこに2番目,3番目…と順番に上に重なっていく。

レイヤーの情報

emblem.emblem.load({
“objects”: [
{
“asset”: “Square”, ←形
“left”: 100, ←中心のX座標
“top”: 100, ←中心のY座標
“angle”: 45, ←角度(0~360,時計回り,回転軸は図形の中心)
“width”: 100, ←幅
“height”: 100, ←高さ
“opacity”: 0.5, ←透明度(0.00~1.00)
“fill”: “#FFFFFF”, ←色(16進法カラーコード)
“flipX”: false, ←横の鏡像反転(true,false)
“flipY”: false, ←縦の鏡像反転(true,false)
“selectable”: true ←編集可能かどうか(編集可能:true,ロック状態:false)
}
]
});

座標系について

エンブレム 座標.png
キャンパスの大きさは縦320横320。キャンパスの左上の角は(0,0)、右下の角は(320,320)。
位置は図形の中心の座標を指定する。

パーツについて

丸:Circle
四角:Square
旗:Flag
飛行機:AirGroundAttackJet
監視カメラ:free_gadget_camera
など。

下記のアドレスをダウンロードすると、パーツのSVGファイルが入手できる。
スタンダード:
http://battlelog.battlefield.com/cdnprefix/local/public/emblem/shared/shapes/形の名前.svg
BF4:
http://battlelog.battlefield.com/cdnprefix/local/public/emblem/warsaw/shapes/形の名前.svg
BFH:
http://battlelog.battlefield.com/cdnprefix/local/public/emblem/bfh/shapes/形の名前.svg

(例:
http://battlelog.battlefield.com/cdnprefix/local/public/emblem/shared/shapes/Circle.svg
http://battlelog.battlefield.com/cdnprefix/local/public/emblem/shared/shapes/Tailfeathers.svg
http://battlelog.battlefield.com/cdnprefix/local/public/emblem/warsaw/shapes/AirGroundAttackJet.svg
http://battlelog.battlefield.com/cdnprefix/local/public/emblem/warsaw/shapes/GroundIFV2.svg
http://battlelog.battlefield.com/cdnprefix/local/public/emblem/bfh/shapes/free_gadget_camera.svg

スクリーンショット 2016-07-05 01.52.03.jpgスクリーンショット 2016-07-05 01.47.38.jpg
ダウンロードしたSVGファイルは、白で塗りつぶされているため、開いてもただの真っ白に見える。
SVGファイルをテキストエディタで開いて、”#FFFFFF”を”#000000″に置換すると正常な画像になる。
または、Inkscapeで開いて塗りつぶし色を変更するときちんとした画像になる。
Inkscapeでの方法:
1.ダウンロードしたSVGファイルをInkscapeで開く
2.編集→すべてを選択(またはCtrl+A)
3.オブジェクト→フィル/ストローク
4.×マークの右側の四角をクリック(単一色)
5.あとは好きなように。色を変えるなり画像ファイルとして出力するなり。

 

やりたかったこと

Battlefieldのエンブレムを解析して何がやりたかったかっていうと、遺伝的アルゴリズムによって自動でエンブレムを生成してくれるプログラムを書こうとしてた。
モナリザを遺伝的アルゴリズムによって単純な図形の組み合わせから生成するプログラムを見て、これのBFのエンブレム版作れるんじゃね?と思ったのがきっかけ。
でもまだプログラム書いてない。誰か書いてくださいお願いします。

遺伝的アルゴリズムでAA自動生成

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中