09．ゲームフィールドの全部ではなく一部を表示

ゲームフィールドの全部ではなく一部を表示するようにします。
ゲームフィールドの全部ではなく一部を表示するときには、サーバーからクライアントへの「ゲーム内に存在しているもの」の送信は、すべてではなく、「各クライアントの画面内に位置するもの」を送信します。

デモ

デモ（Google App Engine）：https://online-battle-tanks.an.r.appspot.com/index09.html
デモ（Heroku）：https://online-battle-tanks-22-cf6589d25849.herokuapp.com/index09.html

解説

ゲームフィールドの全部ではなく一部を表示するようにするための、変更は以下です。

（サーバー側）ワールドクラスの変更

メンバ変数に、「プレイしていない通信のソケットIDのリスト」を追加します。
タンクの生成関数に、プレイを開始したクライアントの通信ソケットIDを「プレイしていない通信ソケットIDのリスト」から削除する処理を追加します。
タンクの破棄関数に、プレイを開始前に戻るクライアントのソケットIDを「プレイしていない通信ソケットIDのリスト」に追加する処理を追加します。

（サーバー側）ゲームクラスの変更

「クライアントとサーバーの接続時の処理」に、接続したクライアントの通信ソケットIDを、「プレイしていない通信ソケットIDのリスト」に追加する処理を追加します。
「クライアントとサーバーの切断時の処理」に、切断したクライアントの通信ソケットIDを、「プレイしていない通信ソケットIDのリスト」から削除する処理を追加します。
サーバーからクライアントへの「ゲーム内に存在しているもの」の送信は、すべてではなく、「各クライアントの画面内に位置するもの」を送信します。
プレイしていないクライアントに対しても「ゲーム内に存在しているもの」を送信します。

（クライアント側）スクリーンクラス

キャンバスの初期化について、フィールドサイズで初期化していたのを、キャンバスサイズで初期化するように変更する。
「自タンクのデータが送信されてきていない」すなわち「プレイしていない」場合は、描画中心を、フィールドの中心とする処理を追加します。
フィールドの描画関数を、キャンバスと干渉する領域のみ描画するように変更します。

（クライアント側）共有設定クラスの変更

キャンバスに関する設定を追加します。
フィールドサイズを変更します。

準備

08．を実施していない場合は、まず、08．を実施します。

サーバー側スクリプトの変更

ワールドクラスの変更

「libs/World.js」の内容を以下のようにします。
（・・・略・・・） module.exports = class World { // コンストラクタ constructor( io ) { （・・・略・・・） this.setBullet = new Set(); // 弾丸リスト this.setNotPlayingSocketID = new Set(); // プレイしていない通信のソケットIDリスト // 壁の生成（・・・略・・・） } （・・・略・・・） // タンクの生成 createTank( strSocketID, strNickName ) { // ゲーム開始。プレイしていない通信のソケットIDリストから削除 this.setNotPlayingSocketID.delete( strSocketID ); // タンクの可動域（・・・略・・・） } （・・・略・・・） // タンクの破棄 destroyTank( tank ) { // タンクリストリストからの削除 this.setTank.delete( tank ); if( tank.isBot ) { // ボット（・・・略・・・） } else { // ゲーム開始前に戻るので、プレイしていない通信のソケットIDリストに追加 this.setNotPlayingSocketID.add( tank.strSocketID ); // 削除タンクのクライアントにイベント'dead'を送信 this.io.to( tank.strSocketID ).emit( 'dead' ); } } （・・・略・・・）

コード解説

メンバ変数に、「プレイしていない通信のソケットIDのリスト」を追加します。（コンストラクタの this.setNotPlayingSocketID = new Set(); ）
タンクの生成関数に、プレイを開始したクライアントの通信ソケットIDを「プレイしていない通信ソケットIDのリスト」から削除する処理を追加します。（ createTank関数）
タンクの破棄関数に、プレイを開始前に戻るクライアントのソケットIDを「プレイしていない通信ソケットIDのリスト」に追加する処理を追加します。（ destroyTank関数）

ゲームクラスの変更

「libs/Game.js」の内容を以下のようにします。
// モジュール const World = require( './World.js' ); const OverlapTester = require( './OverlapTester.js' ); // 設定 const SharedSettings = require( '../public/js/SharedSettings.js' ); const GameSettings = require( './GameSettings.js' ); （・・・略・・・） module.exports = class Game { // 始動 start( io ) { （・・・略・・・） io.on( 'connection', ( socket ) => { console.log( 'connection : socket.id = %s', socket.id ); let tank = null; // コネクションごとのタンクオブジェクト。イベントをまたいで使用される。 // まだゲーム開始前。プレイしていない通信のソケットIDリストに追加 world.setNotPlayingSocketID.add( socket.id ); // ゲーム開始時の処理の指定（・・・略・・・） // 切断時の処理の指定 // ・クライアントが切断したら、サーバー側では'disconnect'イベントが発生する【99】 socket.on( 'disconnect', () => { console.log( 'disconnect : socket.id = %s', socket.id ); if( !tank ) { // プレイしていない通信のソケットIDリストから削除 world.setNotPlayingSocketID.delete( socket.id ); return; } world.destroyTank( tank ); tank = null; // 自タンクの解放 } ); } ); // 周期的処理（1秒間にFRAMERATE回の場合、delayは、1000[ms]/FRAMERATE[回]） setInterval( () => { （・・・略・・・） // 最新状況をクライアントに送信 // タンクごとの処理 world.setTank.forEach( ( tank ) => { if( '' !== tank.strSocketID ) // ボットは無処理 { const rectVisibleArea = { fLeft: tank.fX - SharedSettings.CANVAS_WIDTH * 0.5, fBottom: tank.fY - SharedSettings.CANVAS_HEIGHT * 0.5, fRight: tank.fX + SharedSettings.CANVAS_WIDTH * 0.5, fTop: tank.fY + SharedSettings.CANVAS_HEIGHT * 0.5, }; io.to( tank.strSocketID ).emit( 'update', Array.from( world.setTank ).filter( ( tank ) => { return OverlapTester.overlapRects( rectVisibleArea, tank.rectBound ); } ), Array.from( world.setWall ).filter( ( wall ) => { return OverlapTester.overlapRects( rectVisibleArea, wall.rectBound ); } ), Array.from( world.setBullet ).filter( ( bullet ) => { return OverlapTester.overlapRects( rectVisibleArea, bullet.rectBound ); } ), iNanosecDiff ); // 個別送信 } } ); // プレーしていないソケットごとの処理 const rectVisibleArea = { fLeft: SharedSettings.FIELD_WIDTH * 0.5 - SharedSettings.CANVAS_WIDTH * 0.5, fBottom: SharedSettings.FIELD_HEIGHT * 0.5 - SharedSettings.CANVAS_HEIGHT * 0.5, fRight: SharedSettings.FIELD_WIDTH * 0.5 + SharedSettings.CANVAS_WIDTH * 0.5, fTop: SharedSettings.FIELD_HEIGHT * 0.5 + SharedSettings.CANVAS_HEIGHT * 0.5, }; world.setNotPlayingSocketID.forEach( ( strSocketID ) => { io.to( strSocketID ).emit( 'update', Array.from( world.setTank ).filter( ( tank ) => { return OverlapTester.overlapRects( rectVisibleArea, tank.rectBound ); } ), Array.from( world.setWall ).filter( ( wall ) => { return OverlapTester.overlapRects( rectVisibleArea, wall.rectBound ); } ), Array.from( world.setBullet ).filter( ( bullet ) => { return OverlapTester.overlapRects( rectVisibleArea, bullet.rectBound ); } ), iNanosecDiff ); // 個別送信 } ); }, 1000 / GameSettings.FRAMERATE ); // 単位は[ms]。1000[ms] / FRAMERATE[回] } }

コード解説

「クライアントとサーバーの接続時の処理」に、接続したクライアントの通信ソケットIDを、「プレイしていない通信ソケットIDのリスト」に追加する処理を追加します。（ io.on('connection', ・・・略・・・ ); ）
「クライアントとサーバーの切断時の処理」に、切断したクライアントの通信ソケットIDを、「プレイしていない通信ソケットIDのリスト」から削除する処理を追加します。（ socket.on( 'disconnect', ・・・略・・・ ); ）
サーバーからクライアントへの「ゲーム内に存在しているもの」の送信は、すべてではなく、「各クライアントの画面内に位置するもの」を送信します。（ setInterval( ・・・略・・・ ); ）
プレイしていないクライアントに対しても「ゲーム内に存在しているもの」を送信します。（ setInterval( ・・・略・・・ ); ）

クライアント側スクリプトの変更

スクリーンクラスの変更

「public/js/Screen.js」の内容を以下のようにします。
class Screen { // コンストラクタ constructor( socket, canvas ) { （・・・略・・・） // キャンバスの初期化 this.canvas.width = SharedSettings.CANVAS_WIDTH; this.canvas.height = SharedSettings.CANVAS_HEIGHT; （・・・略・・・） } （・・・略・・・） // 描画。animateから無限に呼び出される render( iTimeCurrent ) { （・・・略・・・） // 描画中心座標値 if( null !== tankSelf ) { // 自タンク座標値（・・・略・・・） } else { this.fCenterX = SharedSettings.FIELD_WIDTH * 0.5; this.fCenterY = SharedSettings.FIELD_HEIGHT * 0.5; } // キャンバスのクリア（・・・略・・・） } renderField() { this.context.save(); let fVisibleAreaLeft = this.fCenterX - this.canvas.width * 0.5; let fVisibleAreaTop = this.fCenterY - this.canvas.height * 0.5; let fVisibleAreaRight = this.fCenterX + this.canvas.width * 0.5; let fVisibleAreaBottom = this.fCenterY + this.canvas.height * 0.5; if( 0 > fVisibleAreaLeft ) { fVisibleAreaLeft = 0.0; } // ミニマックス補正 if( 0 > fVisibleAreaTop ) { fVisibleAreaTop = 0.0; } // ミニマックス補正 if( SharedSettings.FIELD_WIDTH - 1 < fVisibleAreaRight ) { fVisibleAreaRight = SharedSettings.FIELD_WIDTH - 1; } // ミニマックス補正 if( SharedSettings.FIELD_HEIGHT - 1 < fVisibleAreaBottom ) { fVisibleAreaBottom = SharedSettings.FIELD_HEIGHT - 1; } // ミニマックス補正 const iBackTileIndexLeft = parseInt( fVisibleAreaLeft / RenderingSettings.FIELDTILE_WIDTH ); const iBackTileIndexTop = parseInt( fVisibleAreaTop / RenderingSettings.FIELDTILE_HEIGHT ); const iBackTileIndexRight = parseInt( fVisibleAreaRight / RenderingSettings.FIELDTILE_WIDTH ); const iBackTileIndexBottom = parseInt( fVisibleAreaBottom / RenderingSettings.FIELDTILE_HEIGHT ); for( let iIndexY = iBackTileIndexTop; iIndexY <= iBackTileIndexBottom; iIndexY++ ) { for( let iIndexX = iBackTileIndexLeft; iIndexX <= iBackTileIndexRight; iIndexX++ ) { // 画像描画 this.context.drawImage( this.assets.imageField, this.assets.rectFieldInFieldImage.sx, this.assets.rectFieldInFieldImage.sy, // 描画元画像の右上座標 this.assets.rectFieldInFieldImage.sw, this.assets.rectFieldInFieldImage.sh, // 描画元画像の大きさ iIndexX * RenderingSettings.FIELDTILE_WIDTH,// 画像先領域の右上座標（領域中心が、原点になるように指定する） iIndexY * RenderingSettings.FIELDTILE_HEIGHT,// 画像先領域の右上座標（領域中心が、原点になるように指定する） RenderingSettings.FIELDTILE_WIDTH, // 描画先領域の大きさ RenderingSettings.FIELDTILE_HEIGHT ); // 描画先領域の大きさ } } this.context.restore(); } （・・・略・・・）

コード解説

キャンバスの初期化について、フィールドサイズで初期化していたのを、キャンバスサイズで初期化するように変更する。（コンストラクタ）
「自タンクのデータが送信されてきていない」すなわち「プレイしていない」場合は、描画中心を、フィールドの中心とする処理を追加します。（ render関数）
フィールドの描画関数を、キャンバスと干渉する領域のみ描画するように変更します。（ renderField関数）

共有設定クラスの変更

「public/js/SharedSettings.js」の内容を以下のようにします。
// サーバースクリプトとクライアントで共通の設定クラス class SharedSettings { // フィールドサイズ // ※背景タイル画像のトリム処理未実装のため、 // 　「FIELD_WIDTHは、FIELDTILE_WIDTHの定数倍」「FIELD_HEIGHTは、FIELDTILE_HEIGHTの定数倍」にする必要あり。 static get FIELD_WIDTH() { return 2048.0; } static get FIELD_HEIGHT() { return 2048.0; } // キャンバスサイズ static get CANVAS_WIDTH() { return 1000.0; } static get CANVAS_HEIGHT() { return 1000.0; } （・・・略・・・） } （・・・略・・・）

コード解説

キャンバスに関する設定を追加します。
フィールドサイズを変更します。

動作確認

サーバーを起動します。
「OnlineBattleTanks」フォルダで、以下のコマンドを実行します。
node server.js

ブラウザから、「localhost:1337」にアクセスします。

大きいゲームフィールドに対して、自タンクを中心とした小さい領域で表示されます。

起動したサーバーは、「Ctrl + C」で終了します。

ダウンロード

サンプルプログラム

デモ