× Initiating database migration review
× Database migration started
 
 
 

Image Formats

 
 

JPG


This type of image is used for most texturing needs as it is very compact and can host complex, rich textured images, like faces or nature etc. It is used on solid meshes and opaque surfaces.

PROS:
• Very compact
• Wide range of compression choices

CONS:
• No transparency
• Deteriorates on resave
• Deteriorates on rescale
• Bad aspect on sharp fonts
• Has artefacts



 
 

PNG-24 or PNG-8 (Opaque)


This type of image is used for sharp clean images with solid colors and exact edges. Great for text or logos. Please see further optimizations here.

PROS:
• Very compact on solid colors
• Does not deteriorate on resave
• Great for fonts and logos
• No artefacts

CONS:
• No transparency
• Deteriorates on rescale




 
 

PNG-32 (with transparency)


This type of images add transparency to the lossless png format. Great for fast builds or intermediary images.

PROS:
• Transparent
• Very compact on solid colors
• Does not deteriorate on resave
• Great for fonts and logos
• No artefacts

CONS:
• Huge size for complex images
• Deteriorates on rescale
• Pre-multiplication on alpha




 
 

GIF (with or without transparency, animated or not)


This type of images can be used for animated textures without the need for a lot of frames or transparent video.

PROS:
• Compact
• Respects inner timings for animation
• Does not require alpha mask

CONS:
• Limited palette
• Only 100% or 0% pixel opacity, no intermediate levels
• Huge size if used instead of motion video

NOTES:
• For transparent GIFs all frames must be baked in (see EZGIF Optimize tool to combine all frames in a whole)
• Instead of GIFs made from videos consider videos (for transparent GIFs consider transparent videos)
• If the GIF file comes from an animation with anti-aliased edges use Matte None and No Transparency Dither to prevent any artifacts on the edge pixels.



 
 

IMAGE + ALPHA


This is a combination of two images to create a transparent texture. Any combination of JPGs and/or PNGs can be used to create an alpha image, but for PNGs either the transparency or grey palette is used instead of the just the grey scale palette for JPG.

Syntax:
model.setTexture ( ['MyTexture.png','MyMask.jpg'] );

PROS:
• Full range of transparency
• Very compact
• Adds transparency to rich textures
• No pre-multiplication on alpha
• Can have smaller size alpha than color
• Can use any alpha with any image

CONS:
• Deteriorates on resave (JPG)
• Deteriorates on rescale (JPG)
• Bad aspect on sharp fonts (JPG)
• Has artefacts (JPG)
• Must save 2 files
• Must pad the color image at least 2 pixels




 
 
For IMAGE + ALPHA the size of the alpha image can be smaller but the final texture that the user will see on a mesh will be rendered in the device at the color image’s resolution.
 
 
For example, if you want to create a solid color with a variable transparency image, like an image of clouds in the sky, the color image must also be high resolution, or at least the same resolution as the transparency image.

Some textures are not going to be scalable to powers of 2 without stretching off the sides. In this case stretch the one that is closest to a power of 2 or add a canvas to the image to make it scalable. In the latter case you must either use the texture with the added canvas (like extra transparent canvas around a button) or map the UV coordinates in 3D to match the original aspect ratio.

The rescaling should only be done with the original source of the image, vector/font or with smart objects. Not from the already saved image.

In the case of PNG images, rescaling generates a row of extra anti-aliased pixels, and even resizing the image to a smaller resolution size will result in increasing the file size.



 
 

Sizes and scaling

The maximum texture size is 2048x2048 pixels.

The width and height of the texture must be pixelated to a power of 2. The usable values are: 16, 32, 64, 128, 256, 512, 1024, 2048 (check total memory used, 1MP of texture = 4MB of memory. Apple devices are limited to 100MB, if exceeded the app or blipp breaks). The width and height can be different.

 
 

Sprites

In blippar you can use only parts of a texture without setting the UV coordinates on the mesh.

This is most useful on system planes that only have one possible UV layout.

 
 

Syntax

ModelA.setTextureOffset(0.25, 0.875);
ModelA.setTextureScale(0.25, 0.125);

Texture Scale determines the amount of scaling along X and Y of the texture. X and Y vary between 0 and 1.

Texture Offset determines the amount of shifting along X and Y of the texture from the original coordinates space (by convention, the top-left corner). X and Y vary between 0 and 1.

You can Blipp the image on the right to see how texture scaling and offset can be used.
Below, is the texture image used for the "Please Confirm Age:" page.



 
 

Example:

To place the "red arrow" pointing up, the following setting were used:
ArrowUp.setTextureOffset(1/4, 3/4);
ArrowUp.setTextureScale(1/4, 1/8);

The size of the "red arrow" relatively to the whole image is a 1/4 of the texture along the width (the X axis), and 1/8 along the height (the Y axis). It is positioned at a 1/4 from the left edge and 3/4 from the top edge (the origin being the top left corner).