#18 グラフィックを変更する

2Dシューティング
このブログは、趣味でプログラミングを勉強中の筆者が、実験を繰り返しながら、WordPressの使い方の練習も兼ねて、備忘録のように記事を残していくものです。Unityのバージョンは6000.0.32f1です。

これまでプレイヤーや敵キャラクターなどのキャラクターは▲で表示してきましたが、そろそろグラフィックを変えてもいいかなと思います。

今回のゴール

自機や敵機のグラフィックを変更する。

テクスチャーを作る

まずは、画像データを作ります。私には絵心がないので、ChatGPTに2Dシューティングに使えるキャラクターを作成してもらって、少し修正しました。それがこちらの画像です。

テクスチャーをインポートする

AssetsフォルダにTextureフォルダを作成して、その中に画像ファイルを入れます。png形式で背景は透過色に設定しています。今回はCharaSheet.pngという名前を付けました。それを選択して、インスペクターでインポート設定を調整します。

テクスチャタイプはスプライト(2DとUI)。スプライトモードは、一つのファイルに複数のキャラクターを詰め込んでいるので複数に設定。単位ごとのピクセル数は、一つのキャラのサイズが横16なので、16にしました。最後に一番下の「適用する」をクリックします。

スプライトを切り分ける

次にインスペクターで「スピライトエディターを開く」を押し、スプライトエディタを起動します。

すでにキャラクターの周りが白い枠で囲まれています。これは、ある程度自動的にスプライトエディタがキャラクターの境目を識別して切り分けてくれているのです。しかし、自機は3つのパターンが一つのスプライトとして認識されてしまっているなど、上手くいっていないところもあります。そこで、切り分けの修正をします。

自機をクリックすると枠が変形可能になります。

この状態でサイズを修正します。

残りの2つはスプライトとして認識されていませんので、新しい枠を作成します。空いているところを適当にドラッグすると新しい枠が作成されます。

出来た枠の空いているところをドラッグすると移動させることが出来ますので、2つめの自機に移動させます。ドラッグで難しい場合は右下のウインドウに数値を入力して調整することも出来ます。

Wが幅(横)でHが高さ(縦)です。Xは横の座標で数値が大きいほど右に移動します。Yは縦の座標で数値が大きいほど上に移動します。

2つめが出来ました。同じように3つめの枠も作ります。

この要領で全てのキャラクターを切り分けます。

プレハブの画像を変更する

PrefabフォルダのEnemy01を選択し、スプライトのTriangleを削除します。

次に、スプライトの欄の右端の▼をクリックするとスプライトが選べるようになっているので、そこから好きな画像を選びます。今回はこの画像を選びました。

Enemy01の画像が変更されました。

ボックスコライダーに付け替える

ポリゴンコライダーを削除して、ボックスコライダーに付け替えます。さらに、コライダーの範囲を調整します。

同じようにして、他のプレハブの画像やコライダーを設定していきます。

画像が変わるだけで、イメージも変わりますね。

今回はここまでです。お疲れ様でした。

コメント

タイトルとURLをコピーしました