ノラWEB屋 野良人(のらんど)- 個人営業のWEB屋さん

HTML5ゲーム開発環境PlayCanvasハンズオンに参加しました

2017年12月10日

PlayCanvas を利用したWebGL×HTML5ゲームハンズオンに参加してきました。

ゲーム制作は畑違いではありますが、ブラウザ上でゲーム開発~公開までできる開発環境のハンズオンとのことで、ちょっと覗いてみようと思って第1部のみ参加してきました。

ちなみにこれが作成したものです(PCのみ対応)↓↓

※矢印キーで戦車を操作してスペースキーで発射

基本的に必要な素材やコードはすべて用意されていて、手順通りに設定やコピペをしただけなので、作成したっていうか教材を組み立てただけですが…。

きちんとしたゲームを作ろうと思うと、かなり勉強しないと難しそうなので、すぐに仕事で使える訳ではない感じ。

ただ知見の裾野みたいなものは広がったかなとは割と感じていて、行って良かったです。

WEBGL自体は身につけておけばWEB制作でも活かせる技術なので、ゲームっていうかとりあえず3Dの表現を学んでみるといろいろ広がるなーと思いました(Three.jsとか?)。

以下はメモたち。

    WEBGL/PlayCanvasとは

    WEBGL

    • ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様
    • HTML5のcanvas要素に描画する
    • JavaScriptで記述して端末のGPUをたたいて
    • ほぼjsなのでコンパイルとかいらない、軽い

    PlaycCanvas

    • クラウド型のゲーム開発環境で、エンジン・エディタ・コミュニティを提供
    • 複数人でも同期しながら同時に開発が進められる
    • ぜんぶブラウザ上で作業。必要なソースはクラウドにアップロードして使う。コードはオンラインエディタ上でやる前提でできてる

    他のWebGL開発ツール・ライブラリとの比較

    • Unityなどのゲーム開発環境と比べ、コンパイル不要で高速・軽量
    • Three.jsなどのWEB系ライブラリと比べると、ゲーム開発に特化
    • 3Dデータはjsonで扱うけど、メジャーぽい形式で作成したモデルをインポートすると変換してくれる

    ハンズオンの感想

    • セットアップ不要で、PlayCanvasアカウントがあればボタンポンで開発スタートできる。すげえ。
    • GUIで操作していく感じではあるが、けっこうガリガリjs書く。ハンズオンではコードはコピペで進めるので書く必要ないが、それでもついていけない人もぽろぽろ。
    • 当たり前だけど畑違いのジャンルなので、ついていくので精一杯…。たぶんUnityの知識とかがあるとより分かりやすかったのだと思うけど、用語の概念のレベルで理解していく必要があった。
    • でもまぁついていくだけで形にできるのだからこりゃすげえ、と思った。教材全部用意してもらって、コピペしながらなのでそりゃそうなんだけども、勉強したらなんか作れそう感はあった(たぶん)。

    なお会場はグランフロントのオフィスビル内のGMOオフィス。ガラス張りのシャレオツ空間でございました…。

    このエントリーをはてなブックマークに追加