通常スキンの作り方

XMLファイルと画像を組み合わせることで、簡易スキンよりきめ細かな制御ができます。

通常スキンを追加するときは、.NET版、Java版の場合、フォルダskinの下にスキンごとのフォルダを作り、そこにXMLファイルと画像を置いてください。
Android版の場合、ライブ壁紙の設定画面から「スキン一覧」を選択し、「ファイルのインポート」ボタンをクリックしてスキンと画像を含むzipファイルを選択してください。

XMLファイルの名称はsetting.xml固定です。

手順

下に表示されたサンプルまたは、本体に添付されたサンプルのXMLファイル(skin\sample1\setting.xml)をコピーして、テキストエディタで編集してください。文字コードはUTF-8を推奨します。

要素Skin/Imageに画像のファイル名を指定します。
setting.xmlのあるフォルダを起点とした相対パスで指定します。画像とsetting.xmlを同じ階層に置くのであれば単純にファイル名を指定すれば問題ありません。

要素Skin/TimeArea/Verticesの子要素として、要素Vertexを4個記述します。
要素Vertexは、画像ファイル上において時刻の文字列を表示する領域の頂点を指定します。座標は左上が原点です。頂点は順に左上、左下、右下、右上となります。
要素Vertexの子要素X、Yにそれぞれ頂点のX、Y座標を指定します。
4つの頂点は平行四辺形を描くように配置してください。
時刻の文字列を描画するとき、文字列の周囲には余白が発生します。余白を考慮して領域は広めに取ってください。

要素Skin/TimeArea/Colorに文字の色を指定します。色の書式はHTMLで使用可能なものが使えます。(#FF9966など)

要素Skin/Fontにフォントを指定することができます。(省略した場合はデフォルトの設定が使われます。)
子要素Name、Sizeにフォント名とフォントサイズ(pt)を指定すると、デフォルトのフォント以外を使うことができます。ただし、現状のAndroid版ではフォント名は無視され、常にデフォルトのフォントが使われます。

要素Skin/TimeArea/SrcStringAreaに、画像を一時的に描画する領域のサイズを指定することができます。(省略した場合はデフォルトの設定が使われます。)
子要素Width、Heightに幅、高さをpx単位で指定します。フォントを変更したら文字が欠けてしまったような場合に変更してください。

サンプル

setting.xmlのサンプルです。
<?xml version="1.0" encoding="utf-8" ?>
<Skin>
  <!-- 画像のファイル名を指定します。 -->
  <Image>skin.jpg</Image>

  <!-- 時刻表示領域の設定 -->
  <TimeArea>

    <!-- 時刻表示領域の頂点を左上→左下→右下→右上の順で指定します。 -->
    <Vertices>
      <Vertex><X>62</X><Y>230</Y></Vertex>
      <Vertex><X>55</X><Y>275</Y></Vertex>
      <Vertex><X>145</X><Y>265</Y></Vertex>
      <Vertex><X>152</X><Y>220</Y></Vertex>
    </Vertices>

    <!-- 文字色を指定します。HTMLと同じ表記が使用できます。 -->
    <Color>#404040</Color>

    <!-- フォントを変える場合はフォント名とサイズを指定します。 -->
   <!--
        <Font>
          <Name>みかちゃん</Name>
          <Size>48</Size>
        </Font>
        -->

    <!-- 文字列を一時的に描画する領域のサイズを変える場合は指定します。 -->
    <!--
        <SrcStringArea>
          <Width>172</Width>
          <Height>72</Height>
        </SrcStringArea>
        -->

  </TimeArea>
</Skin>

タグ:

+ タグ編集
  • タグ:

このサイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー利用規約 が適用されます。

最終更新:2013年03月02日 16:08