Defoldのテキストエディタを変更しよう！

# はじめに
この記事では、DefoldのデフォルトコードエディタをAtomに変更する方法を紹介します。
AtomにはDefold用のパッケージもあるので、効率が結構上がります。
( [前回の記事](https://qiita.com/nonzu/items/ec456d6b9536798e4bfc)で「Defoldのアプデを解説するよ！」って言ったのですが、アプデが来てませんでした(´･д･`) )

# エディタを開く
エディタを開くには、編集するブツが必要です。
前回までで、プロジェクトを作成しましたがテキストエディタで編集する要素が無いので、最初にそれを作成しようと思います。

## 要素の追加
Defoldで要素の追加をするには、Assets のフォルダを右クリックして 「New」を選択することで行います。
要素の種類はたくさんありますが、とりあえず使うときに説明します。
今回はScriptを選んでください。
![new_script.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/927361b3-5a68-2a7a-a74c-3c90654821ab.png)

## エディタを開いてみる
要素の追加の手順に沿って、Scriptを作成し、好きな名前を設定して作成してみてください。(画像では「script」という名前を設定しています。)
![new file.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/0c904ba4-001e-c7b6-aace-5c1d49fe391b.png)
そしたらテキストエディタが開かれると思います。
テキストエディタで編集できるものは、**「Script」,「Gui Script」, 「Lua Module」, 「Render Module」** です。
(アイコンが黄色い歯車のやつです。多分この4つしかないと思います。)


# Defoldの初期設定
何も設定しないでDefoldを開くとこのようなエディタが開かれます。
![defalut.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/752f3317-a513-fdd7-8bb9-b340095d5dd2.png)
このエディタはめちゃくちゃサクサク動いて、いい感じなのですが問題もあります。
一番でかい問題は、セットの記号の補完が無いことです。「なんだそれ？」って思う人もいると思いますが。
例えば、**() , {} , [] , "" , ''** です。2つセットの記号です。Atomのエディタだと左側を入力したときに、右側も自動的に入力してくれるのですが、Defoldのエディタだと右側を自分で入力しないといけません。
ちょっとのことなのですが、結構効率が変わります。

# Atomに変更する
ここで、登場するのがAtomです。起動が少し重たいですが、テキスト編集専門のソフトなので使いやすいです。
## Atomのインストール
とりあえずAtomをインストールしてみましょう。 [Atomのホームページ](https://atom.io/)に移動して、**「 Download 」** ボタンを押してください。
![Download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/2dceb302-0391-b8db-0578-db6b51c42215.png)
ダウンロードしたファイルを実行してください。
![2021-03-27_10h28_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/4f3b9b16-7d76-5698-9806-b815511eb785.png)
そうするとこんな画面が出るので、待機しているとエディタが起動します。
![2021-03-27_10h58_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/f77fad49-56f6-b50f-5258-6621d755f109.png)

Atomでは複数のファイルをそれぞれのタブで管理します。ファイルを閉じるときはファイル名の右側にマウスをかざすと表示される ☓ボタンを押してください。
![2021-03-27_10h31_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/e7472453-455d-0a15-a800-fcc08fe964ab.png)
初期設定だと、いろんなメッセージが表示されているタブがあると思いますが、興味のある人は読んでみてください。

## パッケージのインストール
パッケージとはAtomの拡張機能です。インストールすれば、機能を増やすことができます。
ずは、設定を開きます。 **File > Settings** を押してください。
![2021-03-27_11h01_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/c4c82509-2d27-e2fd-2012-6082eb519b4d.png)
すると設定タブが開かれ、左のメニューから「インストール」を選択します。
![2021-03-27_11h02_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/df9a64f0-cd6d-971b-bb47-9b6c02057f0a.png)
緑の□の中にあるテキストボックスからパッケージを検索できます。ためしに「Defold」と入力してみるとこうなります。
![2021-03-27_11h04_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/d1e5ed4d-bd46-a4f0-e18c-7ff132c56f1a.png)
「Install」のボタンを押せば、パッケージをインストールできます。

Atomにイントールするパッケージは以下のようなものです。

|パッケージ名 |説明|
|:-:|:-:|
|japanese-menu |Atomの日本語化|
|defold-api |DefoldのAPIの説明をAtom の中で見れるようにするやつ|
|defold-ide |Defoldで使う命令などの補完とAtomからのホットリロードをできるようにする|
|language-lua |Luaの命令の色分けや補完をしてくれるやつ|
|auto-encoding |文字コードを自動で判別してくれるやつ|
これらをインストールすると結構便利です。(DefoldのAPIの説明はCtrl+Alt+Oで開きます。)

## Defoldから開くようにする
まず、「Windows + R」で開くウィンドウに**「%appdata%/../Local/Atom」**と入力すると、エクスプローラーが開きます。
![2021-03-27_11h15_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/7218a38a-12c7-113e-1727-7a0ad8d1da41.png)
この赤い部分をクリックするとフォルダのパス(住所みたいなもん)が現れるのでコピーしてください。(Ctrl+Cで可)
![2021-03-27_11h18_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/1d7f0310-a475-62d9-2430-728360e1111c.png)
そしたらDefoldを開き、**File > Preferences...** をクリックします。
![2021-03-27_11h19_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/fba880f6-68a5-d01b-e8c1-f0243dc754e8.png)
するとこのような画面が開くので、赤枠の **「Code」**をクリックしてください。
![2021-03-27_11h20_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/674a1cee-1562-5c63-2382-e2f51365d2e5.png)
そこの**「Custom Editor」**にコピーしたパスを貼り付けて、末尾に**「\atom.exe」** を付け足してください。
![2021-03-27_11h23_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/d6db4b88-ec8e-5940-4c8f-25262948c474.png)
これでエディタをAtomに設定できました。

ためしに最初に作った「<好きな名前>.script」のファイルをダブルクリックすると、Atomで開かれると思います。
![2021-03-27_11h41_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620977/70d15890-9484-838f-704d-012f4b94bb17.png)


# Atomの便利なショートカット
とりあえず、僕が個人的に多用するショートカットを羅列しておきます。
(ただ、Atomに限らないショートカットが多いので覚えておいて損はないです。)

|ショートカット|意味|
|:--:|:--:|
|Ctrl+C|コピー|
|Ctrl+X|切り取り|
|Ctrl+V|貼り付け|
|Ctrl+Z|戻る|
|Ctrl+Y|進む  ("戻る"の反対)|
|Ctrl+A|全選択|
|Ctrl+S|保存|
|Ctrl+W|タブを閉じる|
|Ctrl+D|その行を1行選択|
|Ctrl+↑ (↓)|その行を上下に移動|

# おしまい
これでDefoldでゲームを作るときにAtomを使う方法はおしまいです。
試しに **(** とか **{** とか打ってみると、**)** や **}** も補完してくれると思います。これがめちゃくちゃ便利なんです。

あと、この前初めて知ったのですが、記事をストックにしておくと、ページが更新されたときに通知を飛ばすことができるみたいなので、ぜひ[目次](https://qiita.com/nonzu/items/73a39368855f3e1e0f28)をストックしてみてください。
それでは、次こそアプデの記事でお会いしましょう。