多摩美 - “iTamabi” – iPhoneアプリ開発プロジェクト 2010
openFrameworks for iPhone：画像ファイルを読み込む、アニメーションを作成する
今日の内容
- 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
#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;
};
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);
}
//--------------------------------------------------------------
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){
}
複数の画像を読み込んで順番に表示する
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
#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;
}
//--------------------------------------------------------------
void testApp::update(){
}
//--------------------------------------------------------------
void testApp::draw(){
//現在のフレームの画像を表示
myImage[currentFrame].draw(0, 0);
//フレーム数をひとつ進める
currentFrame++;
//もし指定した枚数よりフレーム数が大きくなったら
//フレーム数をリセット
if (currentFrame > FRAMENUM - 1) {
currentFrame = 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){
}
テンプレートをもとにオリジナルのアニメーションを作成してみる
- 作成する画像のフォーマットは、320 x 480のPNGファイル
- 作成した画像は順番に、myAnim[番号].png という名前で保存していく、番号は0詰めで4桁で。
- myAnim0001.png、myAnim0002.png、myAnim0003
- 作成した枚数で、testApp.h で定義されている定数"FRAMENUM"を変更する
- #define FRAMENUM 枚数
- まずは2枚から
- うまくいったら、枚数を増やしてみる
- 参考：Presstube – 手書きならではの味を生かしたアニメーション – http://www.presstube.com/project.php?id=218
サンプルファイルのダウンロード
今回の授業で紹介したプログラムのソースコードは以下からダウンロードしてください。