日本地図を使ったアプリを作りたい！！【Part1】

スケールの大きなアプリを作りたくなりました。

日本地図！！

行ったことある県をタッチしたら色が変わるだけのアプリを作ってみたいと思います。

都道府県素材探し

TopeconHeroesさんの影絵サイトが良さそうでした！尊敬する

kage-design.com

と思ったらAi形式でした・・・イラレ消えたんだよね・・・

www.ac-illust.com

結局よさげなのなかったのでとりあえずこのpngを入れました。

www.silhouette-illust.com

黒だとUnityのspriteカラーを変えたときに色が変わらなかったので、paint3Dで白に塗りつぶしました。

すると色を変えられる！

このpng画像いじって47個分png作ったらやりたいことできそうだな。

こんな感じでキャンバスの大きさは全国都道府県のまま、県だけを残す。そしたら白い部分だけ色を変えられる。

ほかの県を消すのは消しゴムツールで地道にやるしかない。塗りつぶしは簡単だったのに＞＜

それかこちらの画像のように文字で県名を入れてそれを押すのでもいい。

www.ac-illust.com

スクリプトでimageの色を変える

1回クリックしたら緑、もう一回クリックしたら白に戻る。

こちらがめちゃくちゃ参考になった。

teratail.com

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class touch : MonoBehaviour
{
    public Image image;
    [SerializeField]
    Color btnColor1 = Color.red;
    [SerializeField]
    Color btnColor2 = Color.blue;
    bool btnChangeFlag = true;

    public void onButton()
    {
        btnChangeFlag = !btnChangeFlag;
        image.color= btnChangeFlag ? btnColor1 : btnColor2;
    }
}

image.color= btnChangeFlag ? btnColor1 : btnColor2;

っていうの使ったことない。調べたら条件演算子というらしい。

trueの時は:の左側、falseの時は右側が入る。

docs.microsoft.com

これでスイッチ切り替え処理書けるのか！！

いままで適当な変数に1,0を入れて判断するみたいなくそめんどくさいスクリプト書いてた！！！

また一つ成長したな。

県の形をボタンにするには

県を押したらその県の色が変わるようにします。

タッチ判定はspriteの色がついている部分だけにしたいのですが、デフォルトだとspriteの形は四角になります。

調べたらスクリプト書いたりしないと、spriteの色がついているところだけに反応するボタンは作れないらしい！！

qiita.com

ええー。しかもめっちゃ大変そう！

普通の四角のボタンにする

あきらめて四角いボタン判定にします。

構造はimageの下にbuttonコンポーネントを置きます。

上のimageにそれぞれの県のspriteをセット。RaycastTargetは外さないとほかのボタンに干渉する。

下のボタンにさっきのスクリプをセット。Imageは上のimage

ボタンの範囲は県に合わせる。

多少当たり判定がかぶるのは仕方ない・・・

これでやりたいことできた！！！

絶対もっと簡単な方法あると思うけど！！

そもそも県を切り出すツールにpaint3Dを使ってるのが間違っているのでは！！イラレ使いたい・・・

ビルド

新しいスマホにCtoCのケーブルでPCとつなげてbuild&Runしようとしたら、デバイスが認識されていないって出た。

スマホは開発者モードにしたんだけどな～

と思ったら、開発者向けオプションからUSBでバッグを有効にしないといけなかった！

Pixel3aでは開発者向けオプションはシステム＞詳細情報の中にあった。

qiita.com

最後に

とりあえずやりたいことの下地はできた。

あとは自分で頑張って47個のspriteを何かしらの方法で用意するのみ・・・

あ、あと今のままじゃボタンが押しにくいので、拡大・縮小できるようにしよう。