5.1さらうどん

@giginetの技術ブログ。ゲーム開発、iOS開発、その他いろいろ

あのゲームっぽく飯画像を撮るアプリ、『Camp Camera』をリリースしました

Camp Camera

f:id:gigi-net:20161221232434p:plain

この度、あのゲームっぽくお飯の画像を撮るiOSアプリ『Camp Camera』を公開しました。

Camp Camera

Camp Camera

  • gigi-net.net
  • Food & Drink
  • Free

思いついてシュッと1週間ぐらいで作った。

右下にウィンドウが付くほか、ゲーム画面っぽく見えるように良い感じに写真を加工してくれるアプリです。 普段のお飯がステータスアップしそうな感じに撮影できます。

f:id:gigi-net:20161221235622j:plain

無料でダウンロードできますので、良かったら是非使ってみてください。

技術的な見所

アプリ開発自体は、仕事でいつもアプリを作っているのでシュッと作れた。 この週末で作らないとAppleの冬休みの関係で年内にリリースができないので、締めきり駆動開発みたいな感じで一気に作った。

技術的には強いて言えば、この辺が面白い気がする

Core Image

お飯の画像をゲーム画面っぽくするのに、iOSCore Imageというやつを使っている。

最初はMetalなどを使ってシェーダーを書こうと思っていたけど、シェーディング言語は、一応GLSLを触ったことはあるけど、ほぼ書いたことがなかったので学習コストがかかりそうだったのと、よくよく調べたら、デフォルトで実装されているフィルタを組み合わせればやりたいことはできそうだったので、結局はbuilt-inのフィルタだけを使ってそれっぽく実現した。

並べてみるとこんな感じで変換される。陰影が消えてゲームっぽい。

Before After
f:id:gigi-net:20160831115628j:plain f:id:gigi-net:20161222000454j:plain

ドキュメントが公開されているのだが、パラメータの調整などについて、全く資料がなくて、このアプリの開発時間の半分ぐらいはフィルタを良い感じにするためのパラメータ調整に費やされた。 iOS9から追加された、被写界深度を調整するフィルタなどを利用しているのだけど、どこにも資料がなくて厳しかった。

Core Image Filter Reference

それに加えて、このアプリを作るに当たって、わざわざCore Imageの知見を学び直したりして勉強になった。

What's New in Core Image - WWDC 2015 - Videos - Apple Developer

Developing Core Image Filters for iOS - WWDC 2014 - Videos - Apple Developer

まだまだ無限に調整の余地があるのでいい感じにしていきたい。

Core Text

ユーザーが任意のレシピ名を入力して、右下のウィンドウにそれっぽく入れるのにはCore Textを使っている。

ウィンドウは、Sketchでベクターデータとしてそれっぽく目コピーして作り直した。

f:id:gigi-net:20161221234207p:plain

アプリ内ではこのデータを保持していて、Core Textを使って動的にレシピ名を合成して描画している。

f:id:gigi-net:20161221234748p:plain

Core Text、上手くやれば影や縁取りなども簡単にできるし、頑張ればこれぐらいのリッチな表現はできる。

まとめ

Camp Camera

Camp Camera

  • gigi-net.net
  • Food & Drink
  • Free

思いついて誰かに先を越されないか気にしつつ、1週間弱でガッと作ったけど、いろいろ勉強になって良かった。 ほかにも地味にPure Swift 3で書かれていたり、fastlaneでサブミットまでできるようになってたり、中身は無駄にモダンです。

どうぞご利用ください。

冒頭の親子丼は、職場の近くにあるお店の究極の親子丼というメニューで美味しかった。

恵比寿 鶏味座

食べログ恵比寿 鶏味座

こんな感じで毎日美味しいものを食べながらデバッグできてモチベーションを維持できて良かった。

他にも取材と称して昼から3500円の鰻などを食べたりしていて、完全に気が狂っていた。美味しかったです。

f:id:gigi-net:20161221235931p:plain