paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

ブラウザだけでJavaScriptを使った3Dゲーム開発ができるWebエディタ「nunuStudio」を使ってみた

f:id:paiza:20170509113123j:plain
どうも、まさとらん(@0310lan)です。

今回は、面倒な「インストール」や「ユーザー登録」など一切不要で、ブラウザから即座に起動できる無料の3Dゲーム開発エディタのご紹介です!

ゲームに限らず、3DコンテンツやVRアプリに興味のある方にもオススメのサービスですよ。

nunuStudio

f:id:paiza:20170509113152j:plain
nunuStudio」は、既存のWeb技術(Web GL, Web Audio, Web VR…)を融合して構築されているのが特徴で、3D描画は「Three.js」をベースにしており、物理エンジンは「cannon.js」を活用しています。

■「nunuStudio」を始めよう!

それでは、実際に「nunuStudio」の開発エディタを使ってみましょう!

まず、サイトにアクセスしたら、トップ画面にあるボタンをクリックします。
f:id:paiza:20170509113209j:plain


いくつかの選択肢が表示されますが、ここでは「Web版」のボタンをクリックします。
f:id:paiza:20170509113216j:plain
(PC版のソフトウェアとして、「Windows版」「Linux版」「Mac OS版(近日リリース)」も提供されています)


ブラウザ上に、専用の「開発エディタ」が表示されました!
f:id:paiza:20170509113226j:plain
あとは、この画面上で3Dコンテンツを制作していくことになります。


ちなみに、以下のURLをブックマークしておくと、即座に開発エディタが起動するのでオススメです!
【 開発エディタのURL|nunuStudio 】
https://nunustudio.org/editor/editor.html

■基本的な使い方!

ここからは、「nunuStudio」の基本的な使い方をご紹介しておきます。

まず、画面左側にある「ツールバー」から、立方体・球体・3Dテキスト…など、さまざまなカタチをしたオブジェクトを画面に追加することが出来ます。
f:id:paiza:20170509113306j:plain
もちろん、別のソフトウェアで制作した3Dモデルを読み込んで表示することも可能です。


画面に追加されたオブジェクトは、ツリー構造で確認できるうえ、詳細なパラメータの設定も同じ画面で調整可能です。
f:id:paiza:20170509113315j:plain
オブジェクトの位置・サイズ・角度や、物理エンジンの可否、影の調整、重さ、摩擦抵抗…など、それぞれのオブジェクトに細かく設定できます。


オブジェクトの材質(質感)などは、「マテリアルエディタ」でさらに細かく編集可能です!
f:id:paiza:20170509113326j:plain
手持ちのテクスチャなども、ドラッグ&ドロップで簡単に設定できます。


他にも、カメラやライティングなども、どんどん画面上に追加していけます!
f:id:paiza:20170509113336j:plain
カメラは、透視・平行投影の専用オブジェクトが用意されており、ライティングに関しても現実の太陽みたいに全体を照らすライトや、スポットライトの効果があるものなど、多数装備されています。


また、細かい粒子を大量に生成できる「パーティクルエンジン」も搭載しています。
f:id:paiza:20170509113344j:plain
これだけで、「雨」や「雲」のようなエフェクトを生成したり、水の流れや魔法のエフェクトなど、多彩な効果を制作することができます。


そして、オブジェクトの細かい制御や、ゲームのロジック部分などはJavaScriptによるプログラミングが出来るようになっています!
f:id:paiza:20170509113354j:plain
便利なAPIも数多く提供されているため、簡単にプログラムを組み立てられます。

他にも、音源を再生するオブジェクトや、VR対応のコンテンツを作るためのオブジェクト、TTFフォントのサポート、2Dゲームを作るのに便利なスプライトシートの読み込みなど、多彩な制作ができるように工夫されています!

■3Dオブジェクトを作ってみよう!

それでは、基本的な内容を把握したところで、試しに3Dオブジェクトを作ってみましょう!

簡単なサンプルとして、3Dの「球体」を空中から落としてみたいと思います!


まず、最初に画面上部のメニューから「新規作成」を選択しておきます。
f:id:paiza:20170509113415j:plain
画面がリセットされたら、「box」オブジェクトを削除して地面だけが表示されるようにしておきましょう。


次に、「ツールバー」から球体を追加します。
f:id:paiza:20170509113426j:plain


カラーを変えたいので、マテリアルを新規作成します。
f:id:paiza:20170509113436j:plain


「カラー」のパラメータを調整して、赤色にしてみましょう。
f:id:paiza:20170509113446j:plain


あとは、マテリアルをドラッグ&ドロップで、球体のオブジェクトへ適用します。
f:id:paiza:20170509113454j:plain


この球体を上空から落としたいので、右側の「sphere」オブジェクトを右クリックして、「Add physics」→「Sphere」を選択して物理特性を追加します。
f:id:paiza:20170509113502j:plain


作成した「物理特性オブジェクト」の中に球体オブジェクト配置し、「①階層構造」のよになったら球体を「②上空に移動」します。
f:id:paiza:20170509113600j:plain
また、このままだと地面を突き抜けてしまうので、「ground」オブジェクトにも同じように物理特性を適用して階層構造にしておきましょう。


ただし、地面となる「ground」オブジェクトはその場に静止する必要があるので、「type」属性を「Static」に変更しておきます。
f:id:paiza:20170509113609j:plain
こうすることで、物理特性は維持しつつもオブジェクト自体は動かないで固定されるようになります。


ここまで出来たら、メニューから「Run」ボタンをクリックして実行してみましょう!
f:id:paiza:20170509113619j:plain


見事に、球体が落下しましたね!
f:id:paiza:20170509113627g:plain
さらに、もっと上空から落としてみたり、球体の重さ(Mass属性)を変更してどのように変化するのかも見てみると面白いでしょう。

■「球体」をコントロールしてみよう!

今度は、JavaScriptでオブジェクトをコントロールする方法を見ていきましょう!

先ほど「球体」を作成しましたが、同じ要領でもう一度作っておきます。
f:id:paiza:20170509113651j:plain
お好みで、カラーやサイズなどを設定してみてください。

今回は、この「球体」をJavaScriptで制御し、キーボードから自在にコントロールできるようにしたいと思います。


そこで、「ツールバー」から「スクリプト」を追加します。
f:id:paiza:20170509113705j:plain


スクリプトオブジェクトを「ダブルクリック」すると、専用のコードエディタが表示されます!
f:id:paiza:20170509113713j:plain
初期状態では、「initialize()」と「update()」2つのメソッドが用意されているのが分かります。

「initialize()」は、シーンが読み込まれる時に実行されるメソッドで、「update()」は毎フレームごとに実行される仕様になっています。


まず最初は、「球体」オブジェクト(sphere)を取得することから始めます。

これは、「initialize()」メソッド内で「getObjectByName()」を使って実現することが可能です。

var player;


function initialize() {


    //「球体」オブジェクト名(sphere)を指定し、要素を取得する
    player = scene.getObjectByName( 'sphere' ).body;


}

このように記述すると、「球体」オブジェクトを取得し、変数「player」にその要素を代入することができるわけです。


「球体」オブジェクトを取得したら、あとは簡単です!

キーボードの「キー」に合わせて、「velocity」の値を増減させるだけで自在に制御することが可能です。

次のように、どの「キー」が押されたのかを「IF文」で条件分岐すれば良いでしょう。

function update() {        
        
        if( Keyboard.keyPressed( Keyboard.A ) ) {
                player.velocity.x -= 0.4; //「Aキー」が押されたら左へ移動
        }




        if( Keyboard.keyPressed( Keyboard.D ) ) {
                player.velocity.x += 0.4; //「Dキー」が押されたら右へ移動
        }




        if( Keyboard.keyPressed( Keyboard.W ) ) {
                player.velocity.z -= 0.4; //「Wキー」が押されたら前へ移動
        }




        if( Keyboard.keyPressed( Keyboard.S ) ) {
                player.velocity.z += 0.4; //「Sキー」が押されたら後ろへ移動
        }


        
        if( Keyboard.keyJustPressed( Keyboard.SPACEBAR ) ) {
                player.velocity.y += 5; //「スペースバー」が押されたらジャンプ
        }


}

nunuStudio」では、キーボードの「キー」は「Keyboard.A」のように記述することで、どのキーが押されたのかを判定することが出来るので便利ですね。


この状態で実行すれば、キーボードの「W A S D」キーと「スペースバー」を押すことで、球体を自在に動かすことが出来るようになっているはずです。
f:id:paiza:20170509113814g:plain
さらに、オブジェクトを追加して自分好みのステージを作成しても面白いと思いますよ!


今回のサンプルデモのファイルは、以下のURLからダウンロード出来るのでぜひ参考にしてみてください!
ボールコントロールのデモファイル|GitHub


ちなみに、ファイルの拡張子は「isp」となっており、これはエディタの「ファイル」メニューから、「Load」を選択すると読み込むことができます!
f:id:paiza:20170509113856j:plain
また、最近のバージョンアップによって、「nunuStudio」で制作した3Dゲームなどを自分のブログやサイトに埋め込むことができるようになりました。公式サイトで詳しい手順が掲載されています。


同サイトには、初心者のためのチュートリアル記事も公開されているので便利です!
チュートリアル記事|nunuStudio
f:id:paiza:20170509113928j:plain

JavaScriptでプログラミングをしたい人は、「APIリファレンスマニュアル」も用意されているので、こちらをひと通り読んでおくと良いでしょう。


nunuStudio」でどんな3Dコンテンツが制作できるのかを確認したい場合は、公式のサンプルデモが公開されているのでぜひチェックしてみてください!
公式サンプルデモ|nunuStudio

■まとめ

今回ご紹介した「nunuStudio」は、最近公開されたばかりということもあり、もの凄い勢いでアップデートが行われています。

Web版を利用していれば、常に最新版を使うことが出来るのですが、まだ「アルファ版」なのでこまめにファイルを保存しながら制作することをオススメします。

ブラウザから利用できる3D開発環境としてはかなり有望なので、今後の展開を楽しみにしつつみなさんもぜひオリジナル作品を作ってみてください!

■「Ruby入門編」を期間限定・無料公開中!動画で学べる「paizaラーニング


paizaラーニング」は、プログラミング未経験者・初心者向け学習サービスです。

もちろん、今回の記事で使用しているJavaScriptを学べる「JavaScript入門編」も公開中です!

また現在、普段は有料の「Ruby入門編」の一部レッスンを、期間限定で連続無料公開しております!

↓詳しくはこちら
paiza.jp

paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza