WIP SpaceGame

SpaceGame/Resources/Components/HUD.js

@@ -1,72 +1,43 @@
 
 var game = Atomic.game;
-var ui = game.ui;
-var root = ui.getRoot();
+var view = game.uiView;
+var UI = Atomic.UI;
+var UIButton = Atomic.UIButton;
+var UITextField = Atomic.UITextField;
+var UILayout = Atomic.UILayout;
 
-var uiStyle = game.cache.getResource("XMLFile", "UI/DefaultStyle.xml");
-root.defaultStyle = uiStyle;
 
-var scoreText = new Atomic.Text();
+var layout = new Atomic.UILayout();
+layout.layoutDistribution = UI.LAYOUT_DISTRIBUTION_AVAILABLE;
+layout.layoutSize = UI.LAYOUT_SIZE_AVAILABLE;
+layout.load("UI/Hud.ui.txt");
 
-scoreText.text = "Score: 0";
-var font = game.cache.getResource("Font", "Fonts/Anonymous Pro.ttf");
+layout.setSize(1280, 720);
 
-scoreText.setFont(font, 24);
-scoreText.color = [0, 1, 0, 1];
+view.addChild(layout);
 
-scoreText.horizontalAlignment = Atomic.HA_RIGHT;
-scoreText.verticalAlignment = Atomic.VA_TOP;
-root.addChild(scoreText);
+game.viewport.rect = layout.getWidget("viewport").rect;
 
-var titleText = new Atomic.Text();
+var scoretext = layout.getWidget("scoretext");
 
-titleText.text = "Atomic Space Game";
+//UI.debugShowSettingsWindow(view);
 
-titleText.setFont(font, 18);
-titleText.color = [0, 1, 0, 1];
-
-titleText.horizontalAlignment = Atomic.HA_LEFT;
-titleText.verticalAlignment = Atomic.VA_TOP;
-root.addChild(titleText);
-
-var healthText = new Atomic.Text();
-
-healthText.text = "Health: 10";
-
-healthText.setFont(font, 18);
-healthText.color = [0, 1, 0, 1];
-
-healthText.horizontalAlignment = Atomic.HA_RIGHT;
-healthText.verticalAlignment = Atomic.VA_BOTTOM;
-root.addChild(healthText);
-
-var gameText = new Atomic.Text();
-
-gameText.setFont(font, 40);
-gameText.color = [0, 1, 0, 1];
-
-gameText.horizontalAlignment = Atomic.HA_CENTER;
-gameText.verticalAlignment = Atomic.VA_CENTER;
-root.addChild(gameText);
-
-if (Atomic.platform == "iOS" || Atomic.platform == "Android")
-	self.node.createJSComponent("TouchInput");
 
 self.updateScore = function (value) {
 
-    scoreText.text = "Score: " + value;
+	scoretext.text = "Score: " + value;
 
 }
 
 self.updateHealth = function (value) {
 
-    healthText.text = "Health: " + value;
+    //healthText.text = "Health: " + value;
 
 }
 
 self.updateGameText = function (text) {
 
-    gameText.text = text;
+    //gameText.text = text;
 
 }
 
@@ -77,4 +48,3 @@ function start() {
 function update(timeStep) {
 
 }
-

SpaceGame/Resources/Skin/skin.ui.txt

@@ -0,0 +1,14 @@
+elements
+	Spaceship
+		bitmap spaceship.png
+		pref-width 32
+		pref-height 32
+	SpaceGameContainer
+		type StretchBox
+		bitmap window.png
+		cut 16
+		expand 12
+		padding 8
+	SpaceText
+		text-color #00FF00
+

SpaceGame/Resources/UI/Hud.ui.txt

@@ -0,0 +1,25 @@
+#SpaceGame HUD
+
+# definitions is not a keyword, it is just a node which we can include later
+definitions
+	atomictext
+		skin SpaceText
+
+TBLayout: axis: y, distribution: available, size: available, spacing: 0
+	TBLayout: distribution: gravity
+		TBContainer: skin: "SpaceGameContainer", gravity: left right
+			TBLayout: distribution: available, size: available, spacing: 0
+				TBWidget:
+					TBTextField: text: "Score: 0", id: "scoretext", text-align: "left", gravity: left
+						@include definitions>atomictext
+						lp: width: 192
+						font: size: 24
+					TBTextField: text: "Atomic Space Game", gravity: all
+						@include definitions>atomictext
+						font: size: 24
+					TBLayout: gravity: right, distribution: available, size: available, spacing: 4
+						lp: width: 128, height: 32
+						TBSkinImage: skin: "Spaceship", id: "ship1"
+						TBSkinImage: skin: "Spaceship", id: "ship2"
+						TBSkinImage: skin: "Spaceship", id: "ship3"
+	TBWidget: id: "viewport"

UITests/Resources/Scripts/main.js

@@ -16,7 +16,7 @@ function start() {
 
 
     var uiNode = game.scene.createChild("UI");
-    uiNode.createJSComponent("TestButtons");
+    uiNode.createJSComponent("TestLifetime");
 
 }