Help us understand the problem. What is going on with this article?

【JavaScript】PlayCanvasを使ってモバイル・デスクトップで動く3D空間上で動画が見れるゲーム作る【WebGL】

大体10分ほどで、ブラウザ上で動く3D空間上で動画が見れるゲームを作ります。
動画を見る空間を作るまでを1つの記事として書きたかったのですが、分量の都合上、3つの記事に分けて公開させていただきました。
これが3つ目の記事になります。

PlayCanvasを使って3D空間を作る記事につきましてはこちらの2つの記事で作り方を解説しています。

  1. 【JavaScript】 PlayCanvasの公式サンプルを使ってモバイル・デスクトップで動く一人称視点の空間を作る【WebGL】
  2. 【JavaScript】Photon + PlayCanvasを使ってモバイル・デスクトップで動く一人称視点のマルチプレイができる空間を作る【WebGL】

今回作るもの

bigbugbunny.gif

前回の記事 【JavaScript】Photon + PlayCanvasを使ってモバイル・デスクトップで動く一人称視点のマルチプレイができる空間を作る【WebGL】のプロジェクトを元にして、3Dで動画が見れる空間を作成します。

完成品のプロジェクトはこちらになります。

https://playcanv.as/p/jfhaQCKG/

準備 アカウントの作成〜フォーク

準備するもの

プロジェクトの準備

フォーク

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の値をBoxScreenに変更します。

マテリアルの作成

動画を映し出すための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をクリック

publish.png

2. PUBLISH TO PLAYCANVASから公開

oc.png

3. BUILDSを確認

PUBLISHが成功するとBUILDSに共有できるURLが生成されます。
こちらを共有することで、第三者に完成したプロジェクトを公開できます。

URL.png

今回のプロジェクトで質問や意見がありましたら。GitHubのIssueか@mxcn3まで連絡をお願いします。

yushimatenjin
インターネットに無限の可能性を感じています。
https://twitter.com/Mxcn3
playcanvas
"PlayCanvasは、ブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。PlayCanvas運営事務局は日本国内でのPlayCanvasの普及を目的に活動しています"
https://playcanvas.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした