Attention: If you are using Kwik 3, simply use the Project Template option. This tutorial is not necessary, although you may learn a few things about Kwik.
As you know, I always suggest people to think about different platforms before starting their Kwik project. Knowing the devices you plan to publish your app helps you to select the correct “device” option when you create your project. As a rule of thumb, my suggestion is always to create Universal (or New Universal, if you plan to have retina images for the new iPad) when targeting different devices. Doing so, your images will be stretched to fit different screen ratios but, usually, the results are pretty good and most people will not notice that some images were modified.

However, some people prefer to create different project files for each platform. It provides much more control on the quality of the images but requires several steps (which I will cover below) to get it done, as well as requires to review each layer and animation positioning.

So, if you want to know what to do to reproduce the same content in different project folders, pick your favorite text editor and prepare yourself to dig into the “world of .kwk files”.

Understanding how Kwik works

A Kwik project contains the following elements:

• A project folder created under your Default Project folder (you set this via Settings->General tab – for more info, check the user guide). Kwik automatically creates this folder when you create a new project, using the Kwik interface. This folder has the same name of your project, with spaces being replaced by _ (underscore);
• A “SameProjectFolderName.kwk” file will be created inside the project folder. This is a XML file (text format) that contains all project settings plus references to all interactions, animations, etc, you set via the Kwik interface (more on that later);
• One Photoshop file (.psd) file for each project page. Yes, if you are new to Kwik, each composition is a page in your project;

After hitting the Publish button for the first time, Kwik will create, under your project folder, a folder named build, which will hold all content required by Corona Simulator to simulate and/or build your final app. This folder will contain:

• A folder called audio, which will hold all audio files used in the project;
• A folder called images, which will hold all image files used in the project;
• A file called build.settings, which contains information about each target platform, and the resources need by each one;
• A filled called config.lua, which contains information about resolutions of each platform;
• A filled called main.lua, which is the first file that Corona reads while opening your project;
• Several files called page_<number>.lua, each containing the code for the page (page_1 holds the code of project page number 1 and so on)
• Several other Lua files containing external libraries used by Kwik;
• Eventually (if your project has videos, external libraries, sprite sheets, etc) you may have more files, accordingly the needs of your project;

.kwk Files

As mentioned above, the “kwk” file is the one holding the intelligence of your project. For every action you associate to a layer, a page or your entire project, Kwik will add this information into the kwk file. If you open your kwik file (any text editor will open it), you will see something like this:

As you can see, this a XML (eXtended Markup Language) file, containing references (they are called children, when they are indented. For example, <settings> is a child of <project>. <page id=”page1″> is a child of <pages>, which is a child of <project>) for each action applied.

When you publish your project, Kwik will read content from your Photoshop page file (each layer will be exported as an image, the start position/alpha/etc of each layer will be capture, etc) and “mix” with the content of the kwk, enabling the plugin to create the appropriated code for each page (can you understand now why, alone, the “Corona exporter” module has more than 7500 lines of code?).

Save me from the details! I just want to duplicate a project!

Currently there is no option to create a new project (using another project as initial content) so, if you need to do it, you will need to know how (and where) to edit your kwk files.

Steps done outside Photoshop

These are the basic manual steps (for example, assuming you want to create a new project called newProject (targeting the original Kindle Fire), from a current project called oldProject (originally targeting the old iPads), and your default project folder for Kwik projects is /Documents/Kwik2):

1. Copy your oldProject folder and paste it under your /Documents/Kwik2. It will be pasted as oldProject copy (or something similar to that)
2. Rename the oldProject copy to newProject (from now on we will not use any other reference to oldProject folder, so, everything now happens inside the newProject folder;
3. Delete the build folder, if it exists. This way, you start with a blank canvas;
4. Rename the oldProject.kwk file to newProject.kwk and open it;
5. Search and replace all references from oldProject to newProject;
6. As we are targeting different platforms now, we need to update all device related information in the <settings> child. In order to not mess up with Kwik controls, let’s open the config.xml file, available under your /Photoshop/Plugins/Panel/Kwik 2 folder. This small file contains all the data about different devices (Kwik uses it to create new projects). From there, get the information you need to update the newProject.kwk file (you will need <device>, <OS>, <width>, <height> and <resolution>);
7. Update the <settings> with the information of the original Kindle, captured from the config.xml file;
8. Search and replace all <file> paths with the new path – in our example, the old path is ˜/Documents/Kwik/oldProject/ and the new one is ˜/Documents/Kwik/newProject/. This step will now point to the correct files. Do the same step for each external file your may have (audio, sprite sheet, video, external libraries, etc);
9. Save your updated newProject.kwk file;

Steps done inside Photoshop

Now that you have your kwk file updated, you must update all psd files to the new size and resolution (in our case, we are changing files originally created with 1024×768, at 132 dpi to 1024×600 at 169 dpi). You can do it in several ways (manually or using automated scripts) but, considering they are very different (resolution and size wise), I prefer to handle it page manually. These are the steps:

1. Open the first PSD file;
2. Turn Rules visible (menu View->Rules);
3. Here, you may need to redraw your entire composition or, if well planned, all you need to do is to cut parts of the height, making it the size of the Kindle;
4. (this step is needed in the case you will simply cut parts of the image) As the width size is the same, all we need is to cut the height. Drag a new guide to the height 600 (it is a good idea to enable the Info panel to know exactly in which pixel you are – menu Window-Info);
5. With the guide set, use the Crop Tool and cut the new area, making the composition fit the Kindle size (1024×600);
6. Now, let’s change the resolution to 169 dpi. Go to Image->Image Size, disable the Resize Sample checkbox and enter number 169 in the Resolution field;
7. Save your updated image and repeat the process to all other images;

Steps done inside Kwik

You project files are now set to be edited into Kwik. Open the new project and Kwik will bring everything as expected. You will need to update positions of all layers and replacements (plus animations). After doing it, export pages as appropriated and tweak each component as needed.

Comments? Always appreciated! Enjoy!