diff --git a/apps/client/src/entities/Player.ts b/apps/client/src/entities/Player.ts index 9bc86c6..aa03379 100644 --- a/apps/client/src/entities/Player.ts +++ b/apps/client/src/entities/Player.ts @@ -9,7 +9,7 @@ public id: string; public teamId: number; - constructor(data: PlayerData) { + constructor(data: PlayerData, isLocal: boolean = false) { super(); this.id = data.id; this.teamId = data.teamId; @@ -18,14 +18,27 @@ this.position.set(data.x, data.y); // gameConfigから定数を取得 - const { PLAYER_RADIUS, TEAM_COLORS } = GAME_CONFIG; + const { + PLAYER_RADIUS, + TEAM_COLORS, + PLAYER_LOCAL_STROKE_COLOR, + PLAYER_LOCAL_STROKE_WIDTH, + PLAYER_REMOTE_STROKE_COLOR, + PLAYER_REMOTE_STROKE_WIDTH + } = GAME_CONFIG; // チームIDに対応する色をHEX文字列('#RRGGBB')で取得し、PixiJS用の数値(0xRRGGBB)に変換 const colorString = TEAM_COLORS[this.teamId] || '#FFFFFF'; const hexColor = parseInt(colorString.replace("#", "0x"), 16); - // 共通の描画(円) - this.circle(0, 0, PLAYER_RADIUS).fill(hexColor); + // 自プレイヤーか他プレイヤーかで枠線の設定を切り替え + const strokeColor = isLocal ? PLAYER_LOCAL_STROKE_COLOR : PLAYER_REMOTE_STROKE_COLOR; + const strokeWidth = isLocal ? PLAYER_LOCAL_STROKE_WIDTH : PLAYER_REMOTE_STROKE_WIDTH; + + // 塗りつぶしと枠線を同時に描画 + this.circle(0, 0, PLAYER_RADIUS) + .fill(hexColor) + .stroke({ width: strokeWidth, color: strokeColor }); } // 毎フレーム呼ばれる更新メソッド(サブクラスで具体的な処理を実装させる) @@ -37,11 +50,7 @@ */ export class LocalPlayer extends BasePlayer { constructor(data: PlayerData) { - super(data); - - // 自プレイヤーであることを示す黄色のハイライト(外枠) - const { PLAYER_RADIUS } = GAME_CONFIG; - this.circle(0, 0, PLAYER_RADIUS).stroke({ width: 3, color: 0xffff00 }); + super(data, true); } /** @@ -72,7 +81,7 @@ private targetY: number; constructor(data: PlayerData) { - super(data); + super(data, false); this.targetX = data.x; this.targetY = data.y; } diff --git a/packages/shared/src/config/gameConfig.ts b/packages/shared/src/config/gameConfig.ts index b2fbf6f..46c80df 100644 --- a/packages/shared/src/config/gameConfig.ts +++ b/packages/shared/src/config/gameConfig.ts @@ -28,6 +28,12 @@ // teamId インデックス順カラー配列 TEAM_COLORS: ['#FF4B4B', '#4B4BFF', '#4BFF4B', '#FFD700'], + // プレイヤー描画・枠線設定 (新設) + PLAYER_LOCAL_STROKE_COLOR: 0xffff00, // 自プレイヤーの枠線色(黄色) + PLAYER_LOCAL_STROKE_WIDTH: 3, // 自プレイヤーの枠線の太さ + PLAYER_REMOTE_STROKE_COLOR: 0xffffff, // 他プレイヤーの枠線色(白など目立たない色) + PLAYER_REMOTE_STROKE_WIDTH: 1, // 他プレイヤーの枠線の太さ(細め) + // マップ描画用のカラー設定 MAP_BG_COLOR: 0x111111, // 何も塗っていないマス(背景)の色 MAP_GRID_COLOR: 0x333333, // グリッド線の色