AOYAMA Koji's プログラミングブログ - プログラミングを楽しく体験

【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】プログラミング初心者向け・入門編・基礎編初中級者向けプログラミング解説プログラマー向け実装解説[初心者向けゲーム開発入門]

2026/06/08
【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門]

 40年以上のゲームプログラミング経験をマンガで可視化。 今回は「ゲーム初期化」。 ゲーム開始前の掃除と各種準備です。 これにより繰り返しプレイ可能になります。
【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門]

プログラミングブログ記事一覧


[PR]

【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~


【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 盤面(*はOの上にX) X*. OXX XOO 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「よくわからなくなりましたね…」恥ずかしがっかり感のある表情 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「最初からやりなおしましょうか」 クリスタル「承知しました」 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] (クリスタル)「メカ・イニシャライズ」「初期化をお願い」 メカ・イニシャライズ了解 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「まず盤面をクリアして」「最初の盤面を準備して」 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] イニシャライズが壁の盤面を掃除 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 盤面(中身白) 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] イニシャライズが相談 メカ・ライン[メカ・ライン]が話を聞いて了解 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・ラインが初期盤面を描こうとしている図 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 盤面 ... ... ... 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「ゲームロジック用データも」「初期化して」 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イニシャライズが相談 メカ・ロジック[メカ・ロジック]が話を聞いて了解 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・ロジックが何やらタブレット操作 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] タブレット風背景上の盤面(うっすらとインデックス) ... 012 000 ... 345 000 ... 678 000 配置情報はインデックスとは違う色でドット文字風 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「最後に」「手番を赤Oにして」 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・プレイヤーナンバー[メカ・プレイヤーナンバー]「1」(O) メカ・イニシャライズ「1」の札を持つ 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イニシャライズがメカ・プレイヤーナンバーのお腹に「1」をセット 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・プレイヤーナンバー「1」(O) 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「社長、完了いたしました」 社長少し考えている表情 【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「すごい!」「これで何度でも遊べる!」嬉しそう
次のエピソードへ
【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] ゲームオーバー

OXゲーム開発編 第9話:エピソード「ゲーム初期化」


 本エピソード「ゲーム初期化」は、OXゲーム開発編 第9話です。
 OXゲーム開発編は、OXゲーム(三目並べ・マルバツ)の開発を通じて、ゲームプログラミングの基礎の基礎を解説しています。
 OXゲーム開発編の各エピソードは、それまでのエピソードのマンガ(と解説)を前提としています。 ゲーム初期化は「最初に」やるべきことですが、具体的な処理を解説するため第9話になりました。
 もし途中から読み始めた方は、ぜひ最初のエピソード「プログラム」から読み進めてください。

「ゲーム初期化」のソースコード例


JavaScript

// 見た目を初期化
//   キャンバスをクリア
oContext.clearRect( 0,0 , 300,300 );
//   盤面描画
drawBoard( oContext );
// ゲームロジック用データを初期化
aiSquare.fill(0);
// 手番プレイヤー番号を1(先手)に設定
iPlayerNumber = 1;

OXゲーム(三目並べ・マルバツ):最初からやり直せる「ゲーム初期化」実装検証



[PR]

「ゲーム初期化」とは:ゲーム開始前の掃除と準備


 「ゲーム初期化」の本質「ゲーム開始前の掃除と準備」です。
 何度もプレイするために、プレイ状況をクリアして、次のプレイが開始できるように準備します。

ソースコードの仕組み


 今回のプログラムを解説します。

見た目の初期化:キャンバスのクリア

// 見た目を初期化
//   キャンバスをクリア
oContext.clearRect( 0,0 , 300,300 );
 まずは見た目を初期化します。 最初にこの命令で、ゲーム用のキャンバスをクリアします。
 引数の数値は、座標(0,0)から幅300、高さ300の矩形領域を意味します。 すなわちOXゲーム用のキャンバス全体をクリアします。
 クリアすると透明になるので、全体が下地の色になります。


見た目の初期化:盤面の描画

// 見た目を初期化
//   盤面描画
drawBoard( oContext );
 見た目の初期化の続きで、初期盤面を描画します。 ここでは drawBoard という関数を呼んでいます。 この関数の具体的な内容は、プログラミングの解説をご覧ください。
 なお説明の都合上、関数仕様は厳密には異なります。ご了承ください。


ゲームロジック用データの初期化

// ゲームロジック用データを初期化
aiSquare.fill(0);
 続けて、ゲームロジック用データを初期化します。 この命令で、aiSquare[0] から aiSquare[8]0 にします。


手番プレイヤーの設定

// 手番プレイヤー番号を1(先手)に設定
iPlayerNumber = 1;
 最後に手番プレイヤーを設定します。 先手は O です。 それを示す値 1 を設定します。
 マンガでは、初期化する直前のプレイが既に先手 O の手番だったため、プレイヤーナンバーが 1 でした。 そこをゲーム初期化の処理で、改めて 1 を設定しています。
 このように、元の値に関係なく初期値を設定して問題なければ、気にせず設定してしまうのがわかりやすいプログラミングです。


「実装検証」で体験しよう


 前記「実装検証」セクションにて、「ゲームスタート」を実施、プレイ、さらに「ゲームスタート」を実施してください。 何度でもゲーム初期化が行われ、常に同じ状態でゲームを開始できます。

ゲームプログラミングにおける「ゲーム初期化」


 マンガの題材「OXゲーム」は、単純にプレイするだけなので、ゲーム初期化は本記事のソースコードのように単純明快でした。
 ただし、実際のゲームプログラミングでは、各所にゲーム初期化に相当する「初期化」があります。

タイトル表示の初期化


 商用ゲームアプリケーションは通常、立ち上げると、企業ロゴが表示されて、タイトル画面が表示されるなど、いきなりゲームプレイは始まりません。
 そのためアプリケーション起動時には、ゲームプレイではなく、まずアプリケーション全体を初期化します。

ニューゲームとロードの初期化


 タイトル画面でニューゲームを選ぶと、そのゲームの最初からスタートします。 ここでゲームプレイの初期化が行われます。
 昨今のゲームは、以前にセーブしたデータをロードして続きをプレイできるゲームが多いです。 この場合は、ゲームプレイの途中状態に初期化をします。
 もしOXゲームにセーブ&ロード機能がある場合、ロード時は、ゲームロジック用データとキャンバス描画を、どちらもセーブした時点の状態に復帰させる必要があります。 これはニューゲームの初期化よりも実装難易度が高いです。
 このように、ロード時の初期化は、一般的にもニューゲームの初期化より大変です。 セーブ&ロードに関しては後のエピソードで詳しく解説予定です。

状態変更時の初期化


 ステージ型のゲームで各ステージに入るとき、 フィールドモードとバトルモードが分かれているロールプレイングゲームのバトルイン時など、 ゲームプレイ中でも、状態が変わるところでは、対応した初期化が行われています。
 また、タイトルデモなど、ゲームプレイ外でもモードが変わるときには対応した初期化が行われます。

初期化漏れの不具合はわかりづらい


 初期化ミス、初期化をし忘れることを、初期化漏れと呼びます。
 初期化漏れがあると、一部の変数の値が直前のプレイ状態のままになります。
 例えばOXゲームで、手番(iPlayerNumber)の初期化漏れがあると、次のゲームの最初の手番が、直前のゲーム終了時の手番を引き継いだものになってしまいます。 つまり O から始まることも X から始まる不具合になることもありますが、それが直前のゲームに左右されるため、とてもわかりづらい不具合になります。
 また、プロのゲームプログラミングでよく使われる C++ など一部のプログラミング言語においては、新たに使用するメモリーに対する初期化漏れがあると、直前のメモリーの状態に依存した値になります。 これは事実上不定の値になるため、とても再現性に乏しい、つまり症状が安定しないわかりづらい不具合につながります。
 いずれも不具合修正の難易度が高くなりますので、初期化漏れには注意が必要です。
 なおメモリーおよび、不具合と保守に関しては、後のエピソードで詳しく解説予定です。
[PR]

マンガで感じる!本当の基礎から学ぶゲームプログラミングとは


 「マンガで感じる!本当の基礎から学ぶゲームプログラミング」シリーズでは、 主に、ゲーム開発を題材として、プログラミング時に筆者が脳内でイメージするコンピューター内部動作や本質を、マンガにてお伝えします。

プログラミングの本質をマンガで理解


 AI時代のプログラミングは、本質理解が重要です。 本質を理解していれば、あとはAIに任せて、自身を持って完成したプログラムに責任が持てるでしょう。
 そのため本シリーズでは、コーディングの実例や詳細よりも、「本質をイメージとして感じられること」を最優先としています。 まずマンガで、情報をできる限り絞り、プログラミングの仕組みやコンピューターの内部動作を、物理的に可視化してお届けします。
 そして文章の解説で徹底的に深堀りします。

登場人物紹介

【マンガで感じる】ゲーム初期化 ~ゲーム開始前の掃除と準備~ 【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 登場人物 社長 クリスタル メカたち  マンガで感じる!本当の基礎から学ぶゲームプログラミングシリーズには、主に社長、クリスタル、およびメカたちが登場します。 ※実在の人物とは関係ありません

社長

 本シリーズの偉い人です。
 マンガでは、指示すなわち「要件定義」を行います。

クリスタル

 社長の指示を、メカを活用して解決します。
 名前は、コンピューター内部で指揮者の役割を果たす「水晶発振器」に由来します。

メカたち

 用途に応じて多数存在し、果たす役割がそれぞれ与えられています。
 クリスタルの指示に従い、ある時はプログラムの変数や関数のように、ある時は電子回路の素子のように振る舞います。

「マンガで感じる!本当の基礎から学ぶゲームプログラミング」にかける想い


 筆者が本シリーズにかける想いや、 より詳しいコンセプトは「マンガで感じる!本当の基礎から学ぶゲームプログラミング」にて語っています。 そちらもぜひご覧ください。

AIを専属の家庭教師にしてゲーム初期化を学ぼう


 本エピソードでは、ゲームを開始するため処理「ゲーム初期化」を解説しました。 ゲームおよびゲームの各種要素を開始するために、掃除と準備を行う、ゲームに必須の処理になります。
 マンガを読んで興味が湧いた、解説のこのキーワードが気になった、などあれば、AIを専属の家庭教師に見立てて対話してみましょう。 各人の理解度に応じた質疑応答ができて、理解が深まりますので強くオススメします。
 本エピソードが、ゲームロジックおよびゲームプログラミングの本質理解に少しでもお役に立てれば幸いです。

補足

  • 本記事に記載のプログラムソースコードは、悪意のない範囲で自由に使用・改変していただいて問題ありません。ただし、ご自身の判断と責任でお願いします。
  • 記事内容の検討および検証・添削に生成AIの Anthropic Claude と Google Gemini を利用しております。
  • 記事内の画像の作成に生成AIの Google Gemini を利用しております。
  • 数式表現にMathJaxを使用しております。
  • ※各社の登録商標または商標について「®」「™」等の表記はしておりません。



カテゴリー:マンガで感じる!本当の基礎から学ぶゲームプログラミング,OXゲーム開発編
[PR]