【Defold】出来なきゃやばいベクトルの話

# はじめに
今回はゲームづくりの基盤となるベクトルの話をします。
この記事は、ベクトルなんて勉強したことない中高生向けの記事です。
ベクトルは数学的にどうたらという話は受け付けてないので見逃してください。(あくまでDefoldで扱う上で必要な部分を雑に紹介しているので、学校で習うときに0から勉強してください。)
# 数学のベクトル
## ベクトル is なんやねん？？
ベクトルって言う概念。よく言われるのは長さと方向を持った矢印です。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/8950d2fa-a21d-0d87-17fd-43b395945829.png)
(これから手書きの図がちょいちょい出てきますが、線がふにゃふにゃで、**字が汚い**です。ご容赦ください。)
点Aから点Bに向かう矢印をABベクトルと言います。記号にすると、図に緑で書いてあるABの上に矢印が点いたやつです。
ただ、ここでは上に矢印を書くことが出来ないので、ABベクトルを太字で **AB** と表すことにします。

## ベクトルの足し算、引き算
ベクトルは足し算や引き算もでき、矢印の足し算をすることで求められます。(図を見たほうが早い)
![２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/ba165fe8-6770-04e1-8a25-805442c0f7b0.png)
1行目の式: **OB** = **OA** + **AB** は O→A, A→B と順番に移動していったので、最終的に O→B に動いたよっていう意味となります。
ここでは点Aや点Bで表していますが、ゲームを作るときには、点が自機の場所だったり、アイテムの場所だったりを表しています。

## ベクトルのマイナス
ベクトルにマイナスを付けると、逆方向になります。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/7ce0b65a-389c-1201-9406-9f96ca3cf0fe.png)


## ベクトルの絶対値
簡単に言うと矢印の長さです。ベクトルを「|」で挟むと絶対値という意味になります。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/f7a5b5d9-4eee-1594-8959-5f16f3850271.png)


## ベクトルのかけ算
ベクトルのかけ算には2種類あってそれぞれの答えを内積と外積といいます。外積は最初は使わないです。なので内積だけを紹介します。(多分、Renderをいじるときに使います。)
内積はこんなかんじで計算します。**OA** と **OB** の並行してる部分の長さをかけ算した感じです。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/07750430-9dfa-4bd8-8425-f4949b215481.png)


## ベクトルの成分表示
ベクトルは矢印と説明しましたが、「右に◯ドット、上に◯ドット移動する」というように表すことも出来ます。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/54a4cb8f-6b98-eebc-25bb-51a989f62938.png)

これは「右」と「上」で2種類で、それぞれを成分といいます。成分の数は何種類でも増やすことが出来ます。
「足し算」「引き算」、それと「内積」は成分ごとに計算することで求めることが出来ます。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/a5d35610-aa1d-58bb-99a9-8422af845227.png)


絶対値は三平方(ピタゴラス)の定理、を使って求めることが出来ます。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/f6ebbbd5-47ed-9e72-8a8c-f00b890e7d94.png)

# 2つのベクトルの角度を求める。
ベクトルの成分が全部わかっていれば、内積を使って2つのベクトルの間の角を求めることが出来ます。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/6db678ce-824e-9901-7d01-0d7fbe7ade73.png)
cosθの値から 小さい方の角度を求めることが出来ます。


#ベクトルの使いみち in Defold
## 2種類のベクトル
さっきは(右、左)の2つの成分で、増やすことも出来ると言いました。Defoldでは成分数が 3, 4 の2種類のベクトルを扱います。
また、ベクトルは英語でvectorなので、3成分のベクトルを**vector3**、4成分のベクトルを**vector4**と言います。
4つの成分は、はじめから順番に **x成分、y成分、z成分、w成分** と呼ばれます。

vector3はゲームオブジェクトの座標やGUIに表示されるパーツの位置などを表すときに使います。基本的にZ成分は0です。
vector4は色や透明度を編集するときに使います。

Defoldは2D特化なのですが、一応奥行きの概念もあり、内積を計算するとちゃんと奥行きの文も計算してくれます。

# Defoldで見てみる
それでは、Defoldで見てみましょう。main.collection を開いてみてください。
![2021-04-15_14h38_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/cda46257-762e-4d3a-bd30-2d531ce79d0f.png)
緑の線が **x=0**、赤の線が **y=0** を示しています。(x, y) = (0, 0) がゲームの左下を示しています。
![2021-04-15_14h42_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/c25271e8-51ac-8473-5ed6-b06e3ae41426.png)
右に行くほど x が大きくなり、上に行くほど y が大きくなります。

例えば、自機の座標を(120, 370, 0) にすれば、ゲーム画面の左からドットpx、下から370ドットの座標に自機が表示されます。

# さいごに
今回は数学のベクトルのお話でした。
次回は、ゲーム製作っぽいことをします。
ゲームオブジェクトに画像を貼り付けて、座標を変えてみる感じです。
[Defold目次](https://qiita.com/nonzu/items/73a39368855f3e1e0f28)

あと、大学が始まり更新頻度が落ちています。