How to Reskin "Modern Island Defense" game

Many of you asking us how the process of game reskin looks like. We decided to create a detailed explanation on game reskinning process.
Basically you just need to replace the existing images with the new ones. Below please find a detailed explanation on how to perform this operation:

Step 1 : Start a desktop version of the app

pic1-desktopversion We incorporated a desktop version of the app which can be executed on Windows in the package with sources. We would recommend using it in order to make sure that the new images are configured properly in the game. Each time you update the image or animation - start the desktop app and make sure that they are properly aligned with other objects in the game:

There is a "resources" folder.
pic2-resources Once you update the image in the folder it appears in the desktop version of the game.

Step 2 : Create new backgrounds for levels

pic3-maps In the "\Resources\images\maps" folder you can find thge images of maps utilized in the game. Update them to create new levels.

Step 3 : Reskin units

Open \IslandDefense\bin\Resources\images\creeps folder the images of enemies are stored here along with theirs animation. The example of the image is at the right:

To create the image above you need to perform the following steps:

1. Create animation in your favorite editor

cyberman1

2. Create the following movements for them:

  • Running

  • Firing

  • Dying


  • It does not matter how you name files at this stage.

    pic10

    3. Create separate frames in *.PNG format for each of the movement. It is up to you

    to name the files and choose a number of frames.

    4. Run Texture Packer and convert the *.PNG files created in Step #3 in one packed

    file.

    5. You will receive a configuration file with a name for each of the sprite (key)

    which will match the name of the source PNG file

    6. Go to \IslandDefense\bin\Resources\ini\units folder and open a configuration

    file for a unit you want to reskin.

    7. Set appropriate keys in packed image for each of the movent in the lines like this one:


    <action name="animate_die" value="Animate[1.0,[folder:soldier.die::,indexes:solder1_die00.png,01:20]]"/>

    In the example below the keys for images of dying are solder1_die00 (01,02,03... e. t. c.)

    Step 4 : Edit and Create Levels

    pic4-levels To add a new level you just need to

    1. Create an image background for the level in your favorite image editor.

    2. Create a new *.XML configuration of the level and put it to

    bin\Resources\ini\maps folder. The configuration file contains lines like on the

    screenshot on the right:

    3. Open a level editor, choose a newly created level and carefully set the new paths

    for it.

    pic5-paths

    Step 5 : Create a new map

    To add a new level you gust need to:

    1. Create an image for the new map and put it in the "images/map" folder

    2. Set coordinates for "flags" which will appear at the map

    Step 6a : iOS Configure In-App Purchases

    Configure the following list of in-app purchases:

    pic8-inapps-ios

    Name: fuel1, Description: 250 fuel

    Name: gear1, Description: 300 gears

    Name: gear2, Description: 600 gears

    Name: gear3, Description: 1200 gears

    Name: gold1, Description: 1540 golds

    Name: gold2, Description: 3390 golds

    Name: gold3, Description: 5550 golds

    Name: gold4, Description: 8010 golds

    Name: gold5, Description: 10780golds

    Step 6b : Android Configure In-App Purchases

    Configure the following list of in-app purchases:

    pic9-inapps-googleplay

    Name: fuel1, Description: 250

    Name: fuel2, Description: 20

    Name: fuel3, Description: 30

    Name: gear1, Description: 300

    Name: gear2, Description: 600

    Name: gear3, Description: 1200

    Name: gold1, Description: 1540

    Name: gold2, Description: 3390

    Name: gold3, Description: 5550

    Name: gold4, Description: 8010

    Name: gold5, Description: 10780

    Step 7 : Configure Vungle, Chartboost and Flurry

    iOS
    Open /proj.ios_mac/ios/AppController.cpp file

    and update IDs.

    Android
    Chartboost: CB_AI - AppID, CB_AS - App Signature
    Flurry: FL_AI - AppID
    TapJoy: TJ_AI - AppID, TJ_SK - Secret key
    Vungle: /proj.android/src/org/cocos2dx/cpp/Vungle.java

    Step 8 : Build iOS and Android version

    How to build a game on MAC. Download instructions here
    To build the game on Eclipse/Windows.
    Menu => File => New => Other... => Android Project from Exiting Code =>
    Choice "IslandDefense", "library" (android inapp billing...), "libcocos2dx" & "google-play-services_lib" projects

    Step 9 : Publish Game to Google Play and iTunes.

    Congratulations!
    Your new game is ready now and your happy users will download it from the stores!
    + How we made $200K with 4M downloads.

    How we made $200K with 4M downloads.