Unity入門講座|キーボードで画像を動かす方法を学ぼう

Unity
うさタブ
うさタブ

今回はUnityのキーボードでキャラクター画像を動かすについて勉強するッピ!

うさタブ
うさタブ

何かキーを押すと画像がうごく仕組みをつくるッピ!

ユウキ
ユウキ

キーボードとキャラクター画像の移動~

アイカ
アイカ

まだ習ったことないわ!

うさタブ
うさタブ

キーボードの扱いとオブジェクト画像の移動はUnityの基礎基礎ッピ!
絶対覚えておくと良いッピ!

うさタブ
うさタブ

これからこのキー入力とキャラクター画像移動を一緒に勉強して行くッピよ~

キーボードでオブジェクト画像を移動する方法を学ぼう

必要なもの

うさタブ
うさタブ

まずは必要なものを用意するッピ!

  • Unity
  • Windows または Mac のパソコン

が必要ッピよ~!

うさタブ
うさタブ

まだ Unity をダウンロードしてない人は

↓ の記事を参考に必要なものをインストールするといいッピ!

Unityを起動する

うさタブ
うさタブ

まずはゲーム作成画面をつくってみるッピ!

Unity-Hubを立ち上げて、

2Dまたは3Dでプロジェクトをつくるッピよ~

ユウキ
ユウキ

できた!

うさタブ
うさタブ

いい感じッピ!

画像ファイルを用意しよう!

うさタブ
うさタブ

それじゃあ、さっそく画像をUnityで表示するっぴ!

うさタブ
うさタブ

・・・その前に、移動する画像が必要だっぴよ~

必要な画像

キャラクター
背景

うさタブ
うさタブ

今回は特別に「うさタブ」と「背景」画像を用意したッピ!

この2つの画像を、右クリックで保存するッピ!

ユウキ
ユウキ

オッケー!

アイカ
アイカ

できたわ!

画像をAssetsに登録しよう

うさタブ
うさタブ

準備できたッピか?
それなら画像をAssetsに登録するッピ!

うさタブ
うさタブ

使いたい画像を、ドラッグ&ドロップでアセットの部分に登録するッピ!

アイカ
アイカ

ドラッグ&ドロップってなんだったかしら??

ユウキ
ユウキ

たしか、

ファイルをマウスで選択したまま

ファイルを移動する方法をドラッグ&ドロップっていうんじゃなかったかな?

アイカ
アイカ

そうだったわっ!

別のウィンドウからファイルを引っ張ってもってくれば良いのよねっ

うさタブ
うさタブ

いい感じだっぴ!

2人ともよく出来てるッピ♪

画像をシーンに登録する

うさタブ
うさタブ

まずは画像をシーンに登録するッピ!

うさタブ
うさタブ

やり方は

背景画像をドラッグして、ヒエラルキー下のシーンにドロップするッピ!

ユウキ
ユウキ

できたぜ!

アイカ
アイカ

すてきねっ!

うさタブ
うさタブ

よくできてるッピ!

つぎにうさタブの画像もシーンに登録して欲しいんだッピ♪

アイカ
アイカ

こうかしら?

ユウキ
ユウキ

いいかんじだぜアイカちゃん!

キャラクターを全面に配置する

アイカ
アイカ

だけどこれ、うさタブさんのすがたが見えないわ?

ちゃんとシーンに登録したのに・・・

アイカ
アイカ

ホントだ・・・

これじゃあうさタブの画像が移動しても見えないな・・・

アイカ
アイカ

どうすればいいのかしら・・・

うさタブ
うさタブ

安心するッピ♪

うさタブ
うさタブ

キャラクターの画像を洗濯して

レイヤー順序0から1へ変更

をすれば、キャラクターの画像が前面に押し出されるッピ♪

アイカ
アイカ

ほんとだわ!

うさタブさんが出てきた!

うさタブ
うさタブ

この

レイヤー順序の数字が大きいほど、画像が前面に押し出される

ッピ! 覚えておくと良いッピ!

うさタブ
うさタブ

はしっこの

【青い●】

をドラッグして、うさタブの大きさを自由にかえれるッピ♪

ユウキ
ユウキ

おっしゃ!

こんなんでどうだっ

アイカ
アイカ

すごいわユウキくんっ

C#スクリプトを作成する

うさタブ
うさタブ

次からプログラムを組んでいくッピよ~!

うさタブ
うさタブ

まずは画面下のAssetの部分で

右クリック→作成→C#スクリプト

を選択するッピ!

うさタブ
うさタブ

名前を

move

に変更するッピよ~

アイカ
アイカ

できたわ!

ユウキ
ユウキ

さすがだぜアイカちゃん!

プログラムを編集する

うさタブ
うさタブ

できたC#プログラム

ダブルクリックして、スクリプトファイルを開くッピ!

うさタブ
うさタブ

もともと書かれている

プログラムを削除して、新しくプログラムを書いていくッピ~!

ユウキ
ユウキ

消しちゃっていいのか?

うさタブ
うさタブ

大丈夫だッピ~♪

このうさタブに任せるッピ!

using UnityEngine;

public class keyInput : MonoBehaviour
{

    void Update()
    {

    }
}
アイカ
アイカ

こんな感じで良いのかしら?

うさタブ
うさタブ

バッチリッピよ~!
アイカちゃん才能あるッピね♪

うさタブ
うさタブ

ちなみにこのプログラムは

using使います UnityEngineユニティエンジンの機能を;

public呼び出し可能 class クラスです keyInput 名前はkeyInput : MonoBehaviourユニティの親クラスです
{


 
void引数なしプログラム Update() 随時更新します
{
//ここに新しいプログラムを入力する
}

}

という意味になるッピ!

新たにプログラムを書き込む

うさタブ
うさタブ

まずは、classのすぐ下に
新しくプログラムを書いていくッピ!

private float speed = 0.1f;

と書き込むッピよ~

うさタブ
うさタブ

これは

privateここだけのプログラム float 小数点のある変数 speed 名前はスピードです = 0.1fはやさは0.1です;

という意味になるッピ!

うさタブ
うさタブ

数字が大きいほど移動スピードが早くなるッピ!

アイカ
アイカ

そうなのねっ

うさタブ
うさタブ

void Update の中に、新しくプログラムを書いていくッピ!

Vector2 pos = transform.position;

if (Input.GetKey(KeyCode.RightArrow))
 {
  pos.x += speed;
  }
 else if (Input.GetKey(KeyCode.LeftArrow))
  {
   pos.x -= speed;
  }
 else if (Input.GetKey(KeyCode.UpArrow))
  {
   pos.y += speed;
  }
 else if (Input.GetKey(KeyCode.DownArrow))
  {
   pos.y -= speed;
  }

   transform.position = pos;

と書き込むッピよ~

うさタブ
うさタブ

ちなみに最初のプログラムは

Vector22Dゲームの移動変数 pos 名前はpos = transform変形プログラムです.position場所を変えます;

という意味になるッピ!

うさタブ
うさタブ

そのあとのプログラムは

ifもしも (Input.入力があったらGetKey キーボードから(KeyCode.発動条件キーはRightArrow 右キー(→))) {
pos.x画像をヨコ方向 += 右側へ speed 設定した速さで移動; }

という意味になるッピネ!

アイカ
アイカ

この

KeyCode.DownArrow や pos.y -= speed;

はどういう意味になるのかしら?

うさタブ
うさタブ

それは

KeyCode発動条件キーは.DownArrow↓下キー
pos.yタテ方向へ画像を -= 移動動する上へ  speed;設定したスピードで

という意味になるッピネ!

キーコード対応するキー
UpArrow
DownArrow
RightArrow
LeftArrow
キーコードと対応キー
うさタブ
うさタブ

ちなみに

pos.y += speed;

だと、上↑にいくッピ♪

移動のじく動く方向
y (上と下)で↑にいく
で↓にいく
x (右と左)で→にいく
で←にいく
z (3Dのみ/前後)で前にいく
で後にいく
キーコードと対応キー
うさタブ
うさタブ

そのあとのプログラムは

transform変形プログラムです.position場所を変更して = pos新しく決めた場所へ;

という意味になるッピネ!

ユウキ
ユウキ

なるほど、こういう意味だったのか!

using UnityEngine;

public class move : MonoBehaviour
{
    private float speed = 0.1f; //floatは小数点

    void Update()
    {
        Vector2 pos = transform.position;

        if (Input.GetKey(KeyCode.RightArrow))//→キーを押したら
        {
            pos.x += speed;//右に移動
        }
        else if (Input.GetKey(KeyCode.LeftArrow))//←キーを押したら
        {
            pos.x -= speed;//左に移動
        }
        else if (Input.GetKey(KeyCode.UpArrow))//↑キーを押したら
        {
            pos.y += speed;//上に移動
        }
        else if (Input.GetKey(KeyCode.DownArrow))//↓キーを押したら
        {
            pos.y -= speed;//下に移動
        }

        transform.position = pos;
    }
}
うさタブ
うさタブ

プログラムができたら、

ファイル→保存(Ctrl+S)

でセーブするッピよ~

キャラクター画像にプログラムを組み込む

うさタブ
うさタブ

保存したプログラムを、キャラクター画像に組み込んでいくッピ!

うさタブ
うさタブ

[move]C#スクリプトを

うさタブにドラッグ&ドロップするッピ~

うさタブ
うさタブ

右のインスペクターに

move(スクリプト)

があることを確認するッピ!

アイカ
アイカ

これかしら?

ユウキ
ユウキ

できたぜ!

うさタブ
うさタブ

いい感じッピ!

動作確認

うさタブ
うさタブ

最後は動作確認ッピ~!
ゲームの上にある[▶]ボタンを押してゲームを開始するッピ!

うさタブ
うさタブ

キーボードの

を押して、うさタブ画像が移動するか確認するッピ!

ユウキ
ユウキ

できた~!

アイカ
アイカ

やったねユウキくんっ

Unityのキーボード入力について

うさタブ
うさタブ

Unityのキーボード入力には、

Input.GetKeyメッソドを使うッピ!

プログラムメッソド発動条件
Input.GetMouseButtonマウスのボタンが押されていたら発動
Input.GetKeyキーボードのキーが押されたら発動
ユウキ
ユウキ

インプットメッソド~?

って何だ?

うさタブ
うさタブ

インプットメッソドというのは、

マウスキーボードなど、外部から入力があったときに

発動するプログラムをつくるときに使うものッピ!

うさタブ
うさタブ

インプットゲットキーというのは、

キーボードでキーを入力されたあとに発動するプログラムッピ!

アイカ
アイカ

そうなのね!

ユウキ
ユウキ

へ~
だけどさ、うさタブ

using UnityEngine;

public class move : MonoBehaviour
{
    private float speed = 0.1f; //floatは小数点

    void Update()
    {
        Vector2 pos = transform.position;

        if (Input.GetKey(KeyCode.RightArrow))//→キーを押したら
        {
            pos.x += speed;//右に移動
        }
        else if (Input.GetKey(KeyCode.LeftArrow))//←キーを押したら
        {
            pos.x -= speed;//左に移動
        }
        else if (Input.GetKey(KeyCode.UpArrow))//↑キーを押したら
        {
            pos.y += speed;//上に移動
        }
        else if (Input.GetKey(KeyCode.DownArrow))//↓キーを押したら
        {
            pos.y -= speed;//下に移動
        }

        transform.position = pos;
    }
}
ユウキ
ユウキ

この、

Input.GetKey (KeyCode.LeftArrow左←キー)

とかってやつ
左右とかのキー以外にもできないのか?

ユウキ
ユウキ

エンターキーとかスペースキーも使いたいんだけどな・・・

うさタブ
うさタブ

もちろんできるッピね~!

うさタブ
うさタブ

今回使ったエンターキー以外にも、
よく使うキーを紹介するッピ!
これをキーコードというッピ! 覚えておくと良いッピよ~

キーコード対応するキー
Returnエンターキー
Backspaceバックスペースキー
Deleteデリートキー
Tabタブキー
Escapeエスケープキー
Spaceスペースキー
UpArrow
DownArrow
RightArrow
LeftArrow
キーコードと対応キー
数字キーコード対応するキー
Alpha00
Alpha11
Alpha22
Alpha33
Alpha44
Alpha55
Alpha66
Alpha77
Alpha88
Alpha99
キーコードと対応キー
ユウキ
ユウキ

すっげええ!
こんなにあるのか

うさタブ
うさタブ

まだまだあるッピよ~!
詳しくは、Unityのリファレンスをチェックすると良いッピ♪

ユウキ
ユウキ

勉強になったぜ!

アイカ
アイカ

今日もまたひとつ学んだわ!

学習のまとめ
  • 画像素材Assetに登録
  • ヒエラルキー→画像素材をシーンに登録
  • キャラクター画像をレイヤー順序で前面へ
  • Assets→右クリック→C#スクリプト
  • プログラムを作成
  • C#スクリプトキャラクター画像に組み込む
  • テストプレイ

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

うさタブ
うさタブ

UnityはC#を元に作られているッピ!
まだまだ Unity や C#について勉強したい人は↓の記事を参考にするッピ♪

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんな、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんなは、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

Unityプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました