Corona SDK Game Development Instance (III): Processing retina Display

Today, I will start using new tools to develop iPhone games: Corona SDK

Created on top layers of OpenGL, OpenAL, Box2D, and Lua, Corona allows you to develop games that run at native speeds using local IOS features, such as multi-touch, GPS, accelerometer, gyroscope, camera, google Maps, WebKit, and keypad.

In addition, Corona supports a large number of APIS, which will allow you to add a lot of interesting features for your game, such as advertising, virtual currency, database and so on.

In the first step, I will try my best to port my old Flash game Red Flowers to the iPhone and process the retina Display Mode of the iPhone 4.

We will handle two different screen sizes: 320x480 and 640x960. Therefore, the first thing to do is to design two different initial pages, a normal and a retina enhanced iPhone mode.

On the left side, 480x320 is the initial view of the normal iPhone, and on the right side, the initial view of the 960x640 HD retina display.

I kept them in a folder and named them splash.png and splash_hd.png.

Please note that the name of the hd image is the same as that of the normal image except for the _ hd suffix.

Currently, the most basic Corona project has three files: build. settings, which includes the duild-time attribute, config. lua contains the runtime attribute, and main. lua is the main file.

Just as you can see the Lua extension, the Lua programming language used by the Corona SDK. You may have encountered it when playing World of Warcraft macros and interfaces. In any case, this is not difficult, and AS3 is not that different.

Let's take a look at the build. settings file:

Here, I just set the direction of the landscape, because this game is playing horizontally.

This is the config. lua file:

Another simple and intuitive setting: I defined the height and width of the game and set the scaling mode to "letterbox ".

These are all possible Dynamic Scaling settings:

*None-Disable dynamic content Scaling

*Letterbox-Scale the content as evenly as possible while still displaying all the content on the screen. This is similar to watching a wide-screen DVD on a non-wide-screen TV. You can use the off-screen content to fill the overflow area, instead of displaying black edges.

*ZoomEven-Zoom evenly to fill the screen while maintaining the aspect ratio. If the new screen has different aspect ratios, some content may appear out of the screen.

*ZoomStretch-The content is unevenly extended to fill the screen. All content will remain on the screen, but it may stretch vertically or horizontally.

Then, when the image needs to be multiplied by 2 to match the resolution of the device, we define the suffix to be used by imageSuffix. Do you still remember to add the _ hd suffix to our hd initial view? It is.

Finally, let's write the code main. lua:

Row 3: Hide the status bar

Row 2nd: defines a variable bg, and assigns it a low-resolution initial screen path, followed by the size. The image is automatically displayed, and its start center is aligned with the top left corner of the device.

Row 3rd: the horizontal center of the initial view is aligned according to its width.

Row 3: do the same thing for height.

Note that the X and Y attributes work in the same way as AS3, while the contentWidth and contentHeight attributes work in the same way as as3.

Once all the files are saved in the same folder, it is time to run the simulator in iPhone and iPhone 4 mode.

Finally, we have our initial view and it works. Next time, I will add interactions.