Started new map screen
508
graphics/ui/map.svg
Normal file
After Width: | Height: | Size: 122 KiB |
Before Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 2 KiB |
BIN
out/assets/images/map/planet.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 1.9 KiB |
BIN
out/assets/images/map/star.png
Normal file
After Width: | Height: | Size: 3.2 KiB |
BIN
out/assets/images/map/starsystem-background.png
Normal file
After Width: | Height: | Size: 144 KiB |
Before Width: | Height: | Size: 3 KiB |
BIN
out/assets/images/map/zoom-in.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
out/assets/images/map/zoom-out.png
Normal file
After Width: | Height: | Size: 12 KiB |
|
@ -30,7 +30,6 @@ module SpaceTac {
|
||||||
this.state.add('router', View.Router);
|
this.state.add('router', View.Router);
|
||||||
this.state.add('battle', View.BattleView);
|
this.state.add('battle', View.BattleView);
|
||||||
this.state.add('universe', View.UniverseMapView);
|
this.state.add('universe', View.UniverseMapView);
|
||||||
this.state.add('starsystem', View.StarSystemView);
|
|
||||||
|
|
||||||
this.state.start('boot');
|
this.state.start('boot');
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,12 +56,11 @@ module SpaceTac.View {
|
||||||
this.loadImage("battle/weapon/bullet.png");
|
this.loadImage("battle/weapon/bullet.png");
|
||||||
this.loadImage("common/standard-bar-background.png");
|
this.loadImage("common/standard-bar-background.png");
|
||||||
this.loadImage("common/standard-bar-foreground.png");
|
this.loadImage("common/standard-bar-foreground.png");
|
||||||
this.loadImage("map/star-icon.png");
|
this.loadImage("map/starsystem-background.png");
|
||||||
this.loadImage("map/fleet-icon.png");
|
this.loadImage("map/zoom-in.png");
|
||||||
this.loadImage("map/planet-icon.png");
|
this.loadImage("map/zoom-out.png");
|
||||||
this.loadImage("map/warp-icon.png");
|
this.loadImage("map/star.png");
|
||||||
this.loadImage("map/button-back.png");
|
this.loadImage("map/planet.png");
|
||||||
this.loadImage("map/button-jump.png");
|
|
||||||
|
|
||||||
// Load ships
|
// Load ships
|
||||||
this.loadShip("scout");
|
this.loadShip("scout");
|
||||||
|
|
37
src/view/map/StarSystemDisplay.ts
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,121 +0,0 @@
|
||||||
/// <reference path="../BaseView.ts"/>
|
|
||||||
|
|
||||||
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 {
|
|
||||||
(<GameUI>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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -3,18 +3,18 @@
|
||||||
module SpaceTac.View {
|
module SpaceTac.View {
|
||||||
// Interactive map of the universe
|
// Interactive map of the universe
|
||||||
export class UniverseMapView extends BaseView {
|
export class UniverseMapView extends BaseView {
|
||||||
|
|
||||||
// Displayed universe
|
// Displayed universe
|
||||||
universe: Game.Universe;
|
universe: Game.Universe;
|
||||||
|
|
||||||
// Interacting player
|
// Interacting player
|
||||||
player: Game.Player;
|
player: Game.Player;
|
||||||
|
|
||||||
// Group for the stars and links
|
// Star systems
|
||||||
private stars: Phaser.Group;
|
group: Phaser.Group;
|
||||||
|
starsystems: StarSystemDisplay[] = [];
|
||||||
|
|
||||||
// Scaling used to transform game coordinates in screen ones
|
// Zoom level
|
||||||
private scaling: number;
|
zoom = 0;
|
||||||
|
|
||||||
// Init the view, binding it to a universe
|
// Init the view, binding it to a universe
|
||||||
init(universe: Game.Universe, player: Game.Player) {
|
init(universe: Game.Universe, player: Game.Player) {
|
||||||
|
@ -28,15 +28,15 @@ module SpaceTac.View {
|
||||||
create() {
|
create() {
|
||||||
super.create();
|
super.create();
|
||||||
|
|
||||||
this.stars = this.add.group();
|
this.group = new Phaser.Group(this.game);
|
||||||
|
this.add.existing(this.group);
|
||||||
|
|
||||||
var display_margin = 50;
|
this.starsystems = this.universe.stars.map(star => new StarSystemDisplay(this, star));
|
||||||
var display_width = 720 - (display_margin * 2);
|
this.starsystems.forEach(starsystem => this.group.addChild(starsystem));
|
||||||
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.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");
|
this.gameui.audio.startMusic("walking-along");
|
||||||
|
|
||||||
|
@ -52,63 +52,33 @@ module SpaceTac.View {
|
||||||
super.shutdown();
|
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(() => {
|
|
||||||
(<GameUI>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)
|
// Reveal the whole map (this is a cheat)
|
||||||
revealAll(): void {
|
revealAll(): void {
|
||||||
this.universe.stars.forEach((star: Game.Star) => {
|
this.universe.stars.forEach((star: Game.Star) => {
|
||||||
this.player.setVisited(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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|