サンプルプログラムの構成(解説)

プログラミング支援

本サイトではJavaScriptのサンプルプログラムを配布しており・・・

本記事では、そのサンプルプログラムの構成を解説します。地味な内容なので、興味のある方だけご欄ください・・・(間違いなく眠くなります🤣)

😉ファイルの構成

サンプルプログラムはindex.htmlを先頭とし、そこからgame.html、~.jsが実行されます。

これらをどのような順番で実行しているかはgame.htmlに記載してあります。

Visual Studio Codeを起動して、game.htmlをブチ込んでみましょう・・・😎

この写真ではindex.htmlを選択していますが、今回はgame.htmlを選択してください

すると、game.htmlのコードが見れると思います。

下記写真の赤枠に注目ください。

まさにここで、同じフォルダにある複数の「~.js」を呼び出しているわけです。

これら「~.js」もまた、JavaScriptのコードですので、Visual Studio Codeにブチ込む😎ことで中身を見たり書き換えたりできます。

😉index.html

これは、画面の外枠です。index.htmlだけにして中身のgame.htmlを抜いたらこういうイメージ。

つまり、index.htmlはゲーム本体の領域とその外側だけ提供していて、ゲーム本体はgame.htmlなんですね。

😉game.html

上記のとおり、game.htmlがゲームの本体になります。

本サイトでは記事中にゲームを埋め込んだりしていますが、これはindex.htmlをすっとばしてgame.htmlだけくりぬいて⛏ 貼り付けてるわけですね。

😲dib.js

ゲーム画面として映すデータを定義しています。じつは、本サイトのサンプルプログラム最大の目玉👁

他サイトさんの画像描画でよくある、canvasのようなブラックボックスの関数でなく、ビットを並べたまる裸のデータです🧜‍♀️

これは、古く「DIB」と呼ばれる技術です。

Device-Independent Bitmap – Microsoft WindowsのGraphics Device Interface (GDI) で使用されるビットマップ画像形式の一種。デバイス非依存ビットマップまたはデバイス独立ビットマップ。この画像データおよび付随するメタデータをファイルに保存したものはWindows bitmap (BMP) と呼ばれる。

https://ja.wikipedia.org/wiki/DIB

つまりBMP=画像データ(サンプルでは~.png)を読んで逆にDIBを生成したのがこのビットを並べた、まる裸🧜‍♀️のデータなんですね。

「canvasでよくね?🤔」と思われるかもしれませんが、canvasは画像描画の応用範囲が限られること、できたとしても重いことから、DIBを使ってます。

おそらくcanvasでは、サンプルプログラムで選択できる特殊効果は、どれ1つ満足に実現できないでしょう🤣

DIBがあるからこそ、色んな特殊効果が実現できてる😏

これができるとできないとでは、ゲームの深みがかなり変わってきます。

🥱nsys.js

システムを司るファイルです。

処理としては、タップとかスワイプの判定、使う画像データの読み込み・・・とあまり華が無い裏方さんになります🧔

😉nfld.js

その名のとおり、フィールド画面の処理です。

ネンガソフトでは、プログラムの骨格を作る際いつもRPGをターゲットにしているため

「nfld.js」(フィールド画面の処理)

「nbtl.js」(バトル画面の処理)

「ntitle.js」(タイトル画面の処理)

・・・

と作っています。サンプルではfld.jsしか使わないので、nbtl.jsやntitle.jsは入れていません。

画面の処理なので、Render()関数で画面にキャラクターを書き込む、TickFrame()関数で画面のキャラクターを動かすみたいな使い方です。

😗main.js

いわゆるメインループというやつです。

下の方(68行目)にある「function main (timestamp) {・・・」で、画面1フレームで行なわれる処理を記載しています。

上記nfld.jsのTickFrame()関数と(79行目)、Render()関数(83行目)を呼んでいますね。

🙄最後に

お疲れさまでした。学校の座学みたいにくっそ眠い内容でしたね😪

テストには出ないので、今覚える必要はありません🤣

サンプルプログラムを使っているとき、「この処理を変更するにはどのファイルをいじればいいんだっけ?」となった時に読み返してくださいませ・・・😘

コメント

タイトルとURLをコピーしました