ワールドで読める本のアイテムをつくってみよう

Cluster Creator Kitを使ってつくることができる作例を紹介します！
今回は手に持って読める本をつくってみましょう。

自分で用意した画像のほか、自由に画像利用が可能になった公式漫画「#クラスター社の日常」など、さまざまな本を置いてみましょう！

モデルの作成とUV展開

まずはBlenderなどで本のモデルを作成します。ここでは今回のアイテム制作に必要なポイントだけ解説するので、Blenderでのモデリング方法の詳細については他の記事も参考にしてください。

本を開閉できるように、左右のページにメッシュを分けてモデルを作成します。

• それぞれのページが綴じ部分で回転できるように、回転の中心となるそれぞれのメッシュの原点（メッシュを選択したときに表示されるオレンジ色の点）の位置をページ面の綴じ部分に合わせておきます。
• このあとのUV展開がしやすいよう、今回は開いた状態で本のモデルを作成します。

続いて、ページ部分のマテリアルを他の部分と分けておきましょう。

• オブジェクトモードでそれぞれのメッシュを選択して、マテリアルプロパティを開いてください。
• マテリアルを分割したい数だけマテリアルスロットを追加し、編集モードで割り当てたい面とスロットを選択して「割り当て」ボタンをクリックします。
• なお今回はUnity上でマテリアルを設定するので、Blender上ではマテリアルの細かな設定は不要です。

さらに、画像がページ全体に表示されるようにUV展開します。

• オブジェクトモードでShiftキーを押しながら左右のページを選択し、UV Editingワークスペースに移動します。
• 3Dビュー右上のギズモをクリック、またはテンキーの1, 3, 7のキーでページを正面から見る視点に切り替え、「UV>ビューから投影（バウンド）」を選択してください。
• 左側のUVビューで、ページ面のUV座標が範囲いっぱいに展開されたことを確認します。

モデルが完成したらfbxに書き出してUnityにインポートします。書き出す際はこちらの記事も参考にしてください。
インポートしたモデルをシーンにドラッグ&ドロップして、ワールドに設置してみましょう。

マテリアルの作成

次に、Unityでマテリアルを作成・適用します。ここではページ部分のマテリアルを作成します。
表紙など他の部分のマテリアルは、こちらの記事なども参考にそれぞれ作成・適用してください。

• UnityのProjectウインドウを右クリックして、Create>Materialを選択します。
• 作成したマテリアルを選択して、Inspectorを確認してください。
  • まず、Shaderを「Unlit/Texture」に変更します。Unlit系テクスチャは光の影響を受けず常にはっきりと表示されるため、絵や文字を見せるためのマテリアルにオススメです。
    • ※ワールドのライティングに馴染ませることを優先したいなどの場合は、デフォルトのStandardシェーダーを始め、必要に応じて適切なシェーダーを選択してください。
  • シェーダーを変更するとマテリアルのInspectorの項目が変わります。Unlit/Textureの場合は四角い枠の部分にテクスチャを指定することができます。Selectから本のページとして指定したい画像を選択、またはProjectからドラッグ&ドロップしてください。
• 作成したマテリアルは、シーン上のモデルにドラッグ&ドロップすることで適用できます。

開閉のアニメーションをつくる

Unityにインポートしたモデルに、開閉の動きを設定していきます。

• Hierarchyを右クリック、または上部メニューのGameObjectからCreate Emptyで新規オブジェクトを作成します。名前はBookとしてください。
• Hierarchy上のBookに、本のモデルをドラッグ&ドロップして子オブジェクトとして配置します。配置したモデルには先ほどと同様にマテリアルを適用してください。
• また、最初は本が閉じた状態にするため、本のモデルが開いた状態であれば片方のページを回転させて閉じておきます。回転させる際は、シーンビュー左上の「Tool Handle Position」が「Pivot」になっていることを確認してください。
  • ※「Pivot」だとモデルの原点中心、「Center」だと見た目上の中心で回転します。

それではまず、本を開閉するアニメーションを設定していきましょう。

• Projectを右クリックして、Create>Animationでアニメーションファイルを新規作成します。
• 作成したファイルは名前を「Open」として、Hierarchy上のBookにドラッグ&ドロップしてください。BookにAnimatorコンポーネントが追加され、またProjectにAnimatorファイルが自動作成されます。
• 上部メニューのWindow>Animation>Animationを開いてください。Bookを選択するとAnimationウインドウ上で動きの編集が可能になります。
  • 赤いボタンを押してRECモードに切り替えます。Animationウインドウの白い線を「30」の位置に移動してから、シーン上で本が開いた状態になるようにモデルを動かし、RECモードを終了します。
  • これで初期の閉じた状態から30フレーム（0.5秒）かけて開くAnimationが作成できました。
    • ※1フレーム=1/60秒です。

同様に閉じるAnimationも作成しましょう。

• 「Close」という名前で新規Animationファイルを作成し、Bookにドラッグ&ドロップします。
• Bookを選択して、Animationウインドウ上で編集中のAnimationを「Close」に切り替えます。
  • RECモードに切り替えて、今度は「0」の位置で開いた状態、「30」の位置で閉じた状態にしてください。それぞれの位置にひし形のキーフレームが作成できたことを確認して、RECモードを終了します。
• これで閉じるAnimationも作成できました。

Animationを切り替える仕組みをつくる

続いて、これらのAnimationを切り替える仕組みをつくりましょう。

• 上部メニューからWindow>Animation>Animatorを選択して、Animatorウインドウを表示します。
  • Bookを選択すると、Animatorウインドウ上にここまでに適用した「Open」「Close」のAnimationが置かれています。
  • Animatorウインドウの何もない場所を右クリックして、Create State>Emptyを選択してください。
  • 作成されたNew Stateを右クリックし、Set as Layer Default Stateを選択して、Entryからの矢印がNew Stateに向かうようにします。
  • もう一度New Stateを右クリックして、Make TransitionでOpenに矢印を繋げます。同様にOpenからClose、CloseからOpenへの矢印も繋げましょう。
  • Animatorウインドウ左上のParametersタブを開きます。+ボタンから「Bool」を選択して新規パラメーターを追加してください。名前は「isOpen」としましょう。
  • New StateからOpenへの矢印を選択してInspectorを確認します。Conditionsに項目を追加し、「isOpen」「true」と設定してください。これでisOpenのパラメーターの値がtrueのとき、初期状態からOpenに遷移するようになります。
  • 同様に、OpenからCloseへの矢印は「false」、CloseからOpenへの矢印は「true」でConditionsを設定すると、isOpenの値が切り替わるたびにOpenとCloseを行き来するようになります。
  • また、それぞれの遷移の「Has Exit Time」はチェックを外しておいてください。

Animation / Animator関連の設定は以上です。仕上げにギミックの設定をしていきましょう。

手で持つと本が開くようにする

持てるようにする

まず、本を手で持つことができるアイテムにします。

持った時に本が開き、手放しした時に閉じるようにする

次はアイテムを持った時・手放した時に先ほど作成した開閉アニメーションが起動するようにします。

自分のつくったイラストや小説など、さまざまな画像を本の形にすることができます。
もっと工夫してみたい人は、表紙などのデザインも凝ってみたり、ページ送りや飛び出す絵本などの仕掛けを考えてみてください！

また、Url Textureコンポーネントを使うと、ワールドを更新せずに画像を差し替えることもできます。
外部にアップロードした画像を定期的に更新するといった使い方ができるほか、公式漫画「#クラスター社の日常」の最新話が更新される画像リンクが公開されたので、そちらも使ってみてください。