ゲームエンジン、microStudioを試した

はじめに

自営業＆資格勉強中になって時間が出来たのでゲーム開発をじっくり堪能している。先日はPythonとPyxelで制作した Warship Shooting Rを公開した。

　公開先の itch.io というゲームプラットフォームで色々探していたところ、ゲーム開発ツールとして microStudio なるエンジンを発見した。
　それが思いのほか使いやすくかなり捗りそうだったので、試してみたので紹介したい。

microStudioとは？

　microStudioは、ブラウザベースのゲーム開発環境で、初心者から経験豊富な開発者まで、誰でも簡単にゲームを作成することができる。

直感的なインターフェースと豊富な機能を備え、このゲームエンジンだけでコーディング・画像作成、資料作成、公開ができてしまう。
　必要なのは創造力だけ！？

microStudioの魅力

1, 敷居の低さ:

　microStudioは、インストール不要でブラウザ上で動作するため、すぐにゲーム開発を始められる。複雑な設定や環境構築は不要なので、PCだけでなくタブレットを持って外でもゲーム開発ができる。
　家やオフィスで腰を据えて開発したいよ、という人も安心してほしい。オフラインでPC上で動作するスタンドアロン版がitch.ioで公開されている。これをインストールすれば、ネットに繋がっていなくても開発ができる。

スタンドアロンの場合も環境構築は簡単だ。このアプリをインストールするだけだ。

2, 多彩な機能:

　microStudioは、UnityやUnreal Engineなどとは異なり、2Dゲーム開発に向いている。いわばGodot EngineやPyxelなどといった勢力の仲間となる。
　そして2Dゲームに必要な機能をIDE上にすべて備えている。

• コードエディタ
• ゲームのプレビュー
• デバッグツール（コンソール・変数のウォッチなど）
• スプライト（画像エディタ）＆アニメーションエディタ
• マップエディタ
• サウンド
• 説明書等のドキュメントエディタ
• 豊富なチュートリアル・APIドキュメント
• 公開・エクスポート

3, 豊富なサンプルとチュートリアル:

　microStudioには、さまざまなサンプルゲームとチュートリアルが用意されており、初心者でもゲーム開発の基本を学ぶことができる。
　事実この記事を書いた日にmicroStudioを知って、サンプルとして十字キーでキャラを動かすサンプルをすぐ作れた。
　自分はこれまでのプログラミング経験があるのである程度察して機能を発見して試していたが、あとで見返したらチュートリアルやドキュメントに必要な説明があった。これらのサンプルを参考にしながら、独自のゲームを制作していくことができる。

4, 選べる言語:

　microStudioはデフォルトではmicroScriptという独自の言語を使うことになる。しかし次の言語を選ぶことも可能だ。

• Python

• Lua

• Javascript

  より高度な機能やカスタマイズが必要な場合はJavaScriptやPythonを使ったほうが良いのだろうが、専用言語のmicroScriptは思いのほか使いやすく、コーディングしやすい。

init = function()
  x = 0
  y = 0
end
update = function()
  if x > 160 then x = 160 end
  elsif x < -160 then
    x = -160
  end
  if keyboard.LEFT then x -= 1 end
  if keyboard.RIGHT then x += 1 end
end
draw = function()
  screen.drawSprite ("icon",x,y,32,32)
end 

JavascriptとPythonの中間のような印象を受けた。

• 関数（メソッド）は [名前] = function () で定義する
• functionやifなどのステートメントの最後は end
• Pythonでいうところのdictは [変数名] = object ～ end
• クラスも書ける
• 別ファイルで定義したクラスや関数をincludeやimportといった機能不要で別ファイルから呼び出せる

　ただし、エディタにコード補完の機能はないので、システム的なオブジェクトやAPIはドキュメントを見ながら使うことになる。

※Web版はバージョンが進んでいるのか、コード補完やヘルプが表示された。

とにかく困ったら公式ドキュメントを見れば大抵なんとかなりそう。

　ただし英語なのでページ翻訳して見よう。とはいえ、主要な部分はコードとして色分けされているのでなんとかなるだろう。

5, 豊富な操作に対応:

　キーボードやマウスはもちろん、ゲームパッドやタッチにも対応している。このあたりは当然のごとく対応しているので安心したい。
　コードから利用する際も非常にわかりやすい。

update = function ()
  //---キーボード判定
  if keyboard.A then print("キーボードのAが押された！") end
  if keyboard.LEFT then print("キーボードの左が押された！") end
  if keyboard.NUMPAD_3 print("テンキーの3が押された！") end
  //---タッチ判定
  if touch.touching then 
    print("画面がタッチされた") 
    for t in touch.touches
      print("タッチ位置=" + t.x + ":" + t.y)
    end
  end
  if mouse.left then print("マウスの左クリック") end
  //---ゲームパッド判定
  if gamepad.A then print("ゲームパッドのAが押された！") end
end

keyboard、mouse、touch、gamepadという、わかりやすい記述だ。

6, オンラインコミュニティ:

　microStudioには、公式サイト上に活発なオンラインコミュニティがある。そしてDiscordもあるので他のユーザーと交流したり、質問したり、プロジェクトを共有したりすることができるだろう。
　しかし日本人はいるのかしら？（サイトの言語では日本語・中国語といったアジアの言語には対応していない模様）

便利な機能

編集＆リアルタイムプレビュー

　microStudioはWeb版・スタンドアロン版どちらも編集したら即時反映される。つまり、ちょっと編集したらソースを保存する必要なく、すぐにプレビューに変更内容が反映されている。

draw系のメソッドで、プレビュー上で位置決めのガイドが表示される

screen.drawTextやscreen.drawSpriteといった描画系のメソッドを編集していると、プレビュー画面になんとガイドが表示される！

コード中のX座標やY座標のパラメータの位置にカーソルを移動すると、プレビュー画面にその軸の位置のガイドラインが表示される。
　たとえばPyxelでPythonを編集中に、「この文字（画像）のX座標、本当にこれで問題ないかなぁ～。一旦実行する（保存する）か。」と困るときがあるだろう。

　microStudioでは、そんな心配がないのだ。編集している最中にその不安が解消されるのだ。

　この機能でもう自分はガツンとやられてしまった。すっかりmicroStudioの虜である。

注意点

　microStudioでは、テキストやスプライト（画像）の基準点は、画面の中央だ。
　これだけは他のゲームエンジンと異なり、明確にメソッド等でも指定内容が異なるので混乱する。

X軸

X軸は左がマイナス、右がプラスだ。

Y軸

Y軸は上がプラス、下がマイナスだ。

　Y軸はUnityのRectTransformみたいな感じなので、基準点が画面中央、ということを念頭に置いて注意して覚えておきたい。

2025/05/29追記:
アンカー位置を変えられることがわかった。このあたりの使い方は別途記事にしたい。

beep音がプチMML

beep音を鳴らせる audio.beepというAPIがあるが、鳴らす際に音階CDEFGAはもちろん、Pyxelのようにノコギリ波、サイン、スクエア、ノイズを指定できる。

テンポや音の長さも指定できる。

これが実際どのくらい長く鳴らせるのか試していないが、すくなくとも図のように7～8音は問題なく鳴らせた。

　上図のように続けて呼び出すと、複数チャンネルのように重ねて鳴らすことも出来た。

　◯分音符を表すにはどうやら「span」で音の長さを指定することになりそうなのでまったくMMLと同じというわけではないが、使い慣れればMMLに近い感覚でチップチューン音を自在に作り出すことも出来そうだ。

　なお、ちゃんとしたサウンド作成機能は今後のバージョンアップで実装されるようだ。期待したい。

アニメーションも作れるスプライトエディタ

　Spritesのタブから利用できるスプライトエディタ。ここではゲーム中に使用する画像を作成できる。

　ドラッグアンドドロップすれば別に用意した画像も読み込めるが、IDE上で画像を作ることもできる。
　Pyxelの画像エディタと同じ使い勝手の良さだ。しかもこちらはパレットの制限がない。

　そしてキャンバス下にあるAnimationを開けば、新たなフレーム番号の位置に同じように絵を描いて即座にアニメーションを確認できる。
　プレビュー画像の下にあるスライダーを動かせばFPSを変えて確認もできる。

さらなる便利ポイント

画面の下にこのような表示がある。

　なんと、コード中に表記すべきコード例が記載されているのだ！コピーしたらすぐ使うことができる。
　あとの手直しはXとY座標位置くらいである。

この手のエディタとコーディング中に起きやすい、スプライトの名前なんだっけ？というような心配も防げる。初心者に非常に優しい機能だ。

ファイル名で見分けられるアニメーションのフレーム番号

例えば2フレームの画像があるとする。

この場合、コード中で異なるフレームの画像を呼び出すにはこうする。

//フレーム0
screen.drawSprite( "ch_ca/ca_down0.0", x, y, 16, 16 )
//フレーム1
screen.drawSprite( "ch_ca/ca_down0.1", x, y, 16, 16 )
// [スプライト名].[番号] の形式

　[スプライト名].[番号] の形式 でいつでも別フレーム位置の画像を呼び出せる。
　.0の部分を別途listの変数などにまとめておけば、アニメーションの表現も楽ちんだ。

（Web版のみ）ホスティングできる

Web版ではゲームプロジェクトで Publish しようとすると、公式サイト上にホスティングできる。

ゲームエンジンかつゲームプラットフォームとしても使えるようだ。

なお、Web版はアカウントごとにストレージ容量が決まっている。

50MBまでとのことなので注意したい。

スタンドアロンならPC上にファイルが保存されるので問題ないだろう。

よくわからない機能もある

コーディングや画像を作ったりしていると、ウィンドウの右上のレベルとXPというポイントがどんどん溜まっていく。

おそらくこれはWeb版で公式サイトにログインして使う場合に意味があるのだろう。スタンドアロンでは特にアカウントログインや作成不要で利用できるので、モチベアップくらいの意味で捉えれば良いのだと思われる。

まとめ

microStudioの利用シーン

ここで利用シーンをまとめておきたい。

• ゲーム開発の学習
• 個人でゲーム制作
• 教育機関でのゲーム開発授業
• チームでのゲーム開発

　など、一通りの利用シーンに対応できるだろう。
　UIが英語だが、ほとんど何の心配もないだろう。

終わりに

　microStudioは、初心者から経験豊富な開発者まで、誰でも簡単にゲームを作成できる強力なツールだということがわかった。直感的なインターフェース、豊富な機能、オンラインコミュニティなど、ゲーム開発を始めるためのすべてが揃っている。

ゲームエンジンの個人的な使いやすさの順位は今のところこういう判定だ。

1. microStudio
2. Pyxel
3. Godot
4. Unity

　microStudioが一気にトップにのし上がってきた！
　個人的な印象としては、IDEが付いたPyxelだ。つまり、コーディングオンリーだったPyxelに使いやすいIDEが付いて便利さ増し増し。
　欲しかった環境がmicroStudioにあった。

　少々べた褒めしすぎた感があるが、ぜひmicroStudioを試して、皆さん自身手でこの便利さと感動を味わってほしい。

　試した動画はこちら。