With hyperPad you can create your project for multiple devices and screen sizes. When it comes to supporting different devices there are two types of projects, Device Specific projects and Universal Projects.
Device Specific Projects: Create a separate version of your project for each platform you want to support. When creating your project, you specify a single device for your project. For example, if you want to make only an iPad game, then select ONLY iPad (4:3) when creating your project.
Universal Projects: Support multiple devices with a single project. When creating your project, select more than one target device. This means the same project can work on both iPhone and iPad with out having two separate versions.
There are pros and cons for both approaches. For projects that require total control of the screen, and what you want visible at all times a device specific approach may be beneficial. However, this comes at the cost of having to recreate your game/project for each new platform.
The benefit of universal projects is that you only have to create your game or app once. However, you have less control of what appears on screen. For example, on a wider device, you may see more content that would otherwise not be noticeable. hyperPad does provide some tools and behaviors to control certain elements, but sometimes you just need total control and a device specific project makes more sense.
This article mainly covers universal projects, as you're dealing with multiple aspect ratios and devices. For Device specific projects, it's as simple as making sure your content fits in the green area on the canvas.
Creating a Universal Project
When creating a new project, you are prompted to select the devices you wish to support. By default, only the iPad (4:3) is selected. You can tap the other devices to enable support for them as well. If you have more than one device selected, you project is considered a "Universal Project".
Cycling Devices
When you select multiple devices to support, this means you have to make sure your projects content fits on screen for each device/aspect ratio.
The green rectangle area on the canvas is the visible screen space. Anything placed within the visible screen space will seen when your project is running. Keep in mind that each device you enabled when creating the project has it's own visible screen space.
To make sure your content fits within the visible screen space for each area tap the Cycle Device icon on the tool palette.
Remember, some devices like the iPhone have multiple screen sizes and aspect ratios. If you're developing a project for these devices and want to support an older version of iOS, you must make sure your content works on each version of that device. So if you select iPhone you must make sure your content fits within the iPhone 4 screen space (3:2), and the iPhone 5,6,6+ (16:9) screen space.
Designing your project for multiple devices
Typically when developing a game or app, you want to avoid redoing everything for each project. With Universal Projects you can use clever design to minimize the amount of work you need to do again.
hyperPad has all screen sizes start from the bottom left corner, then scale up and to the right for larger devices. If you keep this in mind, many games can be created once.
When designing your scene, design so your main content fits within the smallest device, and your background so it fits the largest. When creating your project the largest size is labeled as the "Design Resolution". By doing this many projects automatically look great on all devices.
For example, you want to make a platform game to work on both iPhone and iPad. You can design the main level (ground obstacles, etc.) to fit within the smallest iPhone screen (16:9 aspect ratio), then have your background fit the largest device (iPad). On the smallest iPhone the game will appear exactly as you designed. For the larger devices (iPad 4:3, or Desktop 16:10), the game will show more vertical content along the top. Since you made your background fit the largest size there is always something visible and you are not left with empty black space.
While cycling the different devices, notices the visible screen space does not change in width. hyperPad uses a custom resolution to keep the widths consistent across all devices. Only the height changes showing more or less content vertically.
Below is a chart that represents the different device aspect ratios and resolutions.
| Aspect Ratios | Icon | Devices | Design Resolution |
| 4:3 |  |
iPad, iPad Pro | 2048 px x 1536 px |
| 16:9 |  |
iPhone 5, iPhone 5S, iPhone 6, iPhone 6 plus, iPhone 6S. iPhone 6S Plus, iPod 5th generation, iPod 6th generation | 2048 px x 1158 px |
| 3:2 | |
iPhone 3GS, iPhone 4, iPhone 4S, iPod 4th generation | 2046 px x 1364 px |
| 16:10 |  |
Desktop computers | 2048 px x 1280 px |
A note regarding the older iPhones (3GS, iPhone 4, 4S, and iPod 4th Generation): These devices use a 3:2 aspect ratio. To keep the width of all devices consistent, the visible screen space for 3:2 devices is actually taller than the physically larger iPhone 5, 6+ (16:9) devices. If you wish to develop for iPhone, and support iOS 9 and below, you MUST also make sure your project fits within the 3:2 screen space.
If you only want to support iOS10 and newer, then you do not have to worry about your content fitting within the 3:2 screen space.
Importing assets
hyperPad automatically scales your project to look great on all devices. Too keep your project looking great across all devices, you should always import your images to fit within the Design Resolution. The Design Resolution is given in retina, so when you import images a non-retina image will automatically be generated for you.
For example, if you import a 512x512 pixel image a 256x256 pixel image will be created for you.
Also note, that the design resolution is measured in pixels. On the actual device, everything is measured in points. This means that 2048x1536 pixels is actually 1024x768 points (on a retina device).
Absolute and Relative position
There are two ways of positioning objects in hyperPad. Absolute, and Relative. Absolute positions place an object at a specific pixel location on the canvas and is measured in meters. Relative positions place your object based on the percentage of the visible screen space.
With absolute positions your objects may appear off screen for smaller devices. This happens because the coordinate system does not change based on each device (1 meter is the same on an iPhone, iPad, and what ever else).
With relative positions, your object will appear in the same relative position no matter what device. So if place your object in the middle of your screen, it will be in the for iPhone, iPad, and any larger device like a TV or computer.
By default, any object you place on regular layers will use absolute positions, and anything placed on the UI layers are set to percent based positions. This way you don't have to worry about your buttons, health bars, or joysticks being off screen for each device.
On the gif below, you can see the effect of relative positions. The "Tap" signs, and the hand are using relative positions and always stay in the middle for each device.
To change the positioning type of your object, select your object and from the Object Properties, switch to the Transform Tab and tap the "%" icon on the position field. This will turn your current position into a percentage of the screen.
If you cycle through your supported devices from the tool palette, you can see your relative objects staying within the visible screen space.
To keep an object completely centred the X, and Y positions should be at 50%.
Custom Actions Based on Screen Size
Sometimes you want your project to look and feel slightly different for each device. For example, you only want a button to be available on the iPad and not the iPhone.
For this, you can use the "Get Screen" behavior to figure out the size of the current screen, and with an IF behavior to hide the button on the iPhone.
In the example above, you would use Get Screen, then output the Aspect Ratio to an IF behavior, that checks if it is an iPhone (16:9).
Then use the hide graphic behavior to hide the button if the screen size is 16:9.
0 Comments