This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
tutorials:making_hd_games [2013/03/05 10:19] – external edit 127.0.0.1 | tutorials:making_hd_games [2013/05/30 12:45] (current) – daniel | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Making HD games ====== | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | Before the release of the iPhone 4, developers were in the comforting situation that all iPhones had the same screen resolution (unlike Android developers, which have to support many kinds of displays). Now, with the arrival of the iPhone 4, there are two screen resolutions that can be targeted: 480x320 and 960x640. | ||
+ | |||
+ | Fortunately, | ||
+ | |||
+ | New applications, | ||
+ | |||
+ | BTW, the tools I am using throughout this tutorial are part of Sparrow --- but that does not mean that you cannot use them with other game engines (like Cocos2D) or pure UIKit applications. The texture atlas generator, for example, can easily be modified so that it produces a different output format. | ||
+ | |||
+ | |||
+ | |||
+ | ==== What we want to achieve ==== | ||
+ | |||
+ | Sparrow' | ||
+ | |||
+ | Depending on the selected hardware (iPhone vs. iPhone 4), different textures will be used. Don't worry if the HD version runs slowly on your Mac; on a real iPhone 4, it will run smoothly. | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ==== Preparing the textures ==== | ||
+ | |||
+ | First, you have to make sure that the tools " | ||
+ | |||
+ | === Creating the graphics === | ||
+ | |||
+ | When the tools work, we can start creating the graphics. Create the textures only for the high resolution (960x640). If you use a texture atlas, place your graphics in one directory per atlas. All other graphics are in a separate directory. | ||
+ | |||
+ | This leads to a directory structure like the following: | ||
+ | |||
+ | < | ||
+ | textures/ | ||
+ | atlas/ | ||
+ | tree.png | ||
+ | house.png | ||
+ | guy.png | ||
+ | others/ | ||
+ | button.png | ||
+ | background.png | ||
+ | </ | ||
+ | |||
+ | As I said, those graphics are all targeting the high resolution. A tip: try to make the width and height of those textures even numbers. That way, the down-scaled versions we create below will have widths and heights that are whole numbers, and you avoid some aliasing issues later. | ||
+ | |||
+ | Now, do **not** add those graphics to the Xcode project! They are just the "raw material" | ||
+ | |||
+ | What we will do instead is the following: we will create two shell scripts that will use Sparrow' | ||
+ | |||
+ | === Script 1 - Normal Textures === | ||
+ | |||
+ | First, we handle the textures that are loaded directly (they are not part of a texture atlas). Create the following script and save it into the " | ||
+ | |||
+ | <code bash scale_and_copy_textures.sh> | ||
+ | #!/bin/bash | ||
+ | |||
+ | SCALE_TEXTURES=/ | ||
+ | OUTPUT_PATH=/ | ||
+ | |||
+ | echo "" | ||
+ | echo "-> Renaming and copying high-res textures ..." | ||
+ | # no scale, add suffix | ||
+ | ${SCALE_TEXTURES} -s 1 -a @2x others/ | ||
+ | |||
+ | echo "" | ||
+ | echo "-> Resizing and copying low-res textures ..." | ||
+ | # scale by 50% | ||
+ | ${SCALE_TEXTURES} -s 0.5 others/ | ||
+ | |||
+ | echo "" | ||
+ | echo " | ||
+ | </ | ||
+ | |||
+ | Modify the two variables at the beginning so that they point to Sparrow' | ||
+ | |||
+ | <code bash> | ||
+ | cd path_to_textures/ | ||
+ | chmod u+x scale_and_copy_textures.sh | ||
+ | </ | ||
+ | |||
+ | Now you can execute it by calling | ||
+ | |||
+ | <code bash> | ||
+ | ./ | ||
+ | </ | ||
+ | |||
+ | If everything worked, this will create the following files in the output directory: | ||
+ | |||
+ | < | ||
+ | /graphics | ||
+ | /1x | ||
+ | button.png | ||
+ | background.png | ||
+ | /2x | ||
+ | button@2x.png | ||
+ | background@2x.png | ||
+ | </ | ||
+ | |||
+ | The " | ||
+ | |||
+ | === Script 2 - Atlas Textures === | ||
+ | |||
+ | Thanks to Sparrow' | ||
+ | |||
+ | <code bash create_and_copy_atlas.sh> | ||
+ | #!/bin/bash | ||
+ | |||
+ | GENERATE_ATLAS=/ | ||
+ | OUTPUT_PATH=/ | ||
+ | |||
+ | echo "" | ||
+ | echo "-> Creating High Resolution Atlas ..." | ||
+ | # no scale | ||
+ | ${GENERATE_ATLAS} -m 2048x2048 | ||
+ | |||
+ | echo "" | ||
+ | echo "-> Creating Standard Resolution Atlas ..." | ||
+ | # shrink by 50% and copy | ||
+ | ${GENERATE_ATLAS} -s 0.5 atlas/*.png ${OUTPUT_PATH}/ | ||
+ | |||
+ | echo "" | ||
+ | echo " | ||
+ | </ | ||
+ | |||
+ | The maximum size of the HD atlas is 2048x2048 pixels; that's the maximum size of a single texture on iPhone 4. The smaller atlas has a maximum size of 1024x1024; that size is supported by all iPhone/iPod variants. Again, the smaller textures were scaled down to half of the size and sharpened. | ||
+ | |||
+ | Just like before, you have to make that file executable before you can start it: | ||
+ | |||
+ | <code bash> | ||
+ | cd path_to_textures/ | ||
+ | chmod u+x create_and_copy_atlas.sh | ||
+ | ./ | ||
+ | </ | ||
+ | |||
+ | Now, the graphics directory should contain all of our textures: | ||
+ | |||
+ | < | ||
+ | /graphics | ||
+ | /1x | ||
+ | button.png | ||
+ | background.png | ||
+ | atlas.xml | ||
+ | atlas.png | ||
+ | /2x | ||
+ | button@2x.png | ||
+ | background@2x.png | ||
+ | atlas@2x.xml | ||
+ | atlas@2x.png | ||
+ | </ | ||
+ | |||
+ | === Preparations complete! === | ||
+ | |||
+ | Phew! OK, that was quite a bit of work --- but now, everything is prepared. From this moment on, when you add a new texture or change an existing one, all you have to do is to start up the corresponding scripts. | ||
+ | |||
+ | |||
+ | |||
+ | ==== Using the Textures ==== | ||
+ | |||
+ | Sparrow makes it very easy to use those HD textures. You develop your game just like before, with a stage size of 480x320. All you have to do is to add the following line at the beginning of your application delegate: | ||
+ | |||
+ | <code objc> | ||
+ | - (void)applicationDidFinishLaunching: | ||
+ | { | ||
+ | [SPStage setSupportHighResolutions: | ||
+ | // ... | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Add all textures to your Xcode project (low and high resolution). Now, create SPImages and SPTextureAtlases just like before --- no need to add the " | ||
+ | |||
+ | <code objc> | ||
+ | SPImage *background = [SPImage imageWithContentsOfFile: | ||
+ | SPTextureAtlas *atlas = [SPTextureAtlas atlasWithContentsOfFile: | ||
+ | </ | ||
+ | |||
+ | Behind the scenes, Sparrow will load the correct texture for you. The " | ||
+ | |||
+ | |||
+ | |||
+ | ==== What about the iPad? ==== | ||
+ | |||
+ | You will have noticed that the text above was only about the iPhone and iPod variants, not the iPad. Here's the reason for this: | ||
+ | |||
+ | When you create an iPad-only application, | ||
+ | |||
+ | However, what about normal iPhone/iPod games that are started on the iPad? When you hit the " | ||
+ | |||
+ | iOS does not load the HD textures per default on the iPad. In Sparrow, however, you can force it to do so! Just start Sparrow with the " | ||
+ | |||
+ | <code objc> | ||
+ | [controller startWithRoot: | ||
+ | |||
+ | That's it! | ||
+ | |||
+ | Be careful, though: the iPad has only half the memory (256 MB) of the iPhone4 (512 MB). Thus, make sure you test your application on an iPad to see if the big textures fit into the memory. | ||
+ | |||
+ | ==== Last words ==== | ||
+ | |||
+ | This tutorial should have shown you nearly everything you need to know to create your next game in HD. | ||
+ | |||
+ | |||
+ | |||