トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

日本地図を使ったアプリを作りたい!!【Part2】canvasのピンチ操作

いったことのある県をタップすると色が変わるだけのアプリづくり。

bibinbaleo.hatenablog.com

前回、素材を探して、県をひとつづつ切り分けてボタンにする作業を途中までしました。

ここ数日47都道府県の素材の切り出しをせっせとやって、読み込みまで完了しました。

f:id:bibinbaleo:20190606211352p:plain

Canvasをピンチで拡大

次はスマホのピンチ操作で画面を拡大します。

ググってあったコードを3つぐらい試したけどどれも反応しない・・・

unity3d.com

qiita.com

なんでかと思ったら、拡大したいのってCanvas以下のもので、カメラにべったりくっついているから.

解決方法1

 Canvas以下のものをゲームオブジェクトの子にしてゲームオブジェクトが拡大するようにする。

f:id:bibinbaleo:20190605210307p:plain

ゲームオブジェクトにして、こちらの記事の通りにしたらできた!

qiita.com

ただ、画面中央で一か所が拡大されるだけなので、拡大を始めた場所で拡大するか、拡大した状態で画面を動かせるようにする必要がある。

解決方法2

・Cameraを操作するならCanvasをワールドスペースにする。

こちらの記事の方法が良さそう。

qiita.com

Canvasをワールドスペースにしました。

f:id:bibinbaleo:20190605213301p:plain

カメラとCanvasを頑張って一致させる。

f:id:bibinbaleo:20190605213303p:plain

そして上の記事のスクリプトを貼って、インスペクタにいい感じに値を設定したらできました!!!

f:id:bibinbaleo:20190605212908p:plain

カメラはこんな感じ。私の場合128でちょうどいい。

f:id:bibinbaleo:20190605212904p:plain

 インスペクタをいじるだけでなく、Start()のところの9も変えないといけません。

 

これぐらいのズームができます。

f:id:bibinbaleo:20190606211303p:plain

県名追加

気づいちゃったんですけど、このデザインの日本地図だと都道府県全部覚えている人でもどれが何県かわからない。

都道府県覚えてない人ならなおさらわからない。県名入れよう

 何も見ないで描いた結果

f:id:bibinbaleo:20190605220226p:plain

 正解

f:id:bibinbaleo:20190605220415p:plain

びっくりするぐらい間違ってて泣いた。九州以外全部の地方で何かしら間違ってる。お受験・・・

徳島と宮城は完全に忘れてたし、いろいろ順番が違うとこが多すぎた。

 

そしてうすうす気づいていたけど、この地図福井がない。京都と一緒になってる?

修正しなきゃ・・・と思ったら三重もないな!!

ちょっとさすがにきつい・・・

f:id:bibinbaleo:20190606210524p:plain

頑張って分けました。

ついでにフォントを薄くしました。

次回

・アプリ閉じても情報保持

・インフォメーションボタンを作って、プライバシーポリシーやお借りした素材情報を乗せる画面を作る

・無駄にNightモード