「プラグイン開発資料/スプライトタグ」の編集履歴（バックアップ）一覧はこちら

「プラグイン開発資料/スプライトタグ」(2010/04/19 (月) 08:03:31) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

#right(){最終更新日時：&lastmod()}
#hr(height=4,color=#1E90FF)
*スプライトタグ
&small(){&topicpath()}
#hr(height=4,color=#1E90FF)
#contents()

スプライトタグは、PictureContribで定義されたピクチャをどのように切り出して画像として利用するかを指定します。
#hr(height=2,color=#1E90FF)
**書式
基本形式は、
#blockquote(){ <sprite origin="0,0" offset="16" size="32,32">
   <spriteType ... />
   <picture ... />
 </sprite>
}
なのですが、spriteが利用される位置によって必要なものが異なります。
#hr(height=1,color=#1E90FF)
***座標指定
-origin属性
スプライトの左上端をピクチャ内のどこにするかを座標で指定します。
-offset属性
スプライトを表示する時に、ボクセルの左上位置をスプライトのどこにするかを指定します。これは、origin属性で指定した座標から、左上位置のボクセルの上端までの垂直のピクセル数を記述します。なお、スプライトが使用されるコントリビューションによっては、必要ない場合もあります。

これらの情報から、スプライトの大きさは自動で計算されます。
必要な画像ファイルの大きさ(ドット数)は、次式で計算できます。

幅 = originのX座標 + (ボクセルサイズX + ボクセルサイズY) * 16
高さ = originのY座標 + offset + (1 + ボクセルサイズY) * 8 
※用意した画像ファイルのサイズが足りないと、正しく表示されません。
#hr(height=1,color=#1E90FF)
***例
例えば、以下のような画像を建物として追加するプラグインを作成するとします。
#image(spritesample.PNG)
この画像から、建物プラグインで使用するスプライトを切り出すには、origin属性とoffset属性の値が必要です。

この建物は、ピクチャの左端および上端から始まっていますので、スプライトの開始位置は画像の左上隅です。この座標は(0,0)ですから、origin属性には 0,0 を指定します。

また、建物の基準となるのは、左端のボクセル（黄色く色が付いている）です。
このボクセルの上端は、originの座標(0,0)から垂直に40ピクセル離れていますので、offsetには40を指定します。

つまり、
#blockquote(){ <sprite origin="0,0" offset="40">
   <picture src="画像ファイル名" />
 </sprite>
}
のように記述します。
#hr(height=1,color=#1E90FF)
***スプライト種別
<spriteType>を使うことによって、スプライトの種類が選択できます。通常は、単にコピーするだけでよいので、<spriteType>を指定する必要はありませんが、標準のもの以外に次のようなスプライトタイプがあります。

****色替えスプライト
色替えスプライトを使うと、ピクチャからスクリーンへの転送時に、特定の色を別な色に置き換えることができます。例えば、下の例では、RGB=(0,255,0)の色を、転送時にRGB=(255,0,0)に、同時にRGB=(100,20,8)の色をRGB=(0,96,24)に置換します。 <map>要素は複数指定することができます。
#blockquote(){ <spriteType name="colorMapped">
   <map from="0,255,0" to="255,0,0"/>
   <map from="100,20,8" to="0,96,24"/>
 </spriteType>
}
鉄道車両でも、湘南色でボディを画像を作っておいて、色替えスプライトで横須賀色を作るといったことができます。

****色相変化スプライト
色相変化スプライトを使うと、ピクチャからスクリーンの転送時に、特定の色の範囲に当てはまる色を他の色相に変化させることができます。

#blockquote(){ <spriteType name="hueTransform">
   <map from="100,255,*" to="50,127,255" />
 </spriteType>
}
<map>要素のfrom属性には、変化する色の範囲を指定します。範囲を指定する部分には、* を記述します。これは、必ず（そして1つだけ）指定しなければなりません。

色相の変化式は、
#blockquote(){ RGB = ( R * ( n / 255) , G * ( n / 255) , B * ( n / 255) )
}
です。
上記の例では、RGB=(100,255,n[=0～255])の範囲の色を、RGB=(50*(n/255),127*(n/255),255*(n/255))に置き換えます。
FreeTrainEX及びFreeTrain EX Avでは、RGB3通りの色相変化を同時にかけることもできます。
#hr(height=2,color=#1E90FF)
色替えスプライトや色相変化スプライトを利用することにより、１つのピクチャから異なる色のスプライトを多数生成することができます。この際、余分なメモリの消費を抑えることができるので、効率的です。

同じビルの複数の色パターンを用意する場合や、同じ列車の複数のカラーバリエーションを用意する場合などに使ってください。

ツールColorDiffも活用ください。
#hr(height=2,color=#1E90FF)
**ピクチャ
<picture>要素を使って、スプライトを切り出してくるピクチャを指定します。<picture>の書式については[[PictureContrib>プラグイン開発資料/コントリビューション一覧/PictureContrib]]を参照してください。
#hr(height=2,color=#1E90FF)

#right(){最終更新日時：&lastmod()}
#hr(height=4,color=#1E90FF)
*スプライトタグ
&small(){&topicpath()}
#hr(height=4,color=#1E90FF)
#contents()

スプライトタグは、PictureContribで定義されたピクチャをどのように切り出して画像として利用するかを指定します。
#hr(height=2,color=#1E90FF)
**書式
基本形式は、
#blockquote(){ <sprite origin="0,0" offset="16" size="32,32">
   <spriteType ... />
   <picture ... />
 </sprite>
}
なのですが、spriteが利用される位置によって必要なものが異なります。
#hr(height=1,color=#1E90FF)
***座標指定
-origin属性
--スプライトの左上端をピクチャ内のどこにするかを座標で指定します。
-offset属性
--スプライトを表示する時に、ボクセルの左上位置をスプライトのどこにするかを指定します。これは、origin属性で指定した座標から、左上位置のボクセルの上端までの垂直のピクセル数を記述します。なお、スプライトが使用されるコントリビューションによっては、必要ない場合もあります。

これらの情報から、スプライトの大きさは自動で計算されます。
必要な画像ファイルの大きさ(ドット数)は、次式で計算できます。

幅 = originのX座標 + (ボクセルサイズX + ボクセルサイズY) * 16
高さ = originのY座標 + offset + (1 + ボクセルサイズY) * 8 
※用意した画像ファイルのサイズが足りないと、正しく表示されません。
#hr(height=1,color=#1E90FF)
***例
例えば、以下のような画像を建物として追加するプラグインを作成するとします。
#image(spritesample.PNG)
この画像から、建物プラグインで使用するスプライトを切り出すには、origin属性とoffset属性の値が必要です。

この建物は、ピクチャの左端および上端から始まっていますので、スプライトの開始位置は画像の左上隅です。この座標は(0,0)ですから、origin属性には 0,0 を指定します。

また、建物の基準となるのは、左端のボクセル（黄色く色が付いている）です。
このボクセルの上端は、originの座標(0,0)から垂直に40ピクセル離れていますので、offsetには40を指定します。

つまり、
#blockquote(){ <sprite origin="0,0" offset="40">
   <picture src="画像ファイル名" />
 </sprite>
}
のように記述します。
#hr(height=1,color=#1E90FF)
***スプライト種別
<spriteType>を使うことによって、スプライトの種類が選択できます。通常は、単にコピーするだけでよいので、<spriteType>を指定する必要はありませんが、標準のもの以外に次のようなスプライトタイプがあります。

****色替えスプライト
色替えスプライトを使うと、ピクチャからスクリーンへの転送時に、特定の色を別な色に置き換えることができます。例えば、下の例では、RGB=(0,255,0)の色を、転送時にRGB=(255,0,0)に、同時にRGB=(100,20,8)の色をRGB=(0,96,24)に置換します。 <map>要素は複数指定することができます。
#blockquote(){ <spriteType name="colorMapped">
   <map from="0,255,0" to="255,0,0"/>
   <map from="100,20,8" to="0,96,24"/>
 </spriteType>
}
鉄道車両でも、湘南色でボディを画像を作っておいて、色替えスプライトで横須賀色を作るといったことができます。

****色相変化スプライト
色相変化スプライトを使うと、ピクチャからスクリーンの転送時に、特定の色の範囲に当てはまる色を他の色相に変化させることができます。

#blockquote(){ <spriteType name="hueTransform">
   <map from="100,255,*" to="50,127,255" />
 </spriteType>
}
<map>要素のfrom属性には、変化する色の範囲を指定します。範囲を指定する部分には、* を記述します。これは、必ず（そして1つだけ）指定しなければなりません。

色相の変化式は、
#blockquote(){ RGB = ( R * ( n / 255) , G * ( n / 255) , B * ( n / 255) )
}
です。
上記の例では、RGB=(100,255,n[=0～255])の範囲の色を、RGB=(50*(n/255),127*(n/255),255*(n/255))に置き換えます。
FreeTrainEX及びFreeTrain EX Avでは、RGB3通りの色相変化を同時にかけることもできます。
#hr(height=2,color=#1E90FF)
色替えスプライトや色相変化スプライトを利用することにより、１つのピクチャから異なる色のスプライトを多数生成することができます。この際、余分なメモリの消費を抑えることができるので、効率的です。

同じビルの複数の色パターンを用意する場合や、同じ列車の複数のカラーバリエーションを用意する場合などに使ってください。

ツールColorDiffも活用ください。
#hr(height=2,color=#1E90FF)
**ピクチャ
<picture>要素を使って、スプライトを切り出してくるピクチャを指定します。<picture>の書式については[[PictureContrib>プラグイン開発資料/コントリビューション一覧/PictureContrib]]を参照してください。
#hr(height=2,color=#1E90FF)