iPhoneアプリ: TiltShift Generator 本日発売されました!

iphone tiltshiftgen

新アプリ TiltShift Generator がリリース。 | fladdict



@fladdict さんと共作の TiltShift Generator が本日発売されました。どんなアプリかと一言で言うと、iPhoneで写真をミニチュア写真ぽく加工できるアプリです。

それで、なんと即日で日本のAppStoreの有料アプリ1位となりました! すでにレビューも、Twitter含めあちこちで頂いています。お買い上げいただいた皆様、そしてレビューしていただいた皆様、本当に感謝の言葉しかありません。ありがとうございます!

ToyCameraで撮影したものをTiltShift Generatorを使ったもの。


(CC by) emrank さんの写真をTiltShift Generatorを使ったもの。


コラボでの開発

このアプリは、fladdictさんが企画、ビジュアル/UIのトータルのデザイン、ディレクションを行って、のこりのコーディングを僕が、みたいなコラボで作ってみました。

きっかけは、fladdictさんが、"TiltShift Generator" を Flash のアプリとして作られていて (こちらは無料で使えますよ!)、BlogとTwitterで「誰かこれiPhoneアプリにしない?」と。そのとき脊髄反射で僕が手をあげたのが始まりでした。というのも、企画としてすごく魅力的に感じたのと(チルトシフト写真見てても楽しいし!)、もうすでにFlash版があったため完成系がすんなりイメージできたというのがありました。

iPhoneアプリでのコラボは初だったので、ちょっとどうなるかなあ?、というのもあったのですが、やってみるととてもスムーズに、充実した感じで行うことができ、なおかつ出来上ったものも、とてもすばらしいものができたと思います。これも、すでにiPhoneアプリを何本もヒットさせているfladdictさんの「的を射た」ディレクション、デザインにあったと思います。ありがとうございました!

それっぽいミニチュア感を出すコツとかを考えてみた

このアプリは、blur効果と、vignetting、contrastなど利用した、汎用的な写真加工アプリとして使えますが、どうしてもミニチュアっぽいものにこだわる場合は以下の方法が使えるかもです。

まず、それっぽいミニチュアになる写真と、どうやってもミニチュアっぽくならない写真があるので、写真を選びます。

選ぶ写真としては、だいたい以下のような条件を揃えると、良い気がしてきました。

  • 大きい物体が1つ、とかよりも、小さい物体がたくさんある写真
  • フォーカスがほぼ写真の中央に合ってるもの(パンフォーカスなら気にしないで可)
  • 写真の主題的な物があって、なおかつそこがblurの中心にできると、そこが目立つのでなお可

小さい物体がたくさんというのは、ある程度の高さからの町並みとかの風景写真が該当します。あと、人混みをある程度の高さから撮ったものとかもよくありますね。

Blurの中心は、できるだけ写真の中央にあると、ボケが両端になり奥行感が出ますが、Blurの中心点とフォーカスの中心点は合せたほうが自然な絵になるので、そうするとフォーカスの中心点も写真の中央にあったほうがよい、ということになります。

いいかんじの写真があったら、

  1. 初期状態では円形ブラーになってるので線形ブラーにする
  2. ブラーの中心をもと写真のフォーカスがあたってる部分にだいたい合せる。パンフォーカスならどこでも可だけど、できるだけ写真のまんなかの方に。
  3. ブラー強度はあんまり上げないでもそれっぽい場合も (0.2とか?)
  4. ブラーの幅はほとんど無くてもよいかも (ぴったりくっつけでも可)
  5. Saturation をちょっとだけ上げ目に (0.8ぐらい)
  6. Vignetting はおこのみで。ちょっとだけ (0.3とか) が奥行が出るかも
  7. Contrast / Brightness であまり暗くならない程度に調整

みたいな順序で操作するとよいかもです。もちろん、あくまで僕が考えた例なのでいくらでも工夫しがいがあると思います。

円形ブラーは、バニッシングポイントがあるような写真で、その部分にブラーの中心を合せると、バニッシングポイント付近にかけてが強調されるので、面白かったり。

今後は?

とりいそぎ、Twitterアカウント設定がわかりにくい(現状設定アプリで設定できます)のと、iPod touchで使えない問題があるため、その2点の対応を行ったversionを早めに出したいと思ってます。

あと、以下の対応も順次行っていこうと思っています。

  • Twitter投稿機能での画像投稿先をTwitgooに加えてTwitPicも選択可能に
  • 画像の状態保存
  • 各パラメータのリセット機能
  • 出力解像度を選べるように

その他、バグっぽい何かとか、ご要望などありましたら、ここのコメント欄やTwitterのリプライ、あるいはメールなどでお教えください!

おまけ：実装について

基本的にこのアプリは画像処理アプリなのですが、メインの機能といってもいいボカしの部分、Blur演算は比較的重い処理の部類に入ります。それがiPhoneでどこまでできるのか、というのがやはり大きなボトルネックになりそうだったので、まずそこをプロトタイピングしました。

プロトでは、OpenGL ESを使ったりとか色々試行錯誤をし、予想以上に時間がかかってしまったりしました。GLを使った物も、思ったような品質(ボケ味)が出ず、最終的にはすべてCPUでの演算になっています。CPUの演算も、単にガウスブラーでは速度的に遅すぎて話にならず、現状はboxblurをさらに高速にしたような実装としました。

あと苦労した点というと、やはり使用できるメモリの量が限られてくるので、自前でbitmapを作って管理するのから始まり、いかにオンメモリにあるbitmapを減らすかというのに苦心しています。それでも、ある程度blurの品質も必要なので、blurの奥行を与えるために、実は3枚程ボカしのパラメータを変えたbitmapを持ってたりします。ということで、絵的な品質と処理速度とメモリの使用限界量のバランスがけっこう綱渡り的な感じだったりします。

そのほかは、あまり苦労ポイントはなかったように感じます。Saturation, contrast, brightness は LUTベースのものにしたところ、普通にこの速度が出ています。この辺は、いままで散々経験もある感じのところだったので、それほど苦労しなかった感じです。

あと、UI部分のつくりこみ、visual designの入れこみも、昔からの経験が生きたところで、かなり楽しんで作業させてもらいました。なんというか、理に叶ってるデザインをコード化するのは、必然的に楽しい作業になると思うのです。