Edit

Unity用Needle Engine

Needle Logo +

Unity用Needle Engine

Unity用Needle Engineを使用すると、Unity内で直接、非常にインタラクティブで柔軟性があり軽量なWebアプリケーションを作成できます。Unityエディターの強力なツールを使用して、3Dシーンの視覚的な設定、アニメーション、デザインを行います。Unity用Needle Engineは、シーンをglTFにエクスポートすることを担当し、あらゆるWebフロントエンドフレームワークと簡単に統合できます。

Unityパッケージのインストール

Unity用Needle Engineをダウンロード

  1. ダウンロードした.unitypackageファイルをUnityプロジェクトにドロップし、インポートすることを確認します。

  2. インストールとインポートが完了するまでしばらく待ちます。「A new scoped registry is now available in the Package Manager.」というウィンドウが表示される場合があります。これはNeedle Packageレジストリです。このウィンドウは安全に閉じることができます。

  3. サンプルを探索。 メニューオプションNeedle Engine > Explore Samplesを選択して、利用可能なすべてのサンプルシーンを表示、開く、変更します。

クイックスタートビデオチュートリアル

サンプルから開始

幅広いトピック、ユースケース、業界をカバーする100以上のサンプルがあります。 概要については、サンプルページをご覧ください。

これらのサンプルはすべてUnityで直接利用できます。

  1. サンプルをブラウズするには、Needle Engine > Explore Samplesに進みます

  2. 「Install Samples」をクリックして、エディター内にサンプルパッケージをインストールします（または、パッケージを手動でインストールするには、サンプルのunitypackageをダウンロードします）

  3. 任意のサンプルを選択し、Open Sceneをクリックします。

:::tip サンプルは読み取り専用です – これにより簡単に更新できます。 私たちのサンプルシーンは、UnityのUPMパッケージの一部です。これは、それらのアセットやスクリプトを直接編集できないことを意味します – それらは読み取り専用です。サンプルパッケージからアセットを編集するには、プロジェクトのAssetsフォルダーにコピーします。サンプルパッケージからスクリプトを編集するには、Webプロジェクトのsrcフォルダーにコピーします。 :::

テンプレートから開始

新規プロジェクトを迅速に開始するためのシーンテンプレートを多数提供しています。 これにより、アイデアからプロトタイプまで数クリックで進むことができます。

  1. File > New Sceneをクリックします

  2. 名前に(needle)が含まれるテンプレートのいずれかを選択し、Createをクリックします。Collaborative Sandboxテンプレートをお勧めします。これは、インタラクティビティ、マルチプレイヤー、アセットの追加を始めるのに最適な方法です。

  3. Playをクリックして、新しいWebプロジェクトをインストールして起動します。

20220822-140539-wqvW-Unity_oC0z-needle

ゼロから開始

シーンテンプレートから開始したくない場合は、以下の手順に従うことができます。 実際には、パッケージに含まれている「Minimal (Needle)」テンプレートを再作成します。

  1. 新しい空のシーンを作成

  2. エクスポート用にシーンを設定 空のGameObjectを追加し、名前を「Exporter」にして、Needle Engineコンポーネント（旧称Export Info）を追加します。 このコンポーネントでは、エクスポートされたランタイムプロジェクトを作成し、迅速にアクセスできます。 また、いずれかのパッケージやモジュールが古いか、Webプロジェクトにローカルにインストールされていない場合に警告が表示されます。

    ::: tip プロジェクト名とシーン名 デフォルトでは、プロジェクト名はシーンの名前に一致します。それを変更したい場合は、新しいWebプロジェクトを作成したいDirectory Nameを選択または入力できます。パスはUnityプロジェクトからの相対パスです。 :::

  3. Webプロジェクトテンプレートを選択 次に、プロジェクトのWebプロジェクトテンプレートを選択します。デフォルトのテンプレートは、高速なWebアプリバンドラーであるViteに基づいています。

    ![Unity ExportInfo local templates](/imgs/unity-project-local-template.jpg)

  4. Playをクリックして、新しいWebプロジェクトをインストールして開始します

:::tip 独自のテンプレートを定義 似たようなプロジェクトを多数作成する場合は、Project ViewのコンテキストメニューにあるCreate/Needle Engine/Project Templateを使用して、独自のローカルまたはリモートテンプレートを作成できます。テンプレートは、ディスク上のローカル（コピーされるフォルダ）またはリモートリポジトリ（クローンされるgitリポジトリ）のいずれかにすることができます。 :::

プロジェクトフォルダとファイル

:::: file-tree name="Unity Project" showall="true" ::: file Assets/ プロジェクト固有/専用のアセットがここに配置されます。 ::: ::: file Packages/ このプロジェクトにインストールされたパッケージがここに配置されます。パッケージには任意のアセットタイプを含めることができ、複数のUnityプロジェクトに追加できます。したがって、コードやアセットを共有するための優れた方法です。パッケージの詳細については、パッケージに関するUnityドキュメントを参照してください。 ::: ::: file Packages/Needle Engine/ Unity用Needle Engineは、UnityシーンをWebプロジェクトにエクスポートするために必要なすべてのファイルを含むパッケージです。また、インタラクティブなWebプロジェクトを作成するための組み込みコンポーネントとツールも含まれています。Unity Package Manager経由でパッケージを更新できます。 ::: ::: file Packages/Needle Engine/Core/ ::: ::: file Packages/Needle Engine/Core/Runtime/ ::: ::: file Packages/Needle Engine/Core/Runtime/Components/ すべてのNeedle Engine組み込みコンポーネントが含まれています。コンポーネントリファレンスで詳細を学べます。サンプルを見てこのフォルダを確認することは、利用可能なコンポーネントとそのプロジェクトでの使用方法を知るのに最適な方法です。 ::: ::::

Unityで新しいWebプロジェクトを作成する際、ローカルテンプレートから作成するかを選択できます（デフォルトでは、ViteベースのWebテンプレートを出荷しています）。

ExportInfoプロジェクトパスにリポジトリURLを入力して、リモートテンプレートを参照することもできます（これはシーンと一緒に保存できます）。新しいWebプロジェクトを作成する際、リポジトリはクローンされるかダウンロードされ（gitがインストールされているかどうかによります）、needle.config.jsonファイルが検索されます。クローンされたリポジトリに見つからない場合は、ルートディレクトリが使用されます。github.com/needle-engineでリモートテンプレートプロジェクトの例を見つけることができます。

Unity ExportInfo local templates

一時プロジェクト

NpmDefs経由でのみカスタムファイルを追加し、プロジェクト設定を変更しない場合（例：迅速なフルスクリーンテストの場合）、プロジェクトパスの前にLibraryを付けることができます。プロジェクトはUnityプロジェクトのLibraryフォルダに生成され、ソース管理に追加する必要はありません（Libraryフォルダはソース管理から除外する必要があります）。私たちはこれらのプロジェクトを_一時プロジェクト_と呼んでいます。アイデアを迅速にテストするのに最適です！

UnityでのTypescript

NPM Definitionsはnpm packagesであり、Unityエディターに密接に統合されており、複数のWebまたはUnityプロジェクトとスクリプトを簡単に共有できます。

NpmDefパッケージ内のスクリプトの場合、TypeScriptファイルに対するC#コンポーネントスタブも自動的に生成されます。

NpmDefの作成とインストール

NPM Definitionを作成するには、Unity Projectブラウザーで右クリックし、「Create/NPM Definition」を選択します。 NPM Definitionパッケージをランタイムプロジェクトにインストールするには、例えばNeedle Engineコンポーネント（旧称Export Info）を選択し、dependenciesリストに追加します（これは実質的に、NpmDefパッケージをWebプロジェクトのpackage.jsonのdependencies配列に追加するもので、手動で行うか、npm i <path/to/package>を実行するのと同じです）。

image

ExportInfoコンポーネントでInstallをクリックするなどして、新しく追加したパッケージをインストールすることを忘れないでください。また、サーバーが既に実行されている場合は再起動してください。

NPM Definitionパッケージ内のコードを編集するには、プロジェクトブラウザーでNPM Definitionアセットをダブルクリックするだけで、各npmdefに付属するvscodeワークスペースが開きます。

次のステップ

このページはAIによって自動的に翻訳されました

PreviousEditor SyncNextpt

Last updated