Cubism 4 SDK for Unity お試しガイド(1/4)
おかげさまで、先日公開しました「Cubism WebAR お試しガイド」は大変好評となっております。
そして次は…みなさんのTwitterのツイートにもLive2Dを埋め込んでみませんか…！？
Twitterの機能を利用して、CubismのモデルをPC上で触れるようにしてみました！#Live2Dhttps://t.co/HbZwZ8Hc7O
— Live2D 開発チーム (@live2d_dev) May 1, 2020
（※PC版でのみ表示可能です。）
ということで、今回はUnityを使ってモデルをツイート上で動かす手順を説明します！
Unityを使うと言っても心配無用、プログラムは一切書きません。本当です。
Unity上での全ての操作は「クリック」と「ドラッグアンドドロップ」だけですので、「プログラミングわからない！」という方もタイムラインでモデルを動かせるようになりますので、是非チャレンジしてください！
※ここで説明する方法は、本来は映像や音声のための機能で、Twitterのポリシーに反した使い方になります。将来的にこの方法で表示できなくなる可能性があることはあらかじめご了承ください。
(2024/04/19追記)記事公開当時、X(旧Twitter)社のポリシーに反した使い方となる、といったご案内をいたしましたが、改めてPlayer Card Policyの内容を確認し、この記事内でのカードの利用は「 enhance your Player Card content with links to your website or mobile application.」の範囲内に収まると判断いたしましたので、引き続き記事を公開いたします。
なお、この見解はX社の見解ではございません。
ご利用の際は必ずX社が公開している最新の利用規約「Player Card Policy」の内容をご確認いただいてからのご利用をお願いいたします。
※この記事ではUnityのWebGL書き出しを利用し、Webへのアップロードを必要とします。お試しの際は他人とやり取りする予定のあるモデルファイル等、機密性の高いモデルファイルを扱うことは推奨しておりません。
1. 用意するもの
・Cubismモデル
・モーション（待機中のモーション、タップ時のモーション）
基本的にモデルもモーションもWebARで使用したものを流用可能です。
ただし、今回はUnityで使うので、モーションはターゲットバージョンを「SDK（Unity）」に設定して書き出す必要があります。
ここではサンプルモデルの「ハル(受付バージョン)」を使って説明します。
2020/04/17現在、このサンプルモデルにはSDKで使用するための組み込みデータが同梱されていません。
必要であれば、 Cubism WebAR お試しガイド を参考にして組み込み用データを書き出してください。
・Unity
以下でインストールの手順を説明します。
・Cubism SDK for Unity
CubismSdkForUnity-4-r.1.unitypackage
・サムネイル用の画像
Twitter上で表示するサムネイル画像です。
2. Unityをインストールしよう！
はじめに、PCにUnityをインストールします。
以下のページを開き、「Unity Hub をダウンロード」をクリックして、Unity Hubのインストーラをダウンロードします。
インストーラを実行し、任意の場所にUnity Hubをインストールします。
インストールが完了したら、Unity Hubを起動します。
この段階ではまだUnity自体はインストールされていませんが、まずは先にUnityのアカウントを作成します。
Unity Hub右上のアカウントボタンをクリックして「サインイン」をクリックします。
水色になっている「IDを作成」の部分をクリックします。
アカウントを作成するために必要な情報を記載して「Unity ID アカウントを作成」ボタンをクリックします。
登録に使用したメールアドレスに確認のメールが送信されていますので、そちらでメールアドレスの確認を完了し、Unity Hubの画面で「続行」ボタンをクリックします。
以上でUnityのアカウント作成は完了です。
それではUnityの本体をインストールしましょう。
Unity Hub左側の「インストール」をクリックします。
開かれる画面は、インストールされているUnityのバージョン一覧になります。
現在はまだインストールしていないので何も表示されていません。
以下をブラウザのURL欄にコピー＆ペーストしてEnterを押します。
unityhub://2019.3.1f1/89d6087839c2
するとブラウザーが開かれ、Unity Hubを開くかどうかを聞かれます。
ブラウザーにもよりますが、例えばGoogle Chromeの場合はこのように表示されます。
Unity Hubで開くことを選択すると、Unity Hubが画像のような表示になります。
このリストの中の「WebGL Build Support」にチェックを入れ、右下の「INSTALL」をクリックします。
他の項目にチェックを入れていても構いませんが、その分容量が必要になりますので、お使いのPCの残り容量にご注意ください。
以上でUnityのインストールは完了です。
次はUnityでCubism SDKを使用したプロジェクトを作成します。
3. プロジェクトの準備をしよう！
まずUnity Hub左側の「プロジェクト」をクリックします。
「新規作成」ボタンの右にある三角をクリックすると、インストールされているUnityのバージョンが一覧で表示されます。
この中から「2019.3.1f1」をクリックします。
「テンプレート」は2Dを選択します。
プロジェクトの名前や保存先を決めたら右下の「作成」をクリックします。
「作成」をクリックすると、このような画面が表示されます。
このプロジェクトにCubism SDKをインポートします。
Unityの画面内に「Project」という名前のウィンドウがあります。
（これを「プロジェクトウィンドウ」といいます。公式ドキュメント）
ここへ、ダウンロードしたSDKをドラッグアンドドロップします。
すると「Import Unity Package」という名前のウィンドウが出てきますので、全ファイルにチェックが入っていることを確認して右下の「Import」をクリックします。
Unityの再起動が必要というダイアログが出てきますので（ちゃんと読んでくださいね）、「ok」ボタンを押してダイアログを消します。
その後Unityを閉じて、Unity Hubから今閉じたプロジェクトを開きます。
これでCubism SDKのインポートは完了です。
Unityを再起動したあとに「Console」と書かれたウィンドウにエラーが出ていなければ正常にインポートできています。
次の記事では、Unityへモデルをインポートします。
この記事が気に入ったらサポートをしてみませんか？