![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はUnityのキーボードでキャラクター画像を動かすについて勉強するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
何かキーを押すと画像がうごく仕組みをつくるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
キーボードとキャラクター画像の移動~?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
まだ習ったことないわ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
キーボードの扱いとオブジェクト画像の移動はUnityの基礎の基礎ッピ!
絶対覚えておくと良いッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これからこのキー入力とキャラクター画像移動を一緒に勉強して行くッピよ~
キーボードでオブジェクト画像を移動する方法を学ぼう
必要なもの
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは必要なものを用意するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2021/09/unity.png)
- Unity
- Windows または Mac のパソコン
が必要ッピよ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まだ Unity をダウンロードしてない人は
↓ の記事を参考に必要なものをインストールするといいッピ!
Unityを起動する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずはゲーム作成画面をつくってみるッピ!
Unity-Hubを立ち上げて、
2Dまたは3Dでプロジェクトをつくるッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity0.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
できた!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
いい感じッピ!
画像ファイルを用意しよう!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それじゃあ、さっそく画像をUnityで表示するっぴ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
・・・その前に、移動する画像が必要だっぴよ~
必要な画像
![](https://janken.asotetu.work/wp-content/uploads/2022/08/うさタブ.png)
![](https://janken.asotetu.work/wp-content/uploads/2022/08/背景-1024x768.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回は特別に「うさタブ」と「背景」画像を用意したッピ!
この2つの画像を、右クリックで保存するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-18_unity.jpg)
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-18_unity2.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
オッケー!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
できたわ!
画像をAssetsに登録しよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
準備できたッピか?
それなら画像をAssetsに登録するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity1-1024x515.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
使いたい画像を、ドラッグ&ドロップでアセットの部分に登録するッピ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_謎.png)
ドラッグ&ドロップってなんだったかしら??
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
たしか、
ファイルをマウスで選択したまま、
ファイルを移動する方法をドラッグ&ドロップっていうんじゃなかったかな?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/08/アイカちゃん_笑顔4.png)
そうだったわっ!
別のウィンドウからファイルを引っ張ってもってくれば良いのよねっ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
いい感じだっぴ!
2人ともよく出来てるッピ♪
画像をシーンに登録する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは画像をシーンに登録するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity2.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
やり方は
背景画像をドラッグして、ヒエラルキー下のシーンにドロップするッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity3.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
できたぜ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
すてきねっ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
よくできてるッピ!
つぎにうさタブの画像もシーンに登録して欲しいんだッピ♪
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity4.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
こうかしら?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
いいかんじだぜアイカちゃん!
キャラクターを全面に配置する
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_謎.png)
だけどこれ、うさタブさんのすがたが見えないわ?
ちゃんとシーンに登録したのに・・・
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/09/ユウキくん_驚困.png)
ホントだ・・・
これじゃあうさタブの画像が移動しても見えないな・・・
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_困1.png)
どうすればいいのかしら・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
安心するッピ♪
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity5.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
キャラクターの画像を洗濯して
レイヤー順序→0から1へ変更
をすれば、キャラクターの画像が前面に押し出されるッピ♪
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity6.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/08/アイカちゃん_笑顔4.png)
ほんとだわ!
うさタブさんが出てきた!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
この
レイヤー順序の数字が大きいほど、画像が前面に押し出される
ッピ! 覚えておくと良いッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
はしっこの
【青い●】
をドラッグして、うさタブの大きさを自由にかえれるッピ♪
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity7.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
おっしゃ!
こんなんでどうだっ
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_笑顔.png)
すごいわユウキくんっ
C#スクリプトを作成する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次からプログラムを組んでいくッピよ~!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity8.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは画面下のAssetの部分で
右クリック→作成→C#スクリプト
を選択するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
名前を
move
に変更するッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity9.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/08/アイカちゃん_笑顔3.png)
できたわ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
さすがだぜアイカちゃん!
プログラムを編集する
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity10.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
できたC#プログラムを
ダブルクリックして、スクリプトファイルを開くッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity11.jpg)
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity12.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
もともと書かれている
プログラムを削除して、新しくプログラムを書いていくッピ~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
消しちゃっていいのか?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
大丈夫だッピ~♪
このうさタブに任せるッピ!
using UnityEngine;
public class keyInput : MonoBehaviour
{
void Update()
{
}
}
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity13.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
こんな感じで良いのかしら?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
バッチリッピよ~!
アイカちゃん才能あるッピね♪
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ちなみにこのプログラムは
using UnityEngine;
public class keyInput : MonoBehaviour
{
void Update()
{
//ここに新しいプログラムを入力する
}
}
という意味になるッピ!
新たにプログラムを書き込む
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity14_1.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは、classのすぐ下に
新しくプログラムを書いていくッピ!
private float speed = 0.1f;
と書き込むッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
private float speed = 0.1f;
という意味になるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
数字が大きいほど移動スピードが早くなるッピ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
そうなのねっ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
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;
と書き込むッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ちなみに最初のプログラムは
Vector2 pos = transform.position;
という意味になるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そのあとのプログラムは
if (Input.GetKey(KeyCode.RightArrow)) {
pos.x += speed; }
という意味になるッピネ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_謎.png)
この
KeyCode.DownArrow や pos.y -= speed;
はどういう意味になるのかしら?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それは
KeyCode.DownArrow
pos.y -= speed;
という意味になるッピネ!
キーコード | 対応するキー |
---|---|
UpArrow | ↑ |
DownArrow | ↓ |
RightArrow | → |
LeftArrow | ← |
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ちなみに
pos.y += speed;
だと、上↑にいくッピ♪
移動のじく | 動く方向 |
---|---|
y (上と下) | +で↑にいく ーで↓にいく |
x (右と左) | +で→にいく ーで←にいく |
z (3Dのみ/前後) | +で前にいく ーで後にいく |
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そのあとのプログラムは
transform.position = pos;
という意味になるッピネ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
なるほど、こういう意味だったのか!
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;
}
}
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity15_1.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
プログラムができたら、
ファイル→保存(Ctrl+S)
でセーブするッピよ~
キャラクター画像にプログラムを組み込む
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
保存したプログラムを、キャラクター画像に組み込んでいくッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity16_2.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
[move]C#スクリプトを
うさタブにドラッグ&ドロップするッピ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
右のインスペクターに
move(スクリプト)
があることを確認するッピ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
これかしら?
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity17.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
できたぜ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
いい感じッピ!
動作確認
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity18.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最後は動作確認ッピ~!
ゲームの上にある[▶]ボタンを押してゲームを開始するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
キーボードの
↑↓←→
を押して、うさタブ画像が移動するか確認するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/08/2022-08-17_unity19_2.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
できた~!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/08/アイカちゃん_笑顔4.png)
やったねユウキくんっ
Unityのキーボード入力について
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
Unityのキーボード入力には、
Input.GetKeyメッソドを使うッピ!
プログラムメッソド | 発動条件 |
---|---|
Input.GetMouseButton | マウスのボタンが押されていたら発動 |
Input.GetKey | キーボードのキーが押されたら発動 |
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
インプットメッソド~?
って何だ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
インプットメッソドというのは、
マウスやキーボードなど、外部から入力があったときに
発動するプログラムをつくるときに使うものッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
インプットゲットキーというのは、
キーボードでキーを入力されたあとに発動するプログラムッピ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
そうなのね!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
へ~
だけどさ、うさタブ
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;
}
}
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
この、
Input.GetKey (KeyCode.LeftArrow)
とかってやつ
左右とかのキー以外にもできないのか?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
エンターキーとかスペースキーも使いたいんだけどな・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
もちろんできるッピね~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回使ったエンターキー以外にも、
よく使うキーを紹介するッピ!
これをキーコードというッピ! 覚えておくと良いッピよ~
キーコード | 対応するキー |
---|---|
Return | エンターキー |
Backspace | バックスペースキー |
Delete | デリートキー |
Tab | タブキー |
Escape | エスケープキー |
Space | スペースキー |
UpArrow | ↑ |
DownArrow | ↓ |
RightArrow | → |
LeftArrow | ← |
数字キーコード | 対応するキー |
---|---|
Alpha0 | 0 |
Alpha1 | 1 |
Alpha2 | 2 |
Alpha3 | 3 |
Alpha4 | 4 |
Alpha5 | 5 |
Alpha6 | 6 |
Alpha7 | 7 |
Alpha8 | 8 |
Alpha9 | 9 |
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
すっげええ!
こんなにあるのか
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まだまだあるッピよ~!
詳しくは、Unityのリファレンスをチェックすると良いッピ♪
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
勉強になったぜ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
今日もまたひとつ学んだわ!
- 画像素材をAssetに登録
- ヒエラルキー→画像素材をシーンに登録
- キャラクター画像をレイヤー順序で前面へ
- Assets→右クリック→C#スクリプト
- プログラムを作成
- C#スクリプトをキャラクター画像に組み込む
- テストプレイ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
上手くできたッピか?
これからも色んなゲーム作りやプログラムの解説をしていくッピ!
次回も楽しみにしているッピよ~~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
UnityはC#を元に作られているッピ!
まだまだ Unity や C#について勉強したい人は↓の記事を参考にするッピ♪