1
0
Fork 0

New text font

This commit is contained in:
Michaël Lemaire 2017-08-16 00:30:19 +02:00
parent 5740067d64
commit 69651b77bd
21 changed files with 40 additions and 24 deletions

View file

@ -34,6 +34,7 @@ If you want to build on your computer, clone the repository, then run:
* This work, made by Viktor Hahn (Viktor.Hahn@web.de), is licensed under the Creative Commons Attribution 3.0 Unported License. http://creativecommons.org/licenses/by/3.0/
* **[www.kenney.nl](http://www.kenney.nl)** - Sound effects
* **[Matthieu Desprez](https://github.com/edistra)** - Beta testing and ideas
* **[Néstor Delgado](http://www.1001fonts.com/daggersquare-font.html)** - DAGGERSQUARE Font
* **Nicolas Forgo** - Ship models
* **[Kevin MacLeod](http://www.incompetech.com/)** - Musics
* "Mechanolith" Kevin MacLeod (incompetech.com)

View file

@ -76,7 +76,6 @@ Artificial Intelligence
Common UI
---------
* Better fonts, font effects...
* Add caret/focus to text input
* Fix hover being stuck when the cursor exits the window, or the item moves or is hidden
* Add a standard confirm dialog

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -20,11 +20,26 @@
width: 100%;
height: 100vh;
}
@font-face {
font-family: 'SpaceTac';
src: url('assets/fonts/daggersquare.regular.otf');
}
body {
font-family: 'SpaceTac';
}
.fontLoader {
position: absolute;
left: -1000px;
}
</style>
</head>
<body>
<div id="-space-tac" class="game"></div>
<div class=".fontLoader">.</div>
<script src="vendor/parse/parse.min.js"></script>
<script src="vendor/phaser/phaser.min.js"></script>

View file

@ -73,7 +73,7 @@ module TS.SpaceTac.UI {
// Cooldown layer
this.cooldown = new Phaser.Image(this.game, this.width / 2, this.height / 2, "battle-actionbar-icon", 3);
this.cooldown.anchor.set(0.5, 0.5);
this.cooldown_count = new Phaser.Text(this.game, 0, 0, "", { align: "center", font: "bold 34pt Arial", fill: "#aaaaaa" });
this.cooldown_count = new Phaser.Text(this.game, 0, 0, "", { align: "center", font: "bold 34pt SpaceTac", fill: "#aaaaaa" });
this.cooldown_count.anchor.set(0.5, 0.45);
this.cooldown.addChild(this.cooldown_count);
this.addChild(this.cooldown);

View file

@ -51,7 +51,7 @@ module TS.SpaceTac.UI {
this.sprite.scale.set(0.1, 0.1);
this.add(this.sprite);
this.duration = new Phaser.Text(this.game, 0, 40, "", { font: "bold 16pt Arial", fill: "#ffdd4b" });
this.duration = new Phaser.Text(this.game, 0, 40, "", { font: "bold 16pt SpaceTac", fill: "#ffdd4b" });
this.duration.anchor.set(0.5, 0.5);
this.duration.visible = false;
this.add(this.duration);

View file

@ -84,7 +84,7 @@ module TS.SpaceTac.UI {
this.add(this.power);
// Play order display
this.play_order = new Phaser.Text(this.game, 55, -47, "", { font: "bold 14pt Arial", fill: "#aaaaaa" });
this.play_order = new Phaser.Text(this.game, 55, -47, "", { font: "bold 14pt SpaceTac", fill: "#aaaaaa" });
this.toggle_play_order = this.battleview.animations.newVisibilityToggle(this.play_order, 200, false);
this.add(this.play_order);
@ -264,7 +264,7 @@ module TS.SpaceTac.UI {
* Briefly show an effect on this ship
*/
displayEffect(message: string, beneficial: boolean) {
let text = new Phaser.Text(this.game, 0, 20 * this.effects_messages.children.length, message, { font: "14pt Arial", fill: beneficial ? "#afe9c6" : "#e9afaf" });
let text = new Phaser.Text(this.game, 0, 20 * this.effects_messages.children.length, message, { font: "14pt SpaceTac", fill: beneficial ? "#afe9c6" : "#e9afaf" });
this.effects_messages.addChild(text);
let arena = this.battleview.arena.getBoundaries();

View file

@ -20,7 +20,7 @@ module TS.SpaceTac.UI {
this.player1.visible = false;
this.message.addChild(this.player1);
let player1_name = view.game.add.text(-240, 22, fleet1.player.name, { font: `bold 22pt Arial`, fill: "#154d13" });
let player1_name = view.game.add.text(-240, 22, fleet1.player.name, { font: `bold 22pt SpaceTac`, fill: "#154d13" });
player1_name.anchor.set(0.5);
player1_name.angle = -48;
this.player1.addChild(player1_name);
@ -41,7 +41,7 @@ module TS.SpaceTac.UI {
this.player2.visible = false;
this.message.addChild(this.player2);
let player2_name = view.game.add.text(-240, 22, fleet2.player.name, { font: `bold 22pt Arial`, fill: "#651713" });
let player2_name = view.game.add.text(-240, 22, fleet2.player.name, { font: `bold 22pt SpaceTac`, fill: "#651713" });
player2_name.anchor.set(0.5);
player2_name.angle = -228;
this.player2.addChild(player2_name);

View file

@ -79,7 +79,7 @@ module TS.SpaceTac.UI {
tag.alpha = 0.85;
this.addChild(tag);
let text = new Phaser.Text(this.game, -10, 4, price.toString(), { align: "center", font: "18pt Arial", fill: "#FFFFCC" });
let text = new Phaser.Text(this.game, -10, 4, price.toString(), { align: "center", font: "18pt SpaceTac", fill: "#FFFFCC" });
text.anchor.set(0.5, 0.5);
tag.addChild(text);
}

View file

@ -79,11 +79,11 @@ module TS.SpaceTac.UI {
this.addChild(close_button);
view.tooltip.bindStaticText(close_button, "Close the character sheet");
this.ship_name = new Phaser.Text(this.game, 758, 48, "", { align: "center", font: "30pt Arial", fill: "#FFFFFF" });
this.ship_name = new Phaser.Text(this.game, 758, 48, "", { align: "center", font: "30pt SpaceTac", fill: "#FFFFFF" });
this.ship_name.anchor.set(0.5, 0.5);
this.addChild(this.ship_name);
this.ship_level = new Phaser.Text(this.game, 552, 1054, "", { align: "center", font: "30pt Arial", fill: "#FFFFFF" });
this.ship_level = new Phaser.Text(this.game, 552, 1054, "", { align: "center", font: "30pt SpaceTac", fill: "#FFFFFF" });
this.ship_level.anchor.set(0.5, 0.5);
this.addChild(this.ship_level);
@ -91,7 +91,7 @@ module TS.SpaceTac.UI {
this.ship_experience.setBarImage("character-experience");
this.addChild(this.ship_experience);
this.ship_upgrade_points = new Phaser.Text(this.game, 1066, 1054, "", { align: "center", font: "30pt Arial", fill: "#FFFFFF" });
this.ship_upgrade_points = new Phaser.Text(this.game, 1066, 1054, "", { align: "center", font: "30pt SpaceTac", fill: "#FFFFFF" });
this.ship_upgrade_points.anchor.set(0.5, 0.5);
this.addChild(this.ship_upgrade_points);
@ -115,14 +115,14 @@ module TS.SpaceTac.UI {
this.portraits.position.set(152, 0);
this.addChild(this.portraits);
this.credits = new Phaser.Text(this.game, 136, 38, "", { align: "center", font: "30pt Arial", fill: "#FFFFFF" });
this.credits = new Phaser.Text(this.game, 136, 38, "", { align: "center", font: "30pt SpaceTac", fill: "#FFFFFF" });
this.credits.anchor.set(0.5, 0.5);
this.addChild(this.credits);
this.equipments = new Phaser.Group(this.game);
this.addChild(this.equipments);
this.mode_title = new Phaser.Text(this.game, 1548, 648, "", { align: "center", font: "18pt Arial", fill: "#FFFFFF" });
this.mode_title = new Phaser.Text(this.game, 1548, 648, "", { align: "center", font: "18pt SpaceTac", fill: "#FFFFFF" });
this.mode_title.anchor.set(0.5, 0.5);
this.addChild(this.mode_title);
@ -160,7 +160,7 @@ module TS.SpaceTac.UI {
private addAttribute(attribute: keyof ShipAttributes, x: number, y: number) {
let attrname = capitalize(SHIP_ATTRIBUTES[attribute].name);
let name = new Phaser.Text(this.game, x - 144, y - 2, attrname,
{ align: "center", font: "20pt Arial", fill: "#c9d8ef", stroke: "#395665", strokeThickness: 1 });
{ align: "center", font: "20pt SpaceTac", fill: "#c9d8ef", stroke: "#395665", strokeThickness: 1 });
name.anchor.set(0.5);
this.addChild(name);
@ -173,7 +173,7 @@ module TS.SpaceTac.UI {
this.view.tooltip.bindDynamicText(button_value, () => this.ship.getAttributeDescription(attribute));
let value = new Phaser.Text(this.game, x, y, "",
{ align: "center", font: "bold 18pt Arial", fill: "#FFFFFF" });
{ align: "center", font: "bold 18pt SpaceTac", fill: "#FFFFFF" });
value.anchor.set(0.5);
this.addChild(value);

View file

@ -14,7 +14,7 @@ module TS.SpaceTac.UI {
this.add(this.background);
this.text = new Phaser.Text(this.game, 0, 0, text,
{ font: "bold 14pt Arial", fill: "#90FEE3" });
{ font: "bold 14pt SpaceTac", fill: "#90FEE3" });
this.add(this.text);
this.position.set(parent.view.getWidth(), 10);

View file

@ -120,12 +120,13 @@ module TS.SpaceTac.UI {
* Add a text to the content
*/
addText(x: number, y: number, content: string, color = "#ffffff", size = 16, center = false, bold = false, width = 0): void {
let style = { font: `${bold ? "bold " : ""}${size}pt Arial`, fill: color, align: center ? "center" : "left" };
let style = { font: `${bold ? "bold " : ""}${size}pt SpaceTac`, fill: color, align: center ? "center" : "left" };
let text = new Phaser.Text(this.container.game, x, y, content, style);
if (width) {
text.wordWrap = true;
text.wordWrapWidth = width;
}
text.setShadow(3, 4, "rgba(0,0,0,0.6)", 6);
this.container.content.add(text);
}
}

View file

@ -14,7 +14,7 @@ module TS.SpaceTac.UI {
}
function textFromInfo(game: Phaser.Game, info: UITextInfo): Phaser.Text {
let style = { font: `${info.bold ? "bold " : ""}${info.size}pt Arial`, fill: info.color };
let style = { font: `${info.bold ? "bold " : ""}${info.size}pt SpaceTac`, fill: info.color };
let text = new Phaser.Text(game, 0, 0, info.content, style);
return text;
}
@ -227,7 +227,7 @@ module TS.SpaceTac.UI {
* Add a static text.
*/
addText(x: number, y: number, content: string, color = "#ffffff", size = 16, bold = false, center = true, width = 0, vcenter = center): void {
let style = { font: `${bold ? "bold " : ""}${size}pt Arial`, fill: color, align: center ? "center" : "left" };
let style = { font: `${bold ? "bold " : ""}${size}pt SpaceTac`, fill: color, align: center ? "center" : "left" };
let text = new Phaser.Text(this.view.game, x, y, content, style);
text.anchor.set(center ? 0.5 : 0, vcenter ? 0.5 : 0);
if (width) {

View file

@ -10,7 +10,7 @@ module TS.SpaceTac.UI {
constructor(parent: UIComponent, width: number, height: number, content = "", fontsize = 20, fontcolor = "#FFFFFF") {
super(parent, width, height);
this.content = new Phaser.Text(this.game, width / 2, height / 2, content, { align: "center", font: `${fontsize}px Arial`, fill: fontcolor })
this.content = new Phaser.Text(this.game, width / 2, height / 2, content, { align: "center", font: `${fontsize}px SpaceTac`, fill: fontcolor })
this.content.anchor.set(0.5, 0.5);
this.addInternalChild(this.content);
}

View file

@ -19,7 +19,7 @@ module TS.SpaceTac.UI {
this.addInternalChild(input_bg);
let fontsize = Math.ceil(height * 0.8);
this.content = new Phaser.Text(this.game, width / 2, height / 2, "", { align: "center", font: `${fontsize}px Arial`, fill: fontcolor });
this.content = new Phaser.Text(this.game, width / 2, height / 2, "", { align: "center", font: `${fontsize}px SpaceTac`, fill: fontcolor });
this.content.anchor.set(0.5, 0.5);
this.addInternalChild(this.content);

View file

@ -70,10 +70,10 @@ module TS.SpaceTac.UI {
this.label = new Phaser.Button(this.game, 0, 460, "map-name");
this.label.anchor.set(0.5, 0.5);
this.label.input.useHandCursor = false;
let label_content = new Phaser.Text(this.game, 0, 0, this.starsystem.name, { align: "center", font: `32pt Arial`, fill: "#b8d2f1" });
let label_content = new Phaser.Text(this.game, 0, 0, this.starsystem.name, { align: "center", font: `32pt SpaceTac`, fill: "#b8d2f1" });
label_content.anchor.set(0.6, 0.5);
this.label.addChild(label_content);
let label_level = new Phaser.Text(this.game, 243, 30, this.starsystem.level.toString(), { align: "center", font: `24pt Arial`, fill: "#a0a0a0" });
let label_level = new Phaser.Text(this.game, 243, 30, this.starsystem.level.toString(), { align: "center", font: `24pt SpaceTac`, fill: "#a0a0a0" });
label_level.anchor.set(0.6, 0.5);
this.label.addChild(label_level);
this.addChild(this.label);

View file

@ -73,7 +73,7 @@ module TS.SpaceTac.UI {
UIComponent.setButtonSound(button);
var text = new Phaser.Text(this.game, 0, 76, caption,
{ align: "center", font: "bold 40pt Arial", fill: "#529aee" });
{ align: "center", font: "bold 40pt SpaceTac", fill: "#529aee" });
text.anchor.set(0.5, 0.5);
button.addChild(text);