Importing Assets

This Article will cover the different ways of importing assets into hyperPad. To view the different types of assets you can import view the "Supported Asset Types" article.

The quickest way to import, is by launching the Asset Library and choosing the "Import" option from the left menu. This will prompt you to choose the type of asset you want to import.

Importing Graphics:

If you want to import just a standard graphic with no animations select the graphics option from the import pop up. 

You will then be prompted with available sources to import from.

Camera Roll will import images directly from the device image library (in the Photos app).This includes any pictures you take with the camera, import from 3^rd party apps, or downloaded through the web browser.

Files allows you to access the "files" app and use that to browse for graphics. The files App also gives you access to iCloud drive, and other 3rd party sources that integrate with Apples Files app. (like Dropbox, google drive, and Skydrive)

Dropbox gives you access to your dropbox library. To use Dropbvox with hyperPad you first need to link your account and give hyperPad permission to access your files. This will automatically be prompted the first time you try and import from dropbox.

Once you select a source, you will be be able to navigate with the file browser and find the image that you want to import.

SD+HD Toggle

You will probably notice the Import SD+HD toggle in the top right of the import window. By default, this is turned off. While it is off, you do not need to worry needing separate standard and high definition resolution for the images you import. With this toggle off hyperPad assumes all images imported are "HD". Simply import a high quality image and hyperPad will automatically create the standard definition for you. This means that, when your app is used on a different device (such as older apple devices that do not have retina displays) it will automatically use the lower quality images.

If, however, you wish to add the dual resolution images yourself,  you can turn on the toggle switch. With the switch toggled on, you will need to have the image in two different resolutions (Eg. 1024X 1024 for SD and 2048x2048 for HD). The HD image filename must also end with “-hd”.

Note: Please remember that the maximum image size hyperPad allows is 2048x2048. When importing graphics, hyperPad can use any image file compatible with iOS. The suggested format for graphics is PNG since it also can handle transparent graphics.

Importing Animations:

In hyperPad there are 2 main methods of importing animations. 1) Create animations on import, and 2) Import a spritesheet.

Creating Animations:

This first method of importing animations, will create an animation sequence for you while importing each animation frame.

Select Create Animation. This will open the Import Source Window. Here you can select from the available sources for your imports; Camera Roll, Files and Dropbox.

Note: This method does not have the import SD+HD toggle. This is because when using this method to import the animation frames, hyperPad will automatically create a sprite sheet in HD and SD for you.

So make sure each image frame is the highest resolution you have, and that each frame is the exact same size with the object centred. If the object is not centred and each frame is a different size your animation will not play correctly. 

Also, make sure that the total combined frames do not exceed 2048x2048 pixels. This means if you have a 16 frame animation, each frame graphic can not exceed 128*128 pixels.

 After selecting where you wish to import your images from, navigate to the folder where you have the images saved and open it. There, you can select the images you want by tapping them.

Now, select each image, make sure they're named properly so they'll import in the correct order. These images will become our frames of the animation. Once they are selected, tap done to import. You will be prompted to name the animation once the import completes.

You can preview the animation to make sure it works correctly, by tapping and holding your finger on the newly created animated asset in the library. This will open the Asset Menu. Select Preview animation to play the animation sequence.

Import Sprite Sheet:

This second method is a bit more complex and relies on other tools. It does usually give the best results. This method requires the creation of a sprite sheet and an accompanying plist data file. Any program that can generate files compatible with Cocos2D will work. We recommend TexturePacker for this. The program can be downloaded for free here: https://www.codeandweb.com/texturepacker

Once your spritesheet and plist data have been created, Select Import Sprite Sheet from the animation import menu.

As with other assets, you're then prompted with a source to import from. Notice for sprite sheets you can not import from the Camera roll. This is because Sprite sheets require a PLIST data file along side the sprite sheet image.

Select your desired source and navigate to where you have the files stored.

Once you've found your files, simply tap them to select them then tap done in the top right corner to begin importing.

Note: You must select both the sprite sheet image and the plist data file or you will receive an error. Also if the Import SD+HD toggle is on, you must select 4 files. An SD and HD image, and an SD and HD Plist file.

Importing Particles 

Importing particles works the same way as importing a sprite sheet animation. Like sprite sheets, particles are comprised of 2 files. You have your particle graphic and a PLIST meta data file that contains the particle effects parameters. So when selecting and importing your particle effect you must select both files. Keep in mind, particles can be quite resource intensive so your particle graphic should be relatively small. We typically suggest not going over 64x64 pixles for an HD particle.

Once again, similar to graphics and animations the SD+HD toggle exists. 

You can use any particle creation app that will export a Cocos2D compatible particle system.

Importing Music & Sound Effects

Importing sounds and music into hyperPad is quite simple. Open the Import Assets menu and this time, select Music & Sound for the options of asset types to import.

From here, you can import audio files from your iTunes library, Files app and Dropbox.

Once you have selected your import source, simply navigate to the audio files you wish to import, select them and tap done. As before, you can import multiple files at once.

hyperPad can play all audio formats supported by iOS. For a full list of compatible files, check the iOS Developer Library here: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/MultimediaPG//UsingAudio/UsingAudio.html

Importing Fonts

With fonts there are two options. BMFonts and TTF fonts.

BM Font stands for Bitmap font. BMFonts, typically have a lower quality but offer performance benefits. BMFonts are great for situations where you have a lot of objects on screen and in situations where your text is constantly changing. Similar to Particles and spritesheet animations, BMFonts require a PNG (with every character), and a FNT data file. hyperPad can support any BMFont generator that works with cocos2D. One example is BMGlyph.

When importing BM fonts, you can only import from Dropbox. So make sure you have a dropbox account linked and open it. Navigate to where you have your font files saved.

 

Navigate to where your bmfont files are stores, then select the files and tap done (note, the image below shows 4 four files selected because the SD/HD toggle is active).

 

TTF stands for True Type Font and is the most common format and when downloading fonts online will likely be the file type that you receive. TTF Fonts have a much higher quality and have no pixelation when being displayed on any device. However, this higher quality comes at a performance cost. TTF Fonts are often used for situation when there are small amounts of text, like labels. Unlike BMFonts, there is only a single ttf file to deal with.

 Importing TTF type fonts is a similar process to other assets, however you have a few more import sources.

 Importing a font from Dropbox or Files app is similar to other assets. Simply navigate to where the font is located it and select it.

 

hyperPad is also capable of accessing the System Fonts included part of iOS of your iPad. To import one of these fonts, select System Fonts under the Import Source.

You'll be prompted with a large list of fonts to choose from and they give you a small preview of how they will appear. If you have a specific font in mind, you can jump to it alphabetically by tapping one of the letters to the right. When you find a font you like, simply tap it and then tap done.

 

Importing From Other Apps:

hyperPad can import content from 3rd party apps. If you're using an app that can export/share with other apps using the "Open In" dialog, then you can import a compatible asset into hyperPad.

Once you have chosen to export your asset to hypePad, you will be prompted with a window to select which project you want the asset to be imported to.

After the import is successful, your asset will be located in the Asset Library.