箱庭の作り方

こんにちは。
右側だけ焼け始めた糸凪邑でございます。

今回のテーマはタイトル通り「箱庭の作り方」。

自分の好きな世界を作って遊ぶためには何を学べばいいのか？
言うなれば"小さな世界を作る方法"です。


Twitterやブログをご覧いただいてる方はご存知やもしれませんが、最近色んなものに手を出してました。

モデリングやったり、作曲(?)してみたり、ブラウザで飛べる世界を作ってみたり。
これらは全部小さな世界を作るためには何が必要で、どんな選択肢があり、どれを学べばいいのか、実践を兼ねた確認作業としてやっていたものです。

んで、一応目星を付け終わったので、そのまとめとしてメモを残すことにしました。

自分が作りたい世界を作って、その中で遊びたいって方は参考にしていただければ、と。

あ、書き忘れてましたが、今回作ろうとしているのは、自由に動き回れる3Dの世界。
そのために使うのは無料のツールとします。
無料に特に拘りは無いんですけど、気軽に手を出せますからね。

世界の構成要素

まず初めに、ここでいう"小さな世界＝箱庭っていうのはどんな要素からできているのか"。

それは「絵」と「音」とそれを動かす「土台」です。

とりあえず、この3つがあれば世界っぽくなります。

優先順位としては、土台 ＞ 絵 ＞ 音。
最低限必要なのは土台と絵。

それさえあればこんなふうに、音が無くても絵とその中で動く仕組みさえあれば世界が作れます。
(※iOSでは見られないようなので、AndroidかPCでご覧ください)

・Granage | HollowCradle
http://hollowcradle.cf/granage/index.html

最初に考えるのは土台となるもの。

これは"何処にどういう形で世界を作るのか？"ということです。

スマートフォンで見たいのか、PCで見たいのか、ゲーム機で見たいのか。

おそらく"他人に公開すること"を前提として、"個人でやる"とすれば、

• WebサイトやWebサービスといった形でWeb上に作る
• 各種端末で動く形で作り、ダウンロードしてもらう

のどちらかになります。

前者であればHTML,CSS,Javascriptその他の言語を学んで、WebサイトやWebサービスを作るように作っていく感じになります。


後者であれば、UnityやUnrealEngineといったゲームエンジンが選択肢になります。

・Unity
https://unity3d.com

・UnrealEngine
https://www.unrealengine.com

各サイトをご覧いただければわかるように、これらであればAndroidやiOSも、PC環境であればWindows,Mac,Linux、そんでもって、Steam、PS、DS、Switch、Xboxなどの各ゲームプラットフォーム向けも作れます。

すっごい高機能。
しかも、無料。
何て良い時代。

一応、UnrealEngineは売上に応じて有料ライセンスが必要、Unityは起動時にロゴが表示されるなどの些細な問題はありますが、どちらも普通に使う分には基本無料です。

もちろん、他の選択肢も色々ありますが、これらのエンジンを使うのが最短かつ無難かと。


土台選びはこの2つからになります。
で、僕はWeb上に作ることを選びました。
そもそも何かしらの端末にインストールしないと見られないってのがめんどうだと思ってたので。
ブラウザならどの環境にもありますからね。

なので、ブラウザがあれば見られるWeb形式を選択。

これはHTML,CSS,Javascriptを使って作るのが一番シンプルなのですが、どうやらUnityやUnrealEngineにもHTML版に変換する機能がついている模様。

・WebGL での開発を始めるにあたって - Unity マニュアル
https://docs.unity3d.com/ja/current/Manual/webgl-gettingstarted.html

・入門編:HTML5 プロジェクトの開発 | Unreal Engine
http://api.unrealengine.com/JPN/Platforms/HTML5/GettingStarted/index.html

これらを使って作ったものをWeb上で公開できるような形式に変換することが可能みたいです。


じゃあ、どれを使うのか？となるのですが、これは好き好きでいいんじゃないですかね。
それぞれ使えるプログラミング言語が違うので、学びたい言語、あるいはどんな世界を作りたいかで決めればいいと思います。
あとは開発に使うPCの性能。
Unityはそこまでスペックを要求されませんが、UnrealEngineは中々のものを要求されます。
そこら辺を鑑みて判断すればよろしいかと。

勝手な印象ですが、言語にこだわりがなく、充分なスペックのPCをお持ちor綺麗な世界を作るためならスペックの高いPC買っちゃうって気合があるならUnrealEngineがいいんじゃないかと思ってます。


僕はちょうどHTML,CSS,Javascriptを勉強してて、たまたまそういうものが作れるってのを知ったので、これらでやることにしました。

ただ、その3つで作る場合、HTMLのcanvas上に絵を描画していくことになるのですが、本来ならこれに加えてGLSLっていう別の言語を学ぶ必要があります。

・OpenGL Shading Language - OpenGL Wiki
https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language

僕はこれもやろうと思ったのですが、プログラミングにわか勢にはちょっと何言ってるかわからなくて、諦めました。

でも、Javascriptでそれを扱う仕組みを企業や個人のコミュニティが開発して提供されていますので、それを学べば大丈夫です。

・List of WebGL frameworks - Wikipedia
https://en.wikipedia.org/wiki/List_of_WebGL_frameworks

現在、この中でメジャーなのが「Babylon.js」と「Three.js」。

これはどっちを使っても良いんじゃないかな、と思います。
日本で多く使われてるのはThree.jsの方なので、日本語の情報が多い方が良いって方はThree.jsを選んで、英語に抵抗が無ければ好きに選びましょう。

実例で2つを比較したい場合はこちらのサンプル集をご覧ください。

・three.js / examples
https://threejs.org/examples/

・BabylonJS | Examples
https://doc.babylonjs.com/examples/


僕が使ってるのはBabylon.jsです。
選択の理由は名前で惹かれたからです。
バビロン...

ついでにいえば、強引に英語に触れるから、多少勉強になるかな、と。
ただ、マジで英語の情報しか出てこなくて、英語めんどいって思いながら毎回調べてます。
時々Three.jsへの転向を考えたりしてますが。

で、これを使って作ったのがさっきから何度も出てるこれとかこれとか、

・Granage | HollowCradle
http://hollowcradle.cf/granage/index.html

これ。

・Phantoma | HollowCradle
http://hollowcradle.cf/phantoma/index.html


画像素材はBabylonJS側が提供しているものや自分で撮影したり落書きしたものを使って、後はそれをBabylon.jsで作ったコードで読み込んだだけです。

なので、HTML,CSS,Javascriptを勉強するだけで作れます。
勉強するっていっても、基礎部分だけやってれば充分かと。

それらの言語に関してはここらへんのサービスで学べます。

・Progate
https://prog-8.com/

・paizaラーニング
https://paiza.jp/works

基礎だけなら無料分でカバーできますけど、もし興味があれば有料部分をやるのは全然有りかと。

それらの基礎を学んだらBabylon.jsやThree.jsなどのサイトに行き、チュートリアルをいくつかこなして、あとは作るだけ。

土台はこれで出来ます。


土台は、といいましたが、実際は土台＋絵(視覚部分)は一緒に作れることがほとんどです。
なので、土台を何にするのか選んでしまえば、それを学ぶだけで好き勝手に世界を作れます。
あとは絵も音をここに組み込んでいけばいいですし。
そういうのはフリー素材でいくらでも提供されています。

でも、もしそういうのも自作したい場合。


ここから必要になるのがモデリングや作曲。

まずモデリングですが、これはフリーソフトという縛りを付けるのであればBlender一択なんじゃないでしょうか。

・blender.org
https://www.blender.org/


機能も商用ソフトに負けず劣らずで、歴史も長いので情報も豊富。
UIがとっつきにくいっていうのがよく言われますけど、そもそも他のソフト触ったことがなければ関係ないです。

Youtubeなどに実際のモデリング風景が上がってますので、気になるのであれば見てみてください。


以下、参考サイト。

・Blender.jp
https://blender.jp/

・Blenderの易しい使い方
https://blender-cg.net/

・CGrad Project
http://www.cgradproject.com/


モデリングしたものは、Three.jsやBabylon.jsで読み込める形式に変換するための仕組みがBlender側に提供されていますので、それを使えばよろしいかと。

・Babylon.js Documentation
http://doc.babylonjs.com/resources/blender

・three.js/utils/exporters/blender at master · mrdoob/three.js · GitHub
https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender

まぁ、基本的におかしな動きしたりするんで、色々いじんないと駄目ですけどね。


ともあれ、これで土台＋絵はできる、と。


あとは音ですが、申し訳ない。
実のところ、これはよくわかんないです。
あんまり音ってのを重要視してなかったので。

そもそもRPGみたいに森や空でBGMが鳴らなくていいですし。
効果音はわかりますけどね。
それもフリーで充分。
困るところが見当たりません。

ただ、音楽とかも作れたらいいなぁと思って試してみました。

・Memo: DAW with Sunvox
https://kairandou.blogspot.com/2018/07/memo-daw-with-sunvox.html

使ったのはSunvoxというフリーソフトです。

・Sunvox
http://www.warmplace.ru/soft/sunvox/

曲とは言えないような曲もどきですが、作曲なんて全くわからない僕でもこれぐらいなら作れたので、ソフトをちゃんと選んで真面目に学習すればそこそこなものは充分にできると思います。


DAWソフトに関する参考記事。

・Best FREE Digital Audio Workstations (Updated For 2018) - BPB
https://bedroomproducersblog.com/2015/11/11/free-daw-software/

・2018年最新版！初心者DTMerのためのフリー作曲ソフト(DAW)徹底比較 - Vocareate Project Blog
http://vocareateproject.hatenablog.jp/entry/freedaw

・14 Best DAWs for Linux as of 2018 - Slant
https://www.slant.co/topics/6067/~daws-for-linux



以上が"小さな世界を作る方法"となります。

これらの3要素の作り方を学ぶことで、自分の好きな世界を作って遊ぶことが出来ます。
実際のところは誰かが作った素材を使うのであれば、土台部分、つまりプログラミングの部分だけで済みます。

そう考えたら簡単じゃないですか？

もし、自分だけの箱庭を作ってみたいって方はお試し下さいませ。
限りない空を飛ぶのも、神秘の森を彷徨うのも、深い深い水底を揺らぐのも自由ですよ。


では、今回は此れにてお終い。
お付き合いいただきありがとうございました。