Unity 5とJavaScriptを使用してWebGLゲームを作成するための簡単なガイド

コアポイント：

UNITY 5のWebGL Exporterは、WebGLとASM.JSを使用してインタラクティブな3Dグラフィックをブラウザで直接レンダリングするプロセスをWebに公開するプロセスを簡素化します。
• このチュートリアルは、プロジェクトのセットアップ、プラットフォームで跳ね返るヒーローキャラクターの作成、沒入型ゲーム體験のための一人稱視點を追加するJavaScript（UnityScript）を使用して、Unityでシンプルなゲームを作成する方法をガイドします。
• Unityのスクリプトは、プログラマティックプラットフォームの生成や、マウス入力が使用するレスポンシブコントロールなど、ゲームのヒーローに影響を與える動的なゲームの動作を可能にします。
• ゲームを完了するための重要な手順には、ゲームメニューにスタートボタンを備えたユーザーインターフェイスを追加すること、WebGL対応ブラウザで再生できるようにプロジェクトをWebGLアプリケーションとしてエクスポートするようにビルド設定を構成することが含まれます。
このチュートリアルは、スコアの追加、より多くのプラットフォームタイプ、追加の入力方法など、さらに改善された提案で終了し、Unityの汎用性をクロスプラットフォームゲーム開発ツールとして示しています。
• この記事は、ニルソン?ジャック?コリンズ、マーク?トウラー、マット?バーネットによって査読されました。 SetePointコンテンツを最高に獲得してくれたSetePointのすべてのピアレビューアに感謝します！

Unityは、PC、ゲームコンソール、モバイルデバイス、Webサイトのビデオゲームを開発するために使用されるクロスプラットフォームゲームエンジンです。最新バージョン（UNITY 5）にはWebGL Exporterが付屬しています。つまり、開発者はゲームを簡単にWebに公開できます。名前が示すように、WebGLエクスポートはWebGL（インタラクティブ3Dコンピューターグラフィックスのレンダリング用のJavaScript API）およびASM.JS（Mozillaが開発したJavaScriptのサブセットが「Webのアセンブリ言語」と宣伝されています）を使用します。 ASM.JSとWebGLの詳細については、UnityとUnreal Engineの詳細をご覧ください。

このチュートリアルでは、統(tǒng)一を始める方法を紹介します。また、JavaScriptを使用してUnityで簡単なゲームを作成する方法と、ゲームをWebにエクスポートする方法も紹介します。 ここで完成したゲームを表示することができます（WebGLをサポートするデスクトップブラウザが必要です）、またはGitHubリポジトリからゲームファイルとプロジェクトファイルをダウンロードできます。

始めましょう...

UnityのJavaScriptに関する

指示

UnityのJavaScriptについて話すとき、私たちは実際にunityScriptについて話しています。これはJS方言の一種です。 Unity自體はしばしばこのJavaScriptに言及していますが、より冷笑的なオブザーバーは、「Unityを使用するJavaScript」がマーケティング戦略であると信じています。いずれにせよ、UnityScriptがECMAScriptの仕様に準拠していないことを明確にする必要があります。また、そうしようとしませんでした。ここで違いの概要を見つけることができます。

Unityのインストール

このチュートリアルを開始するには、ここからダウンロードできるUnityバージョンを?qū)g行する必要があります。 Unityには、WindowsとMac OS X用のインストーラーがあります。 Linuxユーザーはワインを介して団結を?qū)g行できますが、結果は異なる場合があります。

インストールが完了したら、開始できます！団結を開いて、新しい3Dプロジェクトを作成しましょう。

プロジェクトの設定

統(tǒng)一が最初に開かれた後、メインウィンドウを理解するために時間をかける必要があります：

1. 左端のパネルは要素と方向ライト要素があるはずです。 真ん中は
シーン
2. ビューです。これは、3Dスペースのカメラとライトをアイコンの形で示しています。 シーンタブの隣には、プレイヤーが見るように、ゲーム自體を表示するタブがあります。これは、エディターでゲームをテストするように設計されています。
3. 右側には、要素の設定を変更できる検査官パネルがあります。試してみましょう。階層の方向ライトをクリックしてください。これで、この光に関する多くの情報を確認し、
シャドウタイプ：シャドウ
4. を使用してシャドウをオフにできるようにする必要があります。 下部には、プロジェクトウィンドウがあり、ゲームの開発に必要なファイルビューが表示されます。 unityのインターフェイスに精通しているので、開発を開始する前にもう1つのことがあります?，F(xiàn)在のシーンを保存します。 ファイル＆gt;シーンの保存 ascetsという名前のフォルダーを指すダイアログボックスを開きます
ユニティでファイルを整理する一般的な方法の1つは、サブフォルダーを使用することです。したがって、シーンという名前の新しいフォルダーをAssetsフォルダーに追加し、このフォルダーのlevel.unityという名前のシーンを保存します。
5. ヒーローを作成します
私たちのゲームは、あるプラットフォームから別のプラットフォームにジャンプし、ますます高くジャンプする1つのヒーローで構成されます。それが1つを見逃していて、無に陥ると、ゲームは失敗します。それでは、ヒーローを作成することから始めましょう。プレイヤーは一人稱の観點からゲームを見るので、ヒーローの外観は重要ではないので、標準の球體ジオメトリを使用できます。球の利點は、いくつかのステップで作成できることであり、ジャンプする必要がある物理的特性に適合することです。

階層

でを作成し、検査官を使用して次のプロパティを編集します。

再生ボタンを押して、何をするかをテストしましょう。スカイラインの前にある3Dスペースに球體が表示されるはずです。

ヒーローが落ちるためには、重量を追加する必要があります。したがって、インスペクターの対応するボタンをクリックし、rigid bodyを選択して、球體にコンポーネントを追加する必要があります。そして、ヒーローを回転させたくないので、制約をオンにし、回転行のすべての軸を選択することにより、剛體コンポーネントのヒーローをフリーズします。シーンが再び再生されると、ヒーローが落ちるのを見ることができるはずです。

ヒーローをエンドレスフォールズから救うために、プラットフォームとして機能するフラットボックスを作成します。これを行うには、キューブを追加して、スケールを0.1に設定する必要があります。シーンを再生すると、ヒーローがプラットフォームに安全に著陸していることが確認されますが、自然に見えないことを認めなければなりません。では、どのようにヒーローをリバウンドさせるのでしょうか？いくつかの物理的な材料を追加します。

ヒーローをリバウンドにします

最初に、球體が弾力性を発揮するために新しい物理材料を作成する必要があります。これを行うには、Assetsフォルダーにマテリアルと呼ばれる新しいフォルダーを作成し、ここで新しい物理的な素材を作成します。 bouncy_sphereという名前を付けましょう。

インスペクターで調(diào)整するために必要な値は次のとおりです。 この素材をSphere Collider

に追加すると、球體が上下に跳ね返りますが、常に同じ高さに達します。バウンスごとに球體がますます高くジャンプするためには、プラットフォームに物理的な素材を追加する必要があります。これを行うには、bouncy_platformという別の素材を作成し、その値を次のように変更します。

<code>位置 { X: 0, Y: 2.5, Z: 0 }
縮放 { X: 0.3, Y: 0.3, Z: 0.3 }</code>

ここで一貫性を達成するには、

階層でダブルクリックすることにより、キューブ要素をプラットフォームに変更する必要があります。今すぐゲームを開始すると、球體が毎回ますます高くジャンプすることに気付くことができます。 また、

プラットフォームと呼ばれる新しい標準素材を作成して、プラットフォームに特定の色を付與します。この素材を作成した後、＃c8ff00を

<code>動態(tài)摩擦：10
靜態(tài)摩擦：10
彈性：1
摩擦組合：最大
彈跳組合：最大</code>

albedo

color（albedoはUnity UIのラベルです）として使用し、この素材をプラットフォーム要素にドラッグアンドドロップします。今は黃色であるはずです。 一人稱の視點を追加

一人稱の視點を追加するために、カメラをドラッグアンドドロップします（階層）球體に。これにより、カメラがヒーローの子供になり、カメラが動くときにカメラが球體に従うようになります。カメラのプロパティも次のように調(diào)整する必要があります

また、球體の2番目の子要素としてスポットライトを作成します。これにより、プレイヤーはヒーローの現(xiàn)在のジャンプ高さのアイデアを與えます。スポットライトの値を次のように調(diào)整します

（その後の手順は、スペースの制限のために簡単に説明され、コアロジックとキーコードスニペットが保持されます）

プログラミングコントローラー、プログラマティック作成プラットフォーム、ゲームメニューの追加、ゲームボタンの開始ボタンの追加、WebGLブラウザゲームとしてプロジェクトを公開するなど。元のドキュメントを參照してください。 スペースの制限のため、ここで繰り返しません。 重要なのは、Unityのスクリプトシステム、ゲームオブジェクト管理、物理エンジン、UIシステムのコア概念を理解し、チュートリアルのコード例と組み合わせてそれらを練習することです。

FAQ（FAQ）

（FAQセクションもスペースの制限、コアの質(zhì)問、および簡単な回答の保持により簡素化されています）

パフォーマンスを向上させるためにWebGLゲームを最適化する方法は？

抽選コールの數(shù)を減らし、より少ない素材と組み合わせメッシュを使用し、詳細レベル（LOD）を使用し、テクスチャとオーディオファイルを圧縮し、Unityのプロファイラーを使用してパフォーマンスボトルネックを識別および修正します。

モバイルゲーム開発にWebGLを使用できますか？

はい。ただし、WebGLゲームはネイティブアプリケーションよりも多くのリソースを消費する場合があり、慎重に最適化する必要があります。

私のwebglゲームをデバッグする方法は？

Chromeの開発者ツールやFirefoxのWebコンソールなどのブラウザツールを使用してデバッグできます。

マルチプレイヤー機能をWebGLゲームに追加する方法は？

バックエンドサーバーは、プレーヤー間の通信を管理するために必要であり、UnityのビルトインネットワークシステムUNETまたはサードパーティソリューション（Photonなど）を使用できます。

私のwebglゲームでお金を稼ぐ方法は？

ゲーム內(nèi)広告、アプリ內(nèi)購入、またはフリーミアムモデルが利用可能です。

私のwebglゲームのグラフィックを改善する方法は？

高品質(zhì)のテクスチャ、高度な照明技術、シェーダーが利用可能です。

WebGLゲームにさまざまな畫面サイズに応答する方法は？

UnityのUIシステムを使用して柔軟でスケーラブルなユーザーインターフェイスを作成し、畫面クラスを使用してプレーヤーの畫面サイズ情報を取得し、それに応じてゲームを調(diào)整します。

私のWebGLゲームにサウンドエフェクトと音楽を追加する方法は？

Unityのオーディオシステムを使用し、オーディオファイルをインポートし、AudioSourceおよびAudioClipクラスを使用して再生を制御すると、オーディオミキサーを使用して複雑なサウンドスケープを作成することもできます。

私のWebGLゲームを不正行為から保護する方法は？

ゲームデータのサーバー側の検証、JavaScriptコードの難読化、安全な通信プロトコルの使用を?qū)g裝できます。

投稿後にWebGLゲームを更新するにはどうすればよいですか？

ゲームを再コンパイルし、Unityを変更し、新しいビルドをサーバーにアップロードします。

この簡素化されたバージョンが役立つことを願っています！ unityエンジンのコアコンセプトと実務経験を理解することは、WebGLゲームの開発の成功に不可欠であることを忘れないでください。

以上がUnity 5とJavaScriptを使用してWebGLゲームを作成しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。