Phaser.jsのAgar.ioのようなマウスコントロール

こんにちは、Habr！ 最近では、ゲームAgar.ioのアナログを作成するという目標がありました。 時間を無駄にせず、彼らの生活を複雑にしないために、ゲームを開発するために既製のエンジンを使用してゲームを作成する方が簡単で迅速であることが決定されました。

私が選んだのはphaser.jsでした 。なぜなら、私には思えたように、ほとんどすべてにトレーニング資料があり、 Pixi.jsライブラリに基づいて構築されているため非常に高速だからです。

このパートでは、マウス制御を実装する方法を説明します。 最終的に、次の結果が得られます。


したがって、まず、すべての変数を初期化します。

var width = window.innerWidth; //   var height = window.innerHeight; //   var game = new Phaser.Game(width, height, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); // canvas  phaser,      . var player; //        . var bg; // ,     

次に、ページのすべてのグラフィック要素をプリロードする責任があるpreload（）関数があります。グリッドしかありません。

 function preload() { game.load.image('background', 'img/grid.png'); } 

すべての要素を含むキャンバスを作成するcreate（）関数の後：

 function create() { game.time.advancedTiming = true; game.time.desiredFps = 60; // fps game.time.slowMotion = 2.0; //      ,   0,   2,         bg = game.add.tileSprite(0, 0, 8000, 8000, 'background'); //   game.world.setBounds(0, 0, 8000, 8000);//   game.stage.backgroundColor = "#000"; //   var bmd = generateCircle('red', 20); //      20px player = game.add.sprite(game.world.centerX, game.world.centerY, bmd); //  game.physics.enable(player, Phaser.Physics.ARCADE); //    ARCADE(   phaser.js) game.camera.follow(player); //     } 

さらに、アップロード（）関数では、マウスが移動したときにイベントをトリガーします。

 function update() { game.input.addMoveCallback(function(){ game.physics.arcade.moveToPointer(player, 400); //    ARCADE        }); } 

デバッグにはrender（）関数が必要です。

 function render() { game.debug.cameraInfo(game.camera, 32, 32); //     } 

円描画機能：

 function generateCircle(color, size){ var bitmapSize = size * 2 var bmd = this.game.add.bitmapData(bitmapSize, bitmapSize); bmd.ctx.fillStyle = color; bmd.ctx.beginPath(); bmd.ctx.arc(size, size, size, 0, Math.PI*2, true); bmd.ctx.closePath(); bmd.ctx.fill(); return bmd; } 

以上で、agar.ioのように管理の準備が整いました。 もう一度、最終結果へのリンク 。

食事中にプレーヤーが増加しているマップの境界やグラニュールはありません。開発中に、これを実装する方法と、node.jsでゲームをマルチユーザーにする方法を示します。