Differences

This shows you the differences between two versions of the page.

--- 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 ======
+{{ :tutorials:sparrow_demo_hd.png?280|The Demo project in HD}}
+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, Apple did the best to make that transition as painless as possible. It's no coincidence that the new resolution is exactly twice the old resolution --- that way, old applications simply use 4 pixels on the iPhone 4 for what was one pixel on previous devices, and look just like before.
+New applications, however, can profit from the higher resolution. If you create all graphics in the high resolution from the start, the additional effort is minimal --- if you follow the steps I show below.
+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's demo application was created in the way I am describing in this tutorial. Start up the demo application in the iPhone simulator to see the result. When the simulator appears, select "Hardware - Device - iPhone 4" in the menu bar, and "Window - Scale - 100%". (The next time you start the simulator, it will have remembered these settings.)
+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 "texture scaler" and "atlas generator" work. They can be found in the "sparrow/sparrow/util" directory of the download package. Have a look at the README files of those tools to find out how to prepare them.
+=== 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:
+<code>
+textures/
+  atlas/
+    tree.png
+    house.png
+    guy.png
+  others/
+    button.png
+    background.png
+</code>
+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" for the graphics you use in your application. Save them in a directory outside of your project.
+What we will do instead is the following: we will create two shell scripts that will use Sparrow's tools to scale the graphics to the appropriate sizes and copy them to the project directory.
+=== 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 "textures" directory from above. Let's call it "scale_and_copy_textures.sh":
+<code bash scale_and_copy_textures.sh>
+#!/bin/bash
+SCALE_TEXTURES=/sparrow_path/util/texture_scaler/scale_textures.rb
+OUTPUT_PATH=/application_path/media/graphics
+echo ""
+echo "-> Renaming and copying high-res textures ..."
+# no scale, add suffix
+${SCALE_TEXTURES} -s 1 -a @2x others/*.png ${OUTPUT_PATH}/2x
+echo ""
+echo "-> Resizing and copying low-res textures ..."
+# scale by 50%
+${SCALE_TEXTURES} -s 0.5 others/*.png ${OUTPUT_PATH}/1x
+echo ""
+echo "Done!"
+</code>
+Modify the two variables at the beginning so that they point to Sparrow's texture scaler and to your game's media directory. Before we can execute the script, we have to make it executable. Open the terminal and type:
+<code bash>
+cd path_to_textures/
+chmod u+x scale_and_copy_textures.sh
+</code>
+Now you can execute it by calling
+<code bash>
+./scale_and_copy_textures.sh
+</code>
+If everything worked, this will create the following files in the output directory:
+<code>
+/graphics
+  /1x
+    button.png
+    background.png
+  /2x
+    button@2x.png
+    background@2x.png
+</code>
+The "2x"-folder contains the original graphics. The suffix "@2x" was added to the filenames. We'll see later what that's for. The folder "1x" contains the downsized textures.
+=== Script 2 - Atlas Textures ===
+Thanks to Sparrow's atlas generator, the process of creating the two atlases is just as simple. Create the script "create_and_copy_atlas.sh" in the same directory as the other script:
+<code bash create_and_copy_atlas.sh>
+#!/bin/bash
+GENERATE_ATLAS=/sparrow_path/util/atlas_generator/generate_atlas.rb
+OUTPUT_PATH=/application_path/media/graphics
+echo ""
+echo "-> Creating High Resolution Atlas ..."
+# no scale
+${GENERATE_ATLAS} -m 2048x2048  atlas/*.png ${OUTPUT_PATH}/2x/atlas@2x.xml
+echo ""
+echo "-> Creating Standard Resolution Atlas ..."
+# shrink by 50% and copy
+${GENERATE_ATLAS} -s 0.5 atlas/*.png ${OUTPUT_PATH}/1x/atlas.xml
+echo ""
+echo "Done!"
+</code>
+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
+./create_and_copy_atlas.sh
+</code>
+Now, the graphics directory should contain all of our textures:
+<code>
+/graphics
+  /1x
+    button.png
+    background.png
+    atlas.xml
+    atlas.png
+  /2x
+    button@2x.png
+    background@2x.png
+    atlas@2x.xml
+    atlas@2x.png
+</code>
+=== 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:(UIApplication *)application
+{
+  [SPStage setSupportHighResolutions:YES];
+  // ...
+}
+</code>
+Add all textures to your Xcode project (low and high resolution). Now, create SPImages and SPTextureAtlases just like before --- no need to add the "@2x" suffix!
+<code objc>
+SPImage *background = [SPImage imageWithContentsOfFile:@"background.png"];
+SPTextureAtlas *atlas = [SPTextureAtlas atlasWithContentsOfFile:@"atlas.xml"];
+</code>
+Behind the scenes, Sparrow will load the correct texture for you. The "width" and "height" properties of the loaded images and textures will always be the size of the low resolution (!) textures. That way, you can pretend that you are developing the game only in the low resolution. The HD-version will be a side-product you don't have to think about while you are writing your game in Xcode.
+==== 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, there's nothing special you have to think about. The SPView and SPStage objects will have a size of 1024x768, and you create textures for that size. That should be straight forward. You do **not** need any "@2x" suffix (that's left for the time when the iPad goes Retina).
+However, what about normal iPhone/iPod games that are started on the iPad? When you hit the "2x"-button on the iPad, the application is scaled up to fill (nearly) the entire screen. They get quite blurry, though, even if your application provided HD textures and should thus be crystal sharp.
+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 "doubleOnPad:" parameter enabled:
+<code objc>
+[controller startWithRoot:[Game class] supportHighResolutions:YES doubleOnPad:YES];</code>
+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.

tutorials/making_hd_games.txt · Last modified: 2013/05/30 12:45 by daniel

Sparrow Wiki

Differences