0
    お久しぶりでございます...

    11月の中旬あたりまでブログ書いてたような気がしてましたが、
    前回が11月2日!!
    一ヶ月もの長い間お待たせしてしまいました

    積もる話はさて置いて、

    早速、アプリに自分で描いた画像を表示させたいと思います

    [今回の内容]
    ■ゲームに使う画像のサイズ
    ■ゲームに使う画像ファイル形式
    ■画像をプロジェクトに取り込む
    ■UIImageで画像を読み込みImageViewに貼り付ける
    <画像編集ソフトについて>

    ということで、まずは画像を用意しなくてはいけませんね

    今回用意していただきたい画像は、キリンさんとライオンさんの画像です


    ■ゲームに使う画像のサイズ

    キリンさんもライオンさんも、ゲームでは縦横40ピクセルなので、
    縦横40ピクセルの画像を... といいたいところですが、
    縦横80ピクセルと縦横40ピクセルの2種類の画像を用意してください

    画像を作る際に、まず80ピクセルのものを作って「大きい画像として保存」し、
    解像度を40ピクセルに変更して「小さい画像として保存」するとよいでしょう

    なぜ2種類?かといいますと、
    iPhone4から画面の解像度が縦横ともに2倍になりまして、
    2倍サイズの画像を用意しておくと
    iPhone4以降の高解像度の画面での見栄えがよくなるからなのです
    (なので「絶対に画像を2種類用意しなくてはダメ」ということではありません)

    保存するときの名前は、
    小さいキリン(40x40ピクセル) ---> kirin
    大きいキリン(80x80ピクセル) ---> kirin@2x
    小さいライオン(40x40ピクセル) ---> lion
    大きいライオン(80x80ピクセル) ---> lion@2x
    としてください

    大きい画像のファイル名は、小さい画像のファイル名の後に
    @2x」をつけてください
    それだけで、iPhone4より前の機種と以降の機種で
    自動的に画像を切り替えてくれます


    ■ゲームに使う画像ファイル形式

    そして、利用する画像のファイル形式は、
    JPEGPNG が良いでしょう

    今回の場合、
    キリンさんとライオンさんは背景を透かして見せたいので、
    PNG形式を使用します

    画像を保存する際には、背景を透明にしてPNG形式を選択してください

    ちなみに、キリンさんとライオンさんの画像は用意しているので
    画像を作るのが面倒な方は、下の画像を右クリックで保存して
    ご自由にお使いください

    kirin   kirin@2x   lion   lion@2x

    さっきも書きましたが、保存するときにファイル名を、
    小さいキリン(40x40ピクセル) ---> kirin
    大きいキリン(80x80ピクセル) ---> kirin@2x
    小さいライオン(40x40ピクセル) ---> lion
    大きいライオン(80x80ピクセル) ---> lion@2x

    としてください


    ■画像をプロジェクトに取り込む

    それでは、Xcodeへ移りましょう...
    とはいっても、まずは準備があります

    さっき用意した4つの画像を、
    プロジェクトのフォルダの中に移動するのですが、

    今回の場合、プロジェクトの[testGame]-[testGame]フォルダの中に、
    新しくフォルダを[images]という名前で作ってください

    folder1


    そして、その[images]フォルダの中に画像を移してください

    folder2

    それでは、ひとつ上のフォルダに戻って、
    Xcodeでプロジェクトを起動して
    [images]フォルダをXcodeへ移させます

    [images]フォルダをクリック&ドラッグして、
    プロジェクトの左側に表示されている[Supporting Files]の中に
    放り込むといいでしょう

    移動


    すると、確認画面が出てきます

    確認

    ここは、プロジェクトのフォルダの中に自分で新たにフォルダを
    用意しているので、「Create groups for any added folders」に
    チェックが入っている状態で「Finish」ボタンを押して決定すればいいでしょう

    すると、左側のビューに[images]フォルダと用意した画像が追加されました

    移動できました

    これで、前準備は終わりました
    いよいよ、プログラムに取り掛かりましょう


    ■UIImageで画像を読み込みImageViewに貼り付ける

    まずは、TestGameViewController.h の中に
    画像用の UIImage を用意します

    UILabel *scoreLB, *resultLB;
       
    UIImage *kirinImg, *lionImg;
       
    BOOL moveLFlag, moveRFlag, startFlag;


    .h


    次に、TestGameViewController.m に移って、
    - (void) loadView の中で、
    黄色に指定していた kirinIV と 薄い茶色に指定していた lionIV の内容を変更します

    kirinIV = [[UIImageView alloc] initWithFrame:CGRectMake(60.0, 220.0, 40.0, 40.0)];
    //kirinIV.backgroundColor = [UIColor yellowColor];
    NSString *fileName= [[NSBundle mainBundle] pathForResource:@"kirin" ofType:@"png"];
    kirinImg = [[UIImage alloc] initWithContentsOfFile:fileName];
    kirinIV.image = kirinImg;
    [self.view addSubview:kirinIV];
       
    lionIV = [[UIImageView alloc] initWithFrame:CGRectMake(140.0, 0.0, 40.0, 40.0)];
    //lionIV.backgroundColor = [UIColor colorWithRed:0.9 green:0.7 blue:0.5 alpha:1.0];
    fileName= [[NSBundle mainBundle] pathForResource:@"lion" ofType:@"png"];
    lionImg = [[UIImage alloc] initWithContentsOfFile:fileName];
    lionIV.image = lionImg;
    [self.view addSubview:lionIV];

    ◇キリンさんの赤い部分
    1行目:fileName(NSString) に、画像ファイル名ファイル形式を代入
    2行目:kirinImg(UIImage)にfileNameに指定した画像ファイルを持たせる
    3行目:kirinIV(UIImageView)に、kirinImg(UIImage)を貼り付ける
    ※緑の行は消してかまいません

    ◇ライオンさんの赤い部分
    1行目:同じくfileName に、画像ファイル名ファイル形式を代入
     ※fileName は前のものを使い回すので新たにNSString と書かなくて良いです
    2行目:lionImg(UIImage)にfileNameに指定した画像ファイルを持たせる
    3行目:lionIV(UIImageView)に、lionImg(UIImage)を貼り付ける
    ※緑の行は消してかまいません

    .m


    そして、前回からずいぶん時間が空きましたが、
    dealloc は忘れずに

    - (void)dealloc
    {
        [kirinImg release];
        [lionImg release];
       
        [resultLB release];
        [scoreLB release];
        [scoreIV release];
       
        [finishBT release];
        [startBT release];
        [moveRBT release];
        [moveLBT release];
       
        [tree1IV release];
        [tree2IV release];
        [apple1IV release];
        [apple2IV release];
       
        [lionIV release];
        [kirinIV release];
        [greenIV release];
       
        [super dealloc];
    }


    dealloc



    それでは、久しぶりの[Run]!!

    どうですか?

    まぁ、ちょっと絵はあれですが、
    ImageViewに画像が貼り付けられました
    もうこれで、ゴールは見えたも同然ですね
    ゲームを進めるといろいろ問題が出てきますが...

    png_alpha

    ここで、自作のPNG形式の画像が透明設定になっていなかったら
    下のようになってしまうでしょう
    もう一度、透明設定で保存してみてください

    png_non-alpha


    さて、次回は、
    キリンさんとライオンさんの勝負の結果による
    画像の変更に挑戦してみましょう

    ... もうそんなにお待たせしませんので、ご安心を...



    <画像編集ソフトについて>

    画像編集ソフトには超有名なPhotoshopがありますが、
    それがまた超高いことでも有名でありましてなかなか手が出ません
    Adobe Photoshop CS5 Windows版 (32/64bit)[Amazon]

    そんなPhotoshopにもプロ仕様の「Photoshop CS」(約10万円)の他に
    簡易版の「Photoshop Elements」が約15000円くらいであります
    Adobe Photoshop Elements 10 日本語版 Windows/Macintosh版[Amazon]

    さらに、Wacomのペンタブレット(約1万円)を買うと、
    ちょいと型落ちですがElements(や他のソフトも!)が付属しているものもあります
    ペンタブレットがあると、お絵かきにも便利ですしね
    Wacom Bamboo Fun Sサイズ フォトショップエレメンツ、他付属[Amazon]
    ※Macで使えない付属ソフトもあるのでご注意を!!

    しかも、Photoshopの簡易版といっても数年前の高いPhotoshopと
    同等以上の機能があるようですしね〜(たぶん)

    しかし、しかし更に!!

    世の中には親切な方がたくさんいらっしゃるもので、
    Photoshopの代わりになるようなフリーのソフトがあるんですね
    有名なのが「GIMP」です
    無料でダウンロードできるので、
    すぐにでも絵を描きたい方はこちらをどうぞ
    Mac版 >>> GIMP for Mac OS X
    Win版 >>> GIMP 2.6.11






    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    Calendar
    S M T W T F S
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
    << May 2018 >>
    My Apps
    有料アプリ

    無料アプリ

    Selected entries
    Categories
    AdSense
    Sponsored Links
    Archives
    Recent comment
    Links
    Profile
    Search this site.
    Others
    Mobile
    qrcode
    powered
    無料ブログ作成サービス JUGEM