2023/06/01 更新

最新の情報はこちらを御覧ください。

PlayCanvasとは？

PlayCanvasとはWebGLベースのゲームエンジンのJavaScriptのライブラリで、開発～公開までをウェブ上で行うことができます。
ARやVRについても簡単に開発することができます。

このQRコード（ARマーカーを読み込むとウェブ上でARが遊べます）

今回はこれをどうやって作るかという記事になります。

Forkをしたプロジェクトにアクセスをして「Editor」に入ります。

Forkをすると、新しいプロジェクトが作成され、編集ができるようになりますのでEDITORをクリックします。

PlayCanvasはエディターからPUBLISHができるのでそちらでPUBLISHをします。
標準のマーカーを読み取ると動かすことができます。

URLを取得します。

QRコードを作成するウェブサイトなどでPlayCanvasのPUBLISHされたURLを使って作成します。

作成したQRコードをチラのウェブサイトから.pattファイルに変換します。

https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

ダウンロードした.pattファイルをPlayCanvasのエディター上に、ドラッグアンドドロップしてPlayCanvasのエディターにアップロードします。アップロードしたあとMatrix Markerエンティティを選択し、アップロードした、.pattファイルを適用します。

変更を加えたのでもう一度PUBLISHします。

QRコードを読み込み、iPhoneの場合はSafariを使用して確認します。
カメラの権限を求められますので許可をし、ARマーカーにカメラをかざすとPlayCanvas製のゲームが表示されます。

文字や3Dモデルのインポートやエフェクトについての説明はこちらの記事をご覧ください。

以下PlayCanvas開発で参考になりそうな記事の一覧です。

入門

応用

その他の記事はこちらになります。

少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

日本PlayCanvasユーザー会 - Slack