マメな人はバカであれ

バカなりに考えて、バカなりに行動します

技術的なことや、趣味的なことや、私生活的なことを書いてきます

PlayCanvasっていうWebGL/HTML5ゲームエンジンについて

最近は日差しも強く暑くなってきましたが、梅雨入りで少しひんやりしてきましたね。
温度差で風邪をひかないよう体調管理はちゃんとしたいですね。
私はオフィスの空調に殺される毎日です。


PlayCanvas

先日投稿した記事でPlayCanvasなるものを急に題材として使いました。

sutobu000.hateblo.jp

実はこれを使う環境になったので、記事にまとめました。

PlayCanvasとは

まずはPlayCanvasってなんぞやって話なんですが…

なんでも…

  • MITライセンスで公開されていて
  • WebGLHTML5で開発〜配信ができる統合環境で(Editor + Engine + Community)
  • 無料で使用ができて(有料プランもある)
  • オープンソース
  • しかもWebGLライブラリとしても利用可能で
  • 物理エンジンも装備されていて(Ammo.jsが標準装備かつサードパーティ物理エンジンも利用可能)
  • WebVRもできて
  • URLを共有するだけで全端末で実行できちゃう

らしいですよ

どんなことできるのか

ゲームエンジンというからにはゲームを作ることができるわけですが、
Webで使えるということで3Dモデルをぐりぐりみることができるコンテンツとかありました。

もちろんゲームもあります

チュートリアルもたくさんあってかなり充実してそう

developer.playcanvas.com

エディター

こんなものできるんだってわかったところで、実際にエディターをみてみましょ

見た感じUnityと似てる…感じはするけど
操作感的にはほぼ一緒ですね

f:id:sutobu000:20190607171227p:plain

左にツールがあって、
その隣にヒエラルキーのファイルやらが見えますね。

右はエンティティ、その選択したモノの設定をする感じですね。

真ん中でプレビューしながら触れて、

その下は…アセットですね。
外部からインポートしたファイルとかが入るところみたいです。

別の設定画面を開いてみたら

f:id:sutobu000:20190607172013p:plain

Sceneが確認できます。
ゲームでいうエリアを移動するとステージが変えるために、シーン毎でステージを作る感じですかね。

f:id:sutobu000:20190607172005p:plain

Buildしたものがここで確認できるみたいです。
上のURLでBuildしたものをみることができるようです。
このURLを共有するだけで、他ユーザーにもみてもらえるのでめっちゃ便利ですね。

f:id:sutobu000:20190607172010p:plain

パブリッシュとダウンロードできるみたいですね。
ちなみに私はOganizationの有料プランに加入しているのでダウンロードができますが、
無料の場合はできないようです。

f:id:sutobu000:20190607172001p:plain

バージョンが管理できるみたいですね。
git的なバージョン管理方法のようでした。

f:id:sutobu000:20190607172808p:plain

左下のCHATで会話もできるようです。
同じプロジェクトで複数のユーザーで操作する時のやりとりができるようです。
複数のユーザーでプロジェクトを触れるのは魅力的。

ちなみに今回みているこのプロジェクトは以下のチュートリアルを辿って作ったものです。

support.playcanvas.jp

動作

実際に作ってみて動作させてみました。

f:id:sutobu000:20190607173024p:plain

ローディングを挟んでから

f:id:sutobu000:20190607173019p:plain

ゲーム画面に!

ゲームと言いつつ私が作ったこれは敵が多すぎてもうゲームじゃなくなってますが…

playcanv.as

そして、このURLで今までキャプチャーをしていたPlayCanvasのコンテンツを見ることができますし、
ゲームなら遊ぶこともできちゃいます。 すげー

終わり

チュートリアルもやってみてですが、かなり簡単にゲームが作れるんだなって思いました。
私はゲームを作ったことがほぼ皆無ではありますが、webブラウザでこういったゲームやらWebGLやらができてしまう手軽さには驚きました。

個人的にはゲームも作ってみたいですが、Webサイトとかで何かできないかと模索してみたいと思います。