Web(ほぼ)未経験者が
PlayCanvasでWebコンテンツを
いろいろつくってみた
ryotaro @utautattaro
Code Grid5周年
おめでとうございます！！
でも今日は
あまりフロントエンド寄りの話は出ないかも...
自己紹介
もともとゲームデベロッパー目指して
大学ではゲーム開発やVR等を研究。
そこからインスタレーション，メディアアート
フィジカルコンピューティング等いろいろやりました。
現在はゲームエンジンやゲーム系ミドルウェアの
開発・技術営業等やっています
Webはほぼ未経験！
アジェンダ
- 結論
- Web未経験でつくったもの
- PlayCanvasとは
- ゲーム開発者からみたWebの世界
- Web開発者からみたPlayCanvas
結論
- Web未経験でもPlayCanvasがあれば
簡単にWebコンテンツが作れる！
- 3DエディターでWebコンテンツを作るのはたのしい！
つくったもの
まずはじめに
自身のポータルサイト
ライトをぐりぐり動かせる
※iframeで組み込んでいるため遷移しません
Portal Page
スマホとPCを使うVRコンテンツ
ハイスペックPCやHMD不要でVR
VOXELCANVAS
Webボクセルモデリングツール
objダウンロード、シェア等できる
これらは全て
PlayCanvasで
作っています！！
PlayCanvas
- イギリス発
- 3Dエディタを持つゲームエンジン
- コンポーネント指向
- ランタイムコード：JavaScript
- スクリプト：JavaScript
- WebGL/WebGL2.0
- 全てWeb上で動作
国内ご採用事例
PlayCanvas Editor
on Web
Unityライクな3Dビューワーでぐりぐり開発
コンポーネント指向
ヒエラルキー，シーン，インスペクター，
リジッドボディ，コリジョン 等
PlayCanvas CodeEditor
on Web
コードもWeb上で記述
JavaScript, HTML, CSS, GLSL, Json等
コードエディタもなかなか強力
同時開発すれば、ペアプロもできる
WebDownload
ビルドしてPlayCanvas上にデプロイ！
Webダウンロードして自身のサイトにデプロイも可能(有償)
iOSビルドなんかもあったりする
PlayCanvas製アプリの
ファイル構成
- files
- 471504.json
- ammo.dcab07b.js
- config.json
- index.html
- logo.png
- manifest.json
- playcanvas-stable.min.js
- styles.css
- __game-scripts.js
- __loading__.js
- __start__.js
- → テクスチャやモデルデータ等のアセット
- → シーン情報が格納されたjson
- → 物理エンジン
- → ゲーム内の設定が全て記載されたconfig file
- → ゲームが表示される
- → ロード画面に表示されるロゴ
- → マニフェストファイル
- → PlayCanvasエンジン
- → スタイルシート デフォルトで全画面
- → ゲーム内のScriptが圧縮化されたもの
- → ロード画面のスクリプト
- → 起動時に実行されるスクリプト
Portal Pageの例
全体で6MBほど
CDNを利用してindex.htmlのみを配置することも可能
ここまでWeb開発の
深い知識なく開発可能！
ゲーム開発者から見たWeb
※あくまで個人的な意見です
- 激流
- ○○.js, ××.js, △△.js ... 多すぎてわからない
- Webにおける統合開発環境が欲しい
- リジェクトやピンハネがないのは素晴らしい
- でも目立ったマーケットもないですよね。。
- ビジュアルに関わるものはビジュアルエディタが欲しい
- マークアップで3D空間を構築するイメージができない
ゲーム開発者から見たWeb
※あくまで個人的な意見です
自分はPlayCanvasを選ぶことで解決
- 激流
- ○○.js, ××.js, △△.js ... 多すぎてわからない
-
Webにおける統合開発環境が欲しい
- ビジュアルに関わるものはビジュアルエディタが欲しい
- マークアップで3D空間を構築するイメージができない
ゲーム開発者から見たWeb
※あくまで個人的な意見です
- 激流
- ○○.js, ××.js, △△.js ... 多すぎてわからない
-
Webにおける統合開発環境が欲しい
- ビジュアルに関わるものはビジュアルエディタが欲しい
-
マークアップで3D空間を構築するイメージができない
- リジェクトやピンハネがないのは素晴らしい
- でも目立ったマーケットもないですよね。。
にわとりたまご問題
コンテンツが流行れば自然と出てくるのでは？
Web開発者から見たPlayCanvas
- 現状での主流WebGLライブラリはやはり
Three.jsやA-Frame等
- 多くのWeb開発者さん曰く
「マークアップはコピペできるのが大きなの利点」
- PlayCanvasは有償
エンジン単体で使う場合は無償だがドキュメントは多くない
エディタから使うことが想定されている
Webコンテンツを作る際は
使い慣れたWebGLライブラリを利用して
ゲームの要素が強くなったときはPlayCanvasを！
結論
- Web未経験でもPlayCanvasがあれば
簡単にWebコンテンツが作れる！
- 3DエディターでWebコンテンツを作るのはたのしい！
ご清聴ありがとうございました！
ryotaro @utautattaro
最後に
- 6月14日(水)にワークショップ実施します！
- 【PlayCanvas × Photonハンズオン】
1時間で複数人参加型のSocial VRアプリを作ろう！
