{"id":9528,"date":"2016-11-02T12:43:04","date_gmt":"2016-11-02T12:43:04","guid":{"rendered":"http:\/\/beta.coherent-labs.com\/?p=9528"},"modified":"2017-11-14T13:57:19","modified_gmt":"2017-11-14T13:57:19","slug":"how-to-create-a-modern-battle-deck-screen-for-mobile-strategy-game","status":"publish","type":"post","link":"https:\/\/coherent-labs.com\/posts\/how-to-create-a-modern-battle-deck-screen-for-mobile-strategy-game\/","title":{"rendered":"How to create a modern Battle deck screen for Mobile Strategy Game?"},"content":{"rendered":"

The strategy game genre is one of the most popular among the mobile game players. Clash of Clans, Game of War and Boom Beach are titles that attract thousands of players and generate billions of dollars in revenue. How do the mobile game development studios create such addictive gameplay so they make the players come back time after time?<\/p>\n

To create an addictive mobile game you need to design a great user flow and user experience. You have to think through every element of the game from gameplay, reward system, user interactions to the user interface.<\/p>\n

In this tutorial, I will show you how to get started on one mandatory screen for the strategy games genre – the battle deck screen. I will use the Coherent visual editor<\/a>.<\/p>\n

Here is an image of what you will get in the end of the tutorial. All images used for the sample are created by our designer in Photoshop. You will get them with the evaluation version of Hummingbird.<\/p>\n

\"Strategy<\/p>\n

Open the Coherent Editor and start by creating a new file and setting the resolution to custom width: 750 px and height: 1334 px.<\/p>\n

We will divide the screen into 3 main sections:<\/p>\n

    \n
  1. Top section<\/strong> – containing the player level, experience, coins and emeralds collected.<\/li>\n
  2. Middle section<\/strong> – for the battle deck tabs, hero portraits, and an average cost field.<\/li>\n
  3. Bottom section<\/strong> – including elements for the background, cards collection information and a tab menu for different parts of the game UI<\/li>\n
  4. Hero popup<\/strong> with title and text inside.<\/li>\n<\/ol>\n

    Top Section<\/strong><\/h4>\n

    \"Top_menu\"<\/p>\n

     <\/p>\n

    1. Top section wrapper + background image<\/p>\n

    You are going to create a <\/span>responsive image<\/strong> for the background of the <\/span>top section<\/strong> and use it as a <\/span>wrapper<\/strong> in which to\u00a0<\/span>nest<\/strong> the rest of the elements. <\/span>A responsive image is essentially a div with \u0430\u00a0background image<\/i><\/strong> so we can use it as a wrapper.<\/span><\/p>\n

    Create a responsive image <\/strong>( ID is <\/span>topSection)<\/strong>\u00a0use the bg_header.png image. It is <\/span>going to be as wide as the screen, so set the width to 56.5vh. Rename it from the Properties panel to topSection<\/strong>.<\/span><\/p>\n

    Player Level Flag<\/strong><\/p>\n

    1.1 The first inner element will be the shadow of the flag (levelFlagShadow – shadow_iconKingdom.png). Drag the image from the Assets Library or create it by using the panel on the left hand side. Click on “Responsive image” inside “Create elements”. Firstly, nest it inside topSection by dragging and dropping it in the Hierarchy panel. Then, place it in the left corner vertically centered. Rename the image to levelFlagShadow.<\/span><\/p>\n

    1.2 The second element is the actual flag icon which will sit on top of the shadow (levelFlag). Create it, nest it in topSection and place it over the flag shadow. Rename the image to levelFlag.<\/span><\/p>\n

    1.2.1 Inside the levelFlag, create a text element called mainLevel<\/strong> which will show the <\/span>player level value<\/strong>. You can edit the text size and position from the left panel -> Properties -> <\/span>Text properties. <\/strong>Change the size of the text to 4 and the color to white.<\/span><\/p>\n

    \"flag-and-shadow\"<\/span><\/p>\n

    Experience field<\/strong><\/p>\n

    1.3 For the next element create a responsive image named expBar (bg_Kingdom.png) and nest a text element inside it, just like in the previous element.<\/span><\/p>\n

    \"experience_field\"<\/p>\n

    Coins collected<\/strong><\/p>\n

    Create a responsive image named coinsBar ((bg<\/span>Gold<\/span><\/i>Crystals.png) with a text element (coinsValue) inside, just like in the previous element.<\/span><\/p>\n

    So far you have:<\/span><\/p>\n

    1.4 Coins image (wrapper)<\/span><\/p>\n

    1.4.1 The actual coins value<\/span><\/p>\n

    You need to add 3 more elements from the Asset Library panel:<\/span><\/p>\n

    1.4.2 Image for the “Plus” icon (coinsPlusIcon) <\/span><\/p>\n

    1.4.3 Image for the shadow of the coin underneath it (coinsIconShadow). <\/span><\/p>\n

    ! It is important that the shadow image is placed higher in the hierarchy than the coin image. In such a way the shadow will be placed underneath the image.<\/span><\/i><\/p>\n

    1.4.4 \u00a0Another image for the “Coin” icon (coinIcon)<\/span><\/p>\n

    \"coins_collected\"<\/p>\n

    Gemstones count<\/strong><\/p>\n

    To create the gemstone image, simply copy and paste the previous element (coinsBar), change the IDs to emerald, move it to the right and change the two images (for the emerald icon and its shadow).<\/span><\/p>\n

    \"gems_collected\"<\/p>\n

    Middle Section<\/strong><\/h4>\n

    Here you have 4 distinctive elements the middleSection which is a background element with nine sliced background image; battle deck tabs for the list of heroes; hero boxes and average resource cost field.<\/span><\/p>\n

    \"middle_section\"<\/p>\n

    2.1 <\/span>The background image<\/strong> (middleFrame)<\/span><\/p>\n

    Create a nine sliced rectangle image from the Create element panel<\/strong> with width 33.7vh and height 41.4vh. Name it <\/span>middleFrame <\/strong>and change the background color of the image from the Properties>Background>background to rgba(35, 31, 30, 1)<\/span><\/p>\n

    Create a *.css file in our <\/span>CSS<\/strong> folder (..\\Editor\\uiresources\\css) and name it <\/span>rts.css<\/strong>. Copy and paste the following CSS script which will add a frame around the rectangular image.<\/span><\/p>\n

    #middleFrame {<\/span>
    \n<\/span> \u00a0\u00a0\u00a0border-top: 12.36vh solid transparent;<\/span>
    \n<\/span> \u00a0\u00a0\u00a0border-bottom: 12.36vh solid transparent;<\/span>
    \n<\/span> \u00a0\u00a0\u00a0border-left: 11.4vh solid transparent;<\/span>
    \n<\/span> \u00a0\u00a0\u00a0border-right: 11.4vh solid transparent;<\/span>
    \n<\/span> \u00a0\u00a0\u00a0border-image: url(“..\/images\/frame_9slice.png”) stretch;<\/span>
    \n<\/span> \u00a0\u00a0\u00a0border-image-slice: 165;<\/span><\/p>\n

    \u00a0\u00a0\u00a0border-image-width: 12.36vh;<\/span>
    \n<\/span>}<\/span>
    \n<\/span><\/p>\n

    From the Editor in the Assets Library<\/strong>, scroll down and you will see the Style menu<\/strong>, click on the “+” symbol, navigate to the CSS folder and “Open” the CSS file you have just created. It will be added at the bottom of the Style list, click on it to activate it – this will include it in the HTML.<\/span><\/p>\n

    Now, the width of middleFrame<\/strong> is a total of 56.5vh = 33.7vh + 2*11.4vh (border sides). Place the element in the left corner under the topSection<\/strong> element.<\/span><\/p>\n

    2.2 <\/span>Battle Deck Tabs<\/strong><\/p>\n

    2.2.1 You will create the next element with a flex wrapper – click on the second tab of Create elements>Flexible panel<\/span><\/p>\n

    \"flex_wrapper\"<\/p>\n

    Create a flexible panel with width 56.5\u00a0vh name it deckCentering<\/strong> and from its Properties > Basic set <\/span>JustifyContent<\/strong> to <\/span>center<\/strong>. Set the background of the element to transparent.<\/span><\/p>\n

    2.2.1.1 Import the image <\/span>bgDeckName.png <\/strong>and nest it in<\/span> the battle deck wrapper. Rename it to battleDeckTabs<\/strong>.<\/span><\/p>\n

    2.2.1.1.1 Inside the battle deck wrapper create a text element for the title with name battleDeckLabel<\/strong>.<\/span><\/p>\n

    2.2.1.1.2 Create text element for the number of the tab (tab1<\/strong>), position it in the center of the first tab cell.<\/span><\/p>\n

    2.2.1.1.3 Add an image selectBattleDeck<\/strong>\u00a0(it will be used for marking the current tab selected) and rename it to tabSelected1<\/strong>. Position the image so that it covers the border of the tab cell.<\/span><\/p>\n

    For the rest of the tab cells, copy and paste each tab and selected tab elements and position them in the intended places.<\/span><\/p>\n

    \"battle-deck\"<\/p>\n

    2.3 <\/span>Hero Portraits<\/strong><\/p>\n

    The Hero portrait (heroImage1) is made of several elements layered on top of one another. Be careful about <\/span>Hierarchy position<\/strong> and the <\/span>z-index<\/strong> of the elements. The position of the elements in the Hierarchy corresponds directly to how they are represented\/nested\/created\/positioned in the HTML.<\/span><\/p>\n

    \"hero_portrait\"<\/p>\n

    Here is the frame which you will use for every hero portrait:<\/span><\/p>\n

    \"cardframe\"<\/p>\n

    The hero avatar should visually be inside the frame. Also, the progress bar at the bottom should be inside the frame.<\/span><\/p>\n

    2.3 Create a wrapper (heroImage1) which will contain the whole portrait and will be used for the hero avatar. Import image <\/span>avatar1.png. <\/strong>Now, you will nest<\/span> inside we need 3 more elements:<\/span><\/p>\n