diff --git a/graphics/ui/map.svg b/graphics/ui/map.svg
new file mode 100644
index 0000000..ac1326d
--- /dev/null
+++ b/graphics/ui/map.svg
@@ -0,0 +1,508 @@
+
+
+
+
diff --git a/out/assets/images/map/button-back.png b/out/assets/images/map/button-back.png
deleted file mode 100644
index bfaf7c2..0000000
Binary files a/out/assets/images/map/button-back.png and /dev/null differ
diff --git a/out/assets/images/map/button-jump.png b/out/assets/images/map/button-jump.png
deleted file mode 100644
index 571633c..0000000
Binary files a/out/assets/images/map/button-jump.png and /dev/null differ
diff --git a/out/assets/images/map/fleet-icon.png b/out/assets/images/map/fleet-icon.png
deleted file mode 100644
index fe73181..0000000
Binary files a/out/assets/images/map/fleet-icon.png and /dev/null differ
diff --git a/out/assets/images/map/planet-icon.png b/out/assets/images/map/planet-icon.png
deleted file mode 100644
index b000815..0000000
Binary files a/out/assets/images/map/planet-icon.png and /dev/null differ
diff --git a/out/assets/images/map/planet.png b/out/assets/images/map/planet.png
new file mode 100644
index 0000000..e2115ba
Binary files /dev/null and b/out/assets/images/map/planet.png differ
diff --git a/out/assets/images/map/star-icon.png b/out/assets/images/map/star-icon.png
deleted file mode 100644
index 2c98ea4..0000000
Binary files a/out/assets/images/map/star-icon.png and /dev/null differ
diff --git a/out/assets/images/map/star.png b/out/assets/images/map/star.png
new file mode 100644
index 0000000..483aade
Binary files /dev/null and b/out/assets/images/map/star.png differ
diff --git a/out/assets/images/map/starsystem-background.png b/out/assets/images/map/starsystem-background.png
new file mode 100644
index 0000000..1e9458a
Binary files /dev/null and b/out/assets/images/map/starsystem-background.png differ
diff --git a/out/assets/images/map/warp-icon.png b/out/assets/images/map/warp-icon.png
deleted file mode 100644
index 8760cfd..0000000
Binary files a/out/assets/images/map/warp-icon.png and /dev/null differ
diff --git a/out/assets/images/map/zoom-in.png b/out/assets/images/map/zoom-in.png
new file mode 100644
index 0000000..ad6183b
Binary files /dev/null and b/out/assets/images/map/zoom-in.png differ
diff --git a/out/assets/images/map/zoom-out.png b/out/assets/images/map/zoom-out.png
new file mode 100644
index 0000000..2481ae3
Binary files /dev/null and b/out/assets/images/map/zoom-out.png differ
diff --git a/src/GameUI.ts b/src/GameUI.ts
index c4ff023..13109eb 100644
--- a/src/GameUI.ts
+++ b/src/GameUI.ts
@@ -30,7 +30,6 @@ module SpaceTac {
this.state.add('router', View.Router);
this.state.add('battle', View.BattleView);
this.state.add('universe', View.UniverseMapView);
- this.state.add('starsystem', View.StarSystemView);
this.state.start('boot');
}
diff --git a/src/view/Preload.ts b/src/view/Preload.ts
index 2227bc1..2e6d491 100644
--- a/src/view/Preload.ts
+++ b/src/view/Preload.ts
@@ -56,12 +56,11 @@ module SpaceTac.View {
this.loadImage("battle/weapon/bullet.png");
this.loadImage("common/standard-bar-background.png");
this.loadImage("common/standard-bar-foreground.png");
- this.loadImage("map/star-icon.png");
- this.loadImage("map/fleet-icon.png");
- this.loadImage("map/planet-icon.png");
- this.loadImage("map/warp-icon.png");
- this.loadImage("map/button-back.png");
- this.loadImage("map/button-jump.png");
+ this.loadImage("map/starsystem-background.png");
+ this.loadImage("map/zoom-in.png");
+ this.loadImage("map/zoom-out.png");
+ this.loadImage("map/star.png");
+ this.loadImage("map/planet.png");
// Load ships
this.loadShip("scout");
diff --git a/src/view/map/StarSystemDisplay.ts b/src/view/map/StarSystemDisplay.ts
new file mode 100644
index 0000000..268e165
--- /dev/null
+++ b/src/view/map/StarSystemDisplay.ts
@@ -0,0 +1,37 @@
+module SpaceTac.View {
+ // Group to display a star system
+ export class StarSystemDisplay extends Phaser.Image {
+ starsystem: Game.Star;
+
+ constructor(parent: UniverseMapView, starsystem: Game.Star) {
+ super(parent.game, starsystem.x, starsystem.y, "map-starsystem-background");
+ this.anchor.set(0.5, 0.5);
+
+ let scale = this.width;
+ this.scale.set(starsystem.radius * 2 / scale);
+
+ this.starsystem = starsystem;
+
+ let boundary = this.game.add.graphics(0, 0);
+ boundary.lineStyle(3, 0x424242);
+ boundary.drawCircle(0, 0, scale);
+ this.addChild(boundary);
+
+ starsystem.locations.forEach(location => {
+ if (location.type == Game.StarLocationType.STAR) {
+ this.addImage(location.x, location.y, "map-star");
+ } else if (location.type == Game.StarLocationType.PLANET) {
+ let planet = this.addImage(location.x, location.y, "map-planet");
+ planet.rotation = Math.atan2(location.y, location.x);
+ }
+ });
+ }
+
+ addImage(x: number, y: number, key: string): Phaser.Image {
+ let image = this.game.add.image(x * 0.5 / this.scale.x, y * 0.5 / this.scale.y, key);
+ image.anchor.set(0.5, 0.5);
+ this.addChild(image);
+ return image;
+ }
+ }
+}
diff --git a/src/view/map/StarSystemView.ts b/src/view/map/StarSystemView.ts
deleted file mode 100644
index ccad0cb..0000000
--- a/src/view/map/StarSystemView.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-///
-
-module SpaceTac.View {
- // Interactive map of a star system
- export class StarSystemView extends BaseView {
-
- // Displayed star system
- star: Game.Star;
-
- // Interacting player
- player: Game.Player;
-
- // Group for the locations diplay
- locations: Phaser.Group;
-
- // Scaling used to transform game coordinates in screen ones
- private scaling: number;
-
- // Buttons
- private button_back: Phaser.Button;
- private button_jump: Phaser.Button;
-
- // Init the view, binding it to a universe
- init(star: Game.Star, player: Game.Player) {
- super.init();
-
- this.star = star;
- this.player = player;
- }
-
- // Create view graphics
- create() {
- super.create();
-
- this.locations = this.add.group();
-
- var display_margin = 50;
- var display_width = 720 - (display_margin * 2);
- this.scaling = display_width / (this.star.radius * 2);
- this.locations.position.set(display_margin + display_width / 2, display_margin + display_width / 2);
- this.locations.scale.set(this.scaling);
-
- // Buttons
- this.button_back = this.add.button(0, 0, "map-button-back", this.onBackClicked, this);
- this.button_back.input.useHandCursor = true;
- this.button_jump = this.add.button(150, 0, "map-button-jump", this.onJumpClicked, this);
- this.button_jump.input.useHandCursor = true;
- this.button_jump.visible = false;
-
- this.drawAll();
-
- this.gameui.audio.startMusic("walking-along");
- }
-
- // Leaving the view, unbind and destroy
- shutdown() {
- this.star = null;
- this.player = null;
-
- super.shutdown();
- }
-
- // Redraw the view
- drawAll(): void {
- this.locations.removeAll(true, true);
-
- // Draw location icons
- this.drawLocations();
-
- // Draw fleet
- if (this.player.fleet.location.star === this.star) {
- this.drawFleet();
- }
-
- // Buttons
- this.button_jump.visible = this.player.fleet.location.jump_dest !== null;
- }
-
- // Draw the fleet marker
- drawFleet(): void {
- var location = this.player.fleet.location;
- var fleet = this.add.sprite(location.x, location.y, "map-fleet-icon", 0, this.locations);
- fleet.scale.set(1.0 / this.scaling, 1.0 / this.scaling);
- fleet.anchor.set(0.5, -0.5);
- this.game.tweens.create(fleet).to({angle: -360}, 5000, undefined, true, 0, -1);
- }
-
- // Redraw the locations map
- drawLocations(): void {
- this.star.locations.forEach((location: Game.StarLocation) => {
- var key = "map-" + Game.StarLocationType[location.type].toLowerCase() + "-icon";
- var sprite = this.add.button(location.x, location.y, key);
- sprite.input.useHandCursor = true;
- sprite.onInputUp.addOnce(() => {
- this.player.fleet.setLocation(location);
-
- if (this.player.getBattle()) {
- this.game.state.start("router", true, false);
- } else {
- this.drawAll();
- }
- });
- sprite.scale.set(1.0 / this.scaling, 1.0 / this.scaling);
- sprite.anchor.set(0.5, 0.5);
- this.locations.addChild(sprite);
- });
- }
-
- // Called when "Back" is clicked, go back to universe map
- onBackClicked(): void {
- (this.game).star = null;
- this.game.state.start("router", true, false);
- }
-
- // Called when "jump" is clicked, initiate sector jump, and go back to universe map
- onJumpClicked(): void {
- this.player.fleet.jump();
- this.onBackClicked();
- }
- }
-}
diff --git a/src/view/map/UniverseMapView.ts b/src/view/map/UniverseMapView.ts
index 6be58d6..26250c6 100644
--- a/src/view/map/UniverseMapView.ts
+++ b/src/view/map/UniverseMapView.ts
@@ -3,18 +3,18 @@
module SpaceTac.View {
// Interactive map of the universe
export class UniverseMapView extends BaseView {
-
// Displayed universe
universe: Game.Universe;
// Interacting player
player: Game.Player;
- // Group for the stars and links
- private stars: Phaser.Group;
+ // Star systems
+ group: Phaser.Group;
+ starsystems: StarSystemDisplay[] = [];
- // Scaling used to transform game coordinates in screen ones
- private scaling: number;
+ // Zoom level
+ zoom = 0;
// Init the view, binding it to a universe
init(universe: Game.Universe, player: Game.Player) {
@@ -28,15 +28,15 @@ module SpaceTac.View {
create() {
super.create();
- this.stars = this.add.group();
+ this.group = new Phaser.Group(this.game);
+ this.add.existing(this.group);
- var display_margin = 50;
- var display_width = 720 - (display_margin * 2);
- this.scaling = display_width / (this.universe.radius * 2);
- this.stars.position.set(display_margin + display_width / 2, display_margin + display_width / 2);
- this.stars.scale.set(this.scaling);
+ this.starsystems = this.universe.stars.map(star => new StarSystemDisplay(this, star));
+ this.starsystems.forEach(starsystem => this.group.addChild(starsystem));
- this.drawAll();
+ this.setZoom(2);
+ this.add.button(1830, 100, "map-zoom-in", () => this.setZoom(this.zoom + 1)).anchor.set(0.5, 0.5);
+ this.add.button(1830, 980, "map-zoom-out", () => this.setZoom(this.zoom - 1)).anchor.set(0.5, 0.5);
this.gameui.audio.startMusic("walking-along");
@@ -52,63 +52,33 @@ module SpaceTac.View {
super.shutdown();
}
- // Redraw the whole scene
- drawAll(): void {
- this.stars.removeAll(true, true);
-
- this.drawStars();
-
- this.drawFleet();
- }
-
- // Draw the fleet marker
- drawFleet(): void {
- var location = this.player.fleet.location.star;
- var fleet = this.add.sprite(location.x, location.y, "map-fleet-icon", 0, this.stars);
- fleet.scale.set(1.0 / this.scaling, 1.0 / this.scaling);
- fleet.anchor.set(0.5, -0.5);
- this.game.tweens.create(fleet).to({angle: -360}, 5000, undefined, true, 0, -1);
- }
-
- // Draw the stars and links
- drawStars(): void {
- this.universe.starlinks.forEach((link: Game.StarLink) => {
- if (this.player.hasVisited(link.first) || this.player.hasVisited(link.second)) {
- var line = this.add.graphics(0, 0, this.stars);
- line.lineStyle(0.3, 0xA0A0A0);
- line.moveTo(link.first.x, link.first.y);
- line.lineTo(link.second.x, link.second.y);
- }
- });
- this.universe.stars.forEach((star: Game.Star) => {
- if (this.player.hasVisited(star)) {
- var sprite = new Phaser.Button(this.game, star.x, star.y, "map-star-icon");
- sprite.scale.set(1.0 / this.scaling, 1.0 / this.scaling);
- sprite.anchor.set(0.5, 0.5);
-
- sprite.onInputUp.add(() => {
- (this.game).star = star;
- this.game.state.start("router", true, false);
- });
- sprite.input.useHandCursor = true;
-
- this.stars.addChild(sprite);
-
- var name = new Phaser.Text(this.game, star.x, star.y, star.name,
- {align: "center", font: "bold 14px Arial", fill: "#90FEE3"});
- name.scale.set(1.0 / this.scaling, 1.0 / this.scaling);
- name.anchor.set(0.5, -0.4);
- this.stars.addChild(name);
- }
- });
- }
-
// Reveal the whole map (this is a cheat)
revealAll(): void {
this.universe.stars.forEach((star: Game.Star) => {
this.player.setVisited(star);
});
- this.drawAll();
+ // TODO Redraw
+ }
+
+ // Set the camera to center on a target, and to display a given span in height
+ setCamera(x: number, y: number, span: number) {
+ let scale = 1000 / span;
+ this.tweens.create(this.group.position).to({ x: 960 - x * scale, y: 540 - y * scale }).start();
+ this.tweens.create(this.group.scale).to({ x: scale, y: scale }).start();
+ }
+
+ setZoom(level: number) {
+ let current_star = this.player.fleet.location.star;
+ if (level <= 0) {
+ this.setCamera(0, 0, this.universe.radius * 2);
+ this.zoom = 0;
+ } else if (level == 1) {
+ this.setCamera(current_star.x, current_star.y, this.universe.radius * 0.5);
+ this.zoom = 1;
+ } else {
+ this.setCamera(current_star.x, current_star.y, current_star.radius * 2);
+ this.zoom = 2;
+ }
}
}
}