この記事では、PhotoScape X という無料のソフトを使って、ボタンの画像の作り方を解説します。無料なのですが非常に高機能です。ぜひ使い方をマスターしましょう。画像編集ソフトとして利用できるので、ゲームを作らないという人にもおすすめです。
目次
PhotoScape X のダウンロード
PhotoScape X でボタンの画像を作成する
STEP１：PhotoScape X を起動する
Windows の場合、検索窓に「PhotoScape」と入力すると、「PhotoScape X」が表示されるのでこれをクリックします。デスクトップにアプリのアイコンがある場合は、デスクトップから起動することもできます。
STEP２：画像のサイズなどを設定する
① PhotoScape X が起動すると下記のようなメニューバーが表示されます。この中から「写真編集」を選択します。
② 画面の中央に、下図のような表示が出てきます。「新規」をクリックします。
③ 画像のサイズはUnity のゲームの解像度によるのですが、よく分からない場合は 300 * 300 で作成してください。また、背景は「透明」を選択してください。
STEP３：PhotoScape X でボタンを作成する
① 下図のツールバーの中の「挿入」を選択します。
② 内側と外側の二色からなるボタンを作成します。下図のように図形の中身が塗りつぶされているものを選択します。
③ 角が丸い三角形のボタンを作成します。赤枠はボタンの内側の色、緑の枠はボタンの外側の色を調整できます。好みのボタンになるように調整してみてください。
今回作成したボタンです。もしよかったらご自由にお使いください。
STEP４：テキストを追加する
最後に、ボタンにテキストを追加する方法を説明します。方法は２パターンあります。一つ目は、「PhotoScape X で画像の一部としてテキストを追加する方法」、二つ目は、「Unity 側で画像の上にテキストを追加する方法」です。後者は、テキストの中身を動的に変更できるので、前者より汎用的な方法となります（プログラムからも変更できます）。
PhotoScape X で画像の一部としてテキストを追加する方法
① ツールバーの中にある「テキスト」をクリックします。
② 今回はテキストを「リスタート」にしました。色やフォントなどが変更できるので好みのテキストにしてみてください。
テキストを画像として埋め込むと、使える場所が限られてしまいますね。ただ見た目は細かく調整できるので、ここぞという場面で使ってみるといいかもしれません。
Unity 側で画像の上にテキストを追加する方法
Unity 側でテキストを追加する場合、下図のようにヒエラルキーにボタンを追加します。追加すると、Canvas と Text も一緒に作成されます。
Button を選択して、「ソース画像」をプロジェクトからドラッグアンドドロップします。
テキストの内容を修正します。
以上で、PhotoScape X を使った画像（ボタン）の作り方の解説を終わります。