{"__v":16,"_id":"548a6fbab77bb70b00ac8bf2","category":{"__v":14,"_id":"54890d71c178b40b00aa3086","project":"543b9b0065bf840e00b473d5","version":"543b9b0065bf840e00b473d8","pages":["548a63d41bd6c40b00f77728","548a6fbab77bb70b00ac8bf2","548adcb7b77bb70b00ac8c9d","548add501bd6c40b00f777d2","548ae445b77bb70b00ac8cad","548aef1bb77bb70b00ac8ccb","548af4b41bd6c40b00f777fc","548eb9d5e52d2b0b001b9a28","5508449ba42e812500b711f3","550a8eed42fff40d00ae60e3","550ce8fd6c0b4c0d00fd42fb","550ce9026c0b4c0d00fd42fd","550d840f11e8d00d00b80383","550e7e7f8387ac0d00ed9e1a"],"reference":false,"createdAt":"2014-12-11T03:20:17.529Z","from_sync":false,"order":5,"slug":"game-settings","title":"Game Settings"},"project":"543b9b0065bf840e00b473d5","user":"543b9aa865bf840e00b473d1","version":{"__v":11,"_id":"543b9b0065bf840e00b473d8","project":"543b9b0065bf840e00b473d5","createdAt":"2014-10-13T09:27:28.467Z","releaseDate":"2014-10-13T09:27:28.467Z","categories":["543b9b0065bf840e00b473d9","543b9ef065bf840e00b473e0","54890012f291f61400c02d36","54890902f291f61400c02d3e","54890c43f291f61400c02d44","54890d71c178b40b00aa3086","5508125c0c4d8c19008a5f83","55094050961f17170070abbd","550945111c38c50d006118ad","550a4c2e42fff40d00ae6049","55221c074801a40d00a77610"],"is_hidden":false,"is_beta":false,"is_stable":false,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2014-12-12T04:31:54.327Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"basic_auth":false,"results":{"codes":[]},"settings":"","try":true,"auth":"never","params":[],"url":""},"order":1,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Changing Menu Graphics\"\n}\n[/block]\nAlmost all UI elements are parented under the UIAnchor game object. In order to work on one of them, please disable the other anchors and focus on the one that interests you.\n\n**Shop**\nThe Shop menu has two active menus, Buildings and Creatures. Each button is linked to one of two prefabs, for instance BuildingButtonGold and BuildingButtonMana – depending on whether the building is bought using mana or gold.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/qh2iKBZnS3KXXxKxv6Oc\",\n        \"Screen Shot 2015-08-19 at 4.37.01 PM.png\",\n        \"1164\",\n        \"638\",\n        \"#71ab49\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nAfter you insert your own menu source images/sprites (ours are located in Sprites_NGUI), open the atlas maker in NGUI / Open / Atlas Maker and add your own sprites here. We recommend leaving our 'old' sprites till a later stage, since deleting them from the start would make a lot of interfaces appear incorrectly, with missing elements, etc.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/Hg1Kn1rUTJaRDx0TX3Je\",\n        \"Screen Shot 2015-08-19 at 4.37.09 PM.png\",\n        \"1165\",\n        \"639\",\n        \"#325259\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nOur backgrounds are tiled – composed of many small elements. The sprites are located in BackAtlas – you can insert your own, and assuming they have other sizes than 64x64px, make sure you change the Edit/Snap Settings to position them more easily.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/8IxaMYJOStaTOc1I1qLw\",\n        \"Screen Shot 2015-08-19 at 4.37.16 PM.png\",\n        \"1160\",\n        \"633\",\n        \"#6aa949\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nAlso, observe that there are some large background sprites – CheckerBk and CheckerBkShadow, to avoid the square checker appearance of the menus – because the backgrounds are tiled, you can see through some green lines from the grass underneath in some portions – although they are aligned with snap, the 'cracks' remain visible. Pay attention to the layer depth, so they appear correctly – having two visible elements on the same depth might appear correctly in the editor, but then flip at run-time (or any other time).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/zI4Cd8QrSNqfMaodybsA\",\n        \"Screen Shot 2015-08-19 at 4.37.28 PM.png\",\n        \"656\",\n        \"344\",\n        \"#72a8c0\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nIf at any time, the elements of your new buttons don't appear properly in the background/foreground, change the layer depth of the elements/their parents. They can be quite stubborn sometimes, but they can be fixed.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/ddN6VnjSRuHLs44mHhCc\",\n        \"Screen Shot 2015-08-19 at 4.37.34 PM.png\",\n        \"557\",\n        \"294\",\n        \"#64a948\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nFollowing these guidelines, you can see the updated menu we customized for a game.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/Ub8NRYF2QMSdQk5gfqP7\",\n        \"Screen Shot 2015-08-19 at 4.37.41 PM.png\",\n        \"1157\",\n        \"722\",\n        \"#4e8239\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/EYpsMYYoQYmQ7eW6rzfG\",\n        \"menu-design-strategy-game-ui.jpg\",\n        \"1136\",\n        \"640\",\n        \"#71bb56\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FeVih-8vL4_o%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DeVih-8vL4_o%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FeVih-8vL4_o%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\\\" width=\\\"854\\\" height=\\\"480\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://www.youtube.com/watch?v=eVih-8vL4_o&feature=youtu.be\",\n  \"title\": \"Disable HUD - Tutorial #7\",\n  \"favicon\": \"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico\",\n  \"image\": \"https://i.ytimg.com/vi/eVih-8vL4_o/hqdefault.jpg\"\n}\n[/block]\nLike all 2D isometric battle games, the menu options are accessible from large buttons on the interface. From top to bottom, these are:\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"**XP Bar**\",\n    \"0-1\": \"Value increases as buildings are produced and XP is gained. Standard in any 2D Building games.\",\n    \"1-0\": \"**Controls**\",\n    \"1-1\": \"Development controls. Use these arrows or zoom buttons for movement on non-iOS devices such as a desktop test. Hide in gameplay after development in this Unity Development Kit.\",\n    \"2-0\": \"**Builders**\",\n    \"2-1\": \"One building in construction is possible for every builder available and not currently used. On tap opens the in-game purchase menu to purchase additional builders in Unity social games.\",\n    \"h-0\": \"Element\",\n    \"h-1\": \"Description\",\n    \"3-0\": \"**Resources**\",\n    \"3-1\": \"Gold and Mana. Replace with your own terminology like Wood, Stone, Elixir, Silver, etc. Starts with predefined values in the XML of this casual game template. More can be purchased or generated in the game with resource producing buildings included in the Unity game starter kits.\",\n    \"4-1\": \"Click to buy more, perfect for your mobile game commercial template. Used to speed up time sensitive tasks. Cannot be generated in the game like soft-currencies. Require a purchase. Click to buy more in the in-game IAP menu. The best asset template to monetize what users buy.\",\n    \"4-0\": \"**Gems **\",\n    \"5-0\": \"**Battles**\",\n    \"5-1\": \"Requires players to produce certain buildings or characters before they can compete. A way to earn soft currency by attacking other players in the social game.\",\n    \"6-0\": \"**Settings**\",\n    \"6-1\": \"Control in-game settings like sound and music in this Unity Asset.\",\n    \"7-0\": \"**Shop **\",\n    \"7-1\": \"The central part of the game for purchasing and shopping for new characters, buildings, and items in this template game starter kit.\"\n  },\n  \"cols\": 2,\n  \"rows\": 8\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Object Options\"\n}\n[/block]\nThese menu objects only show when a building is selected. The example seen in the screenshot below include Move, Place, and Delete option buttons for the building selected.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/7nl5VBP1T6IsMpgdBLzP\",\n        \"strategy-game-template-upgrade-move-building.jpg\",\n        \"1136\",\n        \"640\",\n        \"#7b5f38\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Developer Scroll and Zoom Controls\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"How to Scroll\",\n  \"body\": \"Click each button once to activate, and click the opposite button to deactivate. \\nFor example, to scroll left click the (<) button, then click (>) to stop scrolling left.\"\n}\n[/block]\nThe Starter Kit is optimized for mobile app gameplay. It works great on your iOS or Android devices. This means buildings can be dragged and dropped, and you can pinch and zoom or tap the screen with your finger and drag to move around the map just like you would in any strategy city builder game.\n\nWhile you're developing your game in Unity, it may be more convenient to test the scene inside Unity instead of building a copy for your device. We've included developer controls in the top left of the scene to move around.  Click a button once to activate, and click the opposite button to deactivate. For example, to scroll left click the (<) button, then click (>) to stop scrolling left.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/woggNXj3SWDbfrVWC8jQ\",\n        \"unity-game-developer-controls-example.jpg\",\n        \"798\",\n        \"365\",\n        \"#42992f\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nWhen you are ready to publish your Unity mobile game, hide these controls. **Here's how to disable them:** \n\nFirst, in **Hierarchy**:\n1. Go to **UIAnchor/Anchor - Top Left**\n2. Disable **NavigBt** (navigation buttons) \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/8Q6TRvRmQsWuN61rq9QL\",\n        \"disable-navigation-buttons-for-developers-unity-starter-kit.jpg\",\n        \"999\",\n        \"562\",\n        \"#6cb04d\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThen, in the **Project Browser**:\n1. Open **Assets/Scripts/Menus/MainMenu.cs**\n2. In **ActivateInterface()** uncomment this line: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Uncomment to disable navigation buttons\\n// if(i!=9) \",\n      \"language\": \"csharp\",\n      \"name\": \"ActivateInterface()\"\n    }\n  ]\n}\n[/block]\nUncommenting this line in **MainMenu.cs** will prevent the navigation buttons from being reactivated when switching between menus during the game.","excerpt":"","slug":"menu-ui","type":"basic","title":"Menu UI"}

Menu UI


[block:api-header] { "type": "basic", "title": "Changing Menu Graphics" } [/block] Almost all UI elements are parented under the UIAnchor game object. In order to work on one of them, please disable the other anchors and focus on the one that interests you. **Shop** The Shop menu has two active menus, Buildings and Creatures. Each button is linked to one of two prefabs, for instance BuildingButtonGold and BuildingButtonMana – depending on whether the building is bought using mana or gold. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/qh2iKBZnS3KXXxKxv6Oc", "Screen Shot 2015-08-19 at 4.37.01 PM.png", "1164", "638", "#71ab49", "" ] } ] } [/block] After you insert your own menu source images/sprites (ours are located in Sprites_NGUI), open the atlas maker in NGUI / Open / Atlas Maker and add your own sprites here. We recommend leaving our 'old' sprites till a later stage, since deleting them from the start would make a lot of interfaces appear incorrectly, with missing elements, etc. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/Hg1Kn1rUTJaRDx0TX3Je", "Screen Shot 2015-08-19 at 4.37.09 PM.png", "1165", "639", "#325259", "" ] } ] } [/block] Our backgrounds are tiled – composed of many small elements. The sprites are located in BackAtlas – you can insert your own, and assuming they have other sizes than 64x64px, make sure you change the Edit/Snap Settings to position them more easily. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/8IxaMYJOStaTOc1I1qLw", "Screen Shot 2015-08-19 at 4.37.16 PM.png", "1160", "633", "#6aa949", "" ] } ] } [/block] Also, observe that there are some large background sprites – CheckerBk and CheckerBkShadow, to avoid the square checker appearance of the menus – because the backgrounds are tiled, you can see through some green lines from the grass underneath in some portions – although they are aligned with snap, the 'cracks' remain visible. Pay attention to the layer depth, so they appear correctly – having two visible elements on the same depth might appear correctly in the editor, but then flip at run-time (or any other time). [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/zI4Cd8QrSNqfMaodybsA", "Screen Shot 2015-08-19 at 4.37.28 PM.png", "656", "344", "#72a8c0", "" ] } ] } [/block] If at any time, the elements of your new buttons don't appear properly in the background/foreground, change the layer depth of the elements/their parents. They can be quite stubborn sometimes, but they can be fixed. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/ddN6VnjSRuHLs44mHhCc", "Screen Shot 2015-08-19 at 4.37.34 PM.png", "557", "294", "#64a948", "" ] } ] } [/block] Following these guidelines, you can see the updated menu we customized for a game. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/Ub8NRYF2QMSdQk5gfqP7", "Screen Shot 2015-08-19 at 4.37.41 PM.png", "1157", "722", "#4e8239", "" ] } ] } [/block] [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/EYpsMYYoQYmQ7eW6rzfG", "menu-design-strategy-game-ui.jpg", "1136", "640", "#71bb56", "" ] } ] } [/block] [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FeVih-8vL4_o%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DeVih-8vL4_o%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FeVih-8vL4_o%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://www.youtube.com/watch?v=eVih-8vL4_o&feature=youtu.be", "title": "Disable HUD - Tutorial #7", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/eVih-8vL4_o/hqdefault.jpg" } [/block] Like all 2D isometric battle games, the menu options are accessible from large buttons on the interface. From top to bottom, these are: [block:parameters] { "data": { "0-0": "**XP Bar**", "0-1": "Value increases as buildings are produced and XP is gained. Standard in any 2D Building games.", "1-0": "**Controls**", "1-1": "Development controls. Use these arrows or zoom buttons for movement on non-iOS devices such as a desktop test. Hide in gameplay after development in this Unity Development Kit.", "2-0": "**Builders**", "2-1": "One building in construction is possible for every builder available and not currently used. On tap opens the in-game purchase menu to purchase additional builders in Unity social games.", "h-0": "Element", "h-1": "Description", "3-0": "**Resources**", "3-1": "Gold and Mana. Replace with your own terminology like Wood, Stone, Elixir, Silver, etc. Starts with predefined values in the XML of this casual game template. More can be purchased or generated in the game with resource producing buildings included in the Unity game starter kits.", "4-1": "Click to buy more, perfect for your mobile game commercial template. Used to speed up time sensitive tasks. Cannot be generated in the game like soft-currencies. Require a purchase. Click to buy more in the in-game IAP menu. The best asset template to monetize what users buy.", "4-0": "**Gems **", "5-0": "**Battles**", "5-1": "Requires players to produce certain buildings or characters before they can compete. A way to earn soft currency by attacking other players in the social game.", "6-0": "**Settings**", "6-1": "Control in-game settings like sound and music in this Unity Asset.", "7-0": "**Shop **", "7-1": "The central part of the game for purchasing and shopping for new characters, buildings, and items in this template game starter kit." }, "cols": 2, "rows": 8 } [/block] [block:api-header] { "type": "basic", "title": "Object Options" } [/block] These menu objects only show when a building is selected. The example seen in the screenshot below include Move, Place, and Delete option buttons for the building selected. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/7nl5VBP1T6IsMpgdBLzP", "strategy-game-template-upgrade-move-building.jpg", "1136", "640", "#7b5f38", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Developer Scroll and Zoom Controls" } [/block] [block:callout] { "type": "info", "title": "How to Scroll", "body": "Click each button once to activate, and click the opposite button to deactivate. \nFor example, to scroll left click the (<) button, then click (>) to stop scrolling left." } [/block] The Starter Kit is optimized for mobile app gameplay. It works great on your iOS or Android devices. This means buildings can be dragged and dropped, and you can pinch and zoom or tap the screen with your finger and drag to move around the map just like you would in any strategy city builder game. While you're developing your game in Unity, it may be more convenient to test the scene inside Unity instead of building a copy for your device. We've included developer controls in the top left of the scene to move around. Click a button once to activate, and click the opposite button to deactivate. For example, to scroll left click the (<) button, then click (>) to stop scrolling left. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/woggNXj3SWDbfrVWC8jQ", "unity-game-developer-controls-example.jpg", "798", "365", "#42992f", "" ] } ] } [/block] When you are ready to publish your Unity mobile game, hide these controls. **Here's how to disable them:** First, in **Hierarchy**: 1. Go to **UIAnchor/Anchor - Top Left** 2. Disable **NavigBt** (navigation buttons) [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/8Q6TRvRmQsWuN61rq9QL", "disable-navigation-buttons-for-developers-unity-starter-kit.jpg", "999", "562", "#6cb04d", "" ] } ] } [/block] Then, in the **Project Browser**: 1. Open **Assets/Scripts/Menus/MainMenu.cs** 2. In **ActivateInterface()** uncomment this line: [block:code] { "codes": [ { "code": "// Uncomment to disable navigation buttons\n// if(i!=9) ", "language": "csharp", "name": "ActivateInterface()" } ] } [/block] Uncommenting this line in **MainMenu.cs** will prevent the navigation buttons from being reactivated when switching between menus during the game.