nativescript-media-generator

1.0.0 • Public • Published

NativeScript Media Generator

Greenkeeper badge Build Status npm version Dependency Status devDependency Status

Bountysource Flattr this git repo

CLI Utility that generates NativeScript image assets required for images, icons, and splash screens.

NPM

It requires your logo to have a solid background colour but does not distort or lose any image content so everything is at the maximum size without loss.

Installation

Need imagemagick

On Debian/Ubuntu:

sudo apt-get install imagemagick

on OS X:

brew install imagemagick
$ npm install -g nativescript-media-generator

Once installed, cd to the root of your NativeScript application and run:

$ tns-media-gen <logofilename.jpg> <backgroundcolourinhex-egFFF>

Or if you want to use the development version (nightly build), which maybe not stable!:

tns plugin add nativescript-media-generator@next

Usage

If using this plugin, we recommand an 1900x2850 Portrait Area as basis layout.

$ tns-media-gen logo.jpg fff

To create the config

$ tns-media-gen init

If you have created a mediagen-config.json file (see below), you can just run:

$ tns-media-gen

This will overwrite all logos and splash screen images in the <projectdir>/app directory with the correct sizes and in the correct location for NativeScript (As at 3.5)

The recommended image or logo size is 2000px x 2000px. Its not a problem if the logo isn't square.

It also creates a <projectdir>/Media directory that has images for the Apple and Android stores such as an app icon.

Custom Assets

You can create additional custom images if you need to submit to alternative app stores or have other needs that we haven't thought of yet.

Simply go to your project directory and run

$ tns-media-gen init

It will create an example file called mediagen-config.json which you can now edit. Add as many or few files as you need to the array.

Note: The default path for files is the <projectdir>/platforms directory, you might need to use ../ as in the example below

Example mediagen-config.json

{
  "mediaPath": "media",
  "icon": {
    "filename": "etc/images/icon.png",
    "background": "fff"
  },
  "splash": {
    "filename": "etc/images/splash.png",
    "background": "fff"
  },
  "images": [
    {
      "filename": "icon.png",
      "alias": "logo.png"
    },
    {
      "filename": "icon.png",
      "alias": "logo_login.png"
    }
  ]
}

Screenshots (Experimental)

Screenshots are a new feature that use PhantomJS to quickly generate a number of the screenshot assets you need when submitting to the app store. You need your local development server running when you execute mediagen so it can access the NativeScript versions of the files. Of course this won't be able to access a number of things in lots of apps but hopefully it should get you up on the app store pretty quickly. This is still pretty experimental, and also please be aware that it may seem to hang for a minute or so before you see the screenshots being generated (it does need to visit the page each time!)

Config

The config variables are below:

  • mediaPath: path to the output folder
  • icon: icon image
    • filename: path to source filename
    • background: solid colour in hex
  • splash: splash image
    • filename: path to source filename
    • background: solid colour in hex
  • images: an array of images which should generate for both platforms (NOTE: The biggest resolutution (100%) needed is 640dpi)
    • filename: the output file name with extension
    • alias to use (target filename)
  • custom images: an array of custom image objects for additional media if desired
    • width: the width of the image in pixels
    • height: the height of the image in pixels
    • path: the directory to save the output
    • filename: the output file name with extension
    • source: the source file, same definition as an icon or splash above
      • filename: path to source filename
      • background: solid colour in hex
  • screenshots: An array of screenshot objects
    • url: url to your local development server
    • name: name of the page for easy reference later on

Dependents (0)

Package Sidebar

Install

npm i nativescript-media-generator

Weekly Downloads

0

Version

1.0.0

License

MIT

Last publish

Collaborators

  • hypery2k