XXX4Fans
シガタケ from fanbox
シガタケ

fanbox


(無料記事)StgBuilderの使い方-3(スプライトと表示)

●StgBuilderの使い方(一覧)


●テクスチャのフォーマット

StgBuilderで扱うテクスチャはアルファチャンネル付で

可逆圧縮のPNG(透過PNG)がオススメです。

透過PNGの出力をサポートしているグラフィックツールを推奨します。

(クリップスタジオ・フォトショップ・GIMP 等々)


テクスチャサイズは原則として2の乗数(256×256 512×1024等)を推奨

4096×4096以上のテクスチャは使用しない方が無難のようです。


●カラーキーの設定

StgBuilderは、カラーキー(透過色)を指定して

背景を透過させる仕組みになっています。(初期値は黒)

透過PNGを使用する際にもカラーキーは有効なので注意が必要です。


●テクスチャ作成時の注意事項

等倍表示の素材(背景画像やフォント画像など)は問題ありませんが

拡大縮小・回転・バイリニアONの場合、隣接画像のゴミ混入を防ぐ為

各素材の上下左右に「1ドット」の余白を開けておく事をオススメします。

(バイリニアOFFでも拡大縮小・回転時に混入する恐れがあります)

●パターンリスト

「スプライト=16の倍数」という先入観から

16の倍数でパターン矩形を登録しがちですが、手入力の場合

(2の乗数のテクスチャをフル活用できないデメリットはありますが)

10の倍数で登録した方が分かりやすく、管理が楽です。

※個人の感想なので、やりやすい方法で良いと思います


●半透明素材の表示

半透明を使用した素材を描画する場合

スクリプト「描画.描画形式」で

「描画ファンクション」を「半透明」に設定する必要があります。

●加算素材の表示

加算を使用した素材を描画する場合

スクリプト「描画.描画形式」で

「描画ファンクション」を「加算」に設定する必要があります。

※StgBuilderで加算画像を作成する際は、透明=黒として素材を作成します。


●タイリング素材の作成方法

元のテクスチャサイズより大きなサイズのパターンを登録

スクリプト「描画.描画形式」で

「テクスチャモード」を「リピート」や「ミラー」に設定する事で

タイリング表示が可能になります。

●タイリング素材の応用例

「テクスチャモード(ミラー)」時、素材が反転表示されるのを利用して

左右対称・上下対称の素材を作成時、テクスチャ容量や工数の削減が可能です。

●バイリニア拡大表示時、輪郭色を正常に表示する方法

バイリニア素材を拡大時、輪郭色が白く表示されてしまう事がありますが

「LinearFilterTool」(リニアフィルタ 透明境界線の色漏れ防止ツール)

を使用してPNG画像を加工する事で、輪郭色を正常に表示する事ができます。

●キャラクタの色を変更する

スクリプト「描画.カラー」の「頂点カラー」「オフセットカラー」

を使用して、色を変更する事ができます。

「頂点カラー」は「乗算」(色を暗くする)

「オフセットカラー」は「加算」(色を明るくする)の効果があります。

●色を直感的に指定する

FFFFFF=白 888888=灰色 000000=黒

等の数値は「16進数カラーコード(HEX)」と呼ばれるものです。

私はクリップスタジオの「色の設定」を使用してカラーコードを取得しています。

WEBで該当のサービスを利用する方法もあります。

例)カラーピッカー 色の大辞典

●キャラクタの透明度を調整する

スクリプト「描画.描画形式」で「半透明」に設定時

「描画.カラー」の「頂点カラー」のα値を使用して

透明度を調整する事ができます。

「FF」(不透明)~「00」(透明)

「描画.描画形式」が「加算」の場合、「頂点カラー」のカラー値を利用して

「加算」の透明度を(疑似的に)調整する事ができます。

「FFFFFF」(白=不透明)~「000000」(黒=透明)


(無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示) (無料記事)StgBuilderの使い方-3(スプライトと表示)

Related Creators