How To Change Screen Size Of Gba4ios Skins

Skins

Retro

Retro by Paul Thorsen, bachelor for download in GBA4iOS.

Templates

To make the process easier, three templates are provided for you to download and alter to your liking. The Default GBA and Default GBC templates are identical to the default GBA and GBC skins, respectively, included with GBA4iOS. If you lot want to make a skin with the aforementioned button locations every bit the default skins, we recommend downloading one of these and simply replacing the image files.

The 3rd template, Blank, includes no images or button mappings. This is recommended for when you are using images that don't identify the buttons in the exact same place every bit the default skins, since yous'd demand to remap the button locations anyway. By using this template, yous will need to provide more than data in the peel file, only it is much easier to customize the skin to your liking.

Download Default GBA Peel
Download Default GBC Skin
Download Blank Pare

Pare Basics

Unzip the template file you downloaded, and then open the unzipped folder. Inside, yous volition see a info.json file. This file contains all the data the skin requires to piece of work properly—minus the actual image files—such as:

• Name
• Identifier
• Paradigm names
• Button mappings
• Whether a certain orientation supports GBA4iOS' skin opacity characteristic
• Whether the skin should exist shown in debug way or non.

(Don't worry if you don't know what some of these mean; they will all be explained in this tutorial.)

As y'all tin can tell from the extension, this file is a JSON file. Although JSON files are primarily used past web services to transfer data, it was chosen to be used in GBA4iOS skin files due to its simplicity. Everything in this tutorial can be washed via the included text editor on your figurer, but it's strongly recommended you use an application designed to open and edit JSON files, equally this is much less error-prone (and piece of cake!). If you're using a Mac, Cocoa JSON Editor is what is used to make the JSON files for the included skins, but any other JSON editor will work fine.

Open up up the info.json file in the editor of your selection, and you'll see five items:

• proper noun
• identifier
• debug
• portrait
• landscape

In this department of the tutorial, we'll focus on the the first three items; the other two will exist covered in the next sections.

name
This item is rather self-explanatory. This is what the skin is chosen inside GBA4iOS. Replace the current name in your template with whatever proper name you want, then salvage the file.

identifier
This is how GBA4iOS internally uses and stores skin files. To ensure that one skin doesn't overwrite another skin, each pare identifier should exist unique. Apple recommends using the contrary-DNS format (com.[designer name].[peel proper name]) when making an app identifier, and then we recommend doing the aforementioned for skin identifiers. For case, the default GBA4iOS skins have the identifier com.GBA4iOS.default.

NOTE: You may be wondering why both the default GBA and default GBC skins have the aforementioned identifier, if that would mean one would overwrite the other. In actuality, the identifier but has to be unique for all of the aforementioned type of skin. This ways a GBA skin and a GBC skin tin have the same identifier without any negative consequences, and in fact this is encouraged if the two skins should be idea of as complementary to 1 another.

debug
Past default, this is gear up to false. However, when yous modify this to true, GBA4iOS will overlay translucent cherry squares on acme of where the buttons are mapped when using this skin. When mapping the buttons yourself, it's recommended y'all set up this to true while making the skin, and so you can ensure your mappings line upward nicely with the paradigm.

Debug Skin

The default GBA pare with debug mode enabled.

Images

Nearly every time you lot create or alter a peel, you'll be changing the images that are displayed when actually using the skin. Luckily, changing the images is rather straightforward!

GBA4iOS detects what orientations are supported in a skin past the presence of the portrait and landscape items in the info.json file. If y'all wanted to have a portrait-only skin, y'all'd demand to delete the landscape detail; similarly, if you lot wanted to accept a landscape-only peel, yous'd need to delete the portrait item. Of course, if you wanted to support both orientations, you don't need to delete either.

Open upwardly the orientation of your option (typically past clicking an arrow to the left of the item). In one case opened up, you lot'll encounter three new items:

• assets
• layouts
• translucent

For the purposes of this department, we will only focus on the assets and translucent items.

translucent
You can decide whether the orientation y'all're editing should support GBA4iOS' customizable opacity feature. Typically, only landscape skins that go along height of the game screen support this feature, but there's nil stopping you lot from enabling it on other types of skins, or even disabling it for your own landscape overlay skin. To enable this feature, prepare the value to true. If you desire to disable this feature, fix information technology to false.

assets
Open up this particular, and you'll run into four more items:

• iPhone
• iPhone Widescreen
• iPad
• iPad Retina

Each one of these refers to a different screen blazon supported by GBA4iOS. iPhone refers to the iPhone 4 and 4S, iPhone Widescreen refers to the iPhone 5 and 5s (also as the iPod touch 5G), iPad refers to the iPad 2 and not-retina iPad mini, and iPad Retina refers to all iPads with a retina display. To provide a skin image optimized for a detail screen type, all you demand to practise is gear up the value of each particular to the filename of the matching image.

For example, if you downloaded the Default GBA template and opened up the portrait avails, you would see the post-obit:

• iPhone: portrait.png
• iPhone Widescreen:
• iPad: portrait-ipad.png
• iPad Retina: portrait-ipad@2x.png

Equally you tin see, each filename begins with the word "portrait", so appends unlike suffixes depending on what screen the image was made for. Technically, these filenames can be anything you want, simply it is strongly recommended you follow a standard naming convention, since that makes it easier to change images without having to open up the info.json file and update the filenames. Typically, GBA4iOS uses the following naming conventions for the default skins:

• iPhone: [orientation].png
• iPhone Widescreen: [orientation]@R4.png
• iPad: [orientation]-ipad.png
• iPad Retina: [orientation]-ipad@2x.png

(In case you're wondering, "R4" stands for "Retina 4-inch", the size of the newer iPhone screens, and "@2x" is the suffix Apple recommends when providing images for retina displays.)

You might accept noticed something else in the Default GBA portrait assets instance: there's no value for iPhone Widescreen! This is because GBA4iOS has a dainty fallback mechanism for peel images. If an image for the current device'due south screen doesn't be, so information technology volition fallback to using another image in the skin, if it tin can. In this case, if no iPhone Widescreen image exists, then GBA4iOS volition use the normal iPhone paradigm. Typically, this is what you'd desire for a portrait iPhone skin; most of the time, y'all don't need a split paradigm for the dissimilar types of portait iPhone screens. If for any reason GBA4iOS can't fallback to using another paradigm in your pare, it volition then utilise the default skin.

In one case you accept updated the info.json file, the last step is to actually include the image files in your pare. Copy all the images you demand for your skin into the same folder as the info.json file, and rename them exactly the same mode that the info file expects them to be named, overwriting existing files if necessary.

GBA4iOS volition automatically layout everything correctly regardless of what size the images are, merely past default GBA4iOS uses the post-obit image sizes for the default skins (in pixels):

GBA (Portrait)
• iPhone: 640 x 480
• iPhone Widescreen: n/a
• iPad: 768 x 427
• iPad Retina: 1536 x 854

GBA (Mural)
• iPhone: 960 x 640
• iPhone Widescreen: 1136 ten 640
• iPad: 1024 10 768
• iPad Retina: 2048 ten 1536

GBC (Portrait)
• iPhone: 640 x 480
• iPhone Widescreen: n/a
• iPad: 768 x 333
• iPad Retina: 1536 ten 666

GBC (Landscape)
• iPhone: 960 x 640
• iPhone Widescreen: 1136 x 640
• iPad: 1024 x 768
• iPad Retina: 2048 x 1536

If all you want to exercise is change the images of an existing peel or i of the "default" templates, at this point you have all the necessary pieces to make your skin, and tin skip to the Finishing the Peel department below to learn how to turn these files into an bodily .gbaskin or .gbcskin file. Even so, if y'all want to customize the button mapping for your skins, carry on into the side by side section, Mapping Buttons.

Sketch

Despite looking radically different than the default GBC peel, Sketch by Alyssa Surowiec uses the exact aforementioned push mapping.

Mapping Buttons

Congratulations, if you have gotten this far in the tutorial, y'all know enough to brand simple modifications of how a skin looks. All the same, skins offer more than simply the power to switch out images; they also give yous full control over exactly where the buttons should go, how big they should be, and also where the game screen itself should be placed. Combining all of these, you can create very unique (read: strange) layouts for your skins, or maybe just make the game screen a bit smaller when in landscape mode. The betoken is, skins were designed to be flexible, and this section volition show you merely how to take advantage of everything!

Open up the orientation of your choice in your skin template, then open layouts. If you open upwardly landscape, you should see the following options:

• iPhone
• iPhone Landscape
• iPad

If you were to open the portrait orientation, y'all would observe that in that location isn't an iPhone Landscape item. This is due to GBA4iOS' previously mentioned fallback mechanism. If GBA4iOS can't notice button mappings for the current device's screen, then information technology will fallback to another button mapping. Different images, if it can't find any button mappings, GBA4iOS does non revert to using the default peel; it only won't respond to button presses! This fallback machinery is the aforementioned reason why there isn't an iPad Retina item for either orientation. Very rarely will the iPad and iPad Retina button mappings differ, so it'southward ameliorate to just map all the buttons for the non-retina version, and have all retina iPads fallback to using the non-retina mappings. If the button mappings should differ between iPad and iPad Retina, or betwixt iPhone and iPhone Widescreen in portrait, experience free to add together either an iPad Retina or iPhone Widescreen item.

At present, let's take a await at the format of how each button is mapped. Open any button up, and y'all should see four or five items:

• x
• y
• width
• height
• extendedEdges (certain button mappings in the default skins may not take this)

The start four items define the exact location of the button in the paradigm in pixels, with no padding effectually it. The extendedEdges particular is something special that we utilise to add padding around the buttons to increase the touch area, merely we'll look at that later.

Now, you lot may be wondering, how can the iPad and iPad Retina items use the same mappings, even though the iPad Retina image has twice the number of pixels both vertically and horizontally as the iPad image? Well, this is because everything is actually mapped in points. On a non-retina display, one point is equal to i pixel. However, on a retina brandish, ane point is really four pixels; two pixels wide and 2 pixels tall. Then even though the iPhone prototype is 640 x 480 pixels, everything should be mapped as if it were 320 x 240.

Annotation: All types of screens are retina except for the iPad screen. And then, if y'all're mapping annihilation other than an iPad paradigm, information technology's recommended that you copy the prototype, downsize it to half its original width and height, and then map it.

Exactly how y'all observe the location and size of the pare buttons may vary, but all GBA4iOS skins were mapped by downsizing images to not-retina sizes, opening them in Photoshop, and using a combination of masks and the Info window to find the exact pixel locations of each push button. Once you find the required data, y'all can fill in the button mappings for each button ( ten and y refer to the x and y co-ordinates of the acme left of the push button location).

Just so you know what each button does, they're each listed individally below. Some have (slightly) unlike mapping requirements than others, so make sure to read them all!

dpad
The plus-push-like command usually located on the left side of the skin. Typically, information technology controls movement in games. Unlike other controls, this control is actually divided upwardly into nine sections: eight control directions, and a heart neutral section. However, there aren't nine separate mappings for each section; at that place'due south only 1 for the entire D-Pad. And then how does GBA4iOS know how to carve up up the D-Pad into different sections? Uncomplicated, information technology just divides the button mapping you requite it into three equal sections horizontally and three equal sections vertically. Because of this, it is very of import that you lot map the D-Pad exactly as it appears on the skin, and with no extra padding, or else the directions will not exactly match what the user sees. To properly add padding without messing upward the mapping, you can take advantage of the extendedEdges property, which will be explained in more particular below.

a
The A button. Typically, this is used to select or confirm options in the game.

b
The B push. Typically, this is used to cancel or perform secondary functions in the game.

ab
Some skins may have an AB push button. When pressed, this push actually presses both the A and B buttons at once, which can exist useful for certain games.

first
The First button. Typically, this pauses the game.

select
The Select button. Typically, this performs a secondary role in the game.

l
The 50 button. Considering Game Boys / Game Boy Colors don't have an L button, it'south strongly recommended that you delete it from your GBC peel, or else you may misfile the user when they experience a vibration by tapping it and information technology doesn't practice anything.

r
The R button. Because Game Boys / Game Boy Colors don't have an R button, it's strongly recommended that y'all delete information technology from your GBC skin, or else yous may confuse the user when they feel a vibration past tapping it and it doesn't do annihilation.

menu
While the Commencement push button typically pauses the game, this pauses the entire emulator, and allows yous to access features such as Save States and Cheat Codes. As ever, make sure to map it exactly without padding, since the break menu that appears relies on the mapping to position itself next to the push button on an iPad.

screen
Some skins (typically mural skins) may choose to position the game screen themselves, either to fit information technology in a hole designed for the screen in the paradigm, or mayhap just to change how big the game screen is. Unfortunately, a bug in GBA4iOS 2.0 and two.0.1 prevents skins from changing the attribute ratio of the game screen, but the upcoming version 2.0.2 will set up this.

extendedEdges
In addition to the extendedEdges particular in each button mapping, there is besides a orientation-specific extendedEdges particular. Each extendedEdges item consists of iv sub-items: peak, bottom, left, and correct. These 4 items "extend" the edge of a button in that direction past whatever value it has been set to. For instance, the A button may have a mapping of:

• x: 15
• y: 100
• width: 80
• acme: lxxx

Still, perchance the orientation-specific extendedEdges has a value of 10 in all directions. Now, the actual touch target of the A push button would be:

• x: five
• y: ninety
• width: 100
• height: 100

This has two benefits:

ane) Information technology is easier to map buttons, since all you need to worry nearly is mapping the exact location of the push, and adding the padding later.
2) This allows padding to be added to the D-Pad and Menu button without messing upward the internal calculations GBA4iOS uses for each button.

Another reason to use extendedEdges is to ensure the touch targets of buttons near the edges of the screen actually extend to the edge. This is very important, considering if you don't practice this, it's easy for the user to tap near the edge of the screen but not perform whatever action due to the touch targets non extending far enough. To brand this an easy fix, each button mapping too has its ain extendedEdges item, which will overwrite the orientation-specific version if you enter a value for it. For case, let's take the A button example above. With the orientation-specific extendedEdges, y'all may discover that it is only five points away from the left edge of the screen. To get the best experience out of using your skin, y'all should make certain information technology extends all the way to the left border. To do this, open up the a button mapping, and then open up its own extendedEdges. Once that's opened, set left to v, and salve. Now, the touch on target of the A button will be:

• ten: 0
• y: 90
• width: 105
• height: 100

Skillful, it extends all the way to edge! Per-button extendedEdges can also be applied only to tweak the extendedEdges of a button. For example, typically GBA4iOS uses a global 7-point padding for every push on iPhones, but uses xv-points on the D-Pad, since the user is more than likely to miss it due to moving their finger effectually more. Simply remember, map all buttons exactly as they appear on the skin with no padding, and then utilise extendedEdges to add the padding later.

Micro

Micro by Paul Thorsen customizes the size and location of the game screen to fit nicely inside the center of the skin.

Finishing the Skin

At this point, you have everything you need to convert the files into a peel file yous can start using in GBA4iOS! Now, the final thing to do is to actually import it into GBA4iOS, which thankfully is the easiest office.

Every .gbaskin and .gbcskin file is just a nothing file with the .zip extension renamed. That ways, to turn your files into a skin file, all you demand to do is compress all the private files into i zilch file and rename the extension .gbaskin or .gbcskin, depending on whether your skin is for GBA or GBC games. Something important to remember: because GBA skins accept all the buttons required by GBC games, GBA skins tin can be used for both GBA and GBC games. However, considering GBC skins lack L and R buttons, they can just be used for GBC games.

Annotation 1: When compressing the files, make certain to compress the files themselves, and not the containing folder. If you zip the folder and non the files directly, GBA4iOS will not extract the files correctly upon import, which volition prevent the skin file from beingness used.

NOTE 2: When renaming the extension, make sure the extension actually changes. Sometimes, the file may look like its extension was inverse, but the computer might have (invisibly) added the extension back on the end of the filename. On a Mac, the all-time mode to ensure the extension changes properly is to right-click the file, click Get Info, and then modify the extension in that location.

Once you accept your .gbaskin or .gbcskin file, you need to import it into GBA4iOS. If you're working at your computer, generally the easiest manner to practice this is via iTunes. To import via iTunes, you can follow these instructions:

1) Connect your iOS device to your reckoner.
2) Open up iTunes.
3) Click on your device that appears in the peak right corner.
4) Click the Apps tab near the meridian of the iTunes window.
5) Scroll down to File Sharing.
6) Click GBA4iOS, then elevate the skin file into GBA4iOS Documents.
7) Launch GBA4iOS on your device, open up Settings, and select the new skin you imported.

If you lot don't want to transfer through iTunes, you can always send it to your device via Email, iMessage, or via downloading through a web server. In one case you receive it on your device, Open In... GBA4iOS, and then you can select the newly imported skin in GBA4iOS' settings.

In one case y'all've imported your custom skin, the last stride is to start a game of your choice, and offset playing with your cosmos. Congrats, y'all worked hard for information technology!

Mario + Luigi Portrait
Mario + Luigi Landscape

Once you lot've mastered the art of making skins for one orientation, try making one for both such every bit Mario + Luigi by Paul Thorsen, then you can relish your handiwork no affair which orientation you're in!