はじめに

レミングスでAmigaをプレイしていたのは子供の頃の私だけではなかったと思います。 数十年が過ぎ、私はとりわけゲーム開発者、 UnityチュートリアルでホストされるYouTubeチャンネルになりました。



ある晩、私はGame Maker 2の助けを借りてレミングスを再現することについて、 マイクデイリーのこれら2つのビデオ（ パート1 、 パート2 ）に出会いました。ノスタルジアは私に燃え上がり、それで何かをすることにしました。 それで、私は自分のリソースを使ってUnityで自分のバージョンを作成し始めました（明白な理由のため）。



この記事では、自分の作業プロセスについて説明します。 ただし、簡潔にするために、最も重要な側面のみを検討します。 これで十分ではないと思われる場合は、 ここで完全な開発プロセスを説明するビデオを1行ずつ見ることができます。



さらに、 ここではWebGLでプロジェクトを再生できます。 考えられるバグ。



プロジェクトの複雑さは、レミングスの感覚とメカニズムを再現することでした。 多くのキャラクターのレベルを移動するときに、ピクセルパーフェクトコリジョンを提供することを含みます。これは、スキルによって異なります。

地図作成

最初から、レベルは編集可能なグリッドでなければならないことは明らかでした。 問題は、高いゲーム速度を維持しながら、個々のノードでこのグリッドをレンダリングすることでした。



徐々に、レベル全体に1つのテクスチャを使用することにしました。各ピクセルは1つのノードになり、ノードへの変更はテクスチャ自体の変更になります。



これを行うには、ディスクからテクスチャを変更するときに、Unityがインスタンスではなくテクスチャ自体を変更することを知る必要があります。 したがって、このインスタンスを手動で作成する必要があります。 これは、次のコードを使用すると非常に簡単です。

textureInstance = Instantiate(levelTexture) as Texture2D;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、テクスチャのインスタンスを作成するだけでなく、テクスチャから受け取った色情報に基づいてノードを設定する必要もあります。 したがって、小さなNodeクラスを作成します。

 public class Node { public int x; public int y; public bool isEmpty; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

後でこのクラスにもう少し情報を保存できるようになりますが、今のところこれで十分です。 これで、次のループを使用して、このクラスからグリッドを作成できます。

 //maxX -  ,      Texture2D //maxY -   for (int x = 0; x < maxX; x++) { for (int y = 0; y < maxY; y++) { //   Node n = new Node(); nx = x; ny = y; //     //      Color c = levelTexture.GetPixel(x, y); //     textureInstance.SetPixel(x, y, c); //     ;     ,     0  -.     ,    . n.isEmpty = (ca == 0); //     ,      .       Color mC = minimapColor; if (n.isEmpty) mC.a = 0; miniMapInstance.SetPixel(x, y, mC); //       grid[x, y] = n; } } //  for        .Apply() textureInstance.Apply(); miniMapInstance.Apply();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注：ここで行うように、各インスタンステクスチャにピクセルを設定する必要はありません。ループが機能する前にインスタンスを作成することもできますが、この手法を使用してピクセルに影響を与え、通常とは異なる色を与えることができます。 たとえば、不透明ピクセルの場合、通常の色を緑に置き換えることができます。 この方法でミニマップを作成できます。



注：上記の forループは1回だけ実行する必要があります。 したがって、大きなテクスチャ（サイズ1000x200のテクスチャを使用）であっても、過剰なリソース消費はブート時にのみ発生します。 その後、マップを変更するために、ノードに保存されているアドレスを使用します。



これでテクスチャができたので、レンダリングする必要があります。 GameObjectにSpriteRenderer（levelRendererとして以下のコードに保存）を追加し、Texture2Dをスプライトに変換して割り当てます。 これは、次の行を使用して実行できます。

 Rect rect = new Rect(0, 0, maxX, maxY); levelRenderer.sprite = Sprite.Create(textureInstance, rect, Vector2.zero,100,0, SpriteMeshType.FullRect);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ミニマップでも同じことができますが、Sprite Rendererの代わりにImage UIコンポーネントを使用しました。



Vector2.zeroは中心点、左下隅の位置0,0です。 その隣の値100は、ピクセルとポイントの比率です。デフォルトでは、Unityでは100ピクセルあたり1ポイントです。 また、ワールド座標を使用して計算を実行する場合、たとえば、ノードnode（5,6）のワールド内の位置を見つけるために、xとyに比率、つまり （x *（1/100））。 または、インポート設定ですべてのスプライトに対して1：1 /の比率を設定できます



最後に、スプライトメッシュのタイプがFullRectであることが重要です。 それ以外の場合、Unityはスプライトを最適化し、不透明なピクセルの「島」を作成します。 マップからピクセルを削除する場合、これは問題になりませんが、空の領域にピクセルを追加する必要があります。 タイプをFullRectに設定することで、Unityに元の画像のサイズの長方形全体としてスプライトを保存させます。









上の図は、スプライトのタイプがFullRectではない場合に発生する問題を示しています。



上記のすべてのおかげで、テクスチャをマップとして再作成する方法を学びました。

ユニットとパスファインダー

このパートでは、Unity内のユニットのアニメーションを作成するプロセスをスキップしますが、作成方法がわからない場合は、このプロセスをビデオで公開します。



それでは、ピクセル完璧な衝突をどのように実装しますか？



空のノードと地球のノードがグリッドのどこにあるかはすでにわかっています。 どのノードを歩くことができるかを決めましょう。 ゲームの「ルール」は次のようになります。結び目が地球で、その上の結び目が空気である場合、一番上の結び目はあなたが行くことができる結び目です。 その結果、1つの空のノードから別の空のノードまで歩くことができますが、土地のないノードに到達すると落下します。 したがって、各ユニットのパス検索の作成は、比較的簡単なプロセスです。



これらの手順を正しい順序で実行するだけです。

1. 現在のノードがnullかどうかを確認します。 これが本当なら、おそらく地図から落ちました。
2. curNodeが出力ノードであるかどうかを確認し、そうであれば、ユニットはレベルを離れました（これについては以下で詳しく説明します）。
3. 下のノードが空かどうかを確認します。 これは、私たちが空中にいることを意味します。 4フレーム以上落下した場合（移動していた最後の4つのノードが空だった場合）、落下アニメーションに切り替えます。 このおかげで、坂を下っても、アニメーションは変わりません。
4. 私たちの下に地球がある場合、私たちは楽しみにする必要があります。 空のノードがある場合、そこに移動することを楽しみにしています。
5. 前のノードが空でない場合、空のノードが見つかるまで4つのノードの検索を開始します。
6. 空のノードが見つからなかった場合は、単に反対方向に回転して進みます。

ご覧のとおり、このパス検索は非常に初歩的なものですが、レミングスのようなゲームでは十分すぎるほどです。



パスを検索するときに考慮する必要がある他の側面があります。たとえば、落下時に使用されるアンブレラ能力や、非常に深く掘り下がって土地が存在しないときに掘る能力などです。



これがパスの検索全体です。 ユニットを移動するには、あるピクセルから別のピクセルに補間する必要があります。 または、指定した間隔で特定の数のポイントを変換位置に追加できますが、補間を使用して2つの問題を解決します。 ユニットがピクセルに到達したときにのみパス検索を使用するため、フレームごとに実行されないように、使用するパス検索操作の数を制限します。 これは単純な操作であるという事実にもかかわらず、この方法ではコンピューティングリソースを大幅に節約できるため、あるレベルで同時に移動できるユニットの数を増やすことができます。



すべてのユニットは、Update（）を手動で実行する単純なディスパッチャによって制御されます。 Lemmingsには「加速」ボタンがあったため、再作成するにはtimeScale時間をシミュレートする必要があります（加速された場合、値は2または3になります）。これはスケーリングされた時間デルタと共にユニットに送信されます。 ユニットは（Time.deltaTimeの代わりに）スケーリングされたdeltaTimeを使用して位置間を補間し、timeScaleを使用してAnimatorの速度を変更します。 したがって、Unityの時間スケールは通常の速度のままですが、ゲームは「高速モード」にあるという印象です。

レベル変更

そして、ここから楽しみが始まります。 レベルはありますが、レミングスのゲームプレイの主な部分は、レベルとの動的な相互作用でした。



つまり、ピクセルを追加または削除する方法を学ぶ必要があります。 どちらの場合も、次のコードを使用します。

 textureInstance.SetPixel(x,y,c);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

c =色。 ピクセルの追加と削除の唯一の違いは、アルファチャンネル値で​​す。 忘れないでください。 アルファ値が0の場合、ノードは空と見なされます。



ただし、上記から思い出すように、.SetPixel（）を使用する場合は、テクスチャで.Apply（）を呼び出して実際に更新する必要があります。 フレームごとに複数のピクセルを変更できるため、ピクセルを変更するたびにこれを行う必要はありません。 したがって、フレームの最後まで.Apply（）を使用することは避けます。 したがって、Update（）ループの最後に、単純なブール値があります。 trueの場合、textureInstanceとミニマップの両方で、.Apply（）が実行されます：

 if(applyTexture) { applyTexture = false; textureInstance.Apply(); miniMapInstance.Apply(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

能力

このシステムを作成した後は、どのピクセルに影響を与えているか、どの程度正確かを判断する必要があります。 この記事では、イベントの高レベルのロジックのみを検討しますが、ビデオのコードを見ることができます。 以下、「ピクセルがあるかどうか」と言うときは、ノードが空であることを意味します。マップから落ちていなければ、常にどこにでもピクセルがあるからです。

• 歩く
  • これは基本的な能力です。 先に進むと、興味深いものは何もありません。
• やめて
  • やめて！ ユニットを反対側にリダイレクトします。
• 傘
  • ユニットが非常に高い位置から落下すると、彼は死にますが、メアリーポピンズのように、この能力でスムーズに降下します。 この機能は非常に簡単に機能し、アクティビティをチェックするだけです。 さらに、ピクセル間の補間のフォールレートを変更して、リラックスしたフォールエフェクトを作成します。
• 掘り進む
  • 元のゲームでは、それは「Basher」と呼ばれていました-ユニットは単に前方にトンネルを掘りました。 ロジックの観点から、パスの検索を再定義します：前に少なくとも1つのピクセルがある場合、ユニットは特定の数のピクセルを掘り続け、次に各ピクセルを上に8ピクセルを取り、それらが削除されるように送信します。 キャラクターの成長により、8ピクセルのサイズが選択されています。
• 掘り下げる
  • 掘り進んでいるように見えます。 この機能は、前と上にピクセルを取得する代わりに、ユニットの下に2〜3ピクセル、前に2〜3ピクセル、そしてもちろん1行下から取得します。
• ブラスト
  • これは単純な自殺ユニットであり、ただ爆発し、その場所に穴を残します。 削除されたピクセルは、その位置を中心とした所定の半径にあります。
• 建設業
  • 別の古典的な能力-ユニットは、見ているポイントから斜め上に一連のピクセルを構築します。 これは、前面と上部で4〜5ピクセルを取得し、さらに「追加」に転送することで実現されます。 また、ノードのプロパティにも影響します（ノードを空から塗りつぶしに変更します）。 その後、機能は次の対角位置に補間し、壁に衝突するか、建物に割り当てられたピクセル数が終わるまで操作を繰り返します。
• 充填
  • 次のセクションにスムーズに移動できる別の楽しい機能。 レミングス2で最初に登場しました。「液体」の特性を持つ「砂」のピクセルを投げるユニットです。静止点に達するまで、常に低下します。 これらについては後で詳しく検討します。

明らかに、レミングスシリーズのゲームには他にも多くの能力がありますが、（すべてをテストしているわけではありませんが）上記のすべての組み合わせであると思います。 たとえば、マイナーはバッシャーのバリエーションですが、前に進むのではなく、前に向かって掘り下げます。









メアリー・ポピンズのようにスムーズに降りる









いくつかの能力の使用例

「液体」

または、それらを呼び出すときに、ノードを埋めます。 これは別の楽しい追加機能です。 高レベルのロジックは次のとおりです。これらは独自の「パス検索」を持つ動的ノードです。 それらをすべてまとめて、滑らかな効果を得ます。 ビデオに示すように、雪が降る効果を作成することもできます。



仕組みは次のとおりです。次のクラスがあります。

 public class FillNode { public int x; public int y; public int t; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

xとyは、ご想像のとおり、ノードアドレスです。 tは、フィルノードが「デッドエンド位置」にあった回数です。 数値を試してみることはできますが、私にとっては、彼が15回いると、ノードは停止したと見なされ、充填ノードから通常ノードに変わります。



フィルノードは毎フレーム更新されません。1秒あたり60回位置を変更する必要があるため、移動が速すぎる可能性があるためです。 私たちはそれらにのみ作用するユニバーサルタイマーを使用します。 個人的には、0.05秒ごとに更新を使用しましたが、さまざまな流動的な効果を得るためにそれを実験することができます。



したがって、それらが更新されると、「パス検索」は次のようになります。

1. ノードがノードの下に存在するかどうかを確認し、存在しない場合、この塗りつぶしノードはマップの外に落ちました。
2. 存在する場合は、空かどうかを確認します。 空の場合は、現在のピクセルをクリアして、下のピクセル（ノード）に追加します。 したがって、我々は下に移動し続けます。
3. ただし、空でない場合は、ピクセルを前方および下方に確認します。 空の場合は、そこに移動します。
4. フォワードダウンがいっぱいの場合、バックダウンに移動します。
5. 移動する場所がない場所にいる場合、充填ノードをtに追加します。
6. tが設定した値よりも大きい場合、塗りつぶしノードを削除し、ピクセルをいっぱいのままにします。

tは3つの側面を担当します。 まず、移動していないノードを削除することにより、大量の充填ノードのリストがないようにします。 第二に、落下時にノードが互いにくっつかないようにすることができます。 第三に、ノードが行き詰まりにあるが、まだ停止していると見なされていない場合、その下でユニットを掘ると、次の更新中にフィルノードが落下し、美しいダイナミックな効果を生み出します。



上記のすべてを考えると、「流​​体」の影響が速度に大きく影響すると考えるかもしれませんが、この場合はそうではありません。 ビデオに示すように、多数（10,000を超えるフィルノード）でテストしました。 10,000のすべてが同時に「生きている」という可能性はありませんでしたが、これは以下に示すように非常に美しい効果を生み出しました。









この追加システムで遊んでください。 「プレースホルダー」機能に必要なのはスポーン位置のみです。その後、複数の充填ノードが作成され、独立して移動できるようになります。

レベルエディター

基本的にはピクセルの色を変更するだけだったので、おそらくそれなしでは実行できないと推測したでしょう。 したがって、次の論理ステップは、レベルエディターを作成することです。これは、もちろんピクセル描画になります。 このエディターは上記と同じ機能のみを使用しますが、ユニットではなくマウスの位置に焦点を当てているため、このエディターの分析を深くする価値はないと思います。 もちろん、コード全体を見たい場合は、ビデオを見ることができます。



しかし、シリアル化についてもっと話したいので...

連載

ビデオで示したように、それを実装するにはいくつかの方法があります。 レベルを作成するためにエディターを使用する必要さえありません。 ディスクから.pngに画像をロードして、レベルとして使用することができます。 私たちがすでに作成したシステムは、大きなチャンスを開きます。 ただし、テクスチャからゲームを作成する必要があるため、スポーン位置と終了位置を維持する必要があります（これらを2つのイベントと呼びましょう）。 オリジナルのレミングスの続編にはそのようなイベントがいくつかありましたが、それぞれに焦点を当てましょう。論理の基本は同じです。



もちろん、これらのイベントを実装する方法は多数あります。たとえば、レベルごとに2つのテクスチャを作成し、1つはレベル自体を使用し、2つ目は色分けされたイベントを使用しますが、この場合、プレーヤーはサードパーティのエディターでレベルイベントを変更できます。 これは必ずしも悪いわけではありませんが、キャンペーンレベルがある場合など、望ましくない場合があります。



その結果、必要なものをすべて単一のファイルレベルでシリアル化することにしました。 ここで言及する価値がある唯一のことは、もちろん、Texture2Dを直接シリアル化することは不可能ですが、テクスチャをエンコードすることでバイトの配列に変換できます。 Unityが私たちの生活を簡素化したのは、次のことを行うだけだからです。

 byte[] levelTexture = textureInstance.EncodeToPng();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

高度なレベルエディター

レベルエディタはゲームの優れた機能ですが、ほとんどの場合、プレーヤーはゼロから開始するたびに退屈します。 前述のように、ビデオではファイルから.pngをダウンロードする方法を既に示しましたが、複雑な問題を解決することなくゲームをWebGLで動作させたかったのです。



プレイヤーがレベルエディターからリンクを挿入し、それをテクスチャのインスタンスとしてロードできるようにするために、次の解決策を思いつきました。 その後の質問は、レベルイベントを設定して保存することだけです。



これを行う方法？ UnityにはWWWクラスがあるため、テクスチャをロードするためのコルーチンを作成します。

 IEnumerator LoadTextureFromWWW(string url) { WWW www = new WWW(url); yield return www; //  www ,    if(www.texture == null) { //  } else { //   ,  textureInstance = www.texture; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注：上記のコードは正しいですが、UIを処理したり、エディターを再初期化したりする作業コードにいくつかの追加の行があるため、それはまだ擬似コードです。 最も重要なことに集中できるように、ここには追加していません。 もちろん、完全なコードはビデオにあります。



上記のコードはすべて、デスクトップビルドでうまく機能します。カスタムクリップボードを独自のUnity入力フィールドに貼り付けることができるからです。 しかし...

WebGLアセンブリの変更

... WebGLではこれは許可されていません。 この問題を回避するには、WebGLアセンブリのインデックスファイルに小さなjavascriptフラグメントを挿入します。 このようなもの：

 //    (    WebGL-) var gameInstance = UnityLoader.instantiate("gameContainer", "Build/lennys.json"); // function GetUserInput(){ var inp = prompt("link"); gameInstance.SendMessage("GameManager","ReceiveLink",inp); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、ブラウザにポップアップウィンドウが表示され、リンクを挿入できるテキストフィールドが表示されます。 [OK]をクリックすると、スクリプトはメッセージを送信し、ゲームオブジェクト "GameManager"および関数 "ReceiveLink"を見つけます。その署名には文字列inpがあります。 関数自体は次のようになります。

 public void ReceiveLink(string url) { linkField.text = url; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでlinkFieldはUI InputField要素であり、特別なものではありません。



以下に注意する価値があります。

• GameManagerというスクリプトがありますが、JavaScriptはその名前のゲームオブジェクト（クラスではありません！）を探しています。 呼び出している関数は、UIManagerクラス（同じゲームオブジェクト内）にあります。
• プレイヤーがゲームUIのテクスチャダウンロードボタンをクリックするまで、テクスチャはロードされません。

JavaScript関数を実行するには、urlダウンロードボタンをクリックしたときに次の行を追加する必要があります。

 Application.ExternalEval("GetUserInput()");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、WebGLには別の制限があります。 はい、あなたはすでに推測しました-頭痛を防ぐことなくユーザーレベルを維持することはできません。 この問題を解決するには？ 非常にシンプル-プロジェクトのMVPを設定します。



ただし、作成したレベル、画像としてダウンロードしたレベル、または手描きのレベルをプレイヤーにプレイさせる必要があります。したがって、それらをオンザフライで保持します。これは、作成されたすべてのレベルが次のセッションで失われることを意味します。画像をオンラインでアップロードできるため、これはそれほど深刻な問題ではありません。まず、WebGLプラットフォーム上にいるかどうかを判断します。これは次のように行われます。

 if (Application.platform == RuntimePlatform.WebGLPlayer) isWebGl = true;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注：主にチュートリアルの一部としてこれをすべて行います。実際、デスクトップコンピューターや他のプラットフォーム用のアセンブリを作成するつもりはなかったため、すべてをWebGLに変えることを計画しました。したがって、ファイルをローカルに保存する代わりに、メモリに保存します。

おわりに

非常に興味深いプロジェクトでした。空き時間に取り組みましたが、1〜2週間かかりましたが、ユニットの「グラフィック」と「アニメーション」を学習して作成する時間を除いて、直接作業はビデオとほぼ同じ時間でした。そしてもちろん、ゲームにはバグがあります。



また、いくつかのAPI呼び出しに加えて、コードは基本的に非常に単純であることにも注意してください。



ここで実証されたピクセル完璧なハイキングは、その時代の他のいくつかのゲームを作成するための出発点でもありました。ここでは秘密を明かしませんが、すぐに他のプロジェクトに取り組み、私のチャンネルをフォローし、必要に応じてサポートします。