読者です 読者をやめる 読者になる 読者になる

読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

Google Earthコンテンツの作り方 (5) ーツアにキャプションを入れるー


パソコン版Google Earthでは、SoundCueタグを使ってツア中に音声を再生することができます。これでナレーションを入れることができるのですが、残念ながらiOS版(Android版も?)ではSoundCueはサポートされておらず音が出せません。なので、キャプションが重要になります。


パソコン版の場合、ツアの最中にgx:balloonVisibilityタグでバルーンの表示を制御できるのでこれでキャプションのようなことができます。しかし、iOS版(Android版も?)の場合、これがサポートされていませんので、ScreenOverlayタグによる画像のオーバーレイを使ってキャプションを表示します。具体的には、

  1. id付きScreenOverlayタグを必要な分用意する。このとき、visibilityを0に、colorを00ffffff(不透明度0)に設定しておく。
  2. Tour内に以下の記述を入れる。
    1. gx:AnimatedUpdateでvisibilityを1に変更。
    2. gx:AnimatedUpdateでcolorを適当な不透明度に変更。gx:durationを指定するとフェードインする。
    3. gx:AnimatedUpdateでcolorの不透明度を0に、visibilityを0に変更。gx:durationを指定するとフェードアウトする。

という記述をします。

不透明度が0の時画像は見えないので、見え方の観点からはvisibilityの変更は不要ですが、キャプションを多用した場合、visibilityを0にしないとメモリ不足でアプリが強制終了することがあります。不要な場合にはvisibilityを0にするようにしましょう。


色々なキャプションを用意することを考えると、キャプション画像のサイズは揃えておくのがやりやすいです。一方でレイアウトの自由度からは画面をだいたい覆うようなサイズが望ましいので、画面相当のサイズにキャプションを描き、PNGもしくはGIFフォーマットで背景色を透明にするのがよいでしょう。

画像を用意する辺り、私は不慣れなのですが、以下のようにしてみました。

  1. LibreOfficeのImpress(プレゼンテーション)を使ってスライドを作る。(Keynoteは縦書きがないのでLibreOfficeにしました。)
  2. スライドをPNGフォーマットでエクスポートする。(一括エクスポートのエクステンションがあります。)
  3. Imagemagickのmogrifyで背景色を透明にする。


ここで細かなノウハウですが、最終的に画像ファイルは短辺が1024ピクセルを越えないようにしてください。越えると、少なくともiPadではオーバーレイ表示時に航空写真がぼけるという不具合があります。エクスポート時にサイズを指定するとよいでしょう。


では、KMLの記述はどうなるか、初回でお見せしたデモの一部を引用します。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2">
  <Document>
    <name>opening1.kml</name>
    <open>1</open>
    <gx:Tour>
      <name>男はつらいよ第一作オープニング</name>
      <gx:Playlist>

<!-- キャプション(黒幕)の準備 -->
        <gx:AnimatedUpdate>
          <gx:duration>0</gx:duration>
          <Update>
            <targetHref/>
            <Change>
<!-- キャプションを入れたフォルダのvisibilibityを1にします。表示するには自身と親のvisibilityがすべて1である必要があります。 -->
              <Folder targetId="direction_related">
                <visibility>1</visibility>
              </Folder>
              <ScreenOverlay targetId="black">
                <color>00ffffff</color>
                <visibility>1</visibility>
              </ScreenOverlay>
            </Change>
          </Update>
        </gx:AnimatedUpdate>

<!-- キャプション(黒幕)の表示 -->
        <gx:AnimatedUpdate>
          <gx:duration>0</gx:duration>
          <Update>
            <targetHref/>
            <Change>
              <ScreenOverlay targetId="black">
                <color>ffffffff</color>
              </ScreenOverlay>
            </Change>
          </Update>
        </gx:AnimatedUpdate>      

        <gx:Wait>
          <gx:duration>3</gx:duration>
        </gx:Wait>

<!-- 黒幕の裏で富士山を準備 -->
        <gx:FlyTo>
          <gx:duration>0</gx:duration>
          <LookAt>
            <gx:horizFov>60</gx:horizFov>    
            <longitude>138.731639</longitude>
            <latitude>35.36306</latitude>
            
            <altitudeMode>absolute</altitudeMode>
            <altitude>2000</altitude>
            
            <heading>-142</heading>
            <tilt>90</tilt>
            <range>7300</range>
          </LookAt>
        </gx:FlyTo>

        <gx:Wait>
          <gx:duration>1</gx:duration>
        </gx:Wait>

<!-- 黒幕フェードアウト -->
        <gx:AnimatedUpdate>
          <gx:duration>2.6</gx:duration>
          <Update>
            <targetHref/>
            <Change>
              <ScreenOverlay targetId="black">
                <color>00ffffff</color>
                <visibility>0</visibility> <!-- 属性が1/0の場合、durationの最後に設定されるのでcolorでのフェードアウトと同時に設定可能です。 -->
              </ScreenOverlay>
            </Change>
          </Update>
        </gx:AnimatedUpdate>      

        <gx:Wait>
          <gx:duration>2.6</gx:duration>
        </gx:Wait>
        ...
      </gx:Playlist>
    </gx:Tour>
    <Folder id="direction_related">
      <name>演出関連</name>

      <ScreenOverlay id="black">
        <name></name>
        <description></description>
        <Icon>
          <href>captions/black.png</href>
        </Icon>
        <visibility>0</visibility> <!-- ツア外では見えないようにしておきます。 -->
        <overlayXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <screenXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <size x="1" y="1" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
      ...
    </Folder>
  </Document>
</kml>


キャプション画像は圧縮フォーマットにするため、相対パスで指定しています。このようなKMLファイルを用意して、フォルダcaptionsにキャプション画像を用意し、
両方をzipして、opening1.kmzとすると、デモファイルが出来上がりです。


次回は、インタラクティブなバルーンについて書きます。