App Reskinning Tutorial: Reskinning Process

How to modify game icons and launch images

What you will want to do now is change the game icons and the game launch images to the ones you need for your game.
According to the theme of your game, you might wanna go for icons and images that are related to that theme. If you have trouble creating your own game icons and launch images, you may go watch for free "Tips and Tricks on Making Mobile Game Graphics - non artists" on Udemy.

app home icon

Next step, launch the game and click on the "Home" button. you'll see the small icon that comes with the game. You do not want that icon, but have your own instead. Also, you will also need to change the launch image, which is the first image that will appear while your app is initializing.

change image app folder

To do that, go to your Xcode project, make sure your game folder is open, right click on it then select "Show in Finder".
Within that game folder, you will see a folder named "icon_free", since we're working on a free game. It will contain different icon dimensions which are going to be used on different devices (Retina display as well).

different game icon sizes

You will need to change those game icons within that "icon_free" folder with your owns. You could also have the icons created for you by a professional.
Check our Icon Packs or you could easily go to online workplaces like Elance and oDesk where you can hire freelancers to create them for you.
Now locate your own game icons, name them the same way as the ones inside the "icon_free" folder. Copy and paste your own 4, then paste them on top of the ones within "icon_free" to replace them. Voila! It's that easy.

copy game icons

You can do exactly the same with your game launch images which are located within the project root folder.

launch images location

You can locate the dimensions in pixels of each image at the bottom right. If you want to see how it's going to end up looking, you'll definitely need to click "Product" at the top, then select and click "Clean" (This may take a little while).

run product clean to see new icons

If you don't, you won't be able to see your changes. Now click on "Play" at the top left to launch the game in the iPhone Simulator and see your new icons and launch images.

click play to run the game

Hit the "Home" button to see your new updated game icons.

How to modify the main game graphics

What you want to do next is to change the main graphics of the game. Same as before, go to your Xcode project and right click on it to select "Show in Finder". Move one directory back and click the folders "resources" => "assets" => "textures" where you will find the main graphic assets. As we previously mentioned, you'll notice each graphic's dimensions at the bottom. Take time to explore each game graphic and see what it refers to in the game and what its function is. If you click on the crocodile folder, you will see a crocodile.png file which you can replace with your own game graphic. In the same location folder, there is a folder called "anim", within which there are 9 animation images for each frame with their own dimensions. Therefore, you will need to have an animated graphic in 9 animated steps, the same way the structure is laid out. Once your game graphics have been created, name them exactly like it is shown in the game source code, so you won't have any trouble to just copy and paste/replace them within the specific game folders. If all the game files have been named properly, you could even select and copy the whole folder itself and replace it on top of the one from the source code (inside the main "xcode_projects" folder). Next, go to the "gui" folder, and you'll notice no buttons and no assets were changed except for the "fp.png" file instead of the previous "flappy crocodile". Just like previously, you will have to do a "Product Clean" and "Product Build" to check if your app latest changes have been taken into account. Click "Play/Run" to recompile everything with the new game graphics and run your app in the iPhone simulator. You should be able to see your new app name and the new main graphic character.

How to modify the game sounds

By game sounds, we mean the background music and the special effects sounds. The "sound" folder location resides where the previous "textures" folder was located. Click it and you should now see all the different sound assets (.mp3, .ogg). The .ogg format would be for Android, however, you won't be needing it for the purpose of this course. You're only going to be using .mp3. Take some time to explore what each sound files does and the file names should indicate what the sound is about. You will need to find on your own some .mp3 music backgrounds to replace the ones from the game source code. You could google free game background musics and see where that takes you for example, or buy some as cheap as $0.99. In addition to that, the website might also be worth a shot. Finally, to test the game sounds out, repeat the same "Product Clean" procedure we mentioned earlier.

How to use our game Graphic Packs and Icon Templates in your AppsFresh app source code.

Drop our professional Icon Templates in your source code


Example on how to switch game Graphic assets for the Jumpy Skating game source code