Unity事例ノート

UNITY

クリックで画像を拡大する

画像データをクリックすると、ゆっくり拡大する動きをつけてみましょう。

写真をクリックすれば、約2倍の大きさまで拡大していきます。

関連記事:
RectTransformスクリプトリファレンス(Unity公式)
画像をスクリプトで動かす
画像をクリックしてURLを開く
画像(UI.Image)の設定項目

画像のインポート

UI > 画像 からImageオブジェクトを作成します。

Imageエリアが矩形で作成されるので、これを中央に配置します。

画像をインポートします。

Assetsの中で右クリック > 新しいアセットをインポート

テクスチャタイプを「スプライト(2DとUI)」に変更します。

「インポート設定が適用されていません」というダイアログは、適用するを選択します。

Imageを選択し、ソース画像からインポート画像を選択し、アスペクト比を保存にチェックを入れます。

画像を拡大するスクリプト

ClickScale.csを作成して、Imageに追加します。

ClickScale.csを記述しましょう。

RectTransformの幅と高さは、sizeDeltaを使用します。

100から始まって200になるまで、0.1秒おきに10ずつ拡大していきます。

Event Triggerの設定

続いて、スクリプトを実行するためのアクションをつけていきましょう。

Imageを選択し、コンポーネントを追加 > イベント > イベントトリガー の順に選択します。

EventTriggerの新しいイベントタイプを追加をクリック。

クリックしたタイミングなので、「Pointer Click」を選択しました。

次のような手順で選択して、ScaleUp()メソッドを指定します。

プレイして動きを確認しましょう。

関連記事:
RectTransformスクリプトリファレンス(Unity公式)
画像をスクリプトで動かす
画像をクリックしてURLを開く
画像(UI.Image)の設定項目

SCHOOL教室案内