印象的なソリッド：OpenGLのC＃でゲームを作成する、パートI

アメリカの昔々

2002年に、Amazing Blocksと呼ばれる面白いおもちゃが私のコンピューターに当たりました。 言うまでもなく、テトリスクラスのゲーム（ゲームプレイの詳細な説明は以下に示します）。 彼女はこのゲームを何時間もプレイしてくれた私の母親がとても好きでした。 しかし、残念な欠点がありました：10の開始後、ゲームには登録が必要になり始めましたが、驚くべきことに、無料でしたが、インターネットを介して、もちろん、私たちの部分にインターネットがなかったので、乗り越えられない障害でした、彼らはそのようなことがあると聞いたが。 常に再インストールする必要がありました。



3年後、インターネットがすでに完成し、ゲームがシェアウェアになり、登録のためのお金を要求し始めたとき、私はそれを登録しようとしましたが、その時点でメーカーのウェブサイトは生きているよりも死んでいる可能性が高く、明らかにそうです今日まで。 ゲームのシェアウェアバージョンはインターネット上で簡単に見つけることができます。多くの場合、実際にはトロイの木馬であるkeygensという言葉は怖くありません。また、母親が完全に異なるコンピューターでプレイできるようにゲームを登録する機会は1つではありません。 ある時点で、私は同じようなゲームを自分で作って、つぼみの問題を解決してみませんか？ 同時に、ある種のハローワールドは、現代の状況でシンプルなPCゲームを開発することから生まれるかもしれません。それを読者の注意を喚起します。



それでは、どのようなゲームをするのでしょうか？ ポイントはこれです。 7×13の長方形のガラスでは、3色のブロックで構成される水平スティックが落下します（合計5色あります）。 移動中は、左右に移動したり、回転中のブロックを右から左に入れ替えたりすることができます（赤、緑、青→緑、青、赤）。 スティックがガラスの床またはガラスの固定ブロックに触れると、スティックは制御できなくなります。 スティックを構成するブロックは、固定ブロックまたはガラスの半分になるまで別々に落下し続けます。 その後、同じ色の3つ以上のブロックの水平線、垂直線、または対角線がガラスにあるかどうかを確認します。 そのような行は破棄されます。 破壊されたラインの上にブロックがあった場合、それらは形成された空きスペースまで滑り落ち、その後、形成されたラインは再び破壊されます。 すべてが落ち着くと、新しいスティックが上から落ち始めます。 破壊されたラインを構築するために、プレイヤーはポイントを受け取ります。 ガラスがいっぱいになるとゲームは終了します。



テクノロジー。 C＃（私は長い間それが何であるかを見たかった）、OpenGL（DirectXはWindowsでのみ動作し、Linuxが好きです）、Mercurialでバージョン管理を行います（VCSなしでコードを書くことは自分に無礼です）。



ゲームは印象的なソリッドと呼ばれます。

インセプション

Windows用の開発は、 Microsoft Visual C＃2010 Express （無料配布）で行われます 。 Mercurialバージョン管理システムのWindowsクライアントであるTortoiseHgも必要です。 Linuxベースのシステムでは、MonoDevelopとコンソールhgを使用します。



OpenGLを接続するには、バインディングOpenTKを使用します。 最新のナイトリービルド （執筆時点：2011-12-03）をダウンロードする必要があります。



ImpressiveSolidsと呼ばれる新しい空のプロジェクトをVisual C＃Expressで作成します。 保存します。 次に、プロジェクトディレクトリを開き、そのコンテキストメニューを呼び出して、TortoiseHg→ここにリポジトリを作成を選択します。 .hgignoreファイルを作成し、初期化後にワークベンチを開くポイントをマークします。



Visual C＃Expressで.hgignoreファイルを開き、次の行を書き込みます。 これは、バージョン管理システムが不要なバイナリファイルを考慮しないために必要です。

syntax: glob *.suo *.pidb ImpressiveSolids/bin/* ImpressiveSolids/obj/*
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ソリューションディレクトリ（プロジェクトではなく、.hgignoreが存在する場所）内で、OpenTKサブディレクトリを作成し、OpenTKアーカイブ内のopentk \ Binaries \ OpenTK \ Release \ディレクトリからOpenTK * .dllおよびOpenTK * .dll.configファイルをコピーします。



Visual C＃Expressでは、コンテキストメニュー[参照]→[参照の追加]→[参照]。 ../OpenTK/OpenTK.dllを選択します。 さらに、.NETタブからSystem.Drawingへの参照を追加する必要があります。



新しいGame



クラスを作成します。 これはプログラムのメインクラスであり、エントリポイントを含み、 OpenTK.GameWindow



の継承者であり、ゲームの状態の更新（ OnUpdateFrame



）と再描画（ OnRenderFrame



）を担当します。 これで、黒いウィンドウになります。

  using System; using OpenTK; using OpenTK.Graphics; using OpenTK.Graphics.OpenGL; namespace ImpressiveSolids { class Game : GameWindow { [STAThread] static void Main() { using (var Game = new Game()) { Game.Run(30); } } public Game() : base(700, 500, GraphicsMode.Default, "Impressive Solids") { VSync = VSyncMode.On; } protected override void OnLoad(EventArgs E) { base.OnLoad(E); } protected override void OnResize(EventArgs E) { base.OnResize(E); GL.Viewport(ClientRectangle.X, ClientRectangle.Y, ClientRectangle.Width, ClientRectangle.Height); } protected override void OnUpdateFrame(FrameEventArgs E) { base.OnUpdateFrame(E); } protected override void OnRenderFrame(FrameEventArgs E) { base.OnRenderFrame(E); GL.ClearColor(Color4.Black); GL.Clear(ClearBufferMask.ColorBufferBit | ClearBufferMask.DepthBufferBit); SwapBuffers(); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトプロパティ（[プロジェクト]→[ImpressiveSolidsプロパティ]）に移動し、ターゲットフレームワークを指定します。 出力タイプ：Windowsアプリケーション。 スタートアップオブジェクト：ImpressiveSolids.Game。



保存して実行すると、サイズが700×500で、「印象的な固体」というタイトルの黒いウィンドウが表示されます。



すべてが順調に進んだ場合は、TortoiseHg Workbenchに移動し、「Initial game window」マークですべてをコミットします。

秋

スティックの制御された落下を実現します。 これを行うには、最初にスティックの現在の状態のモデルを設定する必要があります。 まず、位置。 デフォルトでは、ガラスの上から中央まで。 （0; 0）はガラスの左上隅に対応すると仮定します。 MapWidth



その寸法MapWidth



、 MapHeight



を設定する必要があります。 スティックを構成するブロックの色は、整数の配列として保存されます。 可能なColorsCount



色の数を設定し、色が0



からColorsCount − 1



までの整数値で示されることに同意します。



NewメソッドをGameクラスに追加し、OnLoadから呼び出します。 この方法では、ランダムな色のブロックからスティックの構築を実装します。

  private Random Rand; private const int MapWidth = 7; private const int MapHeight = 13; private const int StickLength = 3; private int[] StickColors; private Vector2 StickPosition; private const int ColorsCount = 5; protected override void OnLoad(EventArgs E) { base.OnLoad(E); New(); } private void New() { Rand = new Random(); StickColors = new int[StickLength]; for (var i = 0; i < StickLength; i++) { StickColors[i] = Rand.Next(ColorsCount); } StickPosition.X = (float)Math.Floor((MapWidth - StickLength) / 2d); StickPosition.Y = 0; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最も原始的なバージョンでは、スティックを画面に表示してみましょう（色付きの長方形でブロックを描画し、ウィンドウの左上隅でガラスを開始します）。 コードにいくつかの変更を加えます。

  private const int NominalWidth = 700; private const int NominalHeight = 500; private float ProjectionWidth; private float ProjectionHeight; private const int SolidSize = 35; private Color4[] Colors = {Color4.PaleVioletRed, Color4.LightSeaGreen, Color4.CornflowerBlue, Color4.RosyBrown, Color4.LightGoldenrodYellow}; public Game() : base(NominalWidth, NominalHeight, GraphicsMode.Default, "Impressive Solids") { VSync = VSyncMode.On; } protected override void OnResize(EventArgs E) { base.OnResize(E); GL.Viewport(ClientRectangle.X, ClientRectangle.Y, ClientRectangle.Width, ClientRectangle.Height); ProjectionWidth = NominalWidth; ProjectionHeight = (float)ClientRectangle.Height / (float)ClientRectangle.Width * ProjectionWidth; if (ProjectionHeight < NominalHeight) { ProjectionHeight = NominalHeight; ProjectionWidth = (float)ClientRectangle.Width / (float)ClientRectangle.Height * ProjectionHeight; } } protected override void OnRenderFrame(FrameEventArgs E) { base.OnRenderFrame(E); GL.ClearColor(Color4.Black); GL.Clear(ClearBufferMask.ColorBufferBit | ClearBufferMask.DepthBufferBit); var Projection = Matrix4.CreateOrthographic(-ProjectionWidth, -ProjectionHeight, -1, 1); GL.MatrixMode(MatrixMode.Projection); GL.LoadMatrix(ref Projection); GL.Translate(ProjectionWidth / 2, -ProjectionHeight / 2, 0); var Modelview = Matrix4.LookAt(Vector3.Zero, Vector3.UnitZ, Vector3.UnitY); GL.MatrixMode(MatrixMode.Modelview); GL.LoadMatrix(ref Modelview); GL.Begin(BeginMode.Quads); for (var i = 0; i < StickLength; i++) { RenderSolid(StickPosition.X + i, StickPosition.Y, StickColors[i]); } GL.End(); SwapBuffers(); } private void RenderSolid(float X, float Y, int Color) { GL.Color4(Colors[Color]); GL.Vertex2(X * SolidSize, Y * SolidSize); GL.Vertex2((X + 1) * SolidSize, Y * SolidSize); GL.Vertex2((X + 1) * SolidSize, (Y + 1) * SolidSize); GL.Vertex2(X * SolidSize, (Y + 1) * SolidSize); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ウィンドウのサイズが変更されたときに画像を拡大縮小するために、 Nominal/Projection Width/Height



トリックNominal/Projection Width/Height



必要でしたが、同時に、比率は歪められませんでした。



最後にスティックを倒して、←、→、↑キーを機能させます（色の回転）。

  public Game() : base(NominalWidth, NominalHeight, GraphicsMode.Default, "Impressive Solids") { VSync = VSyncMode.On; Keyboard.KeyDown += new EventHandler<KeyboardKeyEventArgs>(OnKeyDown); } protected override void OnUpdateFrame(FrameEventArgs E) { base.OnUpdateFrame(E); StickPosition.Y += 0.02f; } protected void OnKeyDown(object Sender, KeyboardKeyEventArgs E) { if (Key.Left == E.Key) { --StickPosition.X; } else if (Key.Right == E.Key) { ++StickPosition.X; } else if (Key.Up == E.Key) { var T = StickColors[0]; for (var i = 0; i < StickLength - 1; i++) { StickColors[i] = StickColors[i + 1]; } StickColors[StickLength - 1] = T; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべての変更をコミットします：「スティック、落下および制御可能」。



ご覧のように、ガラスの境界を越えるためのチェックはありません。 今後、この省略を修正します。

世界の地図

スティックが床に落ちたとき、またはガラスにすでにあるブロックに落ちたときの状況に対処しましょう。 制御不能なブロックの落下とラインの破壊に対処するまで、スティックを構成するブロックを所定の位置で凍結させ（空中にぶら下がっていても）、次のスティックが落下し始めます。



整数の2次元配列の形でガラスの状態をシミュレートします。 座標はガラスの市松模様のグリッドに対応し、値は指定されたセル内のブロックの色になります-セルが空の場合は負の数になります。



ここでは、スティックがガラスを越えるためのチェックを導入する必要があります。そうしないと、存在しないインデックスによって配列にアクセスできます。

  private int[,] Map; private void New() { Rand = new Random(); Map = new int[MapWidth, MapHeight]; for (var X = 0; X < MapWidth; X++) { for (var Y = 0; Y < MapHeight; Y++) { Map[X, Y] = -1; } } StickColors = new int[StickLength]; GenerateNextStick(); } private void GenerateNextStick() { for (var i = 0; i < StickLength; i++) { StickColors[i] = Rand.Next(ColorsCount); } StickPosition.X = (float)Math.Floor((MapWidth - StickLength) / 2d); StickPosition.Y = 0; } protected override void OnUpdateFrame(FrameEventArgs E) { base.OnUpdateFrame(E); StickPosition.Y += 0.02f; var FellOnFloor = (StickPosition.Y >= MapHeight - 1); var FellOnBlock = false; if (!FellOnFloor) { var Y = (int)Math.Floor(StickPosition.Y + 1); for (var i = 0; i < StickLength; i++) { var X = (int)StickPosition.X + i; if (Map[X, Y] >= 0) { FellOnBlock = true; break; } } } if (FellOnFloor || FellOnBlock) { var Y = (int)Math.Floor(StickPosition.Y); for (var i = 0; i < StickLength; i++) { var X = (int)StickPosition.X + i; Map[X, Y] = StickColors[i]; } GenerateNextStick(); } } protected void OnKeyDown(object Sender, KeyboardKeyEventArgs E) { if ((Key.Left == E.Key) && (StickPosition.X > 0)) { --StickPosition.X; } else if ((Key.Right == E.Key) && (StickPosition.X + StickLength < MapWidth)) { ++StickPosition.X; } else if (Key.Up == E.Key) { // . . . } } protected override void OnRenderFrame(FrameEventArgs E) { // . . . GL.Begin(BeginMode.Quads); for (var X = 0; X < MapWidth; X++) { for (var Y = 0; Y < MapHeight; Y++) { if (Map[X, Y] >= 0) { RenderSolid(X, Y, Map[X, Y]); } } } for (var i = 0; i < StickLength; i++) { RenderSolid(StickPosition.X + i, StickPosition.Y, StickColors[i]); } GL.End(); SwapBuffers(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

古き良きテトリスのように、ブロックを一番上まですばやくスケッチできます。 テストでは、 0.02f



を0.2f



に置き換えることで落下率を上げることができますが、一般的には、↓キーを押して加速できるようにする必要があります。



変更をMercurialリポジトリにコミットすることを忘れないでください：「スティックが落ちた後のブロックの修正」。

ダブルインパクト

次に行う必要があるのは、ブロックが空中に垂れ下がらないようにすることです。ただし、ブロックが静止するまで落下し続けます。 この期間中、画面にはスティックがありません。何も制御できません。 この点で、状態の概念をゲームに導入します。



ゲームは常に次のいずれかの状態にあります。

1. 別のスティックが落ちている、それは制御することができます。 新しいゲームが開始されると、この状態がオンになります。
2. 制御されていない落下ブロック、裏打ちされたラインの破壊。 この状態は、スティックがブロックに触れた後にオンになります。 すべてのブロックが動かず、破壊されたラインがなくなると終了します。 ガラスの一番上の行全体が空いている場合、ゲームは状態1で続行します。 それ以外の場合、ゲームは終了します（状態3）。
3. ゲームオーバーです、何も起こりません。 プレーヤーは新しいゲームを開始できます（ボタンを押すなど）。

コード内で対応する宣言を作成します。

  private enum GameStateEnum { Fall, Impact, GameOver } private GameStateEnum GameState; private void New() { // . . . GenerateNextStick(); GameState = GameStateEnum.Fall; } protected override void OnUpdateFrame(FrameEventArgs E) { base.OnUpdateFrame(E); if (GameStateEnum.Fall == GameState) { StickPosition.Y += 0.2f; // . . . if (FellOnFloor || FellOnBlock) { var Y = (int)Math.Floor(StickPosition.Y); for (var i = 0; i < StickLength; i++) { var X = (int)StickPosition.X + i; Map[X, Y] = StickColors[i]; } GameState = GameStateEnum.Impact; } } else if (GameStateEnum.Impact == GameState) { var Stabilized = true; // TODO   if (Stabilized) { GenerateNextStick(); GameState = GameStateEnum.Fall; } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブロックの滑らかな落下を描写し、ガラスのモデル（ Map



）を複雑にしないために、トリックに頼ります。 セル（X; Y）からセル（X; Y + 1）に落ちるブロックを許可します-そして、彼はどこに落ちるべきですか？ -セル（X; Y）にリストされ、下のセルの最後のヒットの瞬間まで。 さらに、ブロックの垂直方向のわずかな変位を保存します。これは、ユニティを超えるまで徐々に増加します。 つまり、ブロックの実際の座標は（X; Y）ではなく（X; Y +Δ）であり、これはOnRenderFrame



考慮する必要があります。

  private const float FallSpeed = 0.2f; private float[,] ImpactFallOffset; private void New() { // . . . ImpactFallOffset = new float[MapWidth, MapHeight]; } protected override void OnUpdateFrame(FrameEventArgs E) { base.OnUpdateFrame(E); if (GameStateEnum.Fall == GameState) { StickPosition.Y += FallSpeed; // . . . } else if (GameStateEnum.Impact == GameState) { var Stabilized = true; for (var X = 0; X < MapWidth; X++) { for (var Y = MapHeight - 2; Y >= 0; Y--) { if ((Map[X, Y] >= 0) && ((Map[X, Y + 1] < 0) || (ImpactFallOffset[X, Y + 1] > 0))) { Stabilized = false; ImpactFallOffset[X, Y] += FallSpeed; if (ImpactFallOffset[X, Y] >= 1) { Map[X, Y + 1] = Map[X, Y]; Map[X, Y] = -1; ImpactFallOffset[X, Y] = 0; } } } } if (Stabilized) { GenerateNextStick(); GameState = GameStateEnum.Fall; } } } protected override void OnRenderFrame(FrameEventArgs E) { // . . . GL.Begin(BeginMode.Quads); for (var X = 0; X < MapWidth; X++) { for (var Y = 0; Y < MapHeight; Y++) { if (Map[X, Y] >= 0) { RenderSolid(X, Y + ImpactFallOffset[X, Y], Map[X, Y]); } } } if (GameStateEnum.Fall == GameState) { for (var i = 0; i < StickLength; i++) { RenderSolid(StickPosition.X + i, StickPosition.Y, StickColors[i]); } } GL.End(); SwapBuffers(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ホールが落下する可能性のあるブロックから列全体を落下させるには、マップセルを下から上に並べ（下のブロックが上に移動します）、セルのボイドだけでなくImpactFallOffset



ステータスもImpactFallOffset



ます（正の数はこのブロックが落下することを意味するため） ）



コミットには、「ブロックが安定するまで影響を受けます」というマークが付けられています。

大量破壊兵器

ゲームプレイの主な要素である、同じ色の線の破壊が最終的に対処する時が来ました。 最小行長を設定します。 ブロックが存在するすべてのセルを通過し、それぞれから4つの可能な方向（水平、垂直、2つの対角線）のいずれかで線を作成しようとします。 十分な長さの1色のラインが検出されると、各コンポーネントブロックがスタックにプッシュされます。 カード全体をチェックした後、スタック上のすべてのブロックを破壊し、位置を不安定としてマークします。

  private const int DestroyableLength = 3; private Stack<Vector2> Destroyables = new Stack<Vector2>(); protected override void OnUpdateFrame(FrameEventArgs E) { // . . . } else if (GameStateEnum.Impact == GameState) { // . . . if (Stabilized) { Destroyables.Clear(); for (var X = 0; X < MapWidth; X++) { for (var Y = 0; Y < MapHeight; Y++) { CheckDestroyableLine(X, Y, 1, 0); CheckDestroyableLine(X, Y, 0, 1); CheckDestroyableLine(X, Y, 1, 1); CheckDestroyableLine(X, Y, 1, -1); } } if (Destroyables.Count > 0) { foreach (var Coords in Destroyables) { Map[(int)Coords.X, (int)Coords.Y] = -1; } Stabilized = false; } } if (Stabilized) { GenerateNextStick(); GameState = GameStateEnum.Fall; } } } private void CheckDestroyableLine(int X1, int Y1, int DeltaX, int DeltaY) { if (Map[X1, Y1] < 0) { return; } int X2 = X1, Y2 = Y1; var LineLength = 0; while ((X2 >= 0) && (Y2 >= 0) && (X2 < MapWidth) && (Y2 < MapHeight) && (Map[X2, Y2] == Map[X1, Y1])) { ++LineLength; X2 += DeltaX; Y2 += DeltaY; } if (LineLength >= DestroyableLength) { for (var i = 0; i < LineLength; i++) { Destroyables.Push(new Vector2(X1 + i * DeltaX, Y1 + i * DeltaY)); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

リポジトリで、「同じ色の線を破壊する」とマークします。

ゲームオーバー

グラスの上部に到達すると、ゲームの面白い動作におそらく気づいたでしょう。上部で異なる色で点滅を開始し、互いに交換し、無限に現れてすぐにスティックを固めます。 負けた状況を処理しましょう：ユーザーがEnterキーを押すまで何も起こりません。



ここではすべてが簡単です。

  protected override void OnUpdateFrame(FrameEventArgs E) { // . . . } else if (GameStateEnum.Impact == GameState) { // . . . if (Stabilized) { var GameOver = false; for (var X = 0; X < MapWidth; X++) { if (Map[X, 0] >= 0) { GameOver = true; break; } } if (GameOver) { GameState = GameStateEnum.GameOver; } else { GenerateNextStick(); GameState = GameStateEnum.Fall; } } } } protected void OnKeyDown(object Sender, KeyboardKeyEventArgs E) { if (GameStateEnum.Fall == GameState) { if ((Key.Left == E.Key) && (StickPosition.X > 0)) { --StickPosition.X; } else if ((Key.Right == E.Key) && (StickPosition.X + StickLength < MapWidth)) { ++StickPosition.X; } else if (Key.Up == E.Key) { var T = StickColors[0]; for (var i = 0; i < StickLength - 1; i++) { StickColors[i] = StickColors[i + 1]; } StickColors[StickLength - 1] = T; } } else if (GameStateEnum.GameOver == GameState) { if ((Key.Enter == E.Key) || (Key.KeypadEnter == E.Key)) { New(); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「ゲームオーバー」に署名することで、苦労せずにコミットします。



これで、開発の最初の部分が完了しました。 私たちの手には、今すぐプレイできる完全に機能するゲームがあります。 第二部では、設計に従事します。 テクスチャを課し、現在のスコア、レコードスコアを表示します。 次に落ちる棒。 最後に、ガラスの画像をゲームウィンドウの中央に配置し、境界線を描画します。 一般的に、すべてを思い浮かべます。



このプロジェクトは Googleプロジェクトホスティング Bitbucketでは、最終的なソースコードを確認し、実行可能な実行可能ファイルを含むアーカイブをダウンロードできます。