search

amirrajan / rubymotion-applied

RubyMotion documentation provided by the community. Submit a pull request to the docs for a free one year indie subscription.
Apache License 2.0
50 stars 9 forks source link

Documentation on Asset Catalogs #21

Open amirrajan opened 7 years ago

amirrajan commented 7 years ago

Here is a sample Asset Catalog that works (you'll want to put this in your ./resources directory):

Assets.xcassets.zip

These are the updates that have to be made into the Rakefile

app.info_plist['CFBundleIcons'] = {
  'CFBundlePrimaryIcon' => {
    'CFBundleIconName' => 'AppIcon',
    'CFBundleIconFiles' => ['AppIcon60x60']
  }
}

app.info_plist['CFBundleIcons~ipad'] = {
  'CFBundlePrimaryIcon' => {
    'CFBundleIconName' => 'AppIcon',
    'CFBundleIconFiles' => ['AppIcon60x60', 'AppIcon76x76']
  }
}
amirrajan commented 7 years ago

I use this script to generate my icons. First:

brew install imagemagick

Then create an icon with a size of 1024x1024 and run the following in bash:

cp icon.png 20x20.png
cp icon.png 20x20@2x.png
cp icon.png 20x20@3x.png
cp icon.png 29x29@2x.png
cp icon.png 29x29@3x.png
cp icon.png 40x40.png
cp icon.png 40x40@2x.png
cp icon.png 40x40@3x.png
cp icon.png 60x60@2x.png
cp icon.png 60x60@3x.png
cp icon.png 76x76.png
cp icon.png 76x76@2x.png
cp icon.png 83-5x83-5@2x.png

mogrify -resize 20x20 20x20.png
mogrify -resize 40x40 20x20@2x.png
mogrify -resize 60x60 20x20@3x.png
mogrify -resize 58x58 29x29@2x.png
mogrify -resize 87x87 29x29@3x.png
mogrify -resize 40x40 40x40.png
mogrify -resize 80x80 40x40@2x.png
mogrify -resize 120x120 40x40@3x.png
mogrify -resize 120x120 60x60@2x.png
mogrify -resize 180x180 60x60@3x.png
mogrify -resize 76x76 76x76.png
mogrify -resize 152x152 76x76@2x.png
mogrify -resize 167x167 83-5x83-5@2x.png
jwg2s commented 7 years ago

@amirrajan will flush this out into some wiki formatted documentation on what you and went through together to build this asset catalog. A rake task to get a base asset catalog would also be awesome as well.

amirrajan commented 7 years ago

I think I can add a readme.md file inside the Asset.xcasset folder. So I'm hoping that after someone does motion create CoolNewApp, they'll be able to navigate to this folder and see a straight forward way to update your icons and test it out on different simulators.

astechishin commented 7 years ago

@amirrajan I made a rake task: rule '.icns' => '.png' do |t| iconset = File.dirname(t.source) + '/' + File.basename(t.source, '.png') + '.iconset' mkdir_p iconset sh "sips -z 16 16 #{t.source} --out #{iconset}/icon_16x16.png" sh "sips -z 32 32 #{t.source} --out #{iconset}/icon_16x16@2x.png" sh "sips -z 32 32 #{t.source} --out #{iconset}/icon_32x32.png" sh "sips -z 64 64 #{t.source} --out #{iconset}/icon_32x32@2x.png" sh "sips -z 128 128 #{t.source} --out #{iconset}/icon_128x128.png" sh "sips -z 256 256 #{t.source} --out #{iconset}/icon_128x128@2x.png" sh "sips -z 256 256 #{t.source} --out #{iconset}/icon_256x256.png" sh "sips -z 512 512 #{t.source} --out #{iconset}/icon_256x256@2x.png" sh "sips -z 512 512 #{t.source} --out #{iconset}/icon_512x512.png" cp t.source, "#{iconset}/icon_512x512@2x.png" sh "iconutil -c icns #{iconset}" rm_r iconset end

And then added the following to my Rakefile: task :icons => ['resources/app-icon.icon_gen']

astechishin commented 7 years ago

Sorry, I need to review more. The task line above will not generate the appropriate elements. I do think that the rule provided could be the basis for what is needed and does not require downloading extra software (sips and iconutil are in the base OS, iconutil may be part of Xcode, not sure)

amirrajan commented 7 years ago

@astechishin I was going under the assumption that most ruby devs would have brew installed and wouldn't be hesitant to download imagemagick. Maybe a gem would be better: https://github.com/minimagick/minimagick? (note that this still requires image magick to be installed).

hboon commented 7 years ago

Not following the history, but chanced upon this. brew being installed is a good bet, and at least a good practise for developers using macOS.

katsuyoshi commented 7 years ago

@amirrajan I tried to submit my app. There were two issues in my case.

  1. ERROR ITMS-90023: "Missing required icon file. The bundle does not contain an app icon for iPad of exactly 167x167' pixels, in .png format for iOS versions supporting iPad Pro." I added 'AppIcon83.5x83.5' to CFBundleIconFiles in CFBundleIcons~ipad.

  2. Missing Info.plist value - A value for the Info.plist key CFBundleIconName is missing in the bundle. After submitted my app, a mail was sent. It says CFBundleIconName is missing in the Info.plist I added app.info_plist['CFBundleIconName'] = "AppIcon".

After that, my app is successfully uploaded and I can install the app via TestFlight.

Finally my Rakefile is

app.info_plist['CFBundleIconName'] = "AppIcon"
app.info_plist['CFBundleIcons'] = {
  'CFBundlePrimaryIcon' => {
    'CFBundleIconName' => 'AppIcon',
    'CFBundleIconFiles' => ['AppIcon60x60']
  }
}
app.info_plist['CFBundleIcons~ipad'] = {
  'CFBundlePrimaryIcon' => {
    'CFBundleIconName' => 'AppIcon',
    'CFBundleIconFiles' => ['AppIcon60x60', 'AppIcon76x76', 'AppIcon83.5x83.5']
  }
}

I tried for Apple Watch. This worked fine.

Rakefile for Apple Watch target:

app.watch_app_config.info_plist['CFBundleIcons'] = {
  'CFBundlePrimaryIcon' => {
    'CFBundleIconName' => 'AppIcon',
    'CFBundleIconFiles' => %w(AppIcon24x24
                              AppIcon27.5x27.5
                              AppIcon29x29
                              AppIcon40x40
                              AppIcon86x86
                              AppIcon98x98
                              AppIcon1024x1024
                             )
  }
}
amirrajan commented 7 years ago

Thanks @katsuyoshi, I'll get the default template updated to include these additions (hope it wasn't too painful).

Lax commented 7 years ago

It's safe to remove 'AppIcon60x60' from app.info_plist['CFBundleIcons~ipad'], ['AppIcon76x76', 'AppIcon83.5x83.5'] are required.

hboon commented 7 years ago

Slight change (added 29x29.png and rename file icon.png):

cp icon.png 20x20.png
cp icon.png 20x20@2x.png
cp icon.png 20x20@3x.png
cp icon.png 29x29.png
cp icon.png 29x29@2x.png
cp icon.png 29x29@3x.png
cp icon.png 40x40.png
cp icon.png 40x40@2x.png
cp icon.png 40x40@3x.png
cp icon.png 60x60@2x.png
cp icon.png 60x60@3x.png
cp icon.png 76x76.png
cp icon.png 76x76@2x.png
cp icon.png 83-5x83-5@2x.png

mogrify -resize 20x20 20x20.png
mogrify -resize 40x40 20x20@2x.png
mogrify -resize 60x60 20x20@3x.png
mogrify -resize 29x29 29x29.png
mogrify -resize 58x58 29x29@2x.png
mogrify -resize 87x87 29x29@3x.png
mogrify -resize 40x40 40x40.png
mogrify -resize 80x80 40x40@2x.png
mogrify -resize 120x120 40x40@3x.png
mogrify -resize 120x120 60x60@2x.png
mogrify -resize 180x180 60x60@3x.png
mogrify -resize 76x76 76x76.png
mogrify -resize 152x152 76x76@2x.png
mogrify -resize 167x167 83-5x83-5@2x.png
mv icon.png 1024x1024.png
hboon commented 7 years ago

Also worth using a storyboard for the launch image:

app.info_plist['UILaunchStoryboardName'] = 'Launch Screen'
hboon commented 7 years ago

A slight change to cater for iPad Pro:

app.info_plist['CFBundleIcons'] = {
  'CFBundlePrimaryIcon' => {
    'CFBundleIconName' => 'AppIcon',
    'CFBundleIconFiles' => ['AppIcon60x60']
  }
}

app.info_plist['CFBundleIcons~ipad'] = {
  'CFBundlePrimaryIcon' => {
    'CFBundleIconName' => 'AppIcon',
    'CFBundleIconFiles' => ['AppIcon60x60', 'AppIcon76x76', 'AppIcon83.5x83.5']
  }
}
hboon commented 7 years ago

Whoops. Final version:

  app.info_plist['CFBundleIcons'] = {
    'CFBundlePrimaryIcon' => {
      'CFBundleIconName' => 'AppIcon',
      'CFBundleIconFiles' => ['AppIcon20x20', 'AppIcon29x29', 'AppIcon40x40', 'AppIcon60x60']
    }
  }
  app.info_plist['CFBundleIcons~ipad'] = {
    'CFBundlePrimaryIcon' => {
      'CFBundleIconName' => 'AppIcon',
      'CFBundleIconFiles' => ['AppIcon20x20', 'AppIcon29x29', 'AppIcon40x40', 'AppIcon76x76', 'AppIcon83.5x83.5']
    }
  }
hboon commented 6 years ago

(Based on the iOS project template shipped with RubyMotion 5.5)

Since there are no 64-bit non-retina iPads anymore, we can trim resources/Assets.xcassets/AppIcon.appiconset/Contents.json to:

{
  "images" : [
    {
      "idiom" : "iphone",
      "size" : "20x20",
      "filename" : "20x20@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "size" : "20x20",
      "filename" : "20x20@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "size" : "29x29",
      "filename" : "29x29@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "size" : "29x29",
      "filename" : "29x29@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "size" : "40x40",
      "filename" : "40x40@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "size" : "40x40",
      "filename" : "40x40@3x.png",
      "scale" : "3x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "60x60@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "size" : "60x60",
      "filename" : "60x60@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "ipad",
      "size" : "20x20",
      "filename" : "20x20~ipad@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "ipad",
      "size" : "29x29",
      "filename" : "29x29~ipad@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "ipad",
      "size" : "40x40",
      "filename" : "40x40~ipad@2x.png",
      "scale" : "2x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "76x76~ipad@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "ipad",
      "size" : "83.5x83.5",
      "filename" : "83.5x83.5~ipad@2x.png",
      "scale" : "2x"
    },
    {
      "size" : "1024x1024",
      "idiom" : "ios-marketing",
      "filename" : "1024x1024.png",
      "scale" : "1x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

and delete these in resources/Assets.xcassets/AppIcon.appiconset:

amirrajan commented 6 years ago

I'll be updating the next set of milestones this weekend. One of them will be to make sure all the RM templates are synced up with the public repos and start accepting contributions again.

caramdache commented 6 years ago

Hmm, I'm confused, @hboon's suggestion from Oct 2017 for app.info_plist['CFBundleIcons'] does not seem to have made its way into the default template.

caramdache commented 6 years ago

BTW, I case this is of interest, I've just created an Asset catalog for iOS 12 using XCode 10, then backported to RM. It includes the latest and greatest devices (XR, XS, XS Max).

{
  "images" : [
    {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "2688h",
      "filename" : "Default-414x896p@3x.png",
      "minimum-system-version" : "12.0",
      "orientation" : "portrait",
      "scale" : "3x"
    },
    {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "2688h",
      "filename" : "Default-414x896l@3x.png",
      "minimum-system-version" : "12.0",
      "orientation" : "landscape",
      "scale" : "3x"
    },
    {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "1792h",
      "filename" : "Default-414x896p@2x.png",
      "minimum-system-version" : "12.0",
      "orientation" : "portrait",
      "scale" : "2x"
    },
    {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "1792h",
      "filename" : "Default-414x896l@2x.png",
      "minimum-system-version" : "12.0",
      "orientation" : "landscape",
      "scale" : "2x"
    },
    {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "2436h",
      "filename" : "Default-375x812p@3x.png",
      "minimum-system-version" : "11.0",
      "orientation" : "portrait",
      "scale" : "3x"
    },
    {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "2436h",
      "filename" : "Default-375x812l@3x.png",
      "minimum-system-version" : "11.0",
      "orientation" : "landscape",
      "scale" : "3x"
    },
    {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "736h",
      "filename" : "Default-414x736p@3x.png",
      "minimum-system-version" : "8.0",
      "orientation" : "portrait",
      "scale" : "3x"
    },
    {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "736h",
      "filename" : "Default-414x736l@3x.png",
      "minimum-system-version" : "8.0",
      "orientation" : "landscape",
      "scale" : "3x"
    },
    {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "667h",
      "filename" : "Default-375x667p@2x.png",
      "minimum-system-version" : "8.0",
      "orientation" : "portrait",
      "scale" : "2x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "iphone",
      "filename" : "Default-320x480p@2x.png",
      "extent" : "full-screen",
      "minimum-system-version" : "7.0",
      "scale" : "2x"
    },
    {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "retina4",
      "filename" : "Default-320x568p@2x.png",
      "minimum-system-version" : "7.0",
      "orientation" : "portrait",
      "scale" : "2x"
    },
    {
      "orientation" : "portrait",
      "idiom" : "ipad",
      "filename" : "Default-768x1024p@2x.png",
      "extent" : "full-screen",
      "minimum-system-version" : "7.0",
      "scale" : "2x"
    },
    {
      "orientation" : "landscape",
      "idiom" : "ipad",
      "filename" : "Default-768x1024l@2x.png",
      "extent" : "full-screen",
      "minimum-system-version" : "7.0",
      "scale" : "2x"
    },
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}
amirrajan commented 6 years ago

cc @astechishin

There is a new rake task called icons that may help with this: https://github.com/amirrajan/rubymotion-templates/pull/10

caramdache commented 6 years ago

@amirrajan, excellent, thanks !