コガネブログ

平日更新を目標にUnityやC#、Visual Studioなどのゲーム開発アレコレを書いていきます

【Unity】【初心者向け】コードを書かずに 2D のワールドマップの操作を実装する方法

手順

この記事では uGUI で上記のような 2D のワールドマップの操作を
コードを書かずに実装する方法を紹介していきます

手順

f:id:baba_s:20180317162541p:plain

Unity プロジェクトにワールドマップの背景画像を追加しておきます

f:id:baba_s:20180317162616p:plain

Hierarchy の「Create>UI>Scroll View」を選択します

f:id:baba_s:20180317162828p:plain

作成した Scroll View を選択して
RectTransform のパラメータを上記のように設定します

f:id:baba_s:20180317164434p:plain

次に、「Movement Type」を「Clamped」に変更します

f:id:baba_s:20180317162946p:plain

さらに、「Horizontal Scrollbar」と「Vertical Scrollbar」の項目を選択して
Delete キーを押して

f:id:baba_s:20180317163058p:plain

それぞれ「None (Scrollbar)」の状態にします

f:id:baba_s:20180317164252p:plain

そして、「Source Image」の欄を選択して Delete キーを押して

f:id:baba_s:20180317164132p:plain

「None (Sprite)」の状態にします

f:id:baba_s:20180317163207p:plain

Hierarchy で「Scrollbar Horizontal」と「Scrollbar Vertical」を選択して
Delete キーを押して削除します

f:id:baba_s:20180317163346p:plain

「Viewport」を選択して RectTransform のパラメータを上記のように設定します

f:id:baba_s:20180317164009p:plain

さらに、「Viewport」の「Source Image」の欄を選択して
Delete キーを押して

f:id:baba_s:20180317164132p:plain

「None (Sprite)」の状態にします

f:id:baba_s:20180317163856p:plain

「Content」を選択して RectTransform のパラメータを上記のように設定します
(「Width」と「Height」には、ワールドマップの幅と高さを設定します)

f:id:baba_s:20180317163537p:plain

「Content」を右クリックして「Create>UI>Raw Image」を選択します

f:id:baba_s:20180317163658p:plain

作成した「Raw Image」を選択して
「Texture」の欄にワールドマップの背景画像を設定して、
「Width」と「Height」に、それぞれワールドマップの幅と高さを設定します

これで Unity を再生して、ワールドマップの背景をドラッグすると
操作できることが確認できます

関連記事