大体１０分ほどで、ブラウザ上で動く3D空間上で動画が見れるゲームを作ります。
動画を見る空間を作るまでを１つの記事として書きたかったのですが、分量の都合上、３つの記事に分けて公開させていただきました。
これが３つ目の記事になります。
PlayCanvasを使って3D空間を作る記事につきましてはこちらの２つの記事で作り方を解説しています。
- 【JavaScript】 PlayCanvasの公式サンプルを使ってモバイル・デスクトップで動く一人称視点の空間を作る【WebGL】
- 【JavaScript】Photon + PlayCanvasを使ってモバイル・デスクトップで動く一人称視点のマルチプレイができる空間を作る【WebGL】
今回作るもの
前回の記事 【JavaScript】Photon + PlayCanvasを使ってモバイル・デスクトップで動く一人称視点のマルチプレイができる空間を作る【WebGL】のプロジェクトを元にして、3Dで動画が見れる空間を作成します。
完成品のプロジェクトはこちらになります。
準備 アカウントの作成〜フォーク
準備するもの
- PlayCanvasアカウント
https://playcanvas.com - Photonアカウント
https://www.photonengine.com/ja/Photon
プロジェクトの準備
フォーク
1.フォークするプロジェクトへアクセス
前回の記事で作成したプロジェクトのファイルをフォークします
https://playcanvas.com/project/696634/
プロジェクトにアクセスをしたらフォークボタンをクリックします。
2. Forkをクリックしてプロジェクトを複製
プロジェクト名を入力してForkボタンをクリックします。
3. フォークしたプロジェクトからEDITORへアクセス
プロジェクトをフォークしたら、EDITORをクリックします
4. シーンを選択
シーンを選択します。今回はUntitledというシーンを選択します。
ビデオテクスチャの実装
これまで、前回までの記事で作成したシーンを複製することができました。
ビデオを再生するための準備をしましょう。ビデオを再生するためには、ビデオテクスチャを使用します。今回は四角いエンティティを作成して、そこにビデオをテクスチャを貼ります。
スクリーンにするエンティティを作成
3D空間に動画を流すために、まず、映像を映し出すためのエンティティを作成します。
1. Boxエンティティを新規作成する
2. エンティティの大きさを変更
エンティティの大きさを変更しましょう。
それぞれ下記の値に設定をします。
| プロパティ ( scale) | 値 |
|---|---|
| x | 16 |
| y | 9 |
| z | 0 |
3. エンティティのポジションを変更
エンティティの位置を変更しましょう。こちらは好きな位置に配置をしてしまって大丈夫です。
4. エンティティの名前をScreenに変更
エンティティが増えてきたときにわかりやすいように、右のINSPECTORからnameの値をBox→Screenに変更します。
マテリアルの作成
動画を映し出すためのMaterialを作成します。
1. ASSETSで右クリックをしてマテリアルを作成
2. DIFFUSEの値を黒色に設定
マテリアルのDIFFUSEを黒色に変更します。
3. エンティティにマテリアルをドラッグアンドドロップで追加
エンティティにマテリアルを追加します。
マテリアルを選択して、エンテティにドラッグアンドドロップをすることでマテリアルを追加できます。
スクリプトを追加
エンテティ、マテリアルの設定ができたので、次に動画テクスチャーのスクリプトを追加します。
動画テクスチャについては下記リンクのチュートリアルにもサンプルのプロジェクトがあります。
動画テクスチャー
https://developer.playcanvas.com/ja/tutorials/video-textures/
動画については、BigBuckBunnyを使用します。
https://gist.github.com/jsturgis/3b19447b304616f18657
1. Rootエンテティを選択し、SCRIPTコンポーネントのCreate Scriptをクリック
2. ファイルを新規作成
Create Scriptをクリックすると、入力欄が出てきますので、ここにvideo-texture.jsと入力をしてエンターを押します。
3. ASSETSからvideo-texture.jsをダブルクリック
4. 開かれたコードエディタにスクリプトをコピー
コードエディタが開かれますが、そこに下記のスクリプトをコピーします。
/*jshint esversion: 6, asi: true, laxbreak: true*/
const VideoTexture = pc.createScript('videoTexture')
VideoTexture.attributes.add('material', {
type: 'asset',
assetType: 'material'
})
VideoTexture.attributes.add('videoSrc', {
type: 'string',
default:
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
})
VideoTexture.prototype.initialize = function () {
this.videoTexture = new pc.Texture(this.app.graphicsDevice, {
format: pc.PIXELFORMAT_R8_G8_B8,
autoMipmap: false
})
this.videoTexture.minFilter = pc.FILTER_LINEAR
this.videoTexture.magFilter = pc.FILTER_LINEAR
this.videoTexture.addressU = pc.ADDRESS_CLAMP_TO_EDGE
this.videoTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE
var video = document.createElement('video')
video.addEventListener('canplay', () => {
this.videoTexture.setSource(video)
})
const loadVideo = () => {
video.src = this.videoSrc
video.loop = true
video.muted = true
video.autoplay = false
video.crossOrigin = 'anonymouse'
video.setAttribute('playsinline', '')
video.setAttribute('webkit-playsinline', '')
}
loadVideo(this.videoSrc)
this.app.mouse.on(pc.EVENT_MOUSEDOWN, () => {
video.muted = false
video.play()
})
if (pc.platform.mobile) {
this.app.touch.on(pc.EVENT_TOUCHSTART, () => {
video.muted = false
video.play()
})
}
const material = this.material.resource
material.emissiveMap = this.videoTexture
material.update()
}
VideoTexture.prototype.update = function (dt) {
this.videoTexture.upload()
}
5. スクリプトの変更を保存する
Ctrl + sやMacの場合はCommand + sを押して、スクリプトの変更を保存します。
左側のファイル名が白色になっていれば、変更が保存されています。
6. エディタへ戻り、スクリプトのPARSEをクリック
スクリプトの保存ができたら、エディタに戻り、video-texture.jsをエディタ側で設定をします。
まず、スクリプト名の横にあるPARSEボタンをクリックします。
すると、material, videoSrcの選択肢が出てくるかと思います。
videoSrcについては先程コピーしたスクリプトで、デフォルトで値を設定しているURLになっています。
7. マテリアルをドラッグアンドドロップでスクリプト属性に追加する
materialの属性に、先程作成したマテリアルをドラッグアンドドロップで適用します。
起動
3D空間に動画の配置をするための設定はこれで完成です。
ビデオテクスチャとして使用することで、動画を再生するプロジェクトは簡単に作ることができました。
完成品 : https://playcanv.as/p/jfhaQCKG/
ゲームを公開する
PlayCanvasでは作成したゲームをウェブ上ですぐに公開できます。
こちらは今回作成したゲームを公開するための方法になります。
1. 左のMEBUからPUBLISH/DOWNLOADをクリック
2. PUBLISH TO PLAYCANVASから公開
3. BUILDSを確認
PUBLISHが成功するとBUILDSに共有できるURLが生成されます。
こちらを共有することで、第三者に完成したプロジェクトを公開できます。
今回のプロジェクトで質問や意見がありましたら。GitHubのIssueか@mxcn3まで連絡をお願いします。
PlayCanvas開発で参考になりそうな記事の一覧です。 入門 応用- PlayCanvasのコードエディターでes6に対応する
- Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった
- PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む
- React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す
- PlayCanvasのエディター上でHTML, CSSを組み込む方法
- 【iOS13】新しくなったWebVRの使い方
PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！