IndexedDBにインストールできる3D WebGLブラウザゲーム

ポップコーンの在庫-興味深い話をお話しします...一般的に、これは「ゲームの書き方」というトピックに関する1000のエッセイの1つになります。 最初はできる限り多くの技術的な詳細をカバーするつもりでしたが、1つの記事にはそれらが多すぎて、それが巨大になることに気付きました。 したがって、「最初のシリーズ」はむしろレビューになります。 興味深い場合は、続けます。 だから。

アイデア！

私のプログラミングの経験は、3Dで「モノポリー」のようなゲームを再作成するというアイデアを思いついたとき、ソーシャルネットワーク用のアプリケーションに限られていました。 幼少期には、私の友人と私はボード経済ゲームのファンのクラブのようなものを持っていました。その中には合計で約10がありました。 そして今、彼らがそれぞれ自分のビジネスや他の場所に行って、インターネットだけが私たちを結びつけたとき、いろんな経済ゲームに基づいた電子版を作りたかったのです。 しかし、これは仮想現実であるため、すべてが現実の世界のように見えるはずです。家はフィールド上に建てられ、チップの代わりに、プレイヤーはカーディーラーで購入する必要のあるパーソナルカーを持っている必要があります...



私の考えは新しくてグーグルではないことを提案しました（同様にポデデクシル-これは広告ではなく、正義のためです）。 驚いたことに、このようなゲームの3Dバージョンのほとんどは、3次元のボードを回転させることになりますが、やはりチップとおなじみの名刺だけです。 XBoxにのみ3Dの都市のような外観がありましたが、ゲーム自体のコンセプトはクラシックとはかけ離れていたようですが、私はプレイしませんでした。 WindowsでMonopolyの非常に古い3Dクローンも見つけました。 はい、あるソーシャルネットワークでは、通常の3D「モノポリー」が機能しました。 しかし、それは遠くから見た等角図の上面図でした。 また、街の通りを走り、ゲームのヒーローの目を通して企業を見たかった。







今後は、それが言われている-完了。 これらのイベントの間に10か月が経過しました。 私はほとんど一人で働いたことを考えると、それほど多くはありません。 私はすぐに警告します、私は自分ですべてを理解したので、ゲームのグラフィックスは理想からはほど遠いものであり、コードはプロのプログラマーにとって非常に有害です。 OOPを使用しなかったのは、第一に、OOPを適切に所有していないため、そして第二に、JavaScriptでOOPを使用する理由がないためです。 したがって、機能のみ、ハードコアのみ。 KVGテンプレートは開発に使用されました-松葉杖、自転車、熊手。 そして、3Dについて...たとえば、wuv-mappingとは何ですか（ロシア語に正しく翻訳する方法は？）3Dエディターで、仕事を始めてから約4か月しか経っていないことがわかりました...初めて？







面白い小さな男を描いた「2Dデザイナー」にしか助けられませんでした。 残念ながら、ゲームの最初のバージョンには3Dキャラクターがありません。 そして、これは未来への挑戦です。







ゲームの意味は、ご想像のとおり、「フィールド」（つまり、街の周り）を「歩いて」（つまり、車を運転して）順番に自分の家を建てることになります。 経済は、他の同様のゲームに比べてわずかに修正および改善されています。 銀行でローンを取り、証券取引所で株を買うことができます。 競合他社の建物を焼くだけでなく、商品を推測することもできます。 ゲームには警察、裁判所、刑務所があります。 別の考えが閃き、プレーヤーに法と秩序の代表としてプレーする機会を与えました。 また、「夜の蝶」などのキャラクターを紹介します...どうやら、このアイデアはプログラミングに従事する長い夜に触発されたようです。 しかし、警官や愛の司祭のためにモノポリーをプレイすることは、おそらく次の部分や何らかのファッションのトピックです...ゲームは1つのソーシャルネットワークで開始される予定だったため、ゲームの通貨は密かに「シール」と呼ばれていました。

タスク

一般的に言えば、最初からタスクは非常に野心的でした。



1. 3D。 すべてが3Dで機能することが必要でした。

2.クロスブラウザおよびクロスプラットフォーム。 私の友人は異なるOSを持っているため、ゲームはどのOSでも実行する必要がありました。 もちろん、さまざまなブラウザで。

3.インストール。 （ユーザーの要求に応じて）ファイルシステムにモデルとテクスチャを保存できるようにするために、ロード時間を短縮し、その後の起動時のトラフィックを節約します。 そして同時にサーバーのトラフィックを節約します。

4.プラグインなし！ 追加でダウンロードしてインストールする必要がないように、「ウェブプレーヤー」はありません。 フラッシュさえも-いいえ、いいえ！



実際、さまざまな成功を収めて（つまり、すべてのデバイスが新しいテクノロジーをサポートしていないためにすべてのデバイスが起動しなくなるまで、しかしすぐにすべてが変わると思います）、これは実装されました。 一般に、なぜブラウザなのか？ ブラウザは、すべてのオペレーティングシステムを統合する特定の標準であり、ユーザーがどのプロセッサとOSを使用していても、追加のモジュールをインストールせずに動作する、真にクロスプラットフォームのアプリケーションを作成する鍵です。 この考えは私にとって非常に興味深いようです。

ところで、余談（そして、私は苦しみました...）

現在、クロスプラットフォームアプリケーションは次のように記述されています。 開発環境で何かが記述され、3つ（またはそれ以上）のオペレーティングシステムすべての実行可能モジュールが保存されます。 さて、これらのアセンブリは適切なストアにアップロードされます。 実際、それは異なるプラットフォーム用の単なるビルドツールです。 いいえ、これもすべて素晴らしいですが、もっと欲しいです。 したがって、ここで、彼はコードを作成しました。そして、出来上がり、それはどのOSの下でも、単一のアセンブリで機能し、それ以外はすべてOSの関心事です。



もちろん、JavaScriptインタープリターに加えて、対応するプログラミング言語を備えた他の仮想マシンがありますが、それらには、まず、クライアントインタープリターの個別のインストールが必要です。次に、おそらくすべてのOSではなく、既存の1つが必要です。このまさにインストールでユーザーからの体の動き、彼は好きではないのでユーザーは通常情熱をします。 私の意見では、ウェブテクノロジーは、追加のエンジンをインストールすることなく、一般に受け入れられているクロスプラットフォームの方向に向かって進んでいます。 はい、JavaScriptとWebGLはまだ遅いですが、状況はすぐに変わると思います。 さらに、このようなアプリケーションは、理論的には、まだ存在しないOSやブラウザーでも動作するはずです。



ここで、たとえば、Androidシステムはそれほど昔ではなく、見えていませんでしたが、今ではまったく新しい超人気のOSがあります。 そして、同様の新しいもの（OS）が将来登場する場合、すべての最新機能をサポートするブラウザが確実に存在します。 これは、既存のすべてのWebアプリケーションが起動することを意味します。 結局のところ、インターネットなしでタブレットをリリースするのは愚かなことです。 ネットワークはその標準を決定します。 また、Web標準に従ってプログラミングに完全に切り替えた場合、ユーザーがどのOSをインストールしたかは関係ありません。 ちなみに、将来的には、これがあらゆる種類のブランド化されたOSの出現につながる可能性が最も高いと思われますが、特定のタスクのために強化されたOSなどもあります。そのため、トピックから逸​​脱しません。

開発

プログラミング言語として、単純なJavaScript + PHPの束が選択されました。 PHP-私にとっては馴染みがあり、このプロジェクトはサーバー上で何らかの激しいリアルタイムを必要としなかったためです。これはシューティングゲームでもレースでもありません。 3Dエンジンとして-THREE.JSライブラリ。 後者はユーザーからのインストールを必要としないため、私を魅了しました。 また、プレーヤーのブラウザとビデオカードがWebGLをサポートしている場合、ゲームは問題なく開始されます。 悪名高いフラッシュプレーヤーも必要ありません。フラッシュプレーヤーは、いまだにタブレットにインストールされておらず、ゲームも動作します。 はい、ユーザーに更新を要求します。たとえば、ブラウザは、彼に馴染みのない奇妙なマルチメガバイトのサードパーティエンジンのインストールを提供するほどdeではありません。それは、彼のOSにはまだ存在しません。 この「美」（WebGL）は、IE11を含むすべての新しいバージョンのブラウザーでサポートされています。 そうそう、ロバに挑戦！ もちろん、ただのロバではなく、冗談です...しかし、それはIE11でも機能します。FPSだけが競合他社よりも明らかに低くなっています。



クライアントの「重い」モデルとテクスチャを（ユーザーの要求に応じて）保存するために、IndexedDBを使用しました。 インストールオプション（最小、通常、完全）を選択し、ブラウザデータベースにファイルを順番に書き込むことができるシンプルなマネージャーを作成しました。 このデータベースは、デバイスの電源をオフにしても保持されます。 そして、ゲームエンジンはそこからファイルを読み取り、インストールされていない（または完了していない）ファイルをサーバーからダウンロードします。 当然、削除オプションもあります。 マネージャーには、単にインストールオプションとファイルリストが渡されます。 HTML5などとの類推により、すべてをWEB5と呼びましたが、わかりません。 それはなんとかして呼ばれなければなりませんでした。







その他。 プログラミングのために、私は特に「難解な」開発環境を必要としませんでした。 すべて（html、php、js）が構文強調表示付きの高度なメモ帳などのプログラムに入力されました。 そして、コードの約1％が洗練されたhtmlエディターで仕事中に入力されました。 デバッグは、ブラウザコンソールを使用して行われました。



最初はアイデアから仕事に移り、主に英語で提供されているTHREE.JSライブラリのドキュメントを勉強し始めました。 したがって、いくつかのニュアンスでは、「テストの場」での必須の方法、つまり別の段階を理解する必要がありました。 こういうことをする前に、実験の方法を熟考するのに数日かかったのです。



メインステージでは、ゲームの構築は非常に遅くなりましたが、本当でした。 テリトリーを作成する方法がわからなかったので、フィールドを正方形に分割し、道路と芝生のターンが異なる複数のタイプのテクスチャを作成しました。 そして、それらを適切な順序でプログラムで配置しました。 今、私は領土を生成するよりエレガントな方法があることを理解し、これは将来の更新の機会です。 幸いなことに、それはいつでも可能であり、新しいファイルをサーバーにアップロードするだけで実行できます。







3Dモデルの場合-フォーマットを使用した無数の実験の個別のストーリー、jsでの処理のためのメソッドのゲームへの読み込み、テクスチャの移動または非表示など。 これで私は非常に苦しみました。 また、3Dエディターで作業したことはありませんでした。 この科学を知っていれば、ゲームの開発期間は半減すると思います。 最終的に、3D MaxとBlenderでサポートされている* .3ds形式に落ち着き、Assimp2jsonコンバーターを使用して* .jsonに変換しました。 そして、json-modelはすでに実行中のゲームにあり、THREE.JSバンドルのブートローダーを使用してサーバー（またはIndexedDB）から静かにロードされます-AssimpJsonLoader（私の「マネージャー」IndexedDBでも動作できるように、私が少しドープされています）サーバーからだけでなく、クライアントベースからも読み込みます）。 そして、色は保持され、テクスチャーはすべて問題ありません。 さらに、jsonはネイティブJavaScript形式であり、後に積極的な役割を果たしました。 彼は自分で家や他の小さなもののモデルを作り、一部は木と車を自分で作り、一部は無料の3Dアートからダウンロードし、低ポリに変換しました。 数十種類の異なるタイプではなく、同じデザインの家を作成するために（そして、3階の各10種類の企業ごとに、プレイヤーの可能な10色ごとに作成する必要があります）、色を変更し、目的のテクスチャをロードするためのソフトウェアシステムを作成しました。 また、家の住所（および住所なし）を備えたタブレットの場合、キャンバステクスチャが作成され、プログラムによって適用されます。これは、すべての道路名と家番号を含む単一のpng画像で構成されます。







最初の家がフィールドに現れたとき、私の喜びは際限がありませんでした。 さらに、必要な色、および必要な場所。 そして、アドレスプレート付き。 それから、物理学からの運動公式を覚えて、車についても同じことをプログラムしました。 そして同時に、幾何学を持つ代数。 （「お風呂とコーヒーの両方があります。そして紅茶とココア。」）



ここで、「遠くの風景」または単に「背景」を作成する必要がありました。 それらがどのように作られたか-私にはまだわからない。 あなたがそれについてどこで読むことができるかを私に言ったら、私は感謝するでしょう。 写真を調べてみると、テクスチャを作成した4つの風景が見つかりました（フィンランド湾からのサンクトペテルブルクの眺め、クロンシュタットの眺め、ヴォログダ州の湾と森の眺め）。 プログラムでそれらを4つの平面に引っ張り、競技場の四方に配置しました。 しかし問題は、シーンの横方向の照明のために、これらの平面の境界が「空」で見えることでした。 THREE.JSパッケージのいくつかの例を見てみましたが、私には向いていませんでした。 私のフィールドは正方形であり、その球体には三角形が多すぎてブレーキをかけたため、内部テクスチャを持つ巨大な球体は私には向いていませんでした。 テクスチャのある立方体は、内部にのみ適していました;外部では、平面の同じ境界が見えました。 その結果、テクスチャをpng形式で保存し、「空」の代わりに透明なアルファ（各プレーンの輝度を選択）を設定して、シーンを空の下のグローバルな背景色に設定しました。 たぶん今私はいくつかのナンセンスを書いているだろうし、普通の3Dデザイナーはこのアプローチに恐怖を感じていた。

収益化

最初は、あまりにも多くのプレイヤーを「引き裂き」たいとは思いませんでしたが、ホスティングと神聖な飲み物の費用を完済することは非常に望ましいでしょう。 したがって、ゲーム内で購入するための3つのオプションを提供しました。1つ、3つ、または10個の「金の延べ棒」を購入でき、それぞれ1回ゲームをプレイできます。 あなたが勝った場合、このゲームのすべての地金を取得します。 プレイヤーのバーが2本未満の場合、そのプレイヤーはVIPステータスを失います。 実際には、それなしでプレイできますが、一部の機能はアクセスできなくなりますが、これは一般にゲームプレイに大きな影響を与えません。

結果

まとめると。 最終的に達成したもの。



1. 3D。 ただし、グラフィック自体には問題があります。つまり、テクスチャやその他のローションや美しいものの焼き付けに問題があります。 しかし、私の自由な時間に私はこれのすべてを勉強します。 テクスチャが更新されます。



2.クロスプラットフォーム。 ゲームは、比較的新しいビデオカードドライバーがインストールされた最新のブラウザーバージョンで動作します。



Windowsに関しては、Windows 8.1（fps最大40）を搭載したタブレット、およびIE11を含むブラウザーのすべての新しいバージョンのWindows 7を搭載したコンピューターで問題なく動作し、IEのみがかなり低いfpsを持ちます。 Windows XP（P4 3GHz、Radeon R5 230）を搭載した別のテストマシンでは、自動更新をオフにした28.0.1500.95の地域のChromeの最新バージョンのみがChromeで機能しませんでした。 おそらく、これは、新しいブラウザーがWebGLで動作し、ドライバーが特定のリリース日より前にインストールされた場合にWebGLを単にブロックするために、新しいバージョンのビデオアダプターを必要とするという事実によるものです。 そして、古いブラウザでは、すでにWebGLのサポートを開始しているため、そのような制限はないか、それよりも低くなっています。



Androidでは、新しいブラウザーでも機能します。 十分なRAMがない場合は、常に2Dバージョンを使用できます。



そして最後に、iOSでも動作しますが、友人のiPhone-5でのみテストされました。 3Dの結果は、fps 3フレーム/秒です。 しかし、これはまだ電話です...それのテストは、ゲームの作業の最後にすでに初めて実行され、率直に言って、すべてが初めて機能し、一般的に機能したことにも驚きました。 テスト用のiPadはありませんが、おそらくiPhoneの場合よりも明らかに優れているでしょう。つまり、Windowsのタブレットに匹敵します。



他の一部、他では、OSはテストされていません。



3.インストール。

私はIndexedDBと長い間戦いました。 結果は、特定の方法で構成された連想配列の形式でファイルのリストをフィードできるフレームワークです。 これらのファイルは順次ダウンロードされ、将来オフラインで使用できるようにデータベースに保存されます。 主な問題は、IndexedDBのデータベースとキー（それらのテーブルとエントリ）の存在を確認すること（つまり、ゲームがインストールされているかどうかを確認すること）ができないことでしたが、これらを作成して、この成功または失敗の形で答えを得ることができることです操作。 したがって、障害が既に存在する場合（まあ、またはデータベースはサポートされていませんが、この事実を検証する別の機能があります）、障害が作成されます。 その結果、ゲームを開始するたびに、空のテーブルとそれらの1つに小さな設定を作成する必要がありました。成功した場合、ゲームがインストールされていないという情報、そのインストールオプションなどが書き込まれました。 失敗した場合は、ゲームが既にインストールされているか、インストールの進行状況の記録で空の構成が作成されたことを意味します。 その後、ユーザーのアクション中に、フレームワークはこの構成から情報を取得して変更します。 データを削除しても、まだわかりませんでした。 いいえ、すべてが削除されました。このプロセスの完了イベントをキャッチできません。 インストールでは、すべてが正常に動作しています。 また、各ブラウザには独自のデータベースがあるという事実も考慮する必要があり、あるブラウザにゲームをインストールすると、別のブラウザから同じインストールにアクセスできなくなります。 閲覧履歴を消去すると、IndexedDBにも影響する場合があります。



4.サードパーティのクライアントライブラリ、インタープリター、エンジンなどをインストールする必要はありません。



これの価格は、THREE.JSエンジンを含む約1.1 MBのjavascriptコードと、3.5 MBの画像を毎回サーバーから最初にダウンロードすることでした。 結局のところ、これは単なるサイトではなく、3Dゲームだからです。 さらに、これらはすべてブラウザのキャッシュに保存されます。 さて、残り（3Dモデル、画像）はゲーム中にサーバーまたはIndexedDBからダウンロードできます。 ところで、これらの3.5 MBのイメージはIndexedDBからダウンロードすることもできます。 しかし、目標の1つが達成されました-ゲームはネイティブ（OSに関連する）エンジンを必要としません。 もちろん、スクリプトの一部をデータベースに残して、そこからロードすることもできます。 いずれの場合でも、マルチプレイヤーのサーバー部分は引き続き機能するため、インターネット接続が必要です。 ただし、人工知能に対するゲームを備えた完全にローカルなバージョンをリリースするというアイデアがあります。つまり、サーバーを使用せず、単にhtmlファイルから開始します。

転記

ゲームは、対象のソーシャルネットワークのモデレーターによって承認され、一般カタログに公開されました。 ただし、ゲームには新しいアプリケーションのトップに立つ機会がないという確認に免責事項が添付されました。 なぜ私の質問に、私はまだ答えを受け取っていません。 その結果、「Economic Games」で240位になりましたが、どの号であるかさえわかりません。 ただし、初日-85インストール。 プラス40人がゲームを終了しました。 もちろん、購入はありません。 同時に、サーバー部分の負荷は1日あたり、CPUの50のうち0.16、MySQLの1000のうちほぼ0でした。



ゲームを進め、改善し、他のプラットフォームやソーシャルネットワークで実行します。