Noodl x PlayCanvasで一つ上の表現力を手に入れる

3244 ワード
Noodl PlayCanvas PlayCanvas テキストリンク

Noodlアドベントカレンダー16日目の記事です。

爆速でアプリなどのプロトタイプが作れるNoodlですが、今回はweb上でお手軽に使えるゲームエンジンPlayCanvasを使って一つ上の表現にチャレンジしてみます。

PlayCanvas

PlayCanvasは、デスクトップとモバイルブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。豊富な機能を揃えた3Dエンジンとクラウドホスティングされた開発環境およびツールセットを備えています。

うれしいことに無料から使えるフリーミアムモデルとなっています。

GMOさんで定期的にHands-Onが開催されているので、PlayCanvas自体の導入はHands-Onからだと入りやすいと思います。

このPlayCanvas、Javascriptベースというだけでなく、ワンクリックでWebGLアプリケーションのホスティングができるためNoodlと相性抜群です。

PlayCanvasからのPublish

Editor画面のメニューにある[Publish/Download]から[Publish you project publicly on PlayCanvas]を選んで名前などの情報を打ち込んでPublishします。

PlayCanvasは自分でホスティングしたい場合にZIPでDownloadすることもできますが、その場合は2580円/月～の有料となります。

Publishが済んだら2枚目の画像の[BUILDS]からPublish済のゲームを開くことができますので、そのURLをメモしておきます。

私の場合は下記のURLになりました。（開くとTankゲームが始まります）
https://playcanv.as/b/HP21rQe5/

＜ゲーム操作＞
　矢印キー：Tank移動
　スペースキー：砲撃

Noodl

Noodl側はHTML Contentノードを使うといたって簡単にできます。

HTML Contentノードをクリックし、Properties > Content > HTMLにあるEditボタンをクリックするとエディタが開くので下記のコードを記載します。
*****はPublishされたゲームのURLを記載します。

HTMLノード
<!DOCTYPE html>

<iframe src="********************"
         frameborder="0" width="100%" height="100%"></iframe>

HTML Contentノードを青いノードの下にぶら下げるとPlayCanvasのゲームが表示されます。

HTML Contentノードを使うときのポイント
1. iframeのwidth, heightは100%にする
2. HTML Contentノードの親にGroupノードを挟み、GroupノードのDimensions, Placementでサイズと位置を調整する
3. HTML ContentノードのDimensionsでサイズを小さくすれば余白を作ることができる
4. Rectangleノードを挟むことで好きな色の額縁を作ることができる
5. ゲーム画面はPageノードで切り替えると良いが、簡易的に画面のON/OFFを試したい場合、Statesノードで親のGroupノードのOpacityを制御することもできる（このときリロードされる）

まとめ

  • PlayCanvasは作ったゲームを無料でWeb上にPublishできた
  • NoodlではHTMLが使えるので特定のページの埋め込み、調整、制御が簡単にできた