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

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

on

  • 3,269 views

 

Statistics

Views

Total Views
3,269
Views on SlideShare
2,903
Embed Views
366

Actions

Likes
3
Downloads
15
Comments
0

3 Embeds 366

http://yoppa.org 338
http://cloud.feedly.com 27
http://digg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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