遊びながら学ぶHTML5 (8) - レンガ地図格子文字

タンクバトルやスーパーマリオなどの小規模なゲームでは、初期画面のレンガ文字は静止画だと思っていましたが、これらはすべて動的なテクスチャで掲載されていることがわかりました。以下のHTML5の描画機能を使って作成してみましょう。戦車戦の開始画面、ついでにドットマトリクスの文字について勉強してみましょう。

1. ドットマトリックス文字

実際、ステッカーとドットマトリックス文字には大きな違いはありません。唯一の違いは、ドットが小さな絵に置き換えられることです。以下はドットマトリックス文字用の小さなプログラムです。中国語の文字または英語の文字を入力すると、プログラムがテキストのドット マトリクスを分析して生成し、表示します。ドット マトリックスを分析して生成する方法については、次のとおりです。

1. ctx.fillText メソッドを使用して、前景色を黒、背景色を白にします。キャンバスの各ピクセルを対応するシンボルに置き換えて

文字列

を形成します。ここで質問があります。メモリ キャンバスはどのくらいの大きさにすべきでしょうか?私の解決策は、フォントが何であっても境界を超えないようにするために、フォントをできるだけ大きくすることです。

ピクセルを分析する過程で、テキストの幅と高さを同時に記録できます。分析が完了すると、新しいキャンバスが再度生成されます。今回は、テキストのサイズと同じにすることができます。テキスト。

もう 1 つの問題は、テキストが小さすぎると、フォントが少し歪むことです。これは、人間の目では小さなフォントをはっきりと見ることができず、プログラムもそれを明確に分析できません。

そのため、戦車戦のフォントのように、小さいサイズのフォントを特別にデザインする必要があります。

2. レンガ文字

ドットマトリックスの原理を理解すれば、レンガ文字を実装するのは非常に簡単です。 これはリソースの画像であり、そこからレンガが傍受されます。レンガ 画像の中央と右下にある非常に小さなブロックですが、私たちがプレイしている戦車戦ゲームの各レベルの

マップ

は、これほど単純な画像から生成されているとは思いませんでした。

以下はレンガキャラクターのドットマトリクスデータです。ここにはゲームの起動画面とゲーム終了画面のBATTLE CITYを構成する部分だけがあります

3. 時間があるためです。コードはかなり醜いものですが、これは HTML5 2D 関数の私独自の単純なパッケージ化であり、pygame の interface スタイルの一部を模倣しています。

カプセル化後、描画関連のコードは非常に単純で、残りは主に演算ロジックのコードであることがわかります。

りー

以上が遊びながら学ぶHTML5 (8) - レンガ地図格子文字の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。