From c02b671bddb9331ba7f7b4920e571f653a33cf3c Mon Sep 17 00:00:00 2001 From: Peter Date: Thu, 20 Jul 2023 20:17:35 +0200 Subject: [PATCH] refactor: streamline grid coords -> pixel coords --- src/abilities/Abolished.js | 19 +++++---- src/abilities/Dark-Priest.js | 1 + src/abilities/Snow-Bunny.js | 11 +++--- src/animations.ts | 76 +++++++++++++++--------------------- src/creature.ts | 76 +++++++++++++++++++----------------- src/drop.ts | 9 ++--- src/game.ts | 7 ++++ src/utility/const.ts | 14 ++++++- src/utility/hex.ts | 56 ++++++++++++-------------- src/utility/hexgrid.ts | 45 ++++++--------------- src/utility/trap.ts | 9 +---- 11 files changed, 153 insertions(+), 170 deletions(-) diff --git a/src/abilities/Abolished.js b/src/abilities/Abolished.js index ea40c3ae7..b2eafba3d 100644 --- a/src/abilities/Abolished.js +++ b/src/abilities/Abolished.js @@ -3,6 +3,7 @@ import { Team } from '../utility/team'; import { Creature } from '../creature'; import { Effect } from '../effect'; import * as arrayUtils from '../utility/arrayUtils'; +import { getPointFacade } from '../utility/pointfacade'; /** Creates the abilities * @param {Object} G the game object @@ -128,21 +129,25 @@ export default (G) => { }); }, - activate(path, args) { + activate(path) { const ability = this; - const target = arrayUtils.last(path).creature; - ability.end(); + + const targets = getPointFacade().getCreaturesAt(arrayUtils.last(path)); + // TODO: Path sometimes contains no targets. + if (targets.length === 0) { + console.error('returning'); + return; + } + + const target = targets[0]; + G.Phaser.camera.shake(0.01, 100, true, G.Phaser.camera.SHAKE_HORIZONTAL, true); - const startX = ability.creature.sprite.scale.x > 0 ? 232 : 52; const projectileInstance = G.animations.projectile( this, target, 'effects_fiery-touch', - path, - args, - startX, -20, ); const tween = projectileInstance[0]; diff --git a/src/abilities/Dark-Priest.js b/src/abilities/Dark-Priest.js index 07b8ef232..d8aa3aae0 100755 --- a/src/abilities/Dark-Priest.js +++ b/src/abilities/Dark-Priest.js @@ -275,6 +275,7 @@ export default (G) => { { materializationSickness: creatureHasMaterializationSickness }, ); const fullCrea = new Creature(crea, G); + // Don't allow temporary Creature to take up space fullCrea.cleanHex(); // Make temporary Creature invisible diff --git a/src/abilities/Snow-Bunny.js b/src/abilities/Snow-Bunny.js index 21126a235..5a1021111 100755 --- a/src/abilities/Snow-Bunny.js +++ b/src/abilities/Snow-Bunny.js @@ -3,6 +3,7 @@ import { Damage } from '../damage'; import { Team, isTeam } from '../utility/team'; import * as matrices from '../utility/matrices'; import * as arrayUtils from '../utility/arrayUtils'; +import { getPointFacade } from '../utility/pointfacade'; const HopTriggerDirections = { Above: 0, @@ -452,19 +453,19 @@ export default (G) => { }, // activate() : - activate: function (path, args) { + activate: function (path) { const ability = this; ability.end(); G.Phaser.camera.shake(0.01, 90, true, G.Phaser.camera.SHAKE_HORIZONTAL, true); - const target = path.find((hex) => hex.creature).creature; + + const targets = getPointFacade().getCreaturesAt(path); + if (targets.length === 0) return; + const target = targets[0]; const projectileInstance = G.animations.projectile( this, target, 'effects_freezing-spit', - path, - args, - 52, -20, ); const tween = projectileInstance[0]; diff --git a/src/animations.ts b/src/animations.ts index 224c5642c..5c7a3bb0b 100644 --- a/src/animations.ts +++ b/src/animations.ts @@ -3,6 +3,7 @@ import Game from './game'; import { Creature } from './creature'; import { Hex } from './utility/hex'; import { Ability } from './ability'; +import { offsetCoordsToPx } from './utility/const'; // to fix @ts-expect-error 2554: properly type the arguments for the trigger functions in `game.ts` @@ -62,11 +63,11 @@ export class Animations { return; } - const nextPos = game.grid.hexes[hex.y][hex.x - creature.size + 1]; + const nextHex = game.grid.hexes[hex.y][hex.x]; const tween = game.Phaser.add .tween(creature.grp) - .to(nextPos.displayPos, speed, Phaser.Easing.Linear.None) + .to(offsetCoordsToPx(nextHex), speed, Phaser.Easing.Linear.None) .start(); // Ignore traps for hover creatures, unless this is the last hex @@ -122,9 +123,8 @@ export class Animations { creature.healthHide(); const hex = path[0]; - - const start = game.grid.hexes[creature.y][creature.x - creature.size + 1]; - const currentHex = game.grid.hexes[hex.y][hex.x - creature.size + 1]; + const start = game.grid.hexes[creature.y][creature.x]; + const currentHex = game.grid.hexes[hex.y][hex.x]; this.leaveHex(creature, currentHex, opts); @@ -132,7 +132,7 @@ export class Animations { const tween = game.Phaser.add .tween(creature.grp) - .to(currentHex.displayPos, speed, Phaser.Easing.Linear.None) + .to(offsetCoordsToPx(currentHex), speed, Phaser.Easing.Linear.None) .start(); tween.onComplete.add(() => { @@ -166,7 +166,7 @@ export class Animations { teleport(creature: Creature, path: Hex[], opts: AnimationOptions) { const game = this.game, hex = path[0], - currentHex = game.grid.hexes[hex.y][hex.x - creature.size + 1]; + currentHex = game.grid.hexes[hex.y][hex.x]; this.leaveHex(creature, currentHex, opts); @@ -190,8 +190,9 @@ export class Animations { game.soundsys.playSFX('sounds/step'); // position - creature.grp.x = currentHex.displayPos.x; - creature.grp.y = currentHex.displayPos.y; + const px = offsetCoordsToPx(hex); + creature.grp.x = px.x; + creature.grp.y = px.y; // FadeIn game.Phaser.add @@ -289,54 +290,39 @@ export class Animations { projectile( this2: Ability, - target: { id: number }, + target: Creature, spriteId: string, - path: Hex[], - args: { direction: number }, - startX: number, - startY: number, + projectileHeightFromGroundPx: number, ) { - // Get the target's position on the projectile's path that is closest - const emissionPointX = this2.creature.grp.x + startX; - let distance = Number.MAX_SAFE_INTEGER; - let targetX = path[0].displayPos.x; - for (const hex of path) { - if (typeof hex.creature != 'undefined' && hex.creature.id == target.id) { - if (distance > Math.abs(emissionPointX - hex.displayPos.x)) { - distance = Math.abs(emissionPointX - hex.displayPos.x); - targetX = hex.displayPos.x; - } - } - } - const game = this.game, - baseDist = arrayUtils.filterCreature(path.slice(0), false, false).length, - dist = baseDist == 0 ? 1 : baseDist, - emissionPoint = { - x: this2.creature.grp.x + startX, - y: this2.creature.grp.y + startY, - }, - targetPoint = { - x: targetX + 45, - y: path[baseDist].displayPos.y - 20, - }, - // Sprite id here - sprite = game.grid.creatureGroup.create(emissionPoint.x, emissionPoint.y, spriteId), - duration = dist * 75; - - sprite.anchor.setTo(0.5); - sprite.rotation = -Math.PI / 3 + (args.direction * Math.PI) / 3; + const shooter = this2.creature; + const game = shooter.game; + // NOTE: Sometimes this is apparently not passed a valid target. + const victims = game.creatures.filter((c) => c.id === target.id); + + const isTargetOnRight = shooter.centerPx < target.centerPx; + const startXPx = isTargetOnRight ? shooter.rightPx : shooter.leftPx; + const endXPx = isTargetOnRight ? target.leftPx : target.rightPx; + const startYPx = shooter.footPx + projectileHeightFromGroundPx; + + const duration = Math.abs(startXPx - endXPx); + + const sprite = shooter.game.grid.creatureGroup.create(startXPx, startYPx, spriteId); + sprite.anchor.setTo(0.5, 1); + sprite.scale.set(isTargetOnRight ? 1 : -1, 1); + const tween = game.Phaser.add .tween(sprite) .to( { - x: targetPoint.x, - y: targetPoint.y, + x: endXPx, + y: target.footPx + projectileHeightFromGroundPx, }, duration, Phaser.Easing.Linear.None, ) .start(); + const dist = 1; return [tween, sprite, dist]; } } diff --git a/src/creature.ts b/src/creature.ts index b9bd8dcb8..2102b6554 100644 --- a/src/creature.ts +++ b/src/creature.ts @@ -10,7 +10,7 @@ import { Effect } from './effect'; import { Player, PlayerID } from './player'; import { Damage } from './damage'; import { AugmentedMatrix } from './utility/matrices'; -import { HEX_WIDTH_PX } from './utility/const'; +import { HEX_WIDTH_PX, offsetCoordsToPx } from './utility/const'; // to fix @ts-expect-error 2554: properly type the arguments for the trigger functions in `game.ts` @@ -338,45 +338,41 @@ export class Creature { // Adding sprite this.sprite = this.grp.create(0, 0, this.name + dp + '_cardboard'); this.sprite.anchor.setTo(0.5, 1); - // Placing sprite - this.sprite.x = - (!this.player.flipped - ? this.display['offset-x'] - : HEX_WIDTH_PX * this.size - this.sprite.texture.width - this.display['offset-x']) + - this.sprite.texture.width / 2; - this.sprite.y = this.display['offset-y'] + this.sprite.texture.height; - // Placing Group - this.grp.x = this.hexagons[this.size - 1].displayPos.x; - this.grp.y = this.hexagons[this.size - 1].displayPos.y; + // NOTE: The creature's sprite origin needs to be placed in the middle of + // the hexes it occupies. This allows it to be flipped left-to-right without + // needing to be repositioned. + this.sprite.x = (this.size - 1) * -HEX_WIDTH_PX * 0.5; + // NOTE: Position the sprite y so that the creature's "foot" is slightly below center. + this.sprite.y = 10; + + const px = offsetCoordsToPx(this); + this.grp.x = px.x; + this.grp.y = px.y; this.facePlayerDefault(); // Hint Group this.hintGrp = game.Phaser.add.group(this.grp, 'creatureHintGrp_' + this.id); - this.hintGrp.x = 0.5 * HEX_WIDTH_PX * this.size; + this.hintGrp.x = this.sprite.x; this.hintGrp.y = -this.sprite.texture.height + 5; // Health indicator this.healthIndicatorGroup = game.Phaser.add.group(this.grp, 'creatureHealthGrp_' + this.id); // Adding background sprite this.healthIndicatorSprite = this.healthIndicatorGroup.create( - this.player.flipped ? 19 : 19 + HEX_WIDTH_PX * (this.size - 1), + 0, 49, 'p' + this.team + '_health', ); + this.healthIndicatorSprite.anchor.setTo(0.5, 0.5); // Add text - this.healthIndicatorText = game.Phaser.add.text( - this.player.flipped ? HEX_WIDTH_PX * 0.5 : HEX_WIDTH_PX * (this.size - 0.5), - 63, - this.health, - { - font: 'bold 15pt Play', - fill: '#fff', - align: 'center', - stroke: '#000', - strokeThickness: 6, - }, - ); + this.healthIndicatorText = game.Phaser.add.text(0, 52, this.health, { + font: 'bold 15pt Play', + fill: '#fff', + align: 'center', + stroke: '#000', + strokeThickness: 6, + }); this.healthIndicatorText.anchor.setTo(0.5, 0.5); this.healthIndicatorGroup.add(this.healthIndicatorText); // Hide it @@ -585,6 +581,26 @@ export class Creature { } } + get topPx() { + return this.footPx - this.sprite.texture.height; + } + + get footPx() { + return this.grp.y + this.sprite.y; + } + + get centerPx() { + return this.grp.x; + } + + get leftPx() { + return this.grp.x - this.sprite.texture.width * 0.5; + } + + get rightPx() { + return this.grp.x + this.sprite.texture.width * 0.5; + } + get isInCurrentQueue() { return !this.dead && !this.temp && this._nextGameTurnActive <= this.game.turn; } @@ -937,11 +953,6 @@ export class Creature { } else { this.sprite.scale.setTo(1, 1); } - this.sprite.x = - (!flipped - ? this.display['offset-x'] - : HEX_WIDTH_PX * this.size - this.sprite.texture.width - this.display['offset-x']) + - this.sprite.texture.width / 2; } /* facePlayerDefault() @@ -955,11 +966,6 @@ export class Creature { } else { this.sprite.scale.setTo(1, 1); } - this.sprite.x = - (!this.player.flipped - ? this.display['offset-x'] - : HEX_WIDTH_PX * this.size - this.sprite.texture.width - this.display['offset-x']) + - this.sprite.texture.width / 2; } /* moveTo(hex,opts) diff --git a/src/drop.ts b/src/drop.ts index 53ac3aee8..f7ae9a431 100644 --- a/src/drop.ts +++ b/src/drop.ts @@ -1,6 +1,6 @@ import { Creature } from './creature'; import Game from './game'; -import { HEX_HEIGHT_PX, HEX_WIDTH_PX, offsetCoordsToPx } from './utility/const'; +import { offsetCoordsToPx } from './utility/const'; import { Point, getPointFacade } from './utility/pointfacade'; /** @@ -71,11 +71,8 @@ export class Drop { .forEach((drop) => drop.destroy()); this.game.drops.push(this); - this.display = game.grid.dropGroup.create( - this.hex.displayPos.x + 54, - this.hex.displayPos.y + 15, - 'drop_' + this.name, - ); + const px = offsetCoordsToPx(this); + this.display = game.grid.dropGroup.create(px.x, px.y, 'drop_' + this.name); this.display.alpha = 0; this.display.anchor.setTo(0.5, 0.5); this.display.scale.setTo(1.5, 1.5); diff --git a/src/game.ts b/src/game.ts index c02974cbc..61988e4ec 100644 --- a/src/game.ts +++ b/src/game.ts @@ -637,6 +637,13 @@ export default class Game { } this.matchInit(); + + for (const hexes of this.grid.hexes) { + for (const hex of hexes) { + //new Trap(hex.x, hex.y, 'firewall', [], this.players[0], {}, this, 'woo'); + //new Drop('apple', {}, hex.x, hex.y, this); + } + } } async matchInit() { diff --git a/src/utility/const.ts b/src/utility/const.ts index 12fc01764..d96a6151a 100644 --- a/src/utility/const.ts +++ b/src/utility/const.ts @@ -1,10 +1,20 @@ import { Point } from './pointfacade'; export const HEX_WIDTH_PX = 90; -export const HEX_HEIGHT_PX = (HEX_WIDTH_PX / Math.sqrt(3)) * 2 * 0.75; +export const HEX_HEIGHT_PX = (HEX_WIDTH_PX / Math.sqrt(3)) * 2 * 0.75 * 0.75; export function offsetCoordsToPx(point: Point) { + // NOTE: Rounding lets callers use this function with non-whole numbers + // in order to include offsets. This is offered as a possiblity, but + // know that offset hex grid coordinates are a little bonkers. Make + // sure to double check your output in the game. + // Pass whole numbers and adjust pixel positions after if running into problems. + const row = Math.round(point.y); return { - x: (point.y % 2 === 0 ? point.x + 0.5 : point.x) * HEX_WIDTH_PX, + x: (row % 2 === 0 ? point.x + 0.5 : point.x) * HEX_WIDTH_PX, y: point.y * HEX_HEIGHT_PX, }; } + +// NOTE: Creature textures have space for a "foot" that extends "below" the ground y. +// This allows for creatures to appear to have some perspective. +export const CREATURE_TEXTURE_FOOT_HEIGHT_PX = 50; diff --git a/src/utility/hex.ts b/src/utility/hex.ts index c7fcdac62..ac72bf6c3 100644 --- a/src/utility/hex.ts +++ b/src/utility/hex.ts @@ -1,4 +1,3 @@ -import * as $j from 'jquery'; import { Trap } from './trap'; import { Drop } from '../drop'; import { Creature } from '../creature'; @@ -81,11 +80,10 @@ export class Hex { height: number; /** - * Pos object to position creature with absolute coordinates {left,top}. + * @deprecated: use Const.offsetCoordsToPx */ displayPos: { x: number; y: number }; - originalDisplayPos: { x: number; y: number }; tween: Phaser.Tween; hitBox: Phaser.Sprite; display: Phaser.Sprite; @@ -125,24 +123,20 @@ export class Hex { this.width = Const.HEX_WIDTH_PX; this.height = Const.HEX_HEIGHT_PX; - this.displayPos = Const.offsetCoordsToPx({ x, y }); - - this.originalDisplayPos = $j.extend({}, this.displayPos); + this.displayPos = Const.offsetCoordsToPx({ x: this.x, y: this.y }); this.tween = null; if (grid) { + const x_px = this.displayPos.x; + const y_px = this.displayPos.y; // NOTE: Set up hex hitBox and display/overlay elements. - - // NOTE: (Hack) 10px is the offset from the old version. - const x = this.displayPos.x - 10; - const y = this.displayPos.y; - - this.hitBox = grid.hexesGroup.create(x, y, 'hex'); + this.hitBox = grid.hexesGroup.create(x_px, y_px, 'hex'); this.hitBox.alpha = 0; this.hitBox.inputEnabled = true; this.hitBox.ignoreChildInput = true; this.hitBox.input.useHandCursor = false; + this.hitBox.anchor.setTo(0.5); { // NOTE: Set up hexagonal hitArea for hitBox @@ -151,19 +145,21 @@ export class Hex { const angles = [0, 1, 2, 3, 4, 5, 6].map((i) => angleStart - i * angleStep); // NOTE: The coefficients below are "magic"; tested in-game. const [radius_w, radius_h] = [0.58 * this.width, 0.69 * this.height]; - const [offset_x, offset_y] = [radius_w + 2, radius_h + 9]; const points = angles.map( - (angle) => - new Point(Math.cos(angle) * radius_w + offset_x, Math.sin(angle) * radius_h + offset_y), + (angle) => new Point(Math.cos(angle) * radius_w, Math.sin(angle) * radius_h), ); this.hitBox.hitArea = new Polygon(points); } - this.display = grid.displayHexesGroup.create(x, y, 'hex'); + this.display = grid.displayHexesGroup.create(x_px, y_px, 'hex'); this.display.alpha = 0; + this.display.anchor.setTo(0.5); + this.display.scale.set(1, 0.75); - this.overlay = grid.overlayHexesGroup.create(x, y, 'hex'); + this.overlay = grid.overlayHexesGroup.create(x_px, y_px, 'hex'); this.overlay.alpha = 0; + this.overlay.anchor.setTo(0.5); + this.overlay.scale.set(1, 0.75); // Binding Events this.hitBox.events.onInputOver.add(() => { @@ -531,13 +527,13 @@ export class Hex { this.display.alpha = targetAlpha ? 1 : 0; if (this.displayClasses.match(/shrunken/)) { - this.display.scale.setTo(shrinkScale); - this.overlay.scale.setTo(shrinkScale); + this.display.scale.setTo(shrinkScale, 0.75 * shrinkScale); + this.overlay.scale.setTo(shrinkScale, 0.75 * shrinkScale); this.display.alignIn(this.hitBox, Phaser.CENTER); this.overlay.alignIn(this.hitBox, Phaser.CENTER); } else { - this.display.scale.setTo(1); - this.overlay.scale.setTo(1); + this.display.scale.setTo(1, 0.75); + this.overlay.scale.setTo(1, 0.75); this.display.alignIn(this.hitBox, Phaser.CENTER); this.overlay.alignIn(this.hitBox, Phaser.CENTER); } @@ -545,17 +541,15 @@ export class Hex { // Display Coord if (this.displayClasses.match(/showGrid/g)) { if (!(this.coordText && this.coordText.exists)) { - this.coordText = this.game.Phaser.add.text( - this.originalDisplayPos.x + 45, - this.originalDisplayPos.y + 63, - this.coord, - { - font: '30pt Play', - fill: '#000000', - align: 'center', - }, - ); + const px = Const.offsetCoordsToPx(this); + this.coordText = this.game.Phaser.add.text(px.x, px.y, this.coord, { + font: '30pt Play', + fill: '#000000', + align: 'center', + }); this.coordText.anchor.setTo(0.5); + // NOTE: Squish the numbers vertically for a "perspective" effect. + this.coordText.scale.set(1, 0.75); this.grid.overlayHexesGroup.add(this.coordText); } } else if (this.coordText && this.coordText.exists) { diff --git a/src/utility/hexgrid.ts b/src/utility/hexgrid.ts index a84e998f4..64029a6f0 100644 --- a/src/utility/hexgrid.ts +++ b/src/utility/hexgrid.ts @@ -7,7 +7,7 @@ import { Team, isTeam } from './team'; import * as arrayUtils from './arrayUtils'; import Game from '../game'; import { DEBUG } from '../debug'; -import { HEX_WIDTH_PX } from './const'; +import { HEX_WIDTH_PX, offsetCoordsToPx } from './const'; interface QueryOptions { /** @@ -144,11 +144,11 @@ export class HexGrid { this.lastClickedHex = undefined; this.display = game.Phaser.add.group(undefined, 'displayGroup'); - this.display.x = 230; - this.display.y = 380; + // TODO: What are these magic numbers? + this.display.x = 275; + this.display.y = 429; this.gridGroup = game.Phaser.add.group(this.display, 'gridGroup'); - this.gridGroup.scale.set(1, 0.75); this.trapGroup = game.Phaser.add.group(this.gridGroup, 'trapGrp'); this.hexesGroup = game.Phaser.add.group(this.gridGroup, 'hexesGroup'); @@ -158,7 +158,6 @@ export class HexGrid { this.creatureGroup = game.Phaser.add.group(this.display, 'creaturesGrp'); // Parts of traps displayed over creatures this.trapOverGroup = game.Phaser.add.group(this.display, 'trapOverGrp'); - this.trapOverGroup.scale.set(1, 0.75); // Populate grid for (let row = 0; row < opts.nbrRow; row++) { @@ -1491,41 +1490,23 @@ export class HexGrid { */ previewCreature(pos, creatureData, player) { const game = this.game; - const hex = this.hexes[pos.y][pos.x - (creatureData.size - 1)]; if (!this.materialize_overlay) { - // If sprite does not exists - // Adding sprite this.materialize_overlay = this.creatureGroup.create(0, 0, creatureData.name + '_cardboard'); - this.materialize_overlay.anchor.setTo(0.5, 1); - this.materialize_overlay.posy = pos.y; } else { this.materialize_overlay.loadTexture(creatureData.name + '_cardboard'); - if (this.materialize_overlay.posy != pos.y) { - this.materialize_overlay.posy = pos.y; - this.orderCreatureZ(); - } } - - // Placing sprite - this.materialize_overlay.x = - hex.displayPos.x + - (!player.flipped - ? creatureData.display['offset-x'] - : HEX_WIDTH_PX * creatureData.size - - this.materialize_overlay.texture.width - - creatureData.display['offset-x']) + - this.materialize_overlay.texture.width / 2; - this.materialize_overlay.y = - hex.displayPos.y + creatureData.display['offset-y'] + this.materialize_overlay.texture.height; + this.materialize_overlay.anchor.setTo(0.5, 1); + this.materialize_overlay.scale.setTo(player.flipped ? -1 : 1, 1); + + const px = offsetCoordsToPx(pos); + // TODO: This uses the same positioning as creature.grp.sprite. + // It might be a good idea to get the position from there, rather than have a copy. + this.materialize_overlay.x = px.x + (creatureData.size - 1) * -HEX_WIDTH_PX * 0.5; + this.materialize_overlay.y = px.y + 10; + this.orderCreatureZ(); this.materialize_overlay.alpha = 0.5; - if (player.flipped) { - this.materialize_overlay.scale.setTo(-1, 1); - } else { - this.materialize_overlay.scale.setTo(1, 1); - } - for (let i = 0, size = creatureData.size; i < size; i++) { const hexInstance = this.hexes[pos.y][pos.x - i]; this.cleanHex(hexInstance); diff --git a/src/utility/trap.ts b/src/utility/trap.ts index 93f60bba4..903876703 100644 --- a/src/utility/trap.ts +++ b/src/utility/trap.ts @@ -33,7 +33,6 @@ export class Trap { typeOver = false; destroyAnimation: DestroyAnimationType = 'none'; - // display: Phaser.Sprite; displayOver: Phaser.Sprite; @@ -78,15 +77,11 @@ export class Trap { const spriteName = 'trap_' + type; const px = offsetCoordsToPx(this); - this.display = game.grid.trapGroup.create(px.x + HEX_WIDTH_PX / 2, px.y + 60, spriteName); + this.display = game.grid.trapGroup.create(px.x, px.y, spriteName); this.display.anchor.setTo(0.5); if (this.typeOver) { - this.displayOver = game.grid.trapOverGroup.create( - px.x + HEX_WIDTH_PX / 2, - px.y + 60, - spriteName, - ); + this.displayOver = game.grid.trapOverGroup.create(px.x, px.y, spriteName); this.displayOver.anchor.setTo(0.5); this.displayOver.scale.x *= -1; }