NES / Famicom / WebテクノロジーでのDandyエミュレーション。Yandexレポート

TypeScript、Canvas、およびWeb Audioスタックを使用すると、Webテクノロジーを使用してコンピューターシステムをエミュレートできます。私のレポートでは、NESセットトップボックスの例を使用して、コンピューターのアーキテクチャー（プロセッサー、プログラム、周辺機器、メモリへのI / Oマッピング）がどのように配置されているかを説明しました。





レポートは3つの部分に分けることができます。

1. 6502プロセッサの動作と、JavaScriptを使用してエミュレートする方法、
2. グラフィックス出力デバイスの仕組みとゲームのリソースの保存方法、
3. Webオーディオを使用してオーディオを合成する方法と、オーディオorletを使用して2つのストリームに並列化する方法。

最適化のヒントを教えてみました。それでも、エミュレーションが重要です。60FPSでは、コードを実行する時間がほとんどありません。



-みなさん、こんにちは。私の名前はゼーニャです。今度は、土曜日に、多くの土曜日のプロジェクトについて少し変わった話があります。既存のWebテクノロジーの上に実装できるコンピューターシステムのエミュレーションについて話しましょう。実際、Webにはすでにかなり豊富なツールがあり、絶対に驚くべきことができます。具体的には、90年代の有名なダンディコンソールで、実際にはニンテンドーエンターテインメントシステムと呼ばれているエミュレーターについてお話します。







少し歴史を思い出しましょう。 1983年にファミコムが日本で発売されたときに始まりました。任天堂から発売されました。 1985年にニンテンドーエンターテインメントシステムと呼ばれるアメリカ版がリリースされました。 90年代には、ダンディと呼ばれる同じ台湾の地域がありましたが、密かに、これは非公式の接頭辞です。そして、ニンテンドーからの最後のそのような鉄の贈り物は、NESミニが出た2016年でした。残念ながら、私はNESminiを持っていません。 SNES mini、スーパーニンテンドーがあります。それがどれほど小さいかを見てください。このスライドを見ると、ムーアの法則がその栄光のすべてを見ることができます。



1985年とコンソールとジョイスティックの比率を見ると、2016年には、人の手が変わらないため、ジョイスティックを小さくすることはできませんが、コンソール自体は小さくなっているため、すべてがどれだけ小さくなったかがわかります。



すでに気づいたように、多くのエミュレーターがあります。言いませんでしたが、少なくとも1人の関係者が気づきました。これ（SNESminiまたはNESmini）は、実際には実際のセットトップボックスではありません。これは、コンソールをエミュレートするハードウェアです。つまり、実際には、これは公式のエミュレーターですが、これは非常に面白い鉄の形で提供されます。



しかし、ご存知のように、2000年代以降、NESをエミュレートするプログラムがあり、そのおかげでその時代のゲームを楽しむことができます。そして、多くのエミュレーターがあります。なぜ別のもの、特にJavaScriptで、あなたは私に尋ねますか？私がこのことをしたとき、私はこの質問に対する3つの答えを自分で見つけました。

1. , . - , . . , - , - . . . , , . , -.
2. , , . , , , , NES — , , NTSC, 60 . 16 , . .
3. . , . , , . , , — , . . , , .

また、NESを実行するプロセッサのエミュレートについても話しているMattGodboldによるプレゼンテーションを見ました。彼は、私たちがそのような低レベルのものをそのような高レベルの言語でエミュレートしているのは面白いと言いました。私たちはハードウェアにアクセスできず、間接的に作業しています。







何をエミュレートするか、どのようにエミュレートするかなどの検討に移りましょう。プロセッサから始めます。 NES自体は象徴的です。ロシアにとって、それは理解できます、これは文化的な現象です。しかし、西側、東側、日本では、コンソールが実際に家庭用ビデオゲーム業界全体を救ったため、これは文化的な現象でもありました。



プロセッサは、象徴的なMOS6502にもインストールされています。その意義は何ですか？登場した時点で、競合他社の価格は180ドル、MOS6502の価格は25ドルでした。つまり、このプロセッサはパーソナルコンピュータ革命を開始しました。そしてここに私は2台のコンピューターを持っています。 1つ目はAppleIIです。私たちは皆、このイベントがパーソナルコンピュータの世界にとってどれほど重要であったかを知っており、想像しています。



BBCマイクロコンピューターもあります。彼は英国でより人気があり、BBCは英国のテレビ会社です。つまり、このプロセッサはコンピュータを大衆にもたらしました。そのおかげで、私たちはプログラマー、フロントエンド開発者になりました。



最小限のプログラムを見てみましょう。コンピューティングシステムを作るには何が必要ですか？







CPU自体はかなり役に立たないデバイスです。ご存知のように、CPUはプログラムを実行します。しかし、少なくともこのプログラムをどこかに保存するには、メモリが必要です。そしてもちろん、それは最小プログラムに含まれています。そして、私たちのメモリは、バイトと呼ばれる8ビットのセルで構成されています。



JavaScriptでは、型付きUint8Array配列を使用してこのメ​​モリをエミュレートできます。つまり、配列を割り当てることができます。



メモリがプロセッサとのインターフェースを持つために、バスがあります。バスにより、プロセッサはアドレスを介してメモリをアドレス指定できます。アドレスは、データのように8ビットではなく、16ビットで構成されているため、64キロバイトのメモリをアドレス指定できます。







プロセッサには特定の状態があり、A、X、Yの3つのレジスタがあります。レジスタは中間値のストレージのようなものです。レジスタサイズは1バイトまたは8ビットです。これは、プロセッサが8ビットであり、8ビットのデータで動作することを示しています。



レジスターの使用例。 2つの数値を追加したいのですが、メモリにはバスが1つしかありません。最初の番号をその間のどこかに保存する必要があることがわかりました。これをレジスタAに保存し、メモリから2番目の値を取得して追加すると、結果が再びレジスタAに配置されます。



機能的には、これらのレジスタは完全に独立しており、一般的なレジスタとして使用できます。ただし、加算などの意味があり、結果はレジスタAで取得され、第1オペランドの値が取得されます。



または、たとえば、データに対処します。これについては後で説明します。オフセットアドレス指定モードを指定し、Xレジスタを使用して最終値を取得できます。



プロセッサの状態には他に何が含まれていますか？アドレスは2バイトであるため、現在のコマンドのアドレスを指すPCレジスタがあります。



ステータスフラグを示すステータスレジスタもあります。たとえば、2つの値を減算して負になると、フラグレジスタの特定のビットが点灯します。



最後に、スタックへのポインタであるSPがあります。スタックは単なる通常のメモリであり、他のすべてのプログラムから分離されているわけではありません。このSPポインタを制御するプロセッサからの命令があります。これがスタックの実装方法です。次に、そのような興味深いソリューションにつながる1つの優れたコンピューターのアイデアを見ていきます。







これで、プロセッサ、メモリ、状態がプロセッサにあることがわかりました。私たちのプログラムが何であるか見てみましょう。これは一連のバイトです。一貫している必要はありません。プログラム自体は、メモリのさまざまな部分に配置できます。



プログラムを想像することができます。ここにコードがあります-1、2、3、4、5、6、7、8、9、10。これは実際の6502プログラムです。このプログラムの各バイト、この配列の各桁はopcodeとしてのエンティティ。 Opcode-操作コード。 「それから、再び、普通の数。



たとえば、opcode 169があります。これは、それ自体で2つのものをエンコードします。1つは命令です。命令を実行すると、プロセッサやメモリなどの状態、つまりシステムの状態が変化します。たとえば、2つの数値を加算すると、結果はレジスタAに表示されます。これは例の命令です。また、LDA命令もありますが、これについてはさらに詳しく検討します。メモリからレジスタAに値をロードします。



opcodeがエンコードする2番目のことは、アドレス指定モードです。彼は彼女のデータをどこで入手するかについて指示を与えます。たとえば、これがIMMアドレッシングモードの場合、次のように表示されます。現在のプログラムカウンターの隣のセルにあるデータを取得します。また、このモードがどのように機能し、JavaScriptでどのように実装できるかについても説明します。



これがプログラムです。これらのバイトを除けば、すべてがJavaScriptと非常に似ていますが、下位レベルのみです。







私が話していたことを覚えているなら、面白いパラドックスがあるかもしれません。プログラムをメモリに保存し、データも保存します。この質問をするかもしれません：プログラムはデータとして機能できますか？答えはイエスです。このプログラムの実行時に、プログラム自体から変更することができます。



または別の質問：データはプログラムになることができますか？はい。プロセッサは関係ありません。彼はちょうど工場のように、彼に供給されたバイトを粉砕し、指示に従います。逆説的なこと。あなたがそれについて考えるならば、それは非常に安全ではありません。スタック上のデータなどだけのプログラムの実行を開始できます。ただし、非常に簡単であるという利点があります。複雑な回路を行う必要はありません。



これは私たちが今日出くわした最初の素晴らしいアイデアです。それはフォンノイマンアーキテクチャと呼ばれます。しかし、実際には多くの共著者がそこにいました。



ここに示されています。プログラム1、opcode 169、続いて10、いくつかのデータがあります。はい。このプログラムは、次のように表示することもできます。169はデータ、10はopcodeです。これは6502の合法的なプログラムになります。このプログラム全体もデータと見なすことができます。



コンパイラがあれば、何かを作ってこのメモリに入れることができます。それはとても面白いことです。



プログラムの最初の部分である手順を見てみましょう。







6502は、算術を含む73の命令へのアクセスを提供します：加算、減算。乗算と除算はありません。ごめんなさい。ビット操作があり、それらは8ビットワードのビットを操作することに関するものです。



フロントエンドで禁止されているジャンプがあります。ジャンプステートメントは、プログラムカウンターをコードの一部に転送するだけです。これはプログラミングでは禁止されていますが、低レベルを扱っている場合は、これが分岐を行う唯一の方法です。スタックなどの操作があります。それらはグループ化されています。はい、73の指示がありますが、グループとその機能を見ると、実際にはそれほど多くはなく、すべて非常によく似ています。



LDA命令に戻りましょう。すでに述べたように、これは「メモリからレジスタAに値をロードする」ことです。これは、JavaScriptで非常に簡単にできることです。入り口には、アドレス指定モードで提供されるアドレスがあります。内部の状態を変更します。this._aはメモリからの読み取り値に等しいと言います。



ステータスレジスタにこれらの2つのビットフィールド（ゼロフラグと負のフラグ）を設定する必要があります。ここにはビットワイズなものがたくさんあります。しかし、エミュレーターを作成する場合、これらのOR、ネガティブなどを処理することはあなたにとって第二の性質になります。唯一の面白いことは、2番目のブランチにそのような％256があることです。繰り返しになりますが、私たちが愛するJavaScript言語の性質、つまり型付きの値がないという事実を示しています。 Statusに入力する値は、1バイトに収まる256を超える可能性があります。私たちはそのようなトリックに対処しなければなりません。



次に、opcodeの最後の部分であるアドレス指定モードを見てみましょう。







12のアドレス指定モードがあります。前に述べたように、データをどこから取得するかを指示するために、それらを取得して示すことができます。



3つのことを見てみましょう。最後はABS、絶対アドレスモードです。それから始めましょう。少し恥ずかしい思いをします。彼はこのようなことをします。入力として、16ビットの完全なアドレスを彼に与えます。彼はこのメモリセルから値を取得します。アセンブラの2番目の列で、LDA $ ccbbのように表示されます。 ccbbは16進数であり、通常の番号であり、単に異なる表記で書かれています。ここで不快に感じる場合は、これは単なる数値であることを忘れないでください。



3番目の列では、マシンコードでどのように表示されるかを確認できます。前方にはopcode-173があり、青色で強調表示されています。そして187と204はすでにアドレスデータです。ただし、8ビット値で動作しているため、アドレスを書き込むには2つのメモリ位置が必要です。



また、opcodeはCPUでしばらく実行されると言うのを忘れましたが、ある程度のコストがかかります。絶対アドレス指定のLDAには、4CPUサイクルかかります。



ここでは、なぜこれほど多くのアドレス指定モードが必要なのかをすでに理解できます。次のアドレス指定モードであるZP0について考えてみます。これはページゼロアドレッシングモードです。また、ページ0は、メモリに割り当てられた最初の256バイトです。これらは0から255までのアドレスです。



アセンブラでも、LDA * 10です。このアドレス指定モードは何をしますか？彼は次のように述べています。ページ0に移動します。ここでは、最初の256バイトで、そのようなオフセットを使用します。この場合は10で、そこから値を取得します。ここでは、アドレス指定モード間の大きな違いにすでに気づいています。



絶対アドレス指定の場合、最初に、そのようなプログラムを作成するために3バイトが必要でした。次に、4つのCPUサイクルが必要でした。また、ZP0アドレッシングモードでは、3CPUサイクルと2バイトしかかかりませんでした。しかし、はい、私たちは柔軟性を失いました。つまり、データを最初のページ、つまりこのページにしか配置できません。



IMMの最終的なアドレス指定モードは次のとおりです。opcodeの隣のセルからデータを取得します。アセンブラーのこのLDA＃10はそれを行います。そして、プログラムは[169、10]のように見えることがわかりました。すでに2つのCPUサイクルが必要です。しかし、ここでは柔軟性も失われていることは明らかであり、データの隣にopcodeを配置する必要があります。



これをJavaScriptで実装するのは簡単です。ここにいくつかのサンプルコードがあります。住所があります。これはIMMアドレッシングであり、プログラムカウンターからデータを取得します。アドレスはプログラムカウンターであり、次にプログラムが実行されたときに次の命令にジャンプするように、アドレスを1つインクリメントします。



これは面白いことです。フロントエンド開発者のようにマシンコードを読み取ることができるようになりました。そして、アセンブラーに何が書かれているかを確認する方法も知っています。







原則として必要なものはすべてすでに知っています。プログラムがあり、それはバイトで構成されています。各バイトはopcode、各opcodeは命令などです。プログラムがどのように実行されるかを見てみましょう。そして、これらのCPUサイクルでのみ実行されます。



そのようなコードはどのように実行できますか？例。ソフトウェアカウンターからopcodeを読み取り、それを1つ増やす必要があります。次に、このopcodeを命令とアドレス指定モードにデコードする必要があります。考えてみれば、opcodeは169の素数です。そして、1バイトには256個の数字しかありません。 256個の値を持つ配列を作成できます。この配列の各要素は、使用する命令、必要なアドレス指定モード、およびそれにかかるサイクル数を参照するだけです。つまり、それは非常に簡単です。そして、私が持っているアレイはちょうどプロセッサの状態にあります。



次に、36行目でアドレス指定モードの機能を実行します。これにより、アドレスが提供され、指示が送られます。



最後に行う必要があるのは、ループを処理することです。 opcodeResolverはサイクル数を返し、remainingCycles変数に書き込みます。各プロセッササイクルを確認します。残りのサイクルがゼロの場合は、次のコマンドを実行できます。ゼロより大きい場合は、単純に1つ減らします。そして、それはすべて、非常に簡単です。これは、6502でプログラムが実行される方法です。







しかし、すでに述べたように、プログラムは、メモリのさまざまな部分、さまざまな比率などに配置できます。プロセッサは、このプログラムの実行を開始する場所をどのように理解できますか？ Cの世界からこのようなintメインが必要です。



実際、すべてが単純です。プロセッサには、その状態をリセットする手順があります。この手順では、アドレス0xfffxcから初期コマンドのアドレスを取得します。 0xfffxcも16進数です。不快に感じる場合は、スコアを付けてください。これは通常の数値です。これは、0xを介してJavaScriptで記述される方法です。



アドレスの2バイトを読み取る必要があります。アドレスは16ビットです。このアドレスから下位バイトを読み取り、次のアドレスから上位バイトを読み取ります。そして、このようなビット操作の魔法を使ってこのケースを追加します。さらに、プロセッサの状態をリセットすると、レジスタの値（レジスタA、X、Y、スタックへのポインタ、ステータス）もリセットされます。リセットには8サイクルかかります。そういうことです。







私たちはすでにすべてを知っています。正直なところ、テストの仕方が全くわからなかったので、全部書くのはちょっと大変でした。私たちは、これまでに作成されたプログラムを実行できるコンピューター全体を作成しています。私たちが正しく動いていることをどのように理解するのですか？



素晴らしい方法があります！ 2つのCPUを使用します。 1つ目は私たちが作成したもので、2つ目はリファレンスCPUであり、それがうまく機能することは確かです。たとえば、NES用のエミュレーターであるニンテンデュレーターがあります。これはCPUのそのようなベンチマークと見なされています。



特定のテストプログラムを取得し、それを参照CPUで実行して、各コマンドの状態ログにプロセッサの状態を書き込みます。次に、このプログラムを取得してCPUで実行します。そして、各コマンドの後の各状態がこのログと比較されます。スーパーアイデア！



もちろん、CPUリファレンスは必要ありません。プログラム実行ログが必要です。このログはNesdevにあります。実際、週末の数日でプロセッサエミュレータを作成できるのですが、それはすばらしいことです。



そしてそれがすべてです。ログを取得して状態を比較し、インタラクティブなテストを行います。最初のコマンドを実行しますが、開発中のプロセッサには実装されていません。それを実装し、ログの次の行に移動して、再度実装します。超早い！すばやく移動できます。

NESアーキテクチャ

これでCPUができました。これは、基本的にコンピューターの心臓部です。そして、NES自体のアーキテクチャが何でできているか、そしてそのような複雑な複合コンピュータシステムがどのように作られているかを見ることができます。考えてみれば、CPUがあり、メモリがあるからです。値を受け取ったり、録音したりすることはできます







が、NESのセットトップボックスには、画面やサウンドデバイスなどもあります。周辺機器の操作方法を学ぶ必要があります。あなたはこれのために何か新しいことを学ぶ必要さえありません、私たちのバスの概念は十分です。これはおそらく2番目の素晴らしいアイデアであり、エミュレーターを作成する過程で私が自分で作った素晴らしい発見です。



64キロバイトだったメモリを2つの32キロバイトの範囲に分割するとします。より低い範囲には、このボードの写真のように、電球の配列である特定のデバイスがあります。



このジュニア32キロバイトの範囲に書き込むと、ライトがオンまたは消灯するとします。そこに値1を書き込むと、ライトが点灯し、0の場合は消灯します。同時に、値を読み取ってシステムの状態を理解し、この画面に表示されている画像を理解することができます。



繰り返しますが、リセット手順中に高範囲のアドレスが必要になるため、高アドレス範囲にプログラムが配置されている通常のメモリを配置します。



これは実際には超天才的なアイデアです。周辺機器と対話するために、追加のコマンドなどは必要ありません。以前と同様に、古き良きメモリに書き込むだけです。しかし同時に、メモリはすでに追加のデバイスである可能性があります。







これで、NESアーキテクチャを確認する準備が整いました。いつものように、CPUとそのバスがあります。さらに2キロバイトのメモリがあります。 APU（サウンド出力デバイス）があります。残念ながら、今は考慮しませんが、すべてがとてもクールです。そして、カートリッジがあります。高域に配置され、プログラムデータを提供します。彼はこれらのグラフも提供しています。次に検討します。 CPUバスの最後のものは、PPU、画像処理ユニット、そのようなプロトビデオカードです。ビデオカードの操作方法を学びたい場合は、ビデオカードの実装方法も学びます。



PPUには独自のバスもあり、その上で名前テーブル、パレット、およびグラフィックデータがシフトされます。ただし、グラフィックデータはカートリッジによって提供されます。そして、オブジェクトのメモリがあります。これがアーキテクチャです。







カートリッジとは何かを見てみましょう。これは、過去のものであると考えると、CDよりもはるかにクールなアイデアです。



なんでかっこいいの？左側には、アメリカ地域のカートリッジ、有名なゲームZeldaがあります。誰もプレイしたことがない場合は、プレイ、スーパーです。そして、このカートリッジを分解すると、その中にマイクロ回路が見つかります。レーザーディスクなどはありません。通常、これらのチップにはデータが含まれています。また、カートリッジは、コンピュータシステム、CPUおよびPPUバスに直接切り込みます。それはあなたが驚くべきことをし、ユーザー体験を向上させることを可能にします。



カートリッジにはマッパーが搭載されており、住所の翻訳が記入されています。大きなゲームがあるとしましょう。しかし、NESには、プログラム用にアドレス指定できる32キロバイトのメモリしかありません。たとえば、ゲームは128キロバイトです。マッパーは、プログラムの実行中に、その場で特定の範囲のメモリを完全に新しいデータに置き換えることができます。プログラムで言うことができます：レベル2をロードすると、メモリはほぼ瞬時に直接交換されます。



さらに、面白いことがあります。たとえば、マッパーはサウンドトラックを拡張したり、新しいものを追加したりするチップを提供できます。Castlevaniaをプレイしたことがある場合は、日本の地域のCastlevaniaの音を聞いてください。追加の音があります、それは完全に異なって聞こえます。この場合、すべてが同じハードウェアで実行されます。つまり、このアイデアは、ビデオカードを購入してコンピューターに接続したときのアイデアに似ており、追加の機能があります。ここでも同じです。それは素晴らしいことです。しかし、私たちはCDで立ち往生しています。







最後の部分に移りましょう-この画像出力デバイスがどのように機能するかを見てみましょう。エミュレーターを作りたいのなら、最小限のプログラムはプロセッサーを作ることであり、これは写真やビデオゲームがどのように見えるかを見るためのものです。



トップレベルのエンティティ、つまり画像自体から始めましょう。 2つの計画があります。より動的なエンティティが配置される前景と、シーンなどのより静的なエンティティが配置される背景があります。



ここで分割を見ることができます。左側は同じ有名なCastlevaniaゲームなので、PPUへの旅全体はSimonBelmontで行われます。彼と一緒に、すべてがどのように機能するかを検討します。



背景や柱などがあります。背景に描かれているのがわかりますが、同時にすべてのキャラクター（サイモン自身（左、茶色）と幽霊）がすでに前景に描かれています。つまり、前景はより動的なエンティティに存在し、背景はより静的なエンティティに存在します。







ビットマップディスプレイ上の画像はピクセルで構成されています。ピクセルは単なる色付きのドットです。少なくとも、色が必要です。 NESにはシステムパレットがあります。 64色で構成されていますが、残念ながらNESが再現できるすべての色です。ただし、パレットから色を取得することはできません。カスタムパレットの場合、メモリ内に特定の範囲があり、それも2つのそのようなサブ範囲に分割されます。



背景と前景の範囲があります。各範囲は、4色の4つのパレットに分割されています。たとえば、背景、ゼロパレットは、白、青、赤で構成されます。また、各パレットの4番目の色は常に透明な色を指します。これにより、透明なピクセルを作成できます。







パレットのあるこの範囲は、CPUバスではなく、PPUバスに配置されています。 CPUバスを介してPPUバスにアクセスできないため、そこにデータを書き込む方法を見てみましょう。



ここで再び、メモリマップされたI / Oのアイデアに戻ります。アドレス0x2006と0x2007があり、これらは16進数のアドレスですが、これらは単なる数字です。そして、私たちはこのように書きます。アドレスは16ビットであるため、8ビットの2つのアプローチでアドレスをox2006アドレスレジスタに書き込み、次にアドレス0x2007を介してデータを書き込むことができます。こんなに面白いこと。つまり、実際には、少なくともパレットに何かを書き込むには、3つの操作を実行する必要があります。







優れた。パレットはありますが、構造が必要です。色は常に良いですが、ビットマップには特定の構造があります。



グラフィックの場合、それぞれがタイルを含む4キロバイトの2つのテーブルがあります。そして、このすべての記憶は一種のアトラスです。以前は、誰もがラスターイメージを使用するときに、大きなアトラスを作成し、そこから背景イメージから座標によって必要なイメージを選択していました。これは同じ考えです。



各テーブルには256個のタイルがあります。繰り返しますが、面白い数値です。正確に256を使用すると、1バイト、256の異なる値を指定できます。つまり、1バイトで、必要な任意のタイルを指定できます。 2つのテーブルが見つかります。背景用のテーブルと前景用のテーブル。







これらのタイルがどのように保存されているか見てみましょう。ここでも面白いです。パレットには4つの色があることを思い出してください。数値学：バイトには8ビットがあり、タイルは8 x8です。 1バイトでタイルのストリップを表すことができ、各ビットが何らかの色を担当することがわかります。また、8バイトで、本格的な8 x8タイルを表すことができます。



しかし、ここには1つの問題があります。すでに述べたように、1ビットが色の原因ですが、2つの値しか表すことができません。タイルは2つの平面に格納されます。最上位ビットと最下位ビットのプレーンがあります。最終的な色を取得するために、両方の平面からのデータを結合します。



考えてみてください。たとえば、下部の文字「I」には数字の「3」があります。これは次のようになります。最下位ビットと最上位ビットの平面を取得し、10進数の3に等しい2進数の11を取得します。このような面白いデータ構造。

バックグラウンド

これで、ようやく背景をレンダリングできるようになりました。







その名前の表があります。それぞれ960バイトの2つがあり、各バイトは特定のタイルを参照します。つまり、タイル識別子は前の表に示されています。これらの960バイトをマトリックスとして表すと、32 x30のタイル画面が得られます。 NESの解像度は256ピクセル×240ピクセルになります。



優れた。そこにタイルを書くことができます。ただし、お気づきかもしれませんが、タイルは表示するパレットを示していません。さまざまなパレットでさまざまなタイルを表示できます。また、この情報をどこかに保存する必要があります。残念ながら、パレット情報を格納するための名前テーブルごとに64バイトしかありません。



そして、これが問題が発生する場所です。値が64になるようにテーブルをさらに分割すると、4 x 4のタイルの正方形が得られます。これは、このような赤い正方形のように見えます。画面の大部分にすぎません。彼女は、1つではなくても、1つのパレットに従属します。



覚えているように、サブパレットには4つのパレットがあり、必要なものを示すために必要なのは2ビットだけです。これらの64バイトのそれぞれは、4 x4グリッドのパレット情報をコピーします。しかし、このグリッドはまだそのようなサブグリッドに2つずつ分割されています。もちろん、ここには制限があります。2行2列のグリッドが1つのパレットに関連付けられています。これらは、任天堂で背景を表示する世界の制限です。面白い事実ですが、一般的にはゲームに干渉することはありません。







スクロールもあります。たとえば、「マリオ」やキャッスルヴァニアを思い出すと、次のことがわかります。これらのゲームでヒーローが右に移動すると、画面に沿って世界が展開しているように見えます。これはスクロールによって行われます。



すでに2つの画面をエンコードしている2つの名前テーブルがあることを思い出してください。そして、ヒーローが移動すると、それに続く名前のテーブルにデータを追加します。その場で、ヒーローが動くと、名前の表に記入します。名前のテーブルのどのタイルからデータの表示を開始する必要があるかを示すことができることがわかり、それを短冊状に展開します。スクロールの全体的なトリックは、2つの名前テーブルから読み取ることです。



つまり、ある名前のテーブルを水平方向に超えると、別のテーブルから自動的に読み取りを開始するなどです。また、データを入力することを忘れないでください。



ちなみに、当時はスクロールがかなり大きなものでした。ジョン・カーマックの最初の業績は、スクロールの分野でした。この話をチェックしてください、それはかなり面白いです。

前景

そして前景。フォアグラウンドでは、前述したように、動的エンティティがあり、それらはオブジェクトと属性のメモリに格納されます。







64個のオブジェクトを書き込むことができる256バイトがあり、オブジェクトごとに4バイトです。各オブジェクトは、画面上のピクセルオフセットであるXとYをエンコードします。さらに、タイルのアドレスと属性。背景に優先順位を付けることができます。下の図を参照してください。パレットを指定できます。背景よりも優先度は、背景をスプライトの上に描画する必要があることをPPUに通知します。これにより、Simonを像の後ろに配置できます。



写真の「I」のように、向きを変えたり、水平、垂直などの任意の軸を超えて回転させたりすることもできます。パレットとほぼ同じ方法で、アドレス0x2003、0x2004を介して書き込みます。



最後に、エンディング。前景オブジェクトをどのようにレンダリングしますか？







写真はスキャンラインと呼ばれる線に沿って展開します。これはテレビ用語です。各スキャンラインの前に、オブジェクトと属性のメモリから8つのスプライトを取得するだけです。8つ以下、8つだけがサポートされます。そのような制限もあります。たとえば、ここのように、1行ずつ表示するだけです。現在のスキャンラインでは、黄色で、雲、太陽、心臓が縞模様に表示されています。スマイリーは表示しません。しかし、彼はまだ幸せです。One LoneCoderスーパーチャンネルを



チェックしてください。特にプログラミングプロセス自体があります-NESエミュレーターのプログラミング。そして、Nesdevには、エミュレーションに関するすべての情報（構成内容など）が含まれています。最後のリンクは、エミュレーターのコードです。興味があればご覧ください。TypeScriptで書かれています。



ありがとう。楽しんでください。