Blend4Webのキャラクター準備

このトピックを含む多くの資料がエンジン開発者のWebサイトに公開されています。 ロシア語ではすべてが「噛まれている」。 しかし、ここにインシデントがあります。Blenderでの確かな経験があり、自分をゲーム開発者と真剣に考えている人にとっても、タスクは簡単ではありませんでした。 エンジンを操作する機能の誤解と、率直に言ってJavaScriptの知識不足により、いくつかの段階で「フリーズ」の重大な攻撃が発生しました。



重要な要因は、Unity（c＃）の経験をまったく異なるプラットフォームに移そうとしたことです。 そしてそれは重大な間違いでした。 Blend4Web-WebGLアプリケーションの作成専用に強化されたツールで、クロスプラットフォームのUnityに比べて確かな利点がありますが、いくつかの制限もあります。 Webプレーヤーのサポートが終了し、Unity WebGLエクスポーターのパフォーマンスが低いため、Blend4Webプラットフォームは非常に興味深いようです。 したがって、必要な場合はしたくないが、それを把握する必要があります。



このレッスンは、あなた自身の経験、b4w開発者からのヒント、および公式ドキュメントをまとめたものです。 主に初心者向けに設計されており、私のゲームプロジェクトに基づいています。



私の理解では、ゲームキャラクターは、他のオブジェクトと動き、「考え」、相互作用できるオブジェクトです。 AIの実装は次の記事のために残しますが、ここでは基本的なアクションについて説明します。



Blend4WebはBlenderに基づいているため、モデルとシーンのすべての設定はこのエディターで実行され、b4wと他のソリューションは区別されます。



ゲームレベルはさまざまな方法で作成できます。

• 静的 すべてのモデル、オブジェクトはベースステージに事前に配置されています。 この場合、サードパーティのブレンドファイル（リンク）からオブジェクトを接続するために、標準のBlender関数が使用されます。 したがって、レベル全体がメモリに完全にロードされ、開発者はBlend4Web APIを使用してオブジェクトにアクセスできます。 これは簡単な方法ですが、欠点があります-ブラウザゲームにとって重要な長時間のダウンロードです。
• ダイナミック。 メインシーンがあり、必要なオブジェクトはすべて個別のファイルであり、Blend4Web APIを使用してロードされます。

計画どおり、このゲームには魚がいます-悪ではなく、非常に速く、遅く、大きくも小さくもありません。 それらがレベルにしっかりと配置されている場合、再生可能性は最高ではありません。 それらが異なる場所、品質、量で生成される場合、それははるかに興味深いです。 はい。ネットワークトラフィックは保存されます。 したがって、私は間違いなく2番目のブートオプションを選択しました。



さらに、私は演技のキャラクターに少し焦点を当てます。 私のゲームでは、間接制御を備えた珍しいゲームプレイを思いつきました。 実際、プレーヤーは助けますが、主人公には影響しません。 ここでは、すべてのキャラクターが事前に作成されたパスに沿って移動することが重要ですが、パスと宛先はランダムに、または既存のタスクに応じて生成されます。



キャラクターには2つの主要なアクションが必要です。

• ルートに従ってください。
• タスクを完了するために、または別のオブジェクトと会うときに、軌道から外れます。

これらの要件により、物理学の使用と構成が簡素化されます。 単純なコライダーのみが必要です。

ステップ1. Blenderでモデルをセットアップする

したがって、既製のゲームモデルがあり、そのリソースが目的のSDKフォルダーにあるとします。 エンジンの最新バージョンでは、Webインターフェイスを介してアセンブリおよびデバッグプロセスを自動化できるようになったため、この要件を満たすことが望ましいです。 ただし、要件は簡単です。



シーンファイル（ブレンド）は、 sdk \ blender \ projectディレクトリに配置する必要があります。

リソースファイルと、シーンからエクスポートされたJSONは、 sdk \ deploy \ asset \ projectにあります。

sdk \ apps_dev \ projectフォルダー内のスクリプト、HTML、CSS。



b4wエンジンは元のブレンドファイルではなく、JSON形式で機能します。 エクスポートは、Blenderメニューから実行します。 ファイル| エクスポート| Blend4Web（JSON） 。 エクスポーターはBlenderシーン全体を追い越すことに注意してください。 したがって、ゲームに関係のないオブジェクト、たとえばハイポリのオリジナルを削除する必要があります。 もちろん、APIを使用すると、シーンから目的のオブジェクトを選択できますが、ファイル全体がネットワーク経由でダウンロードされます。



2番目の機能は、修飾子の使用です。 それらを適用する必要はなく、それにより、モデルを修正する機能を遮断します。 Apply Modifiersオプションをチェックするか、 Apply ScaleとModifiersでさらに良くします。 これらのパラメーターは、選択したオブジェクトのオブジェクトパネルにあります。







マテリアル、オブジェクト、テクスチャに人間が読める名前を付けることが重要です。 実際、将来、コードからそれらへのアクセスは名前を使用して実行されます。 ラテン、アンダースコア、および数字が適切です。 ピリオドを使用する標準のBlender自動名は避けてください。



モデル設定を確認する最も簡単な方法は、特別なユーティリティを使用してブラウザで表示することです。 ビューアーで実行オプションを有効にすると、JSONのエクスポート後にプログラムを自動的に開始できます（B4W Export JSONパネルの左側）。 このオプションは、プロジェクトをsdk \ blender \フォルダーに保存する場合にのみ使用できます。これはSDKに適しています。



ビューアーを使用すると、JSONで発生する可能性のある問題に関するシグナルを、ツイスト、すべての側面からモデルを表示、シーンのパラメーターを調整、および最も重要なことができます。 画面の隅にある小さな信号機（図を参照）。「患者」の状態について警告します。 赤と黄色は何かが間違っていることを意味し、ブラウザコンソールでログを表示する必要があります。







この段階ですべてがうまくいけば、物理学を行う時です。 通常、速度と品質のバランスをとるために、モデルの元の形式ではなく、単純化されたバリエーションが使用されます。 さらに、立方体、球、カプセルなどの単純なプリミティブが最もよく使用されます。 個人的には、ゲームでは正確な物理的効果ではなく衝突を計算する必要があるため、単純な立方体に決めました。







これを行うために、新しいキューブプリミティブをシーンに追加しました。 モデルに対してルート（親）にし、すべてを1つにグループ化しました。 これを行う方法がわからない場合は、ステップバイステップのアルゴリズムを次に示します。

• モデルを選択してからコライダーを選択します。 CTRL + Pを押して、表示されるメニューからオブジェクトを選択します。
• 選択したオブジェクトをグループ化するには、CTRL + Gを押します

これらのアクションの後、Fishという名前のコライダーがルートになりました（上記の図を参照）。 物理的な行動に参加し、ステージを動き回るのは彼であり、モデルは単なる「乗客」になります。



したがって、すべての物理設定はキューブコライダーに関して実行されます。 最初にすることは、ビューではなくその形状のみが必要なため、エンジンのレンダリングで視覚化をオフにすることです。 上の図のように、設定で[ レンダリングしない ]オプションをオンにします。 2つ目は、[ 動的オブジェクトの強制 ]オプションを有効にすることです。 これは、必要なAPI関数の一部の機能に必要です。 ただし、他のすべてのパラメーターは[物理]パネルにあります。







実際、Blend4Webのオブジェクトの物理はアクティブ化するのが非常に簡単です。 Object Physicsのボックスをチェックするだけで、モデルは外界と相互作用します。 相互作用のタイプは、Typeパラメーターによって決定されます。 図では動的が選択されていますが、これは偶然ではありません。魚モデルは可動性があるためです。 壁、階段、その他の障害物など、シーンの固定要素については、静的タイプを設定する必要があります。



コライダービューは、[ 衝突範囲 ]タブで選択されます。 ボックスには、ボックスに最適な形状として図に示されています。 もちろん、モデルには、使用可能な物理プリミティブのいずれかを選択できます。



そして最後の1つはCharasterオプションです。 名前によって、それがアクティブになることはすでに明らかです。 はい、確かに、Blend4Web開発者はユーザーの面倒を見て、キャラクターの動きの主要なパラメーターのクイック設定を追加しました：ウォーキング、ジャンプ、ランニング、ウォーキングなど。 もちろん、これは特に魚には当てはまりませんが、このオプションを有効にしないと、一部のAPI関数が機能しません。



原則として、それだけです。 シーンをエクスポートして、プログラミングに進むことができます。

ステップ2.プログラムコード。

記事の 1つで、Blend4Webアプリケーションを作成する機能について既に説明しました。 したがって、私は繰り返しませんが、レッスンのトピックに直行します。



ご存じのように、Blend4Web API関数は個別のモジュールにグループ化されており、これらのモジュールは使用前に宣言する必要があります。

//  ,   AI  b4w.register("game_fish", function(exports, require) { //  var m_scenes = b4w.require("scenes"); var m_cfg = b4w.require("config"); var m_data = b4w.require("data"); var m_trans = b4w.require ("transform"); var m_phy = b4w.require ("physics"); var m_obj = b4w.require ("objects"); … var APP_ASSETS_PATH = m_cfg.get_std_assets_path() + "waterhunter/"; exports.new_fishes = function() { //-  } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ゲームのメインシーンが既に読み込まれていて、最初の魚を「プール」に放す必要がある状況を想定します。 次に、メインスクリプトに次の行があります。

 //  AI  var m_fish = b4w.require("game_fish"); … //  m_fish.new_fishes();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モジュールが最初にすべきことは、モデルとともにファイルをアップロードすることです。

 exports.new_fishes = function() { //-  m_data.load(APP_ASSETS_PATH +”fish.json”, fish_loaded_cb,null,true,true); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

m_data.load関数は、JSONファイルをロードします。 作業にはいくつかの微妙な点がありますが、最初に、エンジンの観点からシーン階層が何であるかを明確にする必要があります。



アプリケーションのすべてのシーンには、ファイルのダウンロード時に割り当てられる特定のシリアル番号があります。 最も低い基本レベルは最初にロードされたシーンであり、その番号は0です。他のすべては次の数字1,2,3 ... nを受け取ります。



ゼロレベルは、他と比較して特に重要です。 すべてのグローバル設定、NLAロジック（使用する場合）、照明、カメラはこのシーンから取得されます。 したがって、後続のファイルはグローバル変数なしでアプリケーションにダウンロードされ、既存のカメラと光源は無視されます。



ロードされたレベルに割り当てられたシリアル番号により、オブジェクトを識別できます。 異なるシーンに同じ名前のオブジェクトが空であるとします。 名前とシーン番号を指定すると、目的のオブジェクトにアクセスできます。



ダウンロードに戻ります。

 m_data.load(APP_ASSETS_PATH +”fish.json”, fish_loaded_cb,null,true,true);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

関数に渡される最初の値は、ファイルの名前（「fish.json」）です。 また、定数を使用してディレクトリを指定することをお勧めします。 実際のところ、プロジェクトの最終アセンブリの後、SDKフォルダー内の分散ファイルは1か所にグループ化されます。 このアクションは自動的に行われるため、失われたファイルに問題がないように、この定数が必要です。 以前は、変数のスコープで宣言されていました。

 var APP_ASSETS_PATH = m_cfg.get_std_assets_path() + "waterhunter/";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目の値（fish_loaded_cb）は、ダウンロードの完了後に呼び出される関数の名前です。 知っておくべきいくつかのニュアンスがあります...



実際のファイルのダウンロードは非同期に実行され、元のロード関数は、ダウンロードが完了する前にメインスレッドに制御を返します。 残念なことに、この点はSDKの公式ドキュメントでは指定されていないため、コードが機能しない理由を見つけようとするときに私の時間を大幅に失うことになりました。



3番目の値（nullで示される）は、読み込みプロセスに関するデータを送信する関数の名前です。 プリローダーの作成に役立ちます。 今は必要ありません。 この記事のプリローダーの作成について読んでください 。



エンジンSDKの4番目の値（trueに設定）は、wait_complete_loadingとして示されます。 実際、これは以前私を混乱させました。 実際、このパラメーターはfish_loaded_cbの呼び出しのみを担当します。 trueに設定すると、すべてのファイルデータがロードされた後にコールバックが実行されます。 False-キーオブジェクトをロードした後の関数の早期呼び出し（たとえば、音はそうではありません）。



最後の値は、シーンに追加された新しいオブジェクトの状態を担当します。 この場合、それらはオフになり、見えなくなり、物理学に反応しません。 これにより、それらを配置してアクションの準備をすることができます。



したがって、オブジェクトはシーンにロードされます。 これで、すべてのアクションが関数になります。

 function fish_loaded_cb (data_id) { //data_id -     //-  }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクトのロジックに関連するいくつかのコードはすでにここで想定されています-これは次の記事のトピックです。 しかし、私は何かを追加します。



オブジェクトの主なモーションコントロールは、変換、物理の2つのエンジンモジュールに集中しています。



変換には、オブジェクトの移動、回転、スケーリングのための基本的な機能が含まれています。 そして、これはフレームの変更ごとに即座に起こります。 したがって、連続的に生成されたイベントを使用する場合にのみ、移動が可能です。 Blend4Web APIは独自のイベント実装を提供していることに注意してください。



物理学は、物理学に関連する多数の機能を提供するモジュールです。 それらのいくつかはBlenderのCharaster設定のアクティベーションを必要とすることに注意してください（上記参照）。 これは主に、キャラクターの動きの制御に関連しています。 アクションは物理に基づいているため、イベントを使用する必要はありません。



キャラクターが前進する簡単な例を考えてみましょう。

 function fish_loaded_cb (data_id) { //         data_id var obj_fish = m_scenes.get_object_by_name ("fish", data_id); //   m_phy.set_character_move_dir(obj_fish,1, 0); }