2020年1月15日Unityのボタン画像を変更することで見た目をワンランクアップさせてみました。<この記事はこんな人向け>✔Unityでゲームやアプリをつくりたい✔ボタンの画像変更方法がわからない✔UnityのSpriteEditorの使い方がわからないUnityでゲームやアプリを作っているとどうしても気になってくるのは、ボタンをはじめとするUIの見た目なのではないでしょうか。Unityには各UI要素に対してデフォルトでフレーム用画像が設定されているので、開発は問題なくできます。デフォルトのUISprite↓しかし、アプリやゲームをリリースしたいときには、ボタンの見た目を変えるのは必須です。オリジナリティを出すためにも...そこで本記事を読んで、ボタン用画像を用意すればどのくらい見た目が変わるのかを知っていただければと思います。今回はButtonの画像とフォントを変更していきます。Buttonの画像については、自作フレーム画像を作成し、SpriteEditorでUI用Spriteを作成して使いまわせるようにします。今回はButtonの画像とフォントを変更していきます。Button用画像の作成UnityのButtonアイコンとして使える画像を自作してきました。自作とは言ってもごく簡単なものです。Button用デフォルト画像から黒フチを取り除いて、画像サイズを倍の64×64のものを用意しました。※フチなしの四角形の画像です。ここでは見えないので周りを黒く塗りつぶしています。Button用フォントの収集Unityのデフォルトでは、「Arial」というフォントが使われています。これでもいいのですが、オリジナリティを出すために、自分のつくりたいもののデザインに合うフォントを探しましょう。フリーフォントは調べればたくさんでてきます。商用利用可のもたくさんあります。今回は、下記サイトから、「コーポレート・ロゴ(ラウンド)」フォントをダウンロードしました。かわいい「コーポレート・ロゴ(ラウンド)」フォント無料ダウンロードフォントについてはフリーフォントを探して導入するのみなので詳しい説明はないです。拡張子が.tifとなっているものがフォントのファイルになっています。SpriteEditorでUI用Spriteの作成ボタンの形を引き延ばして長方形にしても使えるように、SpriteEditorでSprite化していきましょう。UI)へ変更しApply。」とポップアップウィンドウが表示されます。Editorを開き、以下のようにBorderが格子状になるよう設定。Borderを格子状になるように設定することで、画像を9分割することができます。することで、各辺の中間が伸びるようになるため、ボタンの大きさを自由自在に変えても1つの画像で使いまわすことが可能になります。スポンサーリンクButtonの見た目を変えてクオリティアップ!!【前後比較】さて、ここまでで準備は完了です。用意した画像とフォントをButtonに適用してみます。画像の差し替えはButtonのImageコンポーネントから可能です。TextゲームオブジェクトのTextコンポーネントで行います。用意したフォントに差し替えるだけで完了です。以上でButtonの見た目を変更できたかと思います。今回はこんな感じになりました。主観的ですがよくなってると思う。いうと、フレーム画像なんかで調べるとわざわざ画像を自作せずに無料で使えるテクスチャがたくさん見つかります。最後まで読んでいただきありがとうございました。管理人プロフィール当サイト(your-3d.com)の管理人のゆあーさんと申します。このサイトでは、私がZBrushやunityなどで調べたことを共有出来たらいいなと思い開設しました。読んでくださった皆様のお役に立てたら幸いです。https://your-3d.booth.pm/プロフィールページ作りました。3d管理人のゆあーさんです。生まれは北国、現在は東京に住んでます。趣味はプログラミング、モデリング、あとブログです。このブログに書いている内容ですね。ゲームもたまにしてます。