MakeCode for Minecraftでプログラミング学習その1：Hello Worldと時刻の表示

久々にMinecraftをプレイして、いろいろ変わっていることに感動を覚える今日この頃。ラマとかクマとかいるし、Windowsアプリ版も普通に快適。ついついゲームプレイに熱中してしまいそうになりますが、真面目にJavaScriptと比較しながらプログラミングの勉強もしていきます。

導入編はこちら。

「MakeCode for Minecraft」でマイクラしながらプログラミングやるぜ！導入から最初のチュートリアルまで - まずある日記

事前情報

当方のプログラミング知識：JavaScriptというか、jQueryでDOM操作あたりは少しだけ分かる。コピペでコード動いてる状態のほぼ初心者。なんか変なことやってたら教えていただけるとありがたいです、マジで。

注意：プログラミング学習記録のようなものなので、適切なコードでない場合があると思います。特にJavaScript。また、画像は一応文字が判別できる程度の縮尺でアップしているので、小さくて分かりづらかったらクリックしてください。

Hello Worldの表示

プログラミング初心者が最初にやることと言ったらこれらしい。

JavaScript

JavaScriptだとこんな感じで、アラートを出したりHTMLに書き込むのが定番。よく初心者向けのコードで使われているdocument.writeはHTML5では非推奨らしいです。

See the Pen wrVmdK by itaru (@mazuaru) on CodePen.

MakeCode

Minecraftで文字列はそもそもメインじゃないよね。使えるところが限られています。 

チャットメッセージ

一番簡単なのはチャットメッセージとして送信する方法。チャットコマンド打ってチャットメッセージが送信されるというのも味気ないので、プレイヤーの動作によってコードを発動するパーツを使ってみます。

こんな感じでセット。””で囲まれているところに文字列を入れられます。日本語OK。

歩くたびにHelloWorldが送信されます。これは意味ないですけど、このあと時刻表示のところで使っているように、数値の確認に使えるのでチャットメッセージは意外と使いどころがあります。

ブロックで文字を書く

ブロックで文字を書くことのできるパーツがあるので、これを使用します。ブロック文字は英数字のみの対応。

単純に書き出したい文字を入力するだけ。「の場所に」が最初の文字の左下の位置に相当します。

いいですね、プログラミングやってる感がでてきましたよ。一気にばっと表示されるのではなく、左側からひとつひとつブロックが配置されていくような感じです。

時刻を表示する

変数を使う必要が出てくるのですが、MakeCodeの変数はちょっと独特なので注意。どうやら数値しか入れられないようなので、変な癖がつかないようにJavaScriptでの変数の扱いと比較しながら理解していくのが良いかもしれません。

JavaScript

JavaScriptでは、これまた初心者定番の時刻表示。

See the Pen xXvzeP by itaru (@mazuaru) on CodePen.

MakeCode

とりあえずマイクラ時間について詳しくなったぜ。

ブロックで数字を書き出す

現実時間風にすることもできなくはないと思うけど、とりあえずMinecraftで使われている時間単位（以下、マイクラ時間と勝手に呼びます）表示なら簡単。マイクラ時間についてはここを参照にしました。

Minecraft /time コマンドの使い方 minecraftologies マインクラフト

時刻表示の完成イメージはこんな感じ。ブロック書き換えがいい感じに作用して、更新されてる感があります。上の画像では3つ目の文字を書き換えているところですね。

時間表示するのに重要になってくるパーツは2つ。まずはゲームプレイに入っている、time queryという数値タイプのやつ。ゲーム時間をday timeに変更して使用します。

それから生き物に入っている、変数 to stringのパーツ。これが非常に重要。MakeCodeの変数には文字列が入れられない＆ 数値のまま書き出すことができないので、このパーツを実際に処理する段階で使用することになります。

「文字を書く」のところに変数 to stringを直接埋め込むという感じ。なんか違和感あるけど、こういうものだと覚えてしまったほうが早い。右は、確認用にチャットに1秒毎に時刻を送信するコードです。

 一見さっきのコードだけで上手くいくように見えますが、単純に指定された位置を始点として文字を入れ込んでるだけなので、時刻が戻ったときに不都合が出てきます。例えば、24000から1になったときに、2は書き換えられるけど4000がそのまま残ってしまうんですよね。なので簡易的に、時間が100内になったときにブロックを空気に置き換えることにしました。

「埋める」パーツを使うと2点の座標を指定して、広範囲のブロックを置き換えることができます。これで、時刻が表示されるところの範囲を適当に指定。時間が100内になったときに、指定位置のブロックを空気に置き換えます。

文字の書き出しとは違い、ブロックの置き換えは瞬時に行われるので理論的には100ではなく1でも大丈夫なはず。まあ、どっちにしろ100以下の時刻を表示する必要性があまりないので余裕を持たせています。

ブロックを積み重ねて時間タワー

マイクラ時間とかあんまり馴染みないし、数値で表示してもピンとこないので、時間ごとにブロックを積み重ねていく時間タワーを作ってみました。if文練習のために、6時間ごとに色の変化もつけた力作。

ご参考までにコードはこんな感じ。JavaScriptでやるより断然分かりやすい。

単純にマイクラ時間を1000で割って24個分のブロックになるようにしているけど、小数点の数字が出てきます。ここで面白いのが、不等号では小数点以下も判定されるけど、ブロックの高さは小数点以下四捨五入で計算されるから、色の切り替えのところは、前の色のブロックが置かれてから新しい色に置き換わるところ。理解してしまうと単純なんですが、それまでは謎すぎて考え込んでしまった。小数点の操作パーツがあれば良いなと思うところだけど、これはこれで勉強になりますね。

Javascriptで表現してみる

See the Pen JrgvYQ by itaru (@mazuaru) on CodePen.

確認と理解のためにJavaScriptで時間タワーを表現してみました。何回もdiv書いてるのはスマートじゃない気がするけど、動いてるから良しとしよう。それにしてもJavaScriptのコードってなんでこんな面倒なんだ。jQuery使ってもキツイ。MakeCodeでプログラミング楽しいと思い始めていた心をくじいてくれる。

まとめ

一度パーツをくっつけてしまうと外すのが面倒だったりするところはあるけど、直感的に扱えるので、繰り返し文やif文のあたりはとても理解しやすいです。一番難しいのは立体空間の座標指定だったりする。でも、立体的な把握って学習よりもセンスじゃない？多分そうです（言い訳）。