1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-15

この記事は 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を入力すると組み込まれます。
サイズは矩形の頂点や辺から簡単に調整できます。
image.png
image.png

全画面で組み込み

右上のSlide backgroundからiframeを選択し、URLを入力します。
マウス操作やキーボード操作等、なにかインタラクティブな動作をさせる場合は、interactiveにチェックを入れる必要があります。
image.png

なお、全画面で組み込んだ場合、Slides.comの仕様で、見ていないスライドでもPlayCanvasプロジェクトはアクティブなままになってしまうようです。パフォーマンスを考えると矩形で組み込んだほうが今は良さそうです。
なお、Google Chromeでは6画面以上を同一タブでレンダリングしようとするとエラーが起きるため、6スライド以上は背景に指定しないほうがよさそうです。
https://forum.playcanvas.com/t/shader-compile-error-if-20-iframes-on-a-page/3025

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?