このセクションの記事

チュートリアル - PlayCanvasを使用して、ブラウザ上で3Dモデルを動かそう！！ 1/4

Avatar
羽賀 流登
  • 更新
フォローする

 

【ハンズオン】PlayCanvasを使用して、ブラウザ上で3Dモデルを動かそう！！【オンライン】

今回作成するプロジェクトについては
このチュートリアルは、PlayCanvasの3Dモデルに対するアニメーション機能を使用して、3Dモデルに対して好きなアニメーションでキャラクターを動かすようにできるようになるためのチュートリアルです。

このチュートリアルでは、PlayCanvasの基本的な使い方、モデルのインポート方法の紹介、アニメーションの設定方法・再生方法、カメラの設置方法について扱います。

シンプルなチュートリアルなので独自のオリジナリティな要素を追加することも可能です。

ぜひ、チュートリアルをすすめる上で自分のオリジナリティを追加してみてください。

 

 

入力装置   アニメーション
キーボード 数字の1 手を降る
キーボード 数字の2 バク転
マウス 画面上のボタンをクリック ジャンプ

本チュートリアルで学べる内容・得られる知見

  • PlayCanvasと3Dモデルについて
  • PlayCanvas Editor Intro
  • Physics
  • Collision
  • Scripting

フォークしてプロジェクトを作成する

まずはプロジェクトを作成しましょう。
本ワークショップではあらかじめ、3Dモデルがインポートされているプロジェクトを用意していますので、それをフォークして始めます。

https://playcanvas.com/project/668393

こちらにアクセスをしてプロジェクトをフォークしてください。

PROJECT名を設定します。好きな名前を入力してFORKをしてください。

FORKすることが出来たら、プロジェクトの作成は終了です。

EDITORを選択してプロジェクトの編集をします

SCENESを選択

PlayCanvas Editor

  1. シーン(SCENE)
    シーンビューには製作中のゲーム世界（シーン）が表示され、自由な位置・角度から眺めることができます。

  2. インスペクター(INSPECTOR)
    シーンの中で選択肢中のオブジェクトが持つ属性を表示・編集するためのビューです。 属性には座標やメッシュといった見た目上のものから、衝突判定や物理制御に関するパラメーターなどもあり、その他ユーザー定義のものもここに表示されます。

  3. ヒエラルキー(HIERARCHY)
    シーン内に存在するオブジェクトの一覧が表示されます。 編集中のシーン内でオブジェクトをコピー/ペーストしたり、適切な名前をつけて整理することもできます。

  4. アセット(ASSETS)
    製作中のプロジェクト（ゲーム全体）に含まれるモデル、スクリプト、グラフィックやサウンドなどのデータ、その他のリソースがファイル単位で表示されます。

  5. メニュー(MENU)
    シーンのビューモードやプロジェクトセッティング等の作業が行えます。

「ゲームの起動」

ゲームを作り始める前に、現状の機能を確認しておきましょう。 PlayCanvasは「ゲーム再生ボタン」をクリックすることで、ゲームの挙動を確認することが出来ます。

ゲームの起動については別ウィンドウで確認をすることが出来ます。

3Dモデルを選択する

ヒエラルキーから「sandy-chan」を選択します。
こちらは3Dモデルをインポートし、PlayCanvas上で表示をしたものになります。

PlayCanvasで３Dモデルをインポートする方法についてはこちらを参考にしてください。
モデル | Learn PlayCanvas

アニメーションを追加する

このプロジェクトには最初から、待機中(idle)というアニメーションが存在しています。現在はTポーズになっていますが、このプロジェクトに対してアニメーションを追加していきます。

ADD COMPONENTをクリック

Animationコンポーネントを追加

Add Assetsからアニメーションを追加

このプロジェクトではすでにmodel → sandy-chan → animationにサンディチャン用のアニメーションが入っております。

ADD SECTIONをクリックします

アニメーションが追加できたらDONEをクリックします

アニメーションを追加することが出来ました。
このときPlayCanvasでは、エンティティが表示された際の動きを決めることができる。Speed, Active, Loopというパラメーターをエディタ上から変更することが出来ます。

Speed
アニメーションの速度を変更できます

Active
起動時にアニメーションを再生するかを選択できます。チェックボックスが入っているとアニメーションが再生されます

Loop
アニメーションをループするか選択できます。

起動する

ActiveとLoopにチェックを入れて起動をします。
そうすると、idleのアニメーションが連続再生されることがわかります。

次

リンク

関連記事

コメント

0件のコメント

サインインしてコメントを残してください。