見出し画像

雑にイカちゃんになるアプリを作りました

よごくすギャラクシー

Splatoon3の発売日も近くなってきましたね。
だからというわけでもないですが、写真を撮影してインクリング風に加工するカメラアプリを作りました。

概要

それっぽく髪と眉の色を変えて目に画像を重ねます。

髪の毛にゲソが付いたりはしません

作った画像はシェア・保存できます。

詳しい説明

撮影画面

アプリを起動すると撮影画面が表示されます。
写真の撮影にはカメラのアクセスが必要なので、アクセスを要求するダイアログが表示されたら許可を選んでください。

スクリーンショットを加工して目にぼかしを入れてます

ボタンは左から、ガイド切替ボタン・シャッターボタン・カメラ切替ボタンです。

ガイド切替ボタンを押すと撮影ガイドがグリッド→サークル→なし→グリッドの順で切り替わります。
あくまで撮影ガイドなので撮影する写真に影響はしません。

編集画面

人物が1人映った状態でシャッターボタンを押すと写真をインクリング風に加工して、加工結果を編集画面で表示します。
人物が2人以上映ってる場合や、写真から加工に必要な情報が取得できなかった場合はエラーが表示されます。

ボタンは左から、戻るボタン・シェアメニューボタン・背景切替ボタン・カラーボタンになります。

カラーボタンを押すと髪と目のカラーパターンが切り替わります。
背景切替ボタンを押すと背景が無加工→ぼかし→背景透過→無加工の順で切り替わります。

戻るボタンを押すと編集中の写真を破棄して撮影画面に戻ります。
左スワイプでも撮影画面に戻れます。

シェアメニュー

シェアメニューボタンを押すとメニューが開きます。

メニュー内容は上から共有…、ツイート、“写真に追加”です。

共有… を選択するとiPhoneの共有アクションシートを開きます。

ツイート を選択するとTwitter認証が画面に表示されます。
Twitterアカウントを入力するとツイート画面が表示されます。

ツイート画面は文章を編集可能です。
この画像と文章でツイートする を選択すると入力したTwitterアカウントでツイートします。

“写真に追加” を選択すると写真をカメラロールに保存します。
写真の保存には写真へのアクセスが必要なので、アクセスを要求するダイアログが表示されたら許可を選んでください。

サポートしているカラーパターン（髪 - 目）

  • Splatoon2 カラーA（ピンク - オレンジ）

  • Splatoon2 カラーB（グリーン - ブルー）

  • Splatoon カラーA（オレンジ - オレンジ）

  • Splatoon カラーB（ブルー - ブルー）

  • Splatoon3 カラーA（イエロー - イエロー）

加工処理について補足

髪の毛の判別にはSemanticSegmentationMatteを使用しています。
眉の領域はSemanticSegmentationMatteとVisionを基に算出しています。

目の画像はARKitではなく、Visionで取得した目のランドマーク情報を基に大雑把に変形した画像を重ねているだけです。

制限事項

このアプリが動作しない機種

SemanticSegmentationMatte（及びPortraitEffectsMatte）を使用するため、A13 Bionic以前のチップを搭載した機種では動作しません。

  • iPhone SE(第1世代)

  • iPhone 6s(Plus)

  • iPhone 7(Plus)

  • iPhone 8(Plus)

  • iPod touch

動作しない可能性のある機種（未確認）

以下の機種もA13 Bionic以前チップを搭載していますが、デュアルカメラ端末ならA13チップなしでもSemanticSegmentationMatteをサポートしているのかを確認できていません。

  • iPhone X

  • iPhone XS

  • iPhone XS Max

  • iPhone XR

実際に動作を確認してみた方やSemanticSegmentationMatteの仕様についてご存知の方がいたら教えていただけるとありがたいです。

今後の予定

多分やる

◎髪・目の色を追加

Splatoon3の2色目は確定で追加する予定です。
JSONファイルの記述を足すだけなので、追加したい色さえ決まっていれば作業量は少ないですし。
他にも「この色がほしいよ〜」という人がいたら、髪の色（メインカラー・一番暗い色・一番明るい色）・目の色を教えてもらえれば検討します。

◎髪明るさの調整

現状は決め打ちでグラデーションマップを作っているので、髪の毛の明るさの最大値を見て補正をかけたほうが自然になるのかなと。

やってもいいかも

○閉じ目対応

CIDetectorのCIDetectorEyeBlinkをtrueにすることで判定できるようになるはずなので処理的には見えてる感じ。
どちらかといえば画像を作るほうが面倒そうだけど、パペットワープで変形させればいい感じにできるかな？

○メガネ対応

いつのまにかSemanticSegmentationMatteのタイプにGlassesが追加されていたのでメガネを切り抜いて上から表示してもいいかも。
でもイカ目とメガネが上手く調和しないと予想しています。

やれたら面白いかもしれない

△何かしらのフィルター機能

CIFilterのビルトインフィルターによさげなフィルターがあったら追加してもいいかなと思っています。

△2人以上に対応

髪の毛のSemanticSegmentationMatteが一律でしか判別できないので、黒髪と金髪とか大きく特徴が異なる髪を同時に処理すると色が正しく変えられないと予想しています。
それはそれとして、複数人数で撮影したい人がいれば対応するべきかなとは思います。

やらない

✗Android対応

作業として全く面白みがないのでやりません

✗ディテールアップ（ゲソとか耳とか）

やるなら完全に処理方式を一から変更して機械学習で頑張らないといけないけど、データセットを用意するのは現実問題として無理なので。

実際にどこまで機能追加するかのモチベーションは技術的な難易度もありますが、Splatoon3にハマるか否かが大きいです。
2と同じようなバランス（調整）感覚だとちょっとモチベ出ないですね。

眉の領域の算出については別記事で解説書くつもりです。
■

この記事が気に入ったらサポートをしてみませんか？