競技用のゲーム、または「ライン」から「海戦」への奇跡的な変換を書いたとき

このストーリーは、私が別の3D Webゲームをどのように行っていたかについてです。 苦痛と疑いの歴史、睡眠不足と怠の歴史。 最後の瞬間にすべてを行う方法の物語。 一般的に、なぜ猫を角で引っ張るのか-私は話に目を向ける。 しかし、最初に、すべての手続きを廃止するために何か他のものがあります。 「マダム、ベッドでコーヒーを飲んでいますか？」 コーヒーは、特に朝のゲームで仕事をしたいと思ったとき、その日の残りのすべての心配の前に、モーフィアスのクラッチから私の毎日の脱出でした。 私たちは彼に敬意を表さなければなりません。 私はそれを言及せざるを得ません。なぜなら、私にとってそれは本当に成功の要素の1つになったからです。つまり、ゲームをリリースするということです。 （コーヒーの広告はここにあります）。

競争

実際、私は何かをすることができる競争には適合しませんでした。 その条件に応じて、Windows用のゲームを作成し、ダウンロード可能で、exeファイルで実行する必要がありました。 ブラウザ用のプログラミングが大好きです。 私はC ++とC＃を知りません。VisualStudioも持っていません。 しかし、その後、突然ゲームの素晴らしいアイデアを思いつきました。 ゲームを作ります。 しかし、競争のすべての条件を遵守することが可能かどうか-それはそれほど重要ではありません。 最後に、ソーシャルネットワークで起動します。

完璧さに制限はありません

私の以前のゲームは、サーバーからのphpファイルによって起動されました。 今回はさらに先へ進むことにしました。 私はすべてがインターネット上で動作するだけでなく、ファイルサーバーからも動作することを望んでいました。 第一に、オフラインのバージョンは、競争の条件で必要とされ、第二に、たとえばインターネットがない場所で自分でプレイできるようにしました。 （一般に、私がすることはすべて自分で行います。そして今、ゲームをプレイします。）しかし、必要であれば、サーバーからも、AIではなく人と、つまり、このオプションも存在する必要があります。 一般に、タスクはすべてのスクリプト、3Dモデル、テクスチャ、およびサウンドを含むユニバーサルアセンブリを作成し、インターネット上のページ上、およびダウンロード、解凍、およびインデックスによってゲームを実行するだけのアーカイブ形式で配布することでした。 html もちろん、後者のオプションは、シングルユーザーバージョンでのみ意味があります。



基本的に、前述のローカルバリアントは、相対パスを含む保存されたWebページです。 キャッチは、写真付きのテキストだけでなく、3Dエンジン、およびテクスチャ付きモデルも含まれていることです。 ただし、エンジン自体に問題はありません。 これはTHREE.JSで、JavaScriptで記述されており、重量が500 KBで、単純にSCRIPTタグで接続されています。 ただし、エンジンはローカルファイルシステムから3Dモデルをロードする方法を知りませんが、サーバーからajaxを使用してそれらをプルすることを望んでいます。 モデルがスクリプトファイルからも接続されるように、このためにブートローダーを終了する必要がありました。 アドレスバーに注意してください。







Webバージョン用に最初に作成した3Dモデルはmodel.jsonタイプのファイルに保存されていましたが、SCRIPTタグで接続すると、Firefoxですべてが機能しますが、Chromeではセキュリティポリシーに関連するエラーが発生します。 解決策は簡単でした。jsonの名前をjsに変更します-問題ありません。 おそらく、目的のコンテンツタイプを強制することは可能でしょうが、誰が何を知っているのか、将来、ブラウザにはまだセキュリティポリシーが存在するでしょう。 突然、ローカルファイルシステムから* .js以外の方法で呼び出されたファイルからスクリプトをダウンロードすることはできなくなります。 そして、js-そして質問はありません。 スクリプトをダウンロードしてください。 3Dモデルの読み込み：

var el=document.createElement("script"); el.type="text/javascript"; el.src=url+'.json.js'; el.async=true; document.getElementsByTagName("head")[0].appendChild(el);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、ブラウザのセキュリティポリシーにより、サーバーバージョンで完全に動作するモデルのテクスチャは、pngおよびjpgファイルからローカルに接続することを拒否したため、テクスチャタイプのファイル名でスクリプトをbase64に変換して実行する必要がありました.png.js。 さて、これらのスクリプトを、動的に作成された古き良きSCRIPTタグに接続してください。 とても簡単です！

 var image = document.createElement( 'img' ); image.onload = function() { var tex = new THREE.Texture( image ); tex.needsUpdate = true; tex.wrapS = tex.wrapT = THREE.RepeatWrapping; tex.anisotropy = 5; }; image.src="data:image/gif;base64,"+imagedata.replace(/^data:image\/(png|jpg);base64,/, "");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは次のように機能します：私のモデルパーサーはファイル内の画像へのリンクを見つけ、これらのリンクは.jsの末尾で到達し、テクスチャ画像のスクリプトは動的に接続され、画像はbase64から転送され、モデルにスーパーインポーズされます。 そして、スクリプトの読み込みが完了した瞬間を確実に判断するために、最後にそのような各スクリプトに、メインプログラムに読み込まれたことを知らせる関数の呼び出しを追加しました。これで、それに含まれるイメージまたはモデルを操作できます。

開発ツール

そのため、モデルとテクスチャローダーがサーバーなしでファイルシステムで正常に機能するようになったので、ゲーム自体の作成を開始しました。 はい、純粋なJavaScriptでプログラムします。 この場所の多くの人が神殿で指をひねりました。 jQueryを使用していなくても、ライブラリ（3Dエンジンを除く）は使用していません。 OOPも使用しません。 プロトタイプ-まれなケースですが、私の意見では、本当に必要な場合のみです。 私はミニマリズムが大好きで、それ以上のものはありません。 そして、各行が何をするのか理解できない余分なコードはありません！



ひどい秘密を明かします。 また、プロジェクトを構築するための新しい管理者を理解していません。githubを使用せず、Visual Studioを一度も開いたことはありません。 博士、私は何が問題なのですか？ プログラミングツールのうち、高度なノートブックのみを使用しています。 私はたぶんクレイジーです。



ただし、WebGLで動作する3Dスクリプトライブラリをページに接続してシーンを作成するのは非常に簡単なようです。 他の誰かが今日スクリプトをSCRIPTタグに接続し、HTMLマークアップを手動で作成しますか？ 今日、指でボタンを押して、目でモニターを見ている人もいますか？ これらの指で-これらのボタンで？ これらの目で-このモニターに？ なんて荒野！ いいでしょう冗談です しかし、今日、HTML、または神の禁じられている純粋なJavaScriptに触れることは、ヘビに触れることに似ています。 複数の層にねじ込むことをお勧めします。 そして、10ステップでコードをJavaScriptに変換した後、結局、どうしてうまくいかないのか疑問に思いました。 誰のせいでもありませんが、Web開発では、多数のツール、マネージャー、ライブラリーの使用に対して、あまり健全でないバイアスがあるように思えます。 私の話が、だれにも認知的不協和音を引き起こさないことを願っています。



参照条件？ なに？ 自分に？ disdoc？ ああ、もう一つ、あなたの人生の貴重な瞬間をこのナンセンスに費やしてください。 私が後悔した唯一のことは、マルチユーザー版のサーバー側のアルゴリズムのブロック図をすぐに描画しなかったことです。 その結果、彼女は適切に機能しませんでした。 しかし、それでも私が紙にブロック図を描いたとき、私はすぐにすべての間違いを見つけて修正しました。

創造性

インドの開発で気に入っているのは、創造的なプロセスです。 実際、最初は、コンテストの一環として、Color Linesのテーマのバリエーションを作成することを決定し、実用的な第1レベルを作成しました。 外観は次のとおりです。







ポイントは、ゲームが3Dで機能し、ボール自体がフィールドに表示されないことです。ボールをそこに投げて同じ色のラインで構成する必要があります。 つまり、火格子の正しいポケットに入る必要があります。 次に、ボールの下で、床のサッシが開き、故障します。 しかし、最初のレベルの準備ができて、自分でそれをプレイしたとき、そのゲームがあまり面白くないことに突然気付きました。 そして、この創造を改善する方法が頭に浮かぶまで、もっと良い時までそれを残すことに決めました。 私は別のアイデアを得た。 ボールを投げると、私は砲弾の飛行に関連するようになりました。 そして、私は海戦でこのゲームを素早く作り直すことにしました。 幸いなことに、競争力のあるプロジェクトを作成するために2か月が割り当てられました。



タダム！ 手首を軽くたたくと、ラインが回る...回る...回る...エレガントな「海の戦い！」に、そしてはい、私は「ブラックパール」を作成せざるを得なかった。 雷雨のない海の戦い。







もちろん、3Dグラフィックスは私の要素ではありません。 船は彼ができるようにしました。 負荷を減らすために、各船の周りに見えないコライダーを使用して衝突を検出しました。 1隻の船-1台のコライダー、フォームをほぼ繰り返します。



したがって、ターンベースの海戦は判明しましたが、3Dであり、競技場内のどこにでも船を移動させることができました。 要点は、銃の回転角と傾斜角を正しく調整することにより、コアを敵の船に入れることです。

世界と共有する方法

1.競争。



まず、もちろん、競争。 その過程で、コンテストの主催者はhtmlファイルを使用したゲームの開始に満足せず、確かにexeが必要であることが判明しました。 jsからの実行可能ファイルのアセンブリには何がありますか？ 最初に試したのはElectronです。 しかし、そこにはすべてが私にとって複雑すぎることが判明しました。 githubから何人かのマネージャーをインストールし、これらすべてを構成して組み立てるために何十もの操作をインストールする必要がありました。 Electronは、標準的なWeb開発の道を私に導きたいと思っていることを理解しています。 競争ゲームの作成に割り当てられた最後の日だったので、これに対処する時間はありませんでした。 いいえ、それは良くありません。 そして、web2exeユーティリティに出会いました。 すべてが非常に簡単です-起動して、htmlファイルに挿入し、node-webkitを単独でダウンロードし、exeファイルが出力されたアセンブリを取得します。 私が気に入らなかったのは、ファイルが105 MBという非常に大きいことが判明したという事実です。 うーん...ゲーム自体の重量はわずか15 MBです。 しかし、最大のnw.dllファイルを圧縮するパッケージングユーティリティが見つかりました。 その結果、アセンブリ全体の重量は68 MBになり、zipアーカイブでは43 MBになりました。



ところで、web2exeはWindows XPでの「ezheshnik」のビルドをサポートしていませんが、残念です。 私のhtmlバージョンはXPでも機能します。 このOSでのみ、ブラウザのWebGLグラフィックスにいくつかの特別な要件があります。



私は競争に勝つことはできませんでしたが、解決には非常に貴重な経験がありました。 今、私は不可能はないと確信しています。







さて、さらに進んで、Webバージョンをレイアウトします。 コンテストの後、PHPでサーバーを作成しました。 約1か月間の無料の夕べがかかりました。

はい、ところで、サーバー

通常のhttpホスティングでサーバーに問い合わせを行うと失敗することがよくあります。 したがって、10秒ごとにインタビューします。 クライアント上で、ポイントAからポイントBへの船の移動、ショットなどのプレイヤーのアクションからキューが作成されます。 データを送信する適切なタイミングで、このキューはサーバーに送信されます。 対戦相手はそれを読み、すでにプレイするためのキューが形成されます。 すべて同じ：敵の船での彼の視点からの移動、射撃などのみ。 したがって、2人のプレーヤーにはそれぞれ2つのキューがあります。1つはサーバーに情報を送信するためのもので、もう1つは対戦相手のアクションを再生するためのものです。 ここではもちろん、同期は行われませんが、ゲームはターンベースなので、必要ありません。 主なものは、敵の船が最終的にサーバーから来た所望のポイントから撃たなければならないということです。 そして、そのルートはクライアント上のプログラムによって構築され、船はこのポイントに移動します。



phpのサーバースクリプト全体が1行で表示される場合、次のようになっています。









2. Facebook



ゲームは1日後にやや調整されました。 一般的に、AAAゲームを専門とする会社でない場合、Facebookに何かを投稿することは無意味です。 単なる人間のゲーム内購入でお金を稼ぐのはかなり難しく、アイデアを求めるプログラマーに電話しましょう。Facebookはサードパーティのバナーネットワークの広告を許可していません。 ホスティングを壊しただけです。 確かに、主にアメリカ人のパートナーの特別なリストがあり、それを通じてあなたのアプリケーションで広告を出すことができます。 しかし、そのためには、彼らのウェブサイトを通じて、あなたが彼らに何を望んでいるかなどを説明する手紙を送る必要があります。 彼らがロシアからのある男のアプリケーションで動作することに同意するという事実ではありません。 はい、そして彼らのサイトのほとんどで、加えて、Facebookについての言葉を見つけませんでした...私も、パートナー。 そして、米国とロシアの両方で税金を支払う問題。 一般に、私はどういうわけか彼らと交渉しようとして少しうんざりしました。 そして、ゲームの名前で小さなバナーを作成し、それを画面の下部に配置しました。 ゲーム内購入システムを介して特定の金額を作成者に寄付することで、この機能をオフにすることができます。



3. VKontakte。



VKのモデレートは数日間続きました。 そして、ゲームはカタログの一番下にいつものように追加されました。 ただし、VKでは、広告バナーをすぐに簡単に接続できます。 収益化スキームはFacebookと同じです-バナーを無効にします。 VKの広告システムは非常に便利でシンプルで理解しやすいことに注意してください。 私のアカウントは賞賛を超えています。 そこに広告を出すことで稼ぐだけです。 VKはクリックに対してのみ支払い、インプレッションに対しては支払いません。 また、数日で、約200インプレッションに対して0ルーブルしか得られません。 明らかに、広告をクリックする人はほとんどいません。

まとめ

私が自分で達成したことを書き留めておきます。 サーバーとローカルファイルシステムの両方からhtmlファイルで実行されるWebGLグラフィックを使用して、シングルユーザーゲームを作成できるようになりました。 これはすべて、Windows、Androidの両方のバージョンで動作し、iOとLinuxで動作するはずですが、これらのOSを確認する機会はありません。 また、同じhtmlバージョンから、WindowsおよびiO用の実行可能ファイルを使用して、より「重い」アセンブリを作成できます（web2exeではこのような可能性があります）。 すべてのコードはJSで1回記述され、上記のすべてのオプションで機能します。 ソーシャルネットワークのオンラインオプションを除き、別のサーバースクリプトとクライアント呼び出しをAPIに追加する必要があります。