最近のGoogleSwiffyのバージョン(4.6か4.7)からJSON内の画像の扱いが変わったメモ

おそらく、4.6か4.7からだと思うのですが、最近のGoogleSwiffyのバージョンからJSON内の画像の扱いが変わったメモをしておきます。

最近、自前の画像差し替えのプログラムで上手く通らなくなったので、状況を追ってみたところ、おおまかにあたりがついたので、忘れないうちに書いておきます。
ともあれSwiffyのJSON部分は、強制的に最新のバージョンで書き出されるため、前のバージョンで書き出すことは出来ません。なので、もはや特定はできないのですが、私が怪しんでいるのは、この更新文です。

バージョン 4.6
Reduced output size when duplicated images are used.
画像が重複して使用されている場合、出力サイズが減少されるよう改善しました。

早速、具体例を見てみましょう。

はじめに3種の画像が1つずつ表示されるサンプル

まず、はじめに、3種の画像が1つずつ表示されるサンプルを見てみましょう。

flaの中身はこのようになっております。

  • ライブラリ内の画像 合計3種類
    • JPEGと名のついた画像 x 1個
    • PNGと名のついた画像 x 1個
    • GIFと名のついた画像 x 1個
  • ステージに配置された画像 合計3個
    • JPEGと名のついたオブジェクト x 1個
    • PNGと名のついたオブジェクト x 1個
    • GIFと名のついたオブジェクト x 1個

FLASH

[SWF]https://www.1ft-seabass.jp/memo/archives/google-swiffy-013/single_image.swf,240,270[/SWF]

Google Swiffy元コード

これをSwiffyで変換します。

別ページで開く 
※JSON部分は見やすいように整形しております。

バージョン4.5の頃のデータと比較するとbitmapIDというものが存在している

上記のSwiffy HTMLを見てみると分かるのですが、以前は見なかったbitmapIDなるものが存在しています。

その箇所を抜粋します。

      "id": 4,
      "fillstyles": [
        {
          "transform": "45184l::45184l99r99u",
          "bitmap": 3,
          "type": 6
        },
        {
          "transform": "45184l::45184l9w99u",
          "bitmap": 2,
          "type": 6
        },
        {
          "transform": "45184l::45184l519c99u",
          "bitmap": 1,
          "type": 6
        }
      ],

続いて、3種の画像のうちいくつかを画像をコピーして増やしてみる

続いて、3種の画像のうちいくつかを画像をコピーして増やしてみます。

どういう作業を行うかというと

  • FLASHのオーサリング上で3種の画像がある
  • それらのPNGという画像とGIFという画像をコピーアンドペーストする。
    • 具体的にPNGは3つに増やす。GIFは2つに増やす。
  • つまり、画像の種類が3種から増えることはなく、ビットマップオブジェクトが増えるだけ

を行いました。flaの中身はこのようになっております。

  • ライブラリ内の画像 合計3種類
    • JPEGと名のついた画像 x 1個
    • PNGと名のついた画像 x 1個
    • GIFと名のついた画像 x 1個
  • ステージに配置された画像 合計6個
    • JPEGと名のついたオブジェクト x 1個
    • PNGと名のついたオブジェクト x 3個
    • GIFと名のついたオブジェクト x 2個

FLASH

実際に見てもらったほうが早いですね。こんな感じです。

[SWF]https://www.1ft-seabass.jp/memo/archives/google-swiffy-013/multi_image.swf,240,270[/SWF]

Google Swiffy元コード

これをSwiffyで変換します。

別ページで開く 
※JSON部分は見やすいように整形しております。

バージョン4.5の頃とJSON内の画像base64の個数が変わった

バージョン 4.6
Reduced output size when duplicated images are used.
画像が重複して使用されている場合、出力サイズが減少されるよう改善しました。

の更新を意識しつつ、このデータ内を見てみるとあることに気づきました。

  • バージョン4.5以前
    • 「ステージに配置された画像 合計6個」なのでJSON内にはbase64オブジェクトが6個配置されていた。
    • 同じ画像が存在していても、配置された画像の個数分存在していたということ。
    • たしかに冗長なデータ状態でありファイルサイズが膨れ上がっていた。
  • 今回のデータ(バージョン 4.7 現在)
    • JSON内にはbase64オブジェクトが3個だけしか配置されていない。
    • つまり、「ライブラリ内の画像 合計3種類」に一致?
    • 3種画像 x 1のsingle_image.swf.htmlと今回の3種画像 x 複数利用 のmulti_image.swf.html のファイルサイズがかなり近い。
    • バージョン4.5以前では画像数分膨れ上がるはず。いま、スリム化されている模様。

ということで、バージョン4.5以前では、たしか画像の個数分増えていたbase64データですが、現在のバージョン 4.7では、ライブラリ内の画像 合計3種類と推測される個数しか入っていないようです。

その確証を深めたのは、先ほどのJSON部分の変化です。bitmapID部分の個数は使用画像分増えています。

      "id": 4,
      "fillstyles": [
        {
          "color": [
            -16777216
          ],
          "type": 1
        },
        {
          "transform": "45184l::45184l99r99u",
          "bitmap": 2,
          "type": 6
        },
        {
          "transform": "45184l::45184l9w99u",
          "bitmap": 3,
          "type": 6
        },
        {
          "transform": "45184l::45184l519c99o",
          "bitmap": 1,
          "type": 6
        },
        {
          "transform": "45184l::45184l99r99i",
          "bitmap": 2,
          "type": 6
        },
        {
          "transform": "45184l::45184l99r399c",
          "bitmap": 2,
          "type": 6
        },
        {
          "transform": "45184l::45184l519c799b",
          "bitmap": 1,
          "type": 6
        }
      ],

実際、bitmapIDをみてみると、bitmapID:1は2つ、bitmapID:2は3つ、bitmpID:3は1つと増やした数の通り一致しています。

やはり、

バージョン 4.6
Reduced output size when duplicated images are used.
画像が重複して使用されている場合、出力サイズが減少されるよう改善しました。

あたりの影響を受けて同一の重複画像がまとめられJSONのデータ構成が変わりました。

  • 画像データの格納はステージ上での画像個数でなく、ライブラリの画像データにあわせてデータを格納するよう変更された
  • かつ、格納された画像データへのアクセスはbitmapIDというIDでの参照する

というルールと推測されます。

これによって画像差し替えで注意するところ

さて、具体的に、Swiffyで私の画像差し替えロジックでは、差し替えたい部分は全部一つのダミー画像で対応していたため問題がおきました。今回の変更に気づかず同様のロジックでやってしまうと、参照先の一つの画像データを差し替えてしまうので、ダミーで使っていた箇所が全部同じ画像に変わるという意図しない動作になって焦りました。

今後は、差し替えたい画像は、FLASHのオーサリングの段階で、ちゃんと別々のものを用意し使いまわしされないようにすることです。言い換えれば、ライブラリ上で差し替えたい画像がすべて置いてあるようにする必要があります。そうすれば、差し替えたい画像データとbitmapIDは1対になり、いままでのロジックで差替えられますね。

おわりに

いかがでしたでしょうか。すでにこの変更にお気づきになって対応している方もいるかと思いますが、新しいバージョンで書きだして、画像差し替えをする場合はご注意ください。

今回のソースコードも以下においておきます。

.fla(CS6作成)データダウンロード:google-swiffy-013.zip

※CS6のflaは、CS5.5で開いても警告が出るものの問題なく扱えるようです。CS5.5の方も是非試してみてくださいませ。

それでは、よきGoogle Swiffy Lifeを!