1. iTamabi 13
第3回：iPhoneアプリ実践開発講座 1
画像ファイルの読み込み
画像でアニメーションを作成する
2013年9月30日
多摩美術大学 PBL科目
担当：田所 淳

2. 今日の内容
‣ 今回から、実践的なアプリケーション開発を進めます!!
‣ 今日のテーマ - 画像の表示とアニメーション
‣ openFrameworksに画像ファイルを読み込み表示する
‣ 2枚の画像を入れ替えてみる
‣ 連続する画像を読み込んで、自作アニメーションに挑戦!!

3. iPhoneに画像で画像ファイルを扱う
‣ iPhoneで、外部の画像ファイルを読込み表示するには
‣ ofImageクラスを使用する
‣ ofImage ‒ freeImageライブラリをopenFrameworksで使用
しやすいようにしたクラス
‣ 主要な画像フォーマットに対応している
‣ PNG, JPEG, TIFF, BMP, GIF
‣ 読み込む画像ファイルの位置に注意!!
‣ [プロジェクトのフォルダ]/bin/data/

4. iPhoneに画像で画像ファイルを扱う
‣ 画像の配置例
‣ appsに「iTamabi110531/01_loadImage」プロジェクト
‣ プロジェクトの「bin/data」内に配置する

5. iPhoneに画像で画像ファイルを扱う
‣ iPhoneの画面いっぱいに画像を表示したい場合
‣ iPhoneの画像解像度、320 x 480 pixel にあわせる
320px
480px

6. オリジナルの画像を準備
‣ せっかくなので、自分の顔を表示してみよう!!
‣ Photo boothで撮影して、画像サイズを 320 x 480pxに

7. 画像を読み込む手順
‣ ofImageのインスタンスを生成
‣ 例) ofImage myImage;
‣ ofImageクラスのインスタンスmyImageを生成
‣ 画像ファイルを読み込み
‣ 例) myImage.loadImage("hoge.png");
‣ bin/dataフォルダにある hoge.png ファイルを読み込む
‣ 画像を表示
‣ 例) myImage.draw(0, 0);
‣ 座標(0, 0)を左上にして、画像を表示

8. 1枚の画像を表示する
‣ 実際のコードは、サンプルプログラムを参照
‣ iTamabi110531 > 01_loadImage

9. 1枚の画像を表示する
‣ testApp.h
#pragma once
#include "ofMain.h"
#include "ofxiPhone.h"
#include "ofxiPhoneExtras.h"
class testApp : public ofxiPhoneApp {
public:
void setup();
void update();
void draw();
void exit();
void touchDown(ofTouchEventArgs &touch);
void touchMoved(ofTouchEventArgs &touch);
void touchUp(ofTouchEventArgs &touch);
void touchDoubleTap(ofTouchEventArgs &touch);
void lostFocus();
void gotFocus();
void gotMemoryWarning();
void deviceOrientationChanged(int newOrientation);
//ofImageクラスのインスタンスmyImageを生成
ofImage myImage;
};

10. 1枚の画像を表示する
‣ testApp.mm
#include "testApp.h"
void testApp::setup(){!
//iPhone初期設定
! ofRegisterTouchEvents(this);
! ofxAccelerometer.setup();
! ofxiPhoneAlerts.addListener(this);
! ofBackground(127,127,127);
//画像ファイルの読み込み
myImage.loadImage("myImage.png");
}
void testApp::update(){
}
void testApp::draw(){
//読み込んだ画像ファイルを座標(0, 0)を基準点にして描画
myImage.draw(0, 0);
}
// [後略]

11. 1枚の画像を表示する
‣ 完成!!

12. 2枚の画像を切り替える
‣ さらに工夫を加えてみる
‣ 画面をタッチすると別の画像に切り替わるようにしてみる
画面をタッチしていない 画面をタッチしてる

13. 2枚の画像を切り替える
‣ Photo Boothでもう一枚画像を準備してみる
‣ 例えば、2種類の顔に!!
画面をタッチしてる画面をタッチしていない

14. 2枚の画像を切り替える
‣ プログラムの変更ポイント
‣ ofImageのインスタンスを2つ用意する
‣ image_a と image_b
‣ 現在画面をタッチしているか否かを判定する変数を用意
‣ bool touched (true / false)
‣ draw() 関数内でタッチ状態を判定して描画する画像を決定
‣ if ∼ else 文を用いる
‣ 「もし、画面をタッチしていたら imageA を表示、そうで
なければ imageB を表示せよ」

15. 2枚の画像を切り替える
‣ testApp.h
#pragma once
#include "ofMain.h"
#include "ofxiPhone.h"
#include "ofxiPhoneExtras.h"
class testApp : public ofxiPhoneApp {
public:
void setup();
void update();
void draw();
void exit();
void touchDown(ofTouchEventArgs &touch);
void touchMoved(ofTouchEventArgs &touch);
void touchUp(ofTouchEventArgs &touch);
void touchDoubleTap(ofTouchEventArgs &touch);
void lostFocus();
void gotFocus();
void gotMemoryWarning();
void deviceOrientationChanged(int newOrientation);
//ofImageクラスのインスタンスを2枚分用意
ofImage image_a;
ofImage image_b;
//画面をタッチしているか否かを判定
bool touched;
};

16. 2枚の画像を切り替える
‣ testApp.mm (1/2)
#include "testApp.h"
void testApp::setup(){!
//iPhone初期設定
! ofRegisterTouchEvents(this);
! ofxAccelerometer.setup();
! ofxiPhoneAlerts.addListener(this);
! ofBackground(127,127,127);
//タッチ状態をFalseに
touched = false;
//画像ファイルを2枚読込み
image_a.loadImage("image_a.jpg");
image_b.loadImage("image_b.jpg");
}
void testApp::update(){
}
void testApp::draw(){
if (touched) {
//もしタッチされていたら、image_bを表示
image_b.draw(0, 0);
} else {
//そうでなければ、image_aを表示
image_b.draw(0, 0);
}
}

17. 2枚の画像を切り替える
‣ testApp.mm (2 / 2)
// [中略]
void testApp::touchDown(ofTouchEventArgs &touch){
//タッチ状態をTrueに
touched = true;
}
void testApp::touchMoved(ofTouchEventArgs &touch){
}
void testApp::touchUp(ofTouchEventArgs &touch){
//タッチ状態をFalseに
touched = false;
}
// [後略]

18. 2枚の画像を切り替える
‣ 完成!!

19. アニメーションを作成
‣ アニメーションの画像の記録には、沢山のofImageが必要
‣ ひとつひとつインスタンス化していては大変
‣ 配列を利用すると便利
‣ 配列 = 変数のロッカー
‣ ロッカーのひとつひとつに、アニメのコマを記録する
‣ 例：x[4] の配列
x[0] x[1] x[2] x[3] .........

20. アニメーションを作成
‣ ofImageの配列を生成するには
‣ 最初に全体のコマ数を定義する
‣ 例：#define FRAMENUM 12 //読み込む画像の枚数
‣ 定義した枚数で配列を生成する
‣ ofImage myImage[FRAMENUM];

21. アニメーションを作成
‣ アニメーション画像を準備
‣ コマ撮りアニメーションを作成してみよう!!
‣ すこしづつ動きながら画像をPhotoBoothで撮影する
‣ もしくは、手書きでアニメーションなど

22. アニメーションを作成
‣ testApp.h
#pragma once
#include "ofMain.h"
#include "ofxiPhone.h"
#include "ofxiPhoneExtras.h"
#define FRAMENUM 12 //読み込む画像の枚数
class testApp : public ofxiPhoneApp {
public:
! void setup();
! void update();
! void draw();
! void exit();
! void touchDown(ofTouchEventArgs &touch);
! void touchMoved(ofTouchEventArgs &touch);
! void touchUp(ofTouchEventArgs &touch);
! void touchDoubleTap(ofTouchEventArgs &touch);
! void lostFocus();
! void gotFocus();
! void gotMemoryWarning();
! void deviceOrientationChanged(int newOrientation);
! //ofImageのインスタンスの配列を生成
! ofImage myImage[FRAMENUM];
! //現在のフレーム数を記録する変数
! int currentFrame;
};

23. アニメーションを作成
‣ testApp.mm (1/2)
#include "testApp.h"
void testApp::setup(){!
//iPhone初期設定
! ofRegisterTouchEvents(this);
! ofxAccelerometer.setup();
! ofxiPhoneAlerts.addListener(this);
! ofBackground(255, 255, 255);
ofSetFrameRate(24);
//連番がふられた画像を順番に読み込み
for (int i = 0; i < FRAMENUM; i++) {
//ファイル名を一時的に格納する文字列
char char1[32];
//連番のファイル名を生成
sprintf(char1, "images/myAnim%04d.png", i+1);
//画像をofImageのインスタンスの配列に読み込み
myImage[i].loadImage(char1);
}
//再生フレームを0から始める
currentFrame = 0;
}
// [中略]

24. アニメーションを作成
‣ testApp.mm (2/2)
‣void testApp::draw(){
//現在のフレームの画像を表示
myImage[currentFrame].draw(0, 0);
//フレーム数をひとつ進める
currentFrame++;
//もし指定した枚数よりフレーム数が大きくなったら
//フレーム数をリセット
if (currentFrame > FRAMENUM - 1) {
currentFrame = 0;
}
}

25. アニメーションを作成
‣ 完成!!

26. アニメーション応用
‣ 配布したアニメーションのテンプレートを利用して、いろいろ
応用が可能
‣ タッチした位置によってスピードが変化する
‣ タッチした場所で連続してアニメーションする
‣ 手書きアニメーションの味を生かした表現

27. アニメーション応用
‣ 参考：Press Tube
‣ http://www.presstube.com/

28. アニメーション応用
‣ イラストや写真が得意だけど、プログラムは苦手という人
‣ 趣向を凝らした、インタラクティブなアニメーションを作成し
てみる、という方向性もアリです!!