目次
まえがき
「はが」と申します。2019年頃からPlayCanvasというゲームエンジンを使い始め、それ以来PlayCanvasを使ったコンテンツ制作や、日本でのPlayCanvas開発者コミュニティの運営などを行ってきました。
本書は、PlayCanvasやWebGLを用いたWebXRの開発に興味を持つ方に向けて、PlayCanvasの基本的な使い方からWebXRの開発までをプロジェクトを作成しながら学べるような内容になっています。
PlayCanvasとは
PlayCanvasは、WebGLを活用して3Dグラフィックスを制作するためのフレームワークであり、「PlayCanvasエンジン」と「PlayCanvasエディター」という2つの要素で構成されています。
1. PlayCanvasエンジン
WebGLを利用した3Dグラフィックスを作成できるJavaScriptライブラリです。オープンソースソフトウェアとして提供されており、Three.jsやBabylon.jsといった他のWebGLライブラリと同様に使用できます。
2. PlayCanvasエディター
ブラウザベースの統合開発環境（IDE）で、3Dアセットの管理、シーンの編集、スクリプトの作成が行えます。プロジェクトの作成から編集、公開までをブラウザ上で完結できるため、特別なソフトウェアをインストールする必要はありません。UnityやUnreal Engineといった他のゲームエンジンのエディターに似た操作性を持っているため、これらのエンジンを使った経験がある方ならスムーズに使い始めることができます。
PlayCanvasの歴史
PlayCanvasは、Will EastcottさんとDave Evansさんが設立したロンドンのPlayCanvas Ltd社によって2011年から開発・公開されています。2014年には「iOS 8」がWebGLに対応したのとほぼ同時期に、PlayCanvasはオープンソースプロジェクトとして「MITライセンス」のもとで公開されました（GitHubリポジトリ: playcanvas/engine）。
2017年に「PlayCanvas Ltd」社自体は「Snap Inc.」に買収されましたが、現在もアップデートが続けられており、コミュニティとSnapの開発者によって開発が進められています。
2022年に公開された、Snap Engineer Blogによると、Snap Games（ゲームプラットフォーム）では、公開された80%以上のゲームがPlayCanvasで開発されており、2億人を超えるユーザーに遊ばれています。
2023年にAppleが開催したWWDCでは、「Vision Pro」のWebXR対応として「Babylon.js」や「Three.js」と並んで「PlayCanvas」も紹介されました。
PlayCanvasのバージョン
PlayCanvasのバージョンは本書執筆時点の最新バージョンを使用していますが、PlayCanvasエディターが利用するPlayCanvasのバージョンは自動的に最新の安定バージョンにアップデートされるため、本書のバージョンとは異なる場合があります。
・PlayCanvas エンジン (v1.71.2)
・PlayCanvas エディター (v1.41.0)
PlayCanvasでわからないことがあった場合には？
本書を読み進めるにあたって、わからないことがあった場合に役立つ開発者向けのページを紹介します。
ユーザーマニュアル（日本語）
ユーザーマニュアルは、PlayCanvasの基本的な使い方や各機能の詳細を記載した公式ドキュメントです。2023年にほぼすべてのページが日本語に翻訳されました。
https://developer.playcanvas.com/ja/user-manual/
チュートリアル
PlayCanvasの基本操作から、応用の使い方まで100個以上のサンプルプロジェクトがあります。解説付きのサンプルプロジェクトもあるので、幅広く学ぶことができます。
https://developer.playcanvas.com/ja/tutorials/
フォーラム
フォーラムは、PlayCanvasの公式コミュニティであり、ユーザー同士が質問や回答を共有できます。
PlayCanvasの開発者も参加しているため、開発に関する情報交換や質問、相談が行われています。
APIリファレンス
APIリファレンスは、PlayCanvasの各機能やクラス、メソッドの詳細が説明されている公式ドキュメントです。開発者向けに、より詳細な情報が提供されています。
日本PlayCanvasコミュニティ
約200名以上のメンバーが参加している日本のPlayCanvasコミュニティがあります。
https://playcanvas.jp/community/
商標
本書に登場するシステムや製品名は、関係各社の商標または登録商標です。また本書では、™、®、©などのマークは省略しています。
第1章 PlayCanvasエディターを使う
この章では、はじめてPlayCanvasプロジェクトを作成するために、PlayCanvasエディターのアカウントの登録方法と、プロジェクトの作成方法を説明します。
1.1 PlayCanvasアカウントの作成
PlayCanvasエディターは、ブラウザベースで利用可能なインタラクティブな3Dアプリケーションとゲーム開発プラットフォームです。PlayCanvasエディターを利用するために無料アカウントを作成します。
1.1.1 PlayCanvas公式サイトにアクセス
公式サイトは、こちらのリンクからアクセスできます。
「Sign Up」をクリックして、アカウント作成を行います。
1.1.2 メールアドレス・パスワードを入力
メールアドレス、Googleアカウント、GitHubアカウントから選択してサインアップします。
1.1.3 名前とユーザー名の入力
名前とユーザー名を入力して、「Create Account（アカウント作成）」をクリックします。
ここで入力されたユーザー名はプラットフォーム上で公開される情報となります。
登録したメールアドレスに認証メールが送られますので、記載されたリンクをクリックして認証を完了させてください。これでアカウントの作成は完了です。
1.2 PlayCanvasアカウントの種類
本書は、PlayCanvasのFREEプランを利用して開発を行います。PlayCanvasにはいくつかのプランが用意されているので、それぞれのプランについて説明します。
PlayCanvasには3種類のアカウントタイプがあり、PERSONALプランは、主に個人の開発者向けです。ORGANIZATIONプランは、法人開発者向けの料金体系になっています。
どちらのアカウントタイプにおいても、開発時のエディター機能に制限はありませんが、プライベートでのチーム管理やプライベートプロジェクトの作成などの面で違いが生じます。
| プラン | 価格 | ストレージ | プライベートプロジェクト |
| FREE | ¥0 | 1GB | 作成不可 |
| PERSONAL | ¥2,200/シート・月 | 10GB | 無制限 |
| ORGANIZATION | ¥9,900/シート・月 | 50GB | 無制限 |
無料プランを含めて、商用利用に関する制限は特に設けられていません。
個人でのプライベートのプロジェクトの利用を考えている場合はPERSONALプラン、チーム管理や企業での利用を検討している場合はORGANIZATIONプランが選択されます。
1.3 はじめてのPlayCanvasプロジェクト
この画面は初回の登録時のみしか表示されないため、過去にPlayCanvasをお使いの方はこの画面は表示されないので、こちらをスキップしてください。
メール認証をしてからPlayCanvasにアクセスすると、チュートリアルプロジェクトが開かれます。
PlayCanvasアカウントに最初から作成されるプロジェクトです。案内が表示されるのでエディターの使い方を学ぶことができます。
「Home」をクリックして、PlayCanvasエディターからホームに移動します。
1.3.1 プロジェクト詳細ページ
このページではプロジェクト名の編集や削除、公開範囲の設定ができます。
この画面でプロジェクトに関する設定変更ができます
・プロジェクト名の変更
・プロジェクトの説明文の編集
・サムネイル画像の設定
・プロジェクトのアクセス権限（Public/Private）の設定
・プロジェクトメンバーの管理（招待/削除）
・プロジェクトの削除
1.3.2 プロジェクト一覧へ移動
右上の「PROJECTS」をクリックして、プロジェクト一覧画面に移動します。
1.3.3 PlayCanvasプロジェクト一覧画面
この画面は、PlayCanvasで開発をする際によく使う画面です。
ここからPlayCanvasのプロジェクトの新規追加や削除を行うことができます。
リンクされているページについて
・PROJECTS：プロジェクトの確認、新規プロジェクトの作成
・FEED：ユーザーが投稿したプロジェクトが表示されます。
・ACCOUNT：APIキーの取得、アカウント設定の変更ができます。
・フォーラム：PlayCanvasの開発者フォーラム
・Docs：ドキュメント、2023年に日本語に対応しました。
・ブログ：アップデート情報が月1回程度の頻度で更新されます