👨🏿‍🤝‍👨🏽 🐟 😐 海、海賊-ブラウザでの3Dオンラインゲーム 👌 👨‍👩‍👧‍👦 👨🏾‍⚖️

Habrユーザーとカジュアルな読者への挨拶。これは、低ポリ3Dグラフィックスとシンプルな2D物理演算を備えたブラウザベースのマルチプレイヤーオンラインゲームの開発のストーリーです。

背後にはブラウザベースの2Dミニゲームがたくさんありますが、そのようなプロジェクトは初めてです。gamedevでは、まだ遭遇していない問題を解決することは、非常にエキサイティングで興味深いものになる可能性があります。主な目的は、欲望とモチベーションがありながら、部品の研削に行き詰まり、実際にゲームを始めることではないので、時間を無駄にせずに開発を始めましょう！

一言で言えば、ゲーム

現在、サバイバルファイトが唯一のゲームモードです。復活せずに2隻から6隻の戦闘で、最後に生き残ったプレイヤーが勝者と見なされ、x3ポイントとゴールドを受け取ります。

アーケードコントロール：ボタンW、A、Dまたは移動する矢印、敵の船に発砲するスペースバー。狙う必要はありません、見逃すことはできません。ダメージはランダム性とショットの角度に依存します。大きなダメージには、「目標通りの」メダルが付随します。24時間と7日間（モスクワ時間00:00にリセット）でプレイヤーの評価で1位になり、毎日のタスク（3つのうちの1つが順番に発行される）を完了

することで、ゴールドを獲得します。戦闘用の金もありますが、少ないです。

金を使う船に黒い帆を24時間設置します。巨大な触手で敵の船底を運ぶクラーケンを起こす能力を追加する計画:)

PVPか~~ザサルの~~ 臆病者？海賊テーマを選択する前から実装したかった機能は、数回クリックするだけで友達と戦うことができることです。登録や不必要なジェスチャーがなくても、友達に招待リンクを送信して、リンクを使用してゲームに参加するまで待つことができます。リンクの「作成者」が別のリンクを開始しなかった場合、リンクをたどると、誰でも開くことができるプライベートルームが自動的に作成されます。戦い。

技術スタック

Three.jsは、ブラウザで3Dを操作するための最も人気のあるライブラリの1つであり、優れたドキュメントとさまざまな例が含まれています。また、私は以前にThree.jsを使用しました-選択は明白です。

ゲームエンジンが不足しているのは、関連する経験がなく、何かを学習したいのですが、とにかくすべてがうまく機能するという欲求が原因です

。Node.jsはシンプルで、高速で、便利です。私はJavaを代替と見なし、Webソケットを含むいくつかのローカル実験を行いましたが、VPSでJavaを実行するのが難しいかどうかをあえて見つけることはしませんでした。別のオプション-Go、その構文は私を落胆させます-その研究では1つのイオタが進んでいません。

Webソケットの場合、Node.jsのwsモジュールを使用します。

PHPとMySQLあまり明白ではありませんが、基準は同じです-これらのテクノロジーの経験があるため、迅速かつ簡単に。

これは次のようになり

ます。まずWebページをクライアントに返すため、およびまれなAJAX要求のためにPHPが必要ですが、ほとんどの場合、クライアントは引き続きWebソケットを介してNode.js上のゲームサーバーと通信します。

ゲームサーバーをデータベースにリンクしたくなかったので、すべてがPHPを経由します。私の意見では、ここにはプラスがありますが、それらが重要かどうかはわかりません。たとえば、必要なフォームの既製のデータがNode.jsに送られるため、Node.jsはデータベースでの処理や追加のクエリに時間を費やすことなく、より重要なことに対処します。プレイヤーのアクションを「ダイジェスト」し、部屋のゲーム世界の状態を変更します。

最初のモデル

開発はシンプルで最も重要なことから始まりました。サーバーの観点から海戦を説明するゲーム世界の特定のモデルです。プレーンキャンバス2Dは、モデルを画面に表示するのに理想的です。

最初に、私は通常の「バーレット」物理学を設定し、船体の方向に対して異なる方向への船の動きに対する異なる抵抗を考慮しました。しかし、サーバーのパフォーマンスを心配して、私は通常の物理を最も単純な物理に置き換えました。船の輪郭は視覚的にのみ残っていますが、物理的には船は慣性すら持たない丸いオブジェクトです。慣性の代わりに、制限された前方加速があります。

ショットとヒットは、船の方向とショットの方向のベクトルを使用した単純な操作に限定されます。ここにシェルはありません。正規化されたベクトルの内積がターゲットまでの距離を考慮して許容値に収まる場合、プレーヤーがボタンを押した場合にショットとヒットが発生します。

ゲームの世界モデルをレンダリングし、船やショットの動きを処理するためのクライアント側のJavaScriptであり、Node.jsサーバーにほとんど変更せずに移植しました。

ゲームサーバー

Node.js WebSocketサーバーは、3つのスクリプトのみで構成されています。

main.js-プレーヤーからWSメッセージを受信し、部屋を作成し、このマシンのギアを回転させるメインスクリプト
room.js-ルーム内のゲームプレイを担当するスクリプト：ゲームワールドの更新、ルーム内のプレーヤーへの更新の送信
funcs.js-ベクターを操作するためのクラス、いくつかのヘルパー関数、および二重にリンクされたリストを実装するクラスが含まれます

開発が進むにつれて、新しいクラスが追加されました。それらのほとんどすべてがゲームプレイに直接関連し、room.jsファイルになっています。クラスを個別に（個別のファイルで）処理するのが便利な場合もありますが、クラスが多すぎない限り（オールインワンオプションも悪くありません）（上にスクロールして、別のクラスのメソッドが受け入れるパラメーターを覚えておくと便利です）。

ゲームサーバークラスの現在のリスト：

WaitRoom-プレイヤーが戦闘の開始を待機している部屋。更新を送信し、半分以上のプレイヤーが戦闘の準備ができると、ゲームルームの作成を開始する独自のティックメソッドがあります。
Room — , : /, ,
Player — «» :
Ship — : , , ,
PhysicsEngine — ,
PhysicsBody —

Room

let upd = {p: [], t: this.gamet};
let t = Date.now();
let dt = t - this.lt;
let nalive = 0;

for (let i in this.players) {
	this.players[i].tick(t, dt);
}

this.physics.run(dt);

for (let i in this.players) {
	upd.p.push(this.players[i].getUpd());
}

this.chronology.addLast(clone(upd));
if (this.chronology.n > 30) this.chronology.remFirst();

let updjson = JSON.stringify(upd);

for (let i in this.players) {
	let pl = this.players[i];
	if (pl.ship.health > 0) nalive++;
	if (pl.deadLeave) continue;
	pl.cl.ws.send(updjson);
}

this.lt = t;
this.gamet += dt;

if (nalive <= 1) return false;
return true;

クラスの他に、ユーザーデータの取得、毎日のタスクの更新、報酬の取得、スキンの購入などの機能があります。これらの関数は基本的にhttpsリクエストをPHPに送信し、PHPは1つ以上のMySQLクエリを実行して結果を返します。

ネットワークの遅延

ネットワーク遅延の補償は、オンラインゲーム開発の重要な部分です。このトピックについて、私はここHabréに関する一連の記事を繰り返し読みました。帆船の戦いの場合、遅延補償は簡単ですが、妥協する必要があります。

補間は常にクライアントで実行されます-データが既に取得されている2つの瞬間の間のゲーム世界の状態の計算。わずかな時間の余裕があるため、突然のジャンプの可能性が低くなり、ネットワークの大幅な遅延と新しいデータの欠如により、補間は外挿に置き換えられます。外挿はあまり正確な結果にはなりませんが、プロセッサにとっては安価であり、船の動きがサーバーでどのように実装されているかに依存しません。もちろん、状況を救うこともできます。

ラグの問題を解決する場合、ゲームとそのペースに大きく依存します。スムーズなアニメーションと特定の時点でのゲームの世界の状態への画像の正確な対応を優先して、プレイヤーのアクションに対する迅速な応答を犠牲にします。唯一の例外は、ボタンを押すとすぐに大砲の斉射が行われることです。残りは宇宙の法則と船の乗組員からのラム酒の余剰によるものです:)

フロントエンド

残念ながら、クラスやメソッドの明確な構造や階層はありません。すべてのJSは、ある意味で同等の独自の機能を持つオブジェクトに分割されます。私の以前のプロジェクトのほとんどすべてはこれより論理的でした。これは、最初の目標が、ゲームのインターフェイスと視覚的コンポーネントに注意を払うことなく、サーバーとネットワークの相互作用でゲームの世界モデルをデバッグすることであったためでもあります。3Dを追加するときに、文字通り既存のテストバージョンに追加しました。大まかに言えば、2DのdrawShip関数をまったく同じ3Dに置き換えましたが、友好的な方法で構造全体を修正し、将来の変更の基礎を準備する価値はありました。

3D船

Three.jsは、さまざまな形式の既製の3Dモデルの使用をサポートしています。テクスチャとアニメーションを埋め込めるGLTF / GLB形式を自分で選択しました。開発者は「すべてのテクスチャがロードされているか」と疑問に思わないでください。

これまで3Dエディタを扱ったことはありません。論理的なステップは、大砲の斉射のアニメーションが埋め込まれた帆船の3Dモデルを作成するタスクとのフリーランス交換の専門家に連絡することでした。しかし、自分で完成したスペシャリストモデルの小さな変更に抵抗することはできず、Blenderでモデルをゼロから作成することになりました。テクスチャがほとんどない低ポリゴンモデルを作成するのは簡単で、専門家の既製のモデルがなければ、特定のタスクに必要なもの（少なくとも道徳的に:)を3Dエディターで調べることは困難です。

シェーダーの神へのシェーダー

シェーダーが必要な主な理由は、レンダリング中にビデオカード上のオブジェクトのジオメトリを操作できることです。これにより、パフォーマンスが向上します。Three.jsでは、独自のシェーダーを作成できるだけでなく、いくつかの作業を行うこともできます。

船、動的水面、または静的海底へのダメージをアニメーション化するためのパーティクルシステムを作成するときに使用したメカニズムまたは方法は同じです。特別なShaderMaterialは、そのシェーダー（そのGLSLコード）を使用するための簡略化されたインターフェイスを提供し、BufferGeometryを使用すると、任意のデータからジオメトリを作成できます...

空の空白、同じような方法で3Dオブジェクトを作成、コピー、補足、変更するのに便利なコード構造：

コードを表示

let vs = `
	attribute vec4 color;
	varying vec4 vColor;

	void main(){
		vColor = color;
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
		// gl_PointSize = 5.0; // for particles
	}
`;
let fs = `
	uniform float opacity;
	varying vec4 vColor;

	void main() {
		gl_FragColor = vec4(vColor.xyz, vColor.w * opacity);
	}
`;

let material = new THREE.ShaderMaterial( {
	uniforms: {
		opacity: {value: 0.5}
	},
	vertexShader: vs,
	fragmentShader: fs,
	transparent: true
});

let geometry = new THREE.BufferGeometry();

//let indices = [];
let vertices = [];
let colors = [];

/* ... */

//geometry.setIndex( indices );
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 4 ) );

let mesh = new THREE.Mesh(geometry, material);

船の損傷

船の損傷のアニメーションは、サイズと色が変化する移動する粒子であり、その動作は属性とGLSLシェーダーコードによって決まります。パーティクル（ジオメトリとマテリアル）の生成は事前に発生します。その後、各船ごとに損傷パーティクルの独自のインスタンス（メッシュ）が作成されます（ジオメトリはすべてに共通であり、マテリアルが複製されます）。かなりの数のパーティクル属性がありますが、作成されたシェーダーは、ゆっくりと移動する大きなダストクラウド、急速に飛散するデブリ、および火のパーティクルを同時に実装します。これらのアクティビティは、船への損傷の度合いによって異なります。

海

海もShaderMaterialを使用して実装されます。各頂点は正弦波に沿って3方向すべてに移動し、ランダムな波を形成します。属性は、運動の各方向の振幅と正弦波の位相を定義します。

水の色を多様化し、ゲームをより面白く楽しいものにするために、底と島を追加することにしました。下部の色は、高さ/深さに依存し、水面を照らし、暗い領域と明るい領域を作成します。

海底は2段階で作成された高さマップから作成されます。最初に、島のない底がグラフィカルエディターで作成され（私の場合、ツールはレンダリング->雲とガウスぼかし）、次に島はjsFiddleでCanvas JSオンラインを使用してランダムな順序で追加されました円を描いてぼかします。いくつかの島は低いです、それらを通してあなたは敵を撃つことができます、他は一定の高さを持っています、ショットはそれらを通過しません。高さマップ自体に加えて、出力では、サーバー上の物理のアイランド（位置とサイズ）に関するjson形式のデータを受け取ります。

次は何ですか？

ゲームの開発には多くの計画があります。主なものは新しいゲームモードです。小さいもの-WebGLとJSのパフォーマンス制限を考慮して、水の影/反射を考え出します。私はすでにクラーケンを目覚めさせる機会について述べました:)彼らの蓄積された経験に基づく部屋へのプレーヤーの統合はまだ実装されていません。明らかな、しかしそれほど高くない優先順位の改善は、海底と島のいくつかのマップを作成して、新しい戦いのためにそれらの1つをランダムに選択することです。

シーンを「メモリに」繰り返し描画し、すべてのデータを1つの画像に結合することで多くの視覚効果を作成できます（実際、後処理と呼ぶことができます）が、クライアントがまだブラウザであるため、この方法ではクライアントの負荷が増加することはありません。ネイティブアプリではなく。たぶん、ある日、私はこのステップを決定します。

また、私が答えるのが難しいと思う質問もあります。安価な仮想サーバーに何人のオンラインプレーヤーが耐えることができるか、少なくとも特定の数の関心のあるプレーヤーを収集することが可能かどうか、およびその方法です。

イースターエッグ

それほど多くの感情を与えた古いコンピュータゲームを覚えたくない人はいますか？今まで何度も何度も何度もゲームCorsairs 2（別名Sea Dogs 2）を再生するのが大好きです。私はゲームに秘密を追加せざるを得ず、「コルセア2」を明示的かつ間接的に連想させます。すべてのカードを明らかにするわけではありませんが、ヒントを与えます。私のイースターエッグは、海を探索しているときに見つけることができる特定のオブジェクトです（無限の海をはるかに越えて航行する必要はありません。オブジェクトは妥当な範囲内ですが、見つける確率は高くありません）。イースターエッグは損傷した船を完全に修復します。

どうした

ミニッツビデオ（2台のデバイスからテスト）：

ゲームへのリンク：https : //sailfire.pw

お問い合わせフォームもあり、メッセージは電報で私に送信されます：https :

//sailfire.pw/feedback/ニュースやアップデートに遅れないようにしたい人へのリンク：VK Public、電報チャネル

海、海賊-ブラウザでの3Dオンラインゲーム