Edited at

【PlayCanvas】スライドに組み込む

More than 1 year has passed since last update.

この記事は PlayCanvas Advent Calendar 2017 の16日目の記事です。


PlayCanvasの実行画面をスライドに組み込んでプレゼンテーション出来たら素敵だと思いませんか?

Webスライドライブラリ"reveal.js"のWebサービス"Slides.com"なら簡単にできるので紹介します。


Slides.com

Webベースのスライド作成サービスです、無料から使えます

https://slides.com にアクセスしてアカウントを作成しましょう


deck 作成

Slides.comではスライドのことをdeckと呼びます、まずは一つ作ってみましょう

基本的なSlides.comの使いかたはここでは割愛します


PlayCanvasの画面を組み込む

PlayCanvasでプロジェクトを作成し、ビルドしてURL(playcanv.as/....)を取得しましょう


矩形選択して組み込み

メニューからiframeを選択してURLを入力すると組み込まれます。

サイズは矩形の頂点や辺から簡単に調整できます。




全画面で組み込み

右上のSlide backgroundからiframeを選択し、URLを入力します。

マウス操作やキーボード操作等、なにかインタラクティブな動作をさせる場合は、interactiveにチェックを入れる必要があります。

なお、全画面で組み込んだ場合、Slides.comの仕様で、見ていないスライドでもPlayCanvasプロジェクトはアクティブなままになってしまうようです。パフォーマンスを考えると矩形で組み込んだほうが今は良さそうです。

なお、Google Chromeでは6画面以上を同一タブでレンダリングしようとするとエラーが起きるため、6スライド以上は背景に指定しないほうがよさそうです。

https://forum.playcanvas.com/t/shader-compile-error-if-20-iframes-on-a-page/3025