Skip to content

プレイヤーごとに異なる位置を描画する

プレイヤーごとに異なる位置を描画するには、g.game.focusingCamera を利用します。

凡例

javascript
const camera = new g.Camera2D({});
g.game.focusingCamera = camera;
const camera = new g.Camera2D({});
g.game.focusingCamera = camera;

詳細

カメラは、インターフェース g.Camera で表現されます。現在の Akashic Engine が実装を提供する唯一のカメラは g.Camera2D です。 生成されたカメラは、そのままでは描画に影響を与えません。カメラを g.game.focusingCamera に設定することで、ゲーム画面の描画に対してカメラの設定を適用することができます。

カメラを g.game.focusingCamera に設定した状態で camera のプロパティを変更することで、ゲーム画面全体の描画内容を制御することができます。 Camera2DObject2D を実装しており、x, y によって描画位置のオフセットや、scaleX, scaleY によって描画結果の拡大率を設定できます。たとえば以下のような記述により、画面全体を 30 度傾けることができます。

javascript
camera.angle = 30;
camera.modified();
camera.angle = 30;
camera.modified();

エンティティなどと同様、カメラの値の変更後には modified() を呼び出す必要があります。 g.game.focusingCamera の既定値は undefined です。

g.game.forcusingCamera は「プレイヤーごとに異なる値」です。そのため後述の g.game.selfId と同じく、条件分岐で参照する時は ローカル処理の制限を受けることに注意してください。詳細は g.game.selfId とローカル処理 を参照してください。

下記のサンプルコードは、ゲーム画面をクリックすると画像が右方向へ移動します。プレイヤーごとに画像の表示位置が異なります。 サンプルコードを実行するにはakashic serve が必要です。

サンプルコードをダウンロード

javascript
const camera = new g.Camera2D({});
g.game.focusingCamera = camera;

scene.onLoad.add(function() {
  const sprite = new g.Sprite({
    scene: scene,
    src: scene.asset.getImageById("player")
  });
  scene.append(sprite);
});
scene.onPointDownCapture.add(function(ev) {
  if (ev.player.id === g.game.selfId) {
    camera.x -= 10; // 画面表示の X 座標位置を -10 移動する
    camera.modified();
    g.game.modified();
  }
});
const camera = new g.Camera2D({});
g.game.focusingCamera = camera;

scene.onLoad.add(function() {
  const sprite = new g.Sprite({
    scene: scene,
    src: scene.asset.getImageById("player")
  });
  scene.append(sprite);
});
scene.onPointDownCapture.add(function(ev) {
  if (ev.player.id === g.game.selfId) {
    camera.x -= 10; // 画面表示の X 座標位置を -10 移動する
    camera.modified();
    g.game.modified();
  }
});

関連情報