多摩美 - “iTamabi” – iPhoneアプリ開発プロジェクト 2010

openFrameworks for iPhone：画像ファイルを読み込む、アニメーションを作成する

July 5, 2010

今日の内容

openFrameworksに画像ファイルを読み込む
画像を連続して読み込んで、手書きアニメーションに挑戦!!

画像ファイルを読み込む

openFrameworksで、画像を扱うには、ofImageクラスを使用する
ofImage – freeImageライブラリをopenFrameworksで使用しやすいようにしたクラス
主要な画像フォーマットに対応(PNG, JPEG, TIFF, BMP, GIF など)
ofImageを利用して読み込む画像ファイルは、[プロジェクトのフォルダ]/bin/data/ 以下に配置する

画像を読み込む手順

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

画像を1枚読み込んで表示する

testApp.h
[code language=”cpp”]
#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;

};
[/code]

testApp.mm
[code language=”cpp”]
#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);
}

//————————————————————–
void testApp::exit(){

}

//————————————————————–
void testApp::touchDown(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchMoved(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchUp(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchDoubleTap(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::lostFocus(){

}

//————————————————————–
void testApp::gotFocus(){

}

//————————————————————–
void testApp::gotMemoryWarning(){

}

//————————————————————–
void testApp::deviceOrientationChanged(int newOrientation){

}
[/code]

複数の画像を読み込んで順番に表示する

testApp.h
[code language=”cpp”]
#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;
};
[/code]

testApp.mm
[code language=”cpp”]
#include "testApp.h"

//連番がふられた画像を順番に読み込み
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;
}

//————————————————————–
void testApp::update(){

}

//————————————————————–
void testApp::draw(){
//現在のフレームの画像を表示
myImage[currentFrame].draw(0, 0);

//フレーム数をひとつ進める
currentFrame++;
//もし指定した枚数よりフレーム数が大きくなったら
//フレーム数をリセット
if (currentFrame > FRAMENUM – 1) {
currentFrame = 0;
}
}