オーディオハプティックデザインの実践

オーディオハプティックデザインの実践

iPhoneでアニメーション、サウンド、ハプティクスを含むリッチなApp体験を提供する方法を紹介します。Core Hapticsフレームワークでマルチモーダルな体験をデザインするためのキーコンセプトをお伝えします。サンプルのHapticRicochet Appでは、ハプティックとサウンドのフィードバックが重要なインタラクティブモーメントと調和するようデザインされており、不思議で楽しい体験を生み出す方法を解説します。このセッションを最大限活かしていただくためには、事前にWWDC19の「Core Hapticsで知覚体験を拡張する」と、HapticBounceサンプルプロジェクトを確認しておくことをお勧めします（このためには、Xcode、iPhone 8以降、Swiftの基礎知識が必要です）。Core Hapticsに精通していると望ましいですが、必須ではありません。

リソース
関連ビデオ

WWDC22
- プラグインと再生：AppleフレームワークをUnityゲームプロジェクトに追加する
WWDC21
- Thursday@WWDC21
WWDC19
- Core Hapticsの紹介
ダウンロード

こんにちは Camille Moussetteです Apple Designチームのデザイナーですこのセッションでは Appに音声や触覚フィードバックを追加する実際の手順とデザイン上の注意点について説明します歴史的にアニメーションや音声および触覚を含むリッチなApp体験の提供はデザインとエンジニアリングの両面から非常に困難でした iPhoneのCore Hapticsを使えば見たり聞いたり感じることができる魔法のような瞬間を作れます今回は説明と練習用に以前のコードサンプルプロジェクトから派生した HapticBounceという iOS Appを使ってみますビジュアルや音声触覚がうまく機能するようにデザインし追加要素を加えることでゲームのようにしてみましたこの新デモはHaptic Ricochetと呼びます
HapticRicochetは iPhoneの中で生まれたボールが iPhoneの向きに応じて動き回りますボールは物理的世界と同じように転がり携帯の端に当たると音声と触覚フィードバックを返しますボールをタップすると… ボールはより大きく成長しますもう一度タップするとシールドが追加されますシールドは壁に跳ね返るごとに減っていき最終的にはボールが消滅します
また背景の好きな場所をタップしてテクスチャを有効または無効にできます本セッションではシールドの追加とゴロゴロとしたテクスチャの有効化という２つの仕組みを中心に話します先に進む前に内容を確認しましょう最初に Appleでよく使われるオーディオとハプティックデザインの基本を確認します次にリッチなマルチモードフィードバックを可能にする Core Hapticsフレームワークを簡単に紹介します
そしてXcodeの HapticRicochet プロジェクトを検証しシールドとローリングテクスチャのフィードバックを追加設計改良する方法を見ていきますマルチモードな体験をデザインすることは困難ですがうまくできればユーザー体験は向上します魔法のように楽しくすべてがうまく行く感覚です iOSの懐中電灯ボタンがその例ですビジュアルアニメーション音声触覚フィードバックが明確かつ簡潔で統一感のある体験を提供しますデザインと技術的な努力を必要とする反復的で創造的なプロセスです本来は音ではなく触覚で感じるものですがこのデモでは触覚を音に変換していますので音声でご確認ください App体験の魔法と楽しさを実現するために作業の指針となる３つの原則を紹介しますこれは社内でも重宝されており皆さんのお役に立てば幸いですその３つとは因果関係調和性そして有用性です
フィードバックが有用であるためにはそれを発生させる要素や原因の明確さが大切になってきますボールが画面の端や境界に当たった時フィードバックを発生するのが簡単な例です衝突によりハプティクスが発生します同様にローリングテクスチャハプティクスは背景の表示時のみ発生しますこの模様により感覚が発生したことが分かります２番目の調和性とは感覚に一貫性があることです特定の体験を生み出すために感覚が調和的に機能すれば理解を助けます見た目や音と感覚が一致することです小さなボールは小さく感じ音も小さくなります大きなボールは大きな質量を反映して重そうな音と感覚がするはずです３番目の有用性とは Appの体験に明確な価値を提供することです無意味なフィードバックを追加しないようにしましょうすぐにジャマで不快な感じがするでしょうボールの成長など Appの重要な要素のために触覚や音声を使いましょうでは Core Hapticsを見てみましょう Core Hapticsは iPhoneと iOSのテクノロジーで Appのハプティクスと音声のフィードバックをデザインできますこれはエンジンプレーヤーパターンイベントの４つの基本要素を中心とした強力なAPIですこれらを簡単に確認しましょう最高レベルの要素はエンジンです電話の物理アクチュエータにリンクしています次にプレーヤーがあります開始停止一時停止などの再生制御に使用されます次にパターンとイベントがありますパターンは時間の経過に伴うイベントの集合体ですイベントはエクスペリエンスを構成する要素ですイベントには多くの種類があります代表的なものとして一時的と継続的なものがありますこちらが実際にイベントで作られたパターンの具体例です MacOS 12のQuickLook Visualizerを使って .ahapファイルに指定されたハプティクスパターンを見てみます AHAPはApple Haptic Audio Patternの略ですもう一度見てみましょう Finderで .ahapファイルを選択しキーボードのスペースバーを押します
ではパターン内のアイテムの詳細を見てみましょう青の最初のイベントは一時的イベントです２番目のオレンジは継続的なイベントです
パターンには JSON構文を使用します一時的イベントはこのコードで作成しました
Core Hapticsの概要は以上です詳細についてはオンラインのドキュメントを確認してくださいこのセッションでは練習としてパターンのロード変更再生に焦点を当てます次はXcodeと HapticRicochetです HapticRicochet-Start フォルダから開きます iPhoneでプロジェクトのコンパイルと実行ができることを確認してくださいシミュレーターではハプティクスは機能しません触覚を感じるには実物の iPhone 8以降が必要です iPhoneが無音設定でないこと音量レベルが高いことを確認しましょう ViewControllerファイルと .ahap .wav .pngのアセットファイルを使いますゲームとそのインタラクションをしっかりと理解しておきましょうボールとタップと背景のタップに加えスマートフォンを傾けられます準備ができたらシールドの作成に移ります調和性の原則によりシールドの作成を分解してデザインの詳細を確認しましょうビジュアル的には 500ミリ秒のアニメーションがあり右上にこのように表示されます
ハプティクスについては新しい状態への変換を強調したいと思いますオーディオでエネルギーの増加と強く保護された状態を表現します
この練習のために異なる性質を持つ２種類のアセットを作成しました両方を見てシールド用に最適なものを考えますまずはシールドのフィードバックの読み込みと再生を見てみましょう
機能的にコードは２つの部分に分かれていますまずビルディングブロックを初期化しシールドの変化をレンダリングします
initializeShieldHaptics関数では ShieldTransientファイルのパターンを作成します次にそのパターンで shieldPlayerを作成します
これでフィードバックを再生可能です
shield関数は変化するレンダリングの準備が出来ると呼び出されますハプティクスと音声フィードバックは shieldPlayerでstartPlayer を呼び出し再生しますこれは何度も利用する便利な関数です次にビジュアルアニメーションが再生されます
では ShieldTransient アセットを見てみましょうこれはハプティクスと音声のフィードバックを定義しますハプティクスはこのような感じですそして音声はこんな感じですいい音ですねボールが強化され保護されている感じがしますもう一度聞いてみましょう問題はハプティクスと音があまり一致しないことですハプティクスは３つの断続的な感覚で音声は連続した上昇音です２つの感覚が調和していません ShieldContinuousという代わりのアセットを見てみましょうハプティクスは継続的に変化し… 音声は震えながら減衰しますここでもハプティクスと音声があまりマッチしませんハプティクスは良い感じですシールドの発生として良い感覚がしますハプティクスをもう一度そこでこの連続的なハプティクスパターンを使い音声は最初のアセットを使用します
２つのアセットから１つ目の音声パターンを採用し２つ目の連続した触覚パターンを使用します
では実際にやってみましょう
まず ShieldContinuous .ahapファイルをテキストエディタで開き最後までスクロールしますハプティクスで再生する音声ファイルをイベントで指定する場所です
EventType AudioCustomで使用する音声ファイルを指定します ParameterValueを使用して音量の指定や調整が可能です
気に入った音声を使うために ShieldB.wavをShieldA.wavへ変更します
見直し後のアセットはこうなりますハプティクスと… 音声はマッチしていますねお互いの効果を高め合っています音声とハプティクスを一緒に聞いてみましょう最後に作成したアセットを使用するよう変更します InitializeShieldHaptics 関数に戻り ShieldTransientを使う代わりに ShieldContinuousファイルを指定してロードします
はい！出来上がりですデバイス上でコンパイルして実行しますシールドの発生する感覚がうまく調和していますハプティクス音声ビジュアルによってシールドの保護が追加された感じが良く出ていますではゴロゴロしたテクスチャの追加方法を見てみましょう
HapticRicochetは最初はテクスチャが無く壁と衝突するだけです背景をタップすると水玉模様が表示されボールが転がると追加のフィードバックを感じられますここでは２つの問題を解決していきます最初は技術的なもので次はエクスペリエンスの設計に関連しています
initializeTextureHaptics 関数ではまずテクスチャのahapファイルからパターンを作成します次にそのパターンで ShieldPlayerを作成します updateTexturePlayer関数はテクスチャがアクティブな全フレームで呼び出されますボールの速度に応じてハプティクスの強さを更新するために使います結果を見てみましょうここで気づいたのはテクスチャが数秒後に消える問題ですその理由は分かりました修正する簡単な方法があります問題点は .ahapファイルのテクスチャの長さが２秒しかないからですその動作を変更して無制限に再生させる方法がありますパターンプレーヤーの高機能版には一時停止や再開その他のコールバックなどの機能が追加されています HapticRicochetではループ機能に限定して高度なパターンプレーヤーを使用しますでは変更していきましょうまず texturePlayerの宣言を CHHapticAdvancedPatternPlayerの宣言に変更します次に同じテクスチャファイルを使い今度は AdvancedPlayerを作成します AdvancedPlayerではループ動作を有効にできます他の部分のコードはそのままなのが良い点です結果を見てみましょう今度はゴロゴロしたテクスチャがループ再生され停止や継ぎ目はありません２つ目の問題はテクスチャの見た目に関するものです触覚パターンは非常に密集しており２秒間で100近くのエントリがあります一方視覚的な背景のテクスチャは非常に粗く一行に数ドットしかありませんドットパターンの密度が高くなればよりリアルな感じになると思います
backgroundImageに使用したリソースファイルを細かいバージョンにします Appでは密度の高いテクスチャが使用されます見てみましょう
お困りの場合に備えて HapticRicochet-Final フォルダにプロジェクトの最終バージョンを入れてありますセッション中に行ったすべての変更点が含まれコンパイルしてiPhoneで触れることができますご自身でハプティクス体験をデザインして試すこともできますゲーム内で他の変化も試して新しいハプティクスや音声のフィードバックをぜひデザインしてみてくださいおさらいです Appで優れたマルチモード体験をデザインする際の指針となる音声および触覚のデザインを紹介しました iOSでカスタムフィードバックを追加する APIであるCoreHapticsの基礎を確認しました HapticRicochet プロジェクトを使ってシールドとテクスチャの仕組みを実践してみました追加情報やリソースは Human Interface Guidelines およびデベロッパ向けドキュメントをご覧ください Core Hapticsを発表した WWDC2019のセッションへもアクセスできますご視聴ありがとうございました [軽快な音楽]

// Initialize shield.
func initializeShieldHaptics() {
    // Create a pattern from the shield asset.
    let pattern = createPatternFromAHAP("ShieldTransient")!
        
    // Create a player from the shield pattern.
    shieldPlayer = try? engine.makePlayer(with: pattern)
}

/ Play shield transformation.
func shield() {
    // …
    // start player for haptics and audio.
    startPlayer(shieldPlayer)
        
    // Play shield animation
    isAnimating = true
    sphereView.layer.add(shieldAnimation, forKey: "Width")
    // …
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC22

WWDC21

WWDC19