ドット絵を描いて動かそう！（「TIC-80」のご紹介）

# はじめに

この記事は「[ボイゲAdventカレンダー2019](https://adventar.org/calendars/4064)」14日目の記事です。

- ドット絵を描いて動かしたい！
- ファミコンっぽいゲームを作りたい
- ~~と思って何かに手を出したけど挫折した~~

そんな方々向けに「**[TIC-80](https://tic.computer/)**」を紹介したいとおもいます。

当初はボイゲジャム参加作品の「[ずんだりす](https://uokagi.itch.io/zundaris-in-browser)」や「[ぱずんだ](https://uokagi.itch.io/puzunda)」で出演している**ずんだ**の
データ構造や表示の仕組みを説明する予定でしたが、まずは作る人が増えてくれたらいいな、
そして自分が作成に使用させて頂いた「**[TIC-80](https://tic.computer/)**」の利用者が増えてほしいとの理由で
紹介するはこびになりました。

~~すみません、まだ書きかけですが随時、追記修正します！~~
「**[パレット編集](https://qiita.com/uokagi/items/73b11dd66bfb667b8157)**」を追記。

## TIC-80

> TIC-80 is a tiny computer which you can use to make, play, and share tiny games.

（意訳）「TIC-80」は小さなゲームを**つくって**、**あそんで**、**共有できる**ちっちゃなコンピュータだよ。

とりあえず公式ページに行ってみましょう。

[tic-80 tiny computer](https://tic.computer)

「[PLAYタグ](https://tic.computer/play?cat=0&sort=1)」でどんなものができるのか確認するのもよいです。
ゲームでなく「[BAD APPLE](https://tic.computer/play?cart=419)」「[FALLSPIRE](https://tic.computer/play?cart=806)」といった感じのものも作れるようです（すごい！）。

***

では「create」タブをクリックして作ってみましょう。

![createタブ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/04792025-48ae-e86f-fc3f-df77f1a402f1.png)


 「Click Here」をクリックすると黒い画面が出てきましたね。
しかし恐れる必要はありません。
「run」と打ち込んでエンターキーを押しましょう [^1]

[^1]: 「Return」キーでしょ、とか F5 キーじゃだめなの？とかいう人はここを読む必要はないでしょう

![helloworld_s.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/3693fc54-bbb0-b295-2a59-e71e09490f10.gif)


「TIC-80」のマスコットキャラ（以降'TICくん'と呼びます）と「HELLO WORLD!」という文字が表示されましたね。
カーソルキー（矢印キー）でTICくんを動かすことが可能です。
コントローラー（ジョイパッド）が接続されていれば、それで動かすことも可能です。

「ESC」キーを押すと黒い画面（コンソール）に戻り、もう一度「ESC」で編集画面に行きます。

何やら色々書いてありますが、これがプログラムですね。
とりあえずこれは放っておいて絵を書き換えてみましょう。

左上のキャラアイコンをクリックするとドット絵をいじれるモードにできます。



![charaエディタ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/b87f5f64-57ac-b141-3ac9-c4b7634a858f.png)


右側の画面で編集する範囲を指定して、左側の枠の中でポチポチドットを打ってみましょう。

![スプライトエディタ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/b16f306d-93cc-e682-e63c-1e0c7168b503.png)


書き換えが終わったら実行してみましょう。

![hime_s.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/f9e33f6b-bd30-377e-7b2b-dac1272c995d.gif)

カーソルが映っていないので、分かりにくいですが

- パレット編集で色変更（バーをドラッグ）
- マップエディタ
- 効果音エディタ
- 音楽エディタ
- コードエディタに戻ってRUN（実行）
- カーソルキーでヒメちゃん移動

以上をやっています。

とりあえず、作ったものを保存しておきましょう。

![save3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284455/aad9d75e-b853-8218-f632-b8c8c1f53f9f.png)


## Lua

TIC-80はLuaを基本として、MoonScript、JavaScript、Fennel、Wrenといったプログラミング言語に対応しています。



> Lua is a powerful, efficient, lightweight, embeddable scripting language. It supports procedural programming, object-oriented programming, functional programming, data-driven programming, and data description. 

Luaはパワフルで高効率、軽量な組み込み用スクリプト言語です。手続き型プログラミング、オブジェクト指向プログラミング、関数型プログラミング、データ駆動プログラミング、およびデータ記述をサポートします。

プログラミングを知らない人にとってはなんのこっちゃ？という感じですね。
プログラミングを料理にたとえるなら、プログラミング言語は料理をする環境、すなわち調理場やキッチンみたいなものです。
で、Lua言語は雑にたとえるなら「料亭やレストランなどがお客に開放している簡易キッチン」のような感じです。
このキッチン自体に備え付けられている料理器具は少ないですが、提供元から下ごしらえした食材やそれに適した器具が別途用意されているイメージです。

- シンプル
- パワフル
- フリーダム

Luaの言語仕様はシンプルです。
キーワード（≒予約語）といって言語仕様上特別な意味を持つ語句があります。
`in`とか`for`とか`if` `and`
日本語での**てにをは**や**もし**とか**かつ**などに相当するでしょうか。
Luaはその数が少ないです（Lua5.3で22個）
要は使用するに当たって把握しておくべき概念や機能が少ないということです。

またこれらに略語がありません（多分）
標準ライブラリでもほぼ（ioやos以外）ない気がします。

対してホストプログラムが提供するAPI（命令、関数など）は略語である場合が多いです。
これはLua自体の機能（や標準ライブラリ）との区別を付けやすくしているためだと思われます
（推奨されているのでしょうか？詳しい方がおられましたら教えてください）

そう、ゲーマーにとっては`def`は防御力、`int`は知力ですがもちろん**名前**として使えます。

記号とその組み合わせ、意味が少ないです。
記号はググりにくく、とりあえず把握しておかないとつらいです。



例えばLuaでは乗算（掛け算）が出来ます。すごいですね。[^2]
[^2]: ちなみにファミコンのCPUは乗算命令がないため乗算ルーチンを自分で組む必要があります。
掛け算には`*`（アスタリスク）記号を使います。
`A * B`とするとAとBの乗算の結果が返ります。
それ以外では`*`は使いません。
すなわち`*`記号がプログラム中にある場合、その結果は数値を返します。
返せない場合はエラーとなります。ただAやBが数値と解釈できる文字列の場合は数値として乗算し、その結果を数値で返します。
例：


他の言語だと記号（とその組み合わせ）に複数の意味がある場合が多いです。
例：`A * B`でAやBが数値だったら加算、文字列だったら繰り返しなど

まとめると

- キーワードが少ない（Lua5.3で22個）
- 記号とその意味の対応が1対1のものが多い

（追記中）