ランスタのブログ

気になった事の実験や検証、Cinema4Dでのモデリングや使い方、Unityのゲームアプリ制作に関する記事を書いています。

【スポンサーリンク】

【Unity】ボタンを使用してオブジェクトを移動させる方法【初心者】

【スポンサーリンク】

ボタンを生成してオブジェクトを前後左右に移動させる方法

 
新規でプロジェクトを作成して下さい。
 
まずヒエラルキーにあるMain Cameraの位置を変えます。
 
Main Cameraオブジェクトをクリックして右側に表示されるインスペクターからPositonXを0、PositionYを4、PositionZを-10にします。
 
次にRotationXを10、RotationYを0,RotationZを0にします。
これで斜めからの視点になりました。
 
メニューからGameObject→3D Object→Cubeを作成します。
次にボタンを生成します。
 
メニューからGameObject→UI→Buttonをクリックしてボタンを生成します。
するとシーンビューでは無く、ゲームビューの方の左下辺りに「Button」と名前が着いた物が生成されています。

f:id:Lanstar:20170528133634p:plain

 
まだこれだけでは何もオブジェクトは反応しませんが、とりあえず再生ボタンを押してゲームビューにある左下のButtonと書かれたボタンを長押しでクリックしてみて下さい。
 
クリックすると若干色が暗くなり、ボタンとして反応している事は分かりました。
再生ボタンを終了して、シーンビューに戻って下さい。
 
ヒエラルキーを確認してみると、Canvasの下の階層にButton、その下にTextとなっており、他にEventSystemがボタン以外に生成されています。
 
これらはとりあえず全て削除しないようにして下さい。
 
EventSystemはボタンを使う際に必須なオブジェクトですので消さないで下さい。
 
これが無い場合、オブジェクトにボタンとして使用するスクリプトを着けたとしても、何の反応も無いので注意!(スクリプトの文が正しかろうが反応しません)
 
ヒエラルキーにあるButtonをクリックして右側に表示されたインスペクターから名前を変えます。
 
右側に表示された情報の一番上部分を見て下さい。
 
現在は「Button」と言う名前なので、これを「forward」に変更して下さい。
名前が変更できたらヒエラルキーから名前を確認して下さい。

f:id:Lanstar:20170528133659p:plain

 
次はボタンの位置を変更します。
 
名前を変更したすぐ下にRect Transformと言う項目があります。
 
これのPosX、PosY、PosZと書かれた値を変更する事で移動出来ます。
 
この右下にあるボタンを中央に移動させたいのでPosX、PosY、PosZの値を全て0にして下さい。

f:id:Lanstar:20170528133723p:plain

 
次に、ヒエラルキーにある「forward」オブジェクトの下の階層にあるTextをクリックしてゲームビューに書かれていた「Button」の名前を変更します。
 
右側のインスペクターに表示された中間あたりを見てみると、Text (Script)と書かれた物があります。
 
これでゲームビューに表示されていたボタンの名前を変更させる事が出来ます。
 
「Button」と書かれているので、これを「forward」に変更します。
 
変更したらゲームビューを確認して名前が「forward」になっているか見て下さい。
 
次にヒエラルキーのforwardオブジェクトを左クリックして選択した後に、右クリックをして下さい。
 
右クリックすると、Deplicateと言う項目があります。
 
これは選択しているオブジェクトを複製させる物です。
 
この「forward」オブジェクトを後3回複製させ、ヒエラルキー上に「forward」オブジェクトが4つある状態にして下さい。
 
以下のスクリーンショットのようになります。

f:id:Lanstar:20170528133736p:plain

 
3つ複製した物の名前と位置、ボタン名をそれぞれ変更します。
 
1つ目は「back」と言う名前に変更して、位置をPosXを0、PosYを-50、PosZを0にして下さい。
 
そして下の階層のTextをクリックして、ButtonのTextを「back」と言う名前にして下さい。
 
2つ目は「right」と言う名前に変更して、位置をPosXを180、PosYを-25、PosZを0にして下さい。
 
そして下の階層のTextをクリックして、ButtonのTextを「right」と言う名前にして下さい。
 
3つ目は「left」と言う名前に変更して、位置をPosXを-180、PosYを-25、PosZを0にして下さい。
 
そして下の階層のTextをクリックして、ButtonのTextを「left」と言う名前にして下さい。
 
そうすると以下のヒエラルキーは以下のようになります。

f:id:Lanstar:20170528133757p:plain

 
ゲームビューを確認すると大体こうなります。

f:id:Lanstar:20170528133806p:plain

 
次にC#スクリプトを作成します。
 
ProjectからCreateボタンをクリックして、C# Scriptを選択して生成して下さい。
 
生成したC# Scriptの名前はCubeにします。
 
そしてダブルクリックしてMonoDevelopを開きます。
 
ボタンでCubeを移動させるコードを書きます。
 
以下にあるコードを付け足して下さい。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
using UnityEngine;
using System.Collections;
public class Cube : MonoBehaviour {
bool forwardmove;
bool backmove;
bool rightmove;
bool leftmove;
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
if(forwardmove == true){
transform.position += new Vector3(0,0,1 * Time.deltaTime);
}
if(backmove == true){
transform.position += new Vector3(0,0,-1 * Time.deltaTime);
}
if(rightmove == true){
transform.position += new Vector3(1 * Time.deltaTime,0,0);
}
if(leftmove == true){
transform.position += new Vector3(-1 * Time.deltaTime,0,0);
}
}
public void forwardButtonDown(){
forwardmove = true;
}
public void forwardButtonUp(){
forwardmove = false;
}
public void backButtonDown(){
backmove = true;
}
public void backButtonUp(){
backmove = false;
}
public void rightButtonDown(){
rightmove = true;
}
public void rightButtonUp(){
rightmove = false;
}
public void leftButtonDown(){
leftmove = true;
}
public void leftButtonUp(){
leftmove = false;
}
}
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
 
記入したらビルドしてUnity側に戻って下さい。
 
エラーが出た場合はどこかローマ字、スペルが間違っているので確認して下さい。(記入漏れも注意して下さい)
 
そしてCubeオブジェクトにCubeスクリプトをドラッグ&ドロップして下さい。
 
これでCubeオブジェクトにスクリプトが着きましたが、これだけでは再生ボタンを押してforwardボタンなどを押しても作動しません。
 
forwardオブジェクトをクリックして下さい。
 
その後、メニューからComponent→Event→Event Triggerを選択してforwardオブジェクトの情報に付けます。

f:id:Lanstar:20170528133834p:plain

 
そしてEvent TriggerにあるAdd New Event Typeのボタンをクリックして下さい。
 
いろいろと項目がありますが、一つ目はボタンを押した(ダウンした時)に移動を始めたいので、上から3番目にある「Pointer Down」を選択します。
 
そしたら右にある+のボタンがあるはずですので、クリックして追加します。
 
次にEvent Trigger内にある追加して出来たRuntime Onlyの下にあるNone (Object)と書かれた部分に、ヒエラルキーにあるCubeオブジェクトをドラッグ&ドロップして付けて下さい。
 
そして右にあるNo Functionと書かれた項目をクリックして一番下にあるCubeにカーソルを持って行き右にさらに項目が表示されるので、その中にある「forwardButtonDown()」を選択して下さい。
 
Event Triggerの下にあるAdd New Event Typeを再度押して下さい。
 
次はforwardボタンを離すと、移動が止まるようにしたいので「Pointer Up」をクリックします。
 
そしてPointer Up(BaseEventData)と書かれた項目の右側のボタンは「Cube.forwardButtonDown」と書かれているので、これをクリックしてCubeにカーソルを合わせ「forwardButtonUp()」を選択します。
 
以下のような設定になります。

f:id:Lanstar:20170528133851p:plain

 
これで再生ボタンをクリックして、forwardボタンをクリックする事によって、移動する事が出来ます。
 
離すと移動は止まります。
 
これでforwardボタンは完成しました!
 
ですが他のボタンの設定はまだなので、反応しませんね。
残りのボタンを設定してみましょう。
 
手順はforwardとほとんど同じ感じになります。
backオブジェクトをクリックして下さい。
 
その後、メニューからComponent→Event→Event Triggerを選択してbackオブジェクトの情報に付けます。
 
そしてEvent TriggerにあるAdd New Event Typeのボタンをクリックして下さい。
上から3番目にある「Pointer Down」を選択します。
 
そしたら右にある+のボタンがあるはずですので、クリックして追加します。
次にEvent Trigger内にある追加して出来たRuntime Onlyの下にあるNone (Object)と書かれた部分に、ヒエラルキーにあるCubeオブジェクトをドラッグ&ドロップして付けて下さい。
 
そして右にあるNo Functionと書かれた項目をクリックして一番下にあるCubeにカーソルを持って行き右にさらに項目が表示されるので、その中にある「backButtonDown()」を選択して下さい。
 
Event Triggerの下にあるAdd New Event Typeを再度押して下さい。
次はbackボタンを離すと、移動が止まるようにしたいので「Pointer Up」をクリックします。
 
そしてPointer Up(BaseEventData)と書かれた項目の右側のボタンは「Cube.backButtonDown」と書かれているので、これをクリックしてCubeにカーソルを合わせ「backButtonUp()」を選択します。
 
これでbackボタンの設定は完了です。
 
再生ボタンを押して反応するか確認してみて下さい。
 
次はrightボタンの設定です。
rightオブジェクトをクリックして下さい。
 
その後、メニューからComponent→Event→Event Triggerを選択してrightオブジェクトの情報に付けます。
 
そしてEvent TriggerにあるAdd New Event Typeのボタンをクリックして下さい。
上から3番目にある「Pointer Down」を選択します。
 
そしたら右にある+のボタンがあるので、クリックして追加します。
 
次にEvent Trigger内にある追加して出来たRuntime Onlyの下にあるNone (Object)と書かれた部分に、ヒエラルキーにあるCubeオブジェクトをドラッグ&ドロップして付けて下さい。
 
そして右にあるNo Functionと書かれた項目をクリックして一番下にあるCubeにカーソルを持って行き右にさらに項目が表示されるので、その中にある「rightButtonDown()」を選択して下さい。
 
Event Triggerの下にあるAdd New Event Typeを再度押して下さい。
次はrightボタンを離すと、移動が止まるようにしたいので「Pointer Up」をクリックします。
 
そしてPointer Up(BaseEventData)と書かれた項目の右側のボタンは「Cube.rightButtonDown」と書かれているので、これをクリックしてCubeにカーソルを合わせ「rightButtonUp()」を選択します。
 
これでrightボタンの設定は完了です。
再生ボタンを押して反応するか確認してみて下さい。
 
ラストはleftボタンの設定です。
leftオブジェクトをクリックして下さい。
 
その後、メニューからComponent→Event→Event Triggerを選択してleftオブジェクトの情報に付けます。
そしてEvent TriggerにあるAdd New Event Typeのボタンをクリックして下さい。
 
上から3番目にある「Pointer Down」を選択します。
そしたら右にある+のボタンがあるので、クリックして追加します。
 
次にEvent Trigger内にある追加して出来たRuntime Onlyの下にあるNone (Object)と書かれた部分に、ヒエラルキーにあるCubeオブジェクトをドラッグ&ドロップして付けて下さい。
 
そして右にあるNo Functionと書かれた項目をクリックして一番下にあるCubeにカーソルを持って行き右にさらに項目が表示されるので、その中にある「leftButtonDown()」を選択して下さい。
 
Event Triggerの下にあるAdd New Event Typeを再度押して下さい。
次はleftボタンを離すと、移動が止まるようにしたいので「Pointer Up」をクリックします。
 
そしてPointer Up(BaseEventData)と書かれた項目の右側のボタンは「Cube.leftButtonDown」と書かれているので、これをクリックしてCubeにカーソルを合わせ「leftButtonUp()」を選択します。
 
これでleftボタンの設定は完了です。
 
全てのボタンの設定が出来ました!
 
再生ボタンを押して反応するか全て確認してみて下さい。
 
お疲れ様でしたー!
分からなくなったらまた是非参照して下さい!
 
 

【スポンサーリンク】