Beautify UI

TowerForge/TowerForge/AppMain/Base.lproj/Main.storyboard

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="32700.99.1234" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="NJ9-hN-4Nf">
-    <device id="ipad10_9rounded" orientation="portrait" layout="fullscreen" appearance="light"/>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="22505" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="NJ9-hN-4Nf">
+    <device id="ipad12_9" orientation="landscape" layout="fullscreen" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22684"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22504"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -14,7 +14,7 @@
             <objects>
                 <viewController title="GameViewController" wantsFullScreenLayout="YES" modalPresentationStyle="fullScreen" id="BV1-FR-VrT" customClass="GameViewController" customModule="TowerForge" customModuleProvider="target" sceneMemberID="viewController">
                     <view key="view" multipleTouchEnabled="YES" contentMode="scaleToFill" id="3se-qz-xqx" customClass="SKView">
-                        <rect key="frame" x="0.0" y="0.0" width="820" height="1180"/>
+                        <rect key="frame" x="0.0" y="0.0" width="1366" height="1024"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <viewLayoutGuide key="safeArea" id="4qk-I5-YsI"/>
                         <color key="backgroundColor" systemColor="systemBackgroundColor"/>
@@ -29,41 +29,44 @@
         <scene sceneID="vFw-SO-Nq3">
             <objects>
                 <viewController title="MainMenuViewController" id="NJ9-hN-4Nf" customClass="MainMenuViewController" customModule="TowerForge" customModuleProvider="target" sceneMemberID="viewController">
-                    <view key="view" contentMode="scaleToFill" id="QTh-pm-dcu">
-                        <rect key="frame" x="0.0" y="0.0" width="820" height="1180"/>
+                    <view key="view" contentMode="scaleAspectFill" id="QTh-pm-dcu">
+                        <rect key="frame" x="0.0" y="0.0" width="1366" height="1024"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Itc-dO-lSy">
-                                <rect key="frame" x="357.5" y="722.5" width="105" height="35"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="filled" title="Play Game"/>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="background" translatesAutoresizingMaskIntoConstraints="NO" id="BeN-nt-myH">
+                                <rect key="frame" x="0.0" y="389" width="1366" height="635"/>
+                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                            </imageView>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="logo" translatesAutoresizingMaskIntoConstraints="NO" id="1WN-bo-aqT">
+                                <rect key="frame" x="285" y="20" width="796" height="607"/>
+                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                            </imageView>
+                            <button opaque="NO" contentMode="scaleToFill" misplaced="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Itc-dO-lSy">
+                                <rect key="frame" x="535" y="615" width="296" height="80"/>
+                                <buttonConfiguration key="configuration" style="filled" title="Play Game">
+                                    <color key="baseForegroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                </buttonConfiguration>
                                 <connections>
                                     <segue destination="BV1-FR-VrT" kind="show" identifier="segueToGame" id="hzG-cy-bt1"/>
                                 </connections>
                             </button>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="TowerForge" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="bv5-8z-jVe">
-                                <rect key="frame" x="252" y="302" width="316" height="76.5"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="64"/>
-                                <nil key="textColor"/>
-                                <nil key="highlightedColor"/>
-                            </label>
                         </subviews>
                         <viewLayoutGuide key="safeArea" id="0sR-0W-mF4"/>
                         <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                         <constraints>
-                            <constraint firstItem="bv5-8z-jVe" firstAttribute="centerY" secondItem="QTh-pm-dcu" secondAttribute="centerY" constant="-250" id="USB-XJ-Fmh"/>
-                            <constraint firstItem="bv5-8z-jVe" firstAttribute="centerX" secondItem="QTh-pm-dcu" secondAttribute="centerX" id="VXw-SM-1j3"/>
                             <constraint firstItem="Itc-dO-lSy" firstAttribute="centerX" secondItem="QTh-pm-dcu" secondAttribute="centerX" id="WHv-Ev-8P8"/>
                             <constraint firstItem="Itc-dO-lSy" firstAttribute="centerY" secondItem="QTh-pm-dcu" secondAttribute="centerY" constant="150" id="cHw-CH-V3j"/>
                         </constraints>
                     </view>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="EMN-tQ-Alx" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="-684.14634146341461" y="-2.0338983050847457"/>
+            <point key="canvasLocation" x="-684.33382137628109" y="-2.34375"/>
         </scene>
     </scenes>
     <resources>
+        <image name="background" width="1000" height="500"/>
+        <image name="logo" width="1000" height="500"/>
         <systemColor name="systemBackgroundColor">
             <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
         </systemColor>

TowerForge/TowerForge/Assets.xcassets/Sprites.spriteatlas/melee-1.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "melee-1.png",
+      "filename" : "image-1.png.png",
       "idiom" : "universal",
       "scale" : "1x"
     },

TowerForge/TowerForge/Assets.xcassets/Sprites.spriteatlas/melee-2.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "melee-2.png",
+      "filename" : "image-2.png.png",
       "idiom" : "universal",
       "scale" : "1x"
     },

TowerForge/TowerForge/Assets.xcassets/background.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "background.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

TowerForge/TowerForge/Assets.xcassets/logo.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "logo.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

TowerForge/TowerForge/Assets.xcassets/start-button.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "start-button.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

TowerForge/TowerForge/GameWorld.swift

@@ -22,6 +22,7 @@ class GameWorld {
         systemManager = SystemManager()
         eventManager = EventManager()
         selectionNode = UnitSelectionNode()
+
         grid = Grid(eventManager: eventManager, screenSize: screenSize)
         if let scene = self.scene {
             grid.generateTileMap(scene: scene)
@@ -82,16 +83,16 @@ class GameWorld {
         selectionNode.delegate = grid
         scene?.addChild(selectionNode)
         // Position unit selection node on the left side of the screen
-        selectionNode.position = CGPoint(x: selectionNode.frame.width / 2, y: scene?.frame.midY ?? 300)
+        selectionNode.position = CGPoint(x: 500, y: selectionNode.height / 2)
 
         // Calculate vertical spacing between unit nodes
-        let verticalSpacing = selectionNode.frame.height
-        var verticalY = 10.0
+        var horizontalX = 10.0
         // Position unit nodes vertically aligned
         for unitNode in selectionNode.unitNodes {
-            unitNode.position = CGPoint(x: selectionNode.frame.width / 2,
-                                        y: verticalY)
-            verticalY += verticalSpacing
+            let horizontalSpacing = unitNode.frame.width
+            unitNode.position = CGPoint(x: horizontalX,
+                                        y: 0)
+            horizontalX += horizontalSpacing
         }
     }
 }

TowerForge/TowerForge/Grid.swift

@@ -8,7 +8,7 @@
 import SpriteKit
 
 class Grid: UnitSelectionNodeDelegate {
-    let DEFAULT_NO_OF_ROWS = 8
+    let DEFAULT_NO_OF_ROWS = 5
 
     private var eventManager: EventManager
     private var noOfRows: Int
@@ -30,7 +30,7 @@ class Grid: UnitSelectionNodeDelegate {
 
     func generateTileMap(scene: SKScene) {
         let screenWidth = self.width
-        let screenHeight = self.height
+        let screenHeight = self.height - 200
         let tileSize = CGSize(width: screenHeight / CGFloat(noOfRows), height: screenHeight / CGFloat(noOfRows))
 
         // Calculate the number of columns needed to cover the screen width
@@ -41,7 +41,7 @@ class Grid: UnitSelectionNodeDelegate {
                 let node = TFSpriteNode(imageName: "road-tile", height: tileSize.height, width: tileSize.width)
                 node.anchorPoint = CGPoint(x: 0, y: 0)
                 node.position = CGPoint(x: CGFloat(CGFloat(col) * tileSize.width),
-                                        y: CGFloat(CGFloat(row) * tileSize.height))
+                                        y: CGFloat(CGFloat(row) * tileSize.height) + 200)
                 node.zPosition = -100
                 scene.addChild(node)
             }
@@ -50,10 +50,10 @@ class Grid: UnitSelectionNodeDelegate {
 
     private func snapYPosition(yPosition: Double) -> Double {
         let normalizedYPosition = normalizeYPosition(yPosition: yPosition)
-        let screenHeight = Double(UIScreen.main.bounds.height)
+        let screenHeight = Double(UIScreen.main.bounds.height) - 200
         let rowHeight = screenHeight / Double(noOfRows)
         let rowIndex = Int(normalizedYPosition / rowHeight)
-        let centerY = Double(rowIndex) * rowHeight + rowHeight / 2
+        let centerY = (Double(rowIndex) * rowHeight + rowHeight / 2) + 200
         return denormalizeYPosition(yPosition: centerY)
     }
 

TowerForge/TowerForge/Nodes/UnitSelectionNode.swift

@@ -27,11 +27,15 @@ class UnitSelectionNode: TFSpriteNode, UnitNodeDelegate {
 
         isUserInteractionEnabled = true
         let possibleUnits: [(TFEntity & PlayerSpawnable).Type] = SpawnableEntities.playerSpawnableEntities
+        var startingPoint = CGPoint(x: 400, y: 0)
         for type in possibleUnits {
             let unitNode = UnitNode(ofType: type)
+            unitNode.position = startingPoint
             unitNodes.append(unitNode)
             unitNode.delegate = self
             addChild(unitNode)
+
+            startingPoint.x += 140
         }
     }