iTamabi 13　第3回：iPhoneアプリ実践開発講座 1画像ファイルの読み込み画像でアニメーションを作成する

2013年9月30日多摩美術大学 PBL科目担当：田所 淳

今日の内容‣ 今回から、実践的なアプリケーション開発を進めます!!

‣ 今日のテーマ - 画像の表示とアニメーション‣ openFrameworksに画像ファイルを読み込み表示する‣ 2枚の画像を入れ替えてみる‣ 連続する画像を読み込んで、自作アニメーションに挑戦!!

iPhoneに画像で画像ファイルを扱う‣ iPhoneで、外部の画像ファイルを読込み表示するには‣ ofImageクラスを使用する‣ ofImage ‒ freeImageライブラリをopenFrameworksで使用しやすいようにしたクラス

‣ 主要な画像フォーマットに対応している‣ PNG, JPEG, TIFF, BMP, GIF

‣ 読み込む画像ファイルの位置に注意!!‣ [プロジェクトのフォルダ]/bin/data/

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

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

320px

480px

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

画像を読み込む手順‣ ofImageのインスタンスを生成‣ 例) ofImage myImage;‣ ofImageクラスのインスタンスmyImageを生成

‣ 画像ファイルを読み込み‣ 例) myImage.loadImage("hoge.png");‣ bin/dataフォルダにある”hoge.png”ファイルを読み込む

‣ 画像を表示‣ 例) myImage.draw(0, 0);‣ 座標(0, 0)を左上にして、画像を表示

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

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; };

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);}

// [後略]

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

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

画面をタッチしていない 画面をタッチしてる

2枚の画像を切り替える‣ Photo Boothでもう一枚画像を準備してみる‣ 例えば、2種類の顔に!!

画面をタッチしてる画面をタッチしていない

2枚の画像を切り替える‣ プログラムの変更ポイント

‣ ofImageのインスタンスを2つ用意する‣ image_a と image_b

‣ 現在画面をタッチしているか否かを判定する変数を用意‣ bool touched (true / false)

‣ draw() 関数内でタッチ状態を判定して描画する画像を決定‣ if ～ else 文を用いる‣ 「もし、画面をタッチしていたら imageA を表示、そうでなければ imageB を表示せよ」

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;};

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); }}

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;}

// [後略]

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

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

‣ 例：x[4] の配列

x[0] x[1] x[2] x[3] .........

アニメーションを作成‣ ofImageの配列を生成するには

‣ 最初に全体のコマ数を定義する‣ 例：#define FRAMENUM 12 //読み込む画像の枚数

‣ 定義した枚数で配列を生成する‣ ofImage myImage[FRAMENUM];

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

アニメーションを作成‣ 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;};

アニメーションを作成‣ 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;}

// [中略]

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

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

アニメーション応用‣ 配布したアニメーションのテンプレートを利用して、いろいろ応用が可能

‣ タッチした位置によってスピードが変化する‣ タッチした場所で連続してアニメーションする‣ 手書きアニメーションの味を生かした表現

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

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