ネコでもわかるインタラクティブサウンド20130706

ネコでもわかるインタラクティブサウンド

田中孝2013-07-06

1

このワークショップでは

•波形編集（録音、加工、wav保存）

•インタラクティブサウンドの設計（考え方）

を紹介します。（サウンドの基本なので覚えておいて損はしません）

• Unityスクリプトとかはやりません→他のワークショップ資料やゲームジャムで実践してもらえると良いのですが・・・その前段階の導入として

2

レジュメサウンドデザインインタラクションデザイン

サウンド再生

ADX2LE_OSCBasicPlayer アプリケーション

/adx2/0/playcueid

OSC (udp)localhost通信

/StremingAssets/

NewProject.acf

CueSheet_0.acb

CRI Atom Craft

ビルド出力ファイル差し替え

Processing

ProcessingのoscP5

インゲームプレビュー

作成中最終出力

• インタラクティブとは？　５分

• ツール紹介　５分

• Audacityで録音、加工、wav保存　２０分

• インタラクティブサウンドを作ってみよう　２０分テルミンから学ぶ

• チャレンジ（課題）　３０分簡単なアプリに音をつけてみる

• 発表１５分

• まとめこれからのサウンドデザインに求められるもの

3

インタラクティブとは？

•インタラクティブ対話、双方向

4

何と対話？双方向？

•コンピュータと

5

何を使って？

•絵や動きやサウンドを使って

6

ツール紹介

7

• CRI Atom Craft ADX2LE OSC Playerprocessingを使います。

サウンドデザインインタラクションデザイン

サウンド再生


/adx2/0/playcueid


/StremingAssets/

NewProject.acf

CueSheet_0.acb

CRI Atom Craft


Processing

ProcessingのoscP5



プレーヤー

プログラムデザイン１３

２

8

サウンドデザイン

CRI Atom Craft• CRI Atom Craftを使って音をデザインします

• ADX2LEのサウンドオーサリングツールです。

• 下のリンクからダウンロードサイトへ行けます

http://www.adx2le.com/

ゲームジャムでも使うデザイン１

9

• ADX2 OSC Playerを使って音を鳴らします。

• Unityで作られたADX2LEのプレーヤーアプリです。

• 下のリンク先にセットアップ方法など解説あります

サウンド再生


/StremingAssets/

NewProject.acf

CueSheet_0.acb

http://www53.atwiki.jp/soundtasukeai/pages/24.html

今回のワークショップでのみ使うプレーヤー２

10

• Processingを使ってインタラクションを実現します

• Processingは電子アートとビジュアルデザインの為のプログラム言語です。


インタラクションデザイン

Processing

ProcessingのoscP5

http://www.processing.org/

今回のワークショップでのみ使うプログラム３

11

•波形素材

•波形加工

波形素材４

波形加工５

12

•波形素材はChipTuneのものを使用

• チップチューンは矩形波形や三角波形、ノイズなどシンプルな波形集です。


http://www.criware.jp/adx2/demo/download_j.php#chiptune

ゲームジャムでも使ってOK波形素材４

13

•波形加工、録音、wav出力はAudacityのものを使用

• チップチューンは矩形波形や三角波形、ノイズなどシンプルな波形集です。


http://audacity.sourceforge.net/

ゲームジャムでも使える波形加工５

14

Audacityで録音、加工、wav保存

波形加工

15

録音• Audacityを起動

•赤いボタンを押すマイクの入力レベル

波形が記録される

波形加工

16

波形の表示調整•境界線をドラッグして高さ変更

波形加工

小さくしたり大きくしたり

17

波形の表示調整•ルーペで横方向の拡大縮小

波形加工

小さくしたり大きくしたり

18

ステレオをモノラルへ

• いくつか録音されていたらややこしいのでいらないものを「X」ボタンで閉じる

メニューを選択

波形加工

マイクはモノラルマイクが多いので・・・

19

波形の入らない部分カット•入らない部分を範囲選択

波形加工

•ドラッグして選択

• Ctr+Xで選択した部分がカットされる。

• Ctr+Vでペーストも可能

20

音を大きくする•正規化（ノーマライズ）する

波形加工

• 「エフェクト」メニューから「正規化...」を選択

• 音が大きくなる

←みたいな波形だとあまり大きくならないコンプレッサーなど使うと良い

21

ピッチを変更•正規化（ノーマライズ）する

波形加工

• 「エフェクト」メニューから「ピッチの変更...」を選択

スライダーを右にすると高く、左にすると低くなる

22

波形出力•正規化（ノーマライズ）する

波形加工

• 「ファイル」メニューから「書き出し...」を選択

• 「Format:」「WAV」で「Save」

23

インタラクティブサウンドを作ってみよう

デザイン

24

テルミンから学ぶ

•テルミンはロシアのテルミン博士が作った楽器で、アンテナに手をかざすと音が出て、かざし方によって変化します。

•楽器＝インタラクティブ

デザイン

25

テルミンの仕組み• 右のアンテナに近づくと音程が高く離れると音程が低くなります。

• 左のアンテナに近づくと音が小さく離れると音が大きくなります。

デザイン

26

データ作成

•ボリュームとピッチがインタラクティブに変化する音を作ります。


サウンド再生


/adx2/0/playcueid


/StremingAssets/

NewProject.acf

CueSheet_0.acb

CRI Atom Craft


Processing

ProcessingのoscP5



デザイン１

27

音を鳴らすキューを作る

•再生すると三角波形が鳴るようにする

•波形を追加して、キューにする

• キューはADX2LEの音を再生する機能です。

デザイン

28

• CRI Atom Craftを起動

デザイン

29

•新規プロジェクト作成

１

２

デザイン

30

•マテリアルへ波形を追加

１

２

デザイン

波形素材

31

•キュー作成

１

２

デザイン

32

ボリュームつまみを再現• ボリュームは縦で

• 指揮者が腕を上げる高さに合わせて変化するようにデザインする

• AISACを使います

• AISACはADX2LEの音色パラメータをコントロールの為の機能です。

デザイン

33

•キュー選択

１

２

デザイン

34

•＋ボタン押し、AISACの追加...を選択

１２

デザイン

35

•追加ボタンを押す

１２

３

デザイン

36

•グラフを右肩下がりにする

１

２

デザイン

37

•音を確認する１

２３

４

デザイン

38

•ピッチ変化用を追加する

•ピアノや弦楽器のようなイメージでカーブをデザインする

•もう一つAISACを使います。

ピッチアンテナを再現デザイン

39

•＋ボタン押し、AISACの追加...を選択

１２

デザイン

40

•ピッチに変更し、追加ボタンを押す

１

３２

４

デザイン

41

•グラフを右肩上がりにする

１

２

デザイン

42

•音を確認する１

２３

４

デザイン

43

２つのコントロールができました

•ツール上でもある程度確認できますが、２つを同時にコントロールする他のアプリで動かすため、ツールからACF,ACBというインタラクティブサウンドの元になるデータを出力します。

44

「パディング使用フラグのチェックを外す

後でインゲームプレビューで波形追加などを行うため以下の操作をしておきます。

•キューシートフォルダを選択

•「パディング使...」のチェックを外しグレーにする

１

２

45

•＋ボタン押し、チェック確認、ビルド

１

２

３４

５46

• キューシートを右クリックし、「Atomキューシートバイナリ出力先フォルダをエクスプローラで開く...」を選択

１２

３

• acf、acbが作成されているのを確認

47

ACF、ACBを利用する

• CRI Atom CraftのデータをADX2LE OSC Playerで再生する


サウンド再生


/adx2/0/playcueid


/StremingAssets/

NewProject.acf

CueSheet_0.acb

CRI Atom Craft


Processing

ProcessingのoscP5



１

２

プレーヤー

デザイン１

２

48

• ADX2LE OSC Playerを起動

•ブロックを解除する

•起動する

プレーヤー

49

ファイルをコピーする

ファイルコピー

50

•バッチを実行するC:\ADX2LE_Workshop\AtomCraftData\copy.bat

• ACF,ACBファイルをコピーしました。


C:ドライブにADX2LE_Workshopを展開していないと正しく動作しないので注意

51

• ADX2LEOSCBasicPlayer_Dataを開く

• StreamingAssetsを開く

• ACB、ACFを差し替える

１

２

４

３

• 先ほどツールで出力したフォルダからinGamePreviewを開く

【参考】もしも手動でやる場合は以下のような手順になります。


プレーヤーデザイン

デザイン

52

• ADX2LE OSC Playerの「Panic!」ボタンを押す

• 0:tri（キュー名）に変化していたらOK

２

１

プレーヤー

53

•「♪」を押すと音が鳴る、「■」で停止

•真ん中のスライダーでピッチが変わる

•左のスライダーで音量が変わる

１

２

３

４

プレーヤー

54

•いちいちバッチを実行するのは面倒なので、ビルド時に呼び出すようにします。

２

１

３４

５


55

もっと直感的に•プレーヤーでも２つコントロールができましたが、同時にコントロールしたいので、マウスの位置（たて、よこ座標）が反応するような、簡単なプログラムを用意しました。

•サウンドデザインする上で簡単なプロトタイプを作ると捗ります。プログラムからどんな風にコントロールされるか理解を深めると、データ作成に有利な点が見つかるかもしれません。

動作確認用のシンプルなもの

56

音以外のインタラクションを作る

• processingでインタラクティブサウンドをコントロールします。


サウンド再生


/adx2/0/playcueid


/StremingAssets/

NewProject.acf

CueSheet_0.acb

CRI Atom Craft


Processing

ProcessingのoscP5



プログラム３

57

• proessingが起動します

• sketch_AISACXY.pdeを開く

１

２

３•　を押して実行

•　を押して停止

58

import oscP5.*;import netP5.*;

OscP5 oscP5;NetAddress myRemoteLocation;

void setup(){ size(480,240); oscP5 = new OscP5(this,9000); myRemoteLocation = new NetAddress("127.0.0.1",8000);}

int playerState = 0;int mouseState = 0;

void draw(){ background(204); if(mousePressed) { if(mouseState == 0){ if(playerState == 0){ OscMessage myMessage = new OscMessage("/adx2/0/playcueid 0"); oscP5.send(myMessage, myRemoteLocation); playerState = 1; } else if(playerState == 1){ OscMessage myMessage = new OscMessage("/adx2/0/stop"); oscP5.send(myMessage, myRemoteLocation); playerState = 0; } mouseState = 1; } } else { mouseState = 0; } if(playerState == 0){

} else { OscMessage myMessage 　　　= new OscMessage("/adx2/0/aisac 0 "+mouseX/480f); oscP5.send(myMessage, myRemoteLocation); myMessage = new OscMessage("/adx2/0/aisac 1 "+(1f-mouseY/240f)); oscP5.send(myMessage, myRemoteLocation); ellipse(mouseX,mouseY,60,60); } }

描画処理

ウィンドウを480x240で表示

背景を204色（グレー）で

楕円60x60をマウスの位置に表示

１

2

3

プログラム

59






} else { OscMessage myMessage 　　　= new OscMessage("/adx2/0/aisac 0 "+mouseX/480f); oscP5.send(myMessage, myRemoteLocation); myMessage = new OscMessage("/adx2/0/aisac 1 "+(1f-mouseY/240f)); oscP5.send(myMessage, myRemoteLocation); ellipse(mouseX,mouseY,60,60); }}

プログラムの流れ

起動直後一度呼ばれる

描画は毎度呼ばれる

１

2

プログラム

60







通信処理

OSCインポート

OSCアドレスをセット

再生メッセージ

停止メッセージ

AISAC0メッセージ

AISAC1メッセージ

１ 3

2

4

プログラム

61







判定の処理マウス押されたら

再生中なら再生中かどうか

マウス状態

１

2

3

プログラム

62

チャレンジ（課題）

•内容：　絵にあった変化を音に加えてみる。

•どちらか好きなものを選んで音をデザインしてみる。

•分からない事があれば、質問も受け付けます。

63

• 内容：どんな音の変化があるか動かしながら考えてみる。

• ヒント：残響を増やすにはバスセンドを使う

• ヒント2：バスセンドは閉じるのみのコントロール

• C:\ADX2LE_Workshop\processingSample\sketch_test1\ sketch_test1.pde

64

• どんな音の変化があるか動かしながら考えてみる。

• ヒント： 2つの音をクロスフェードするにはボリュームを使う

• C:\ADX2LE_Workshop\processingSample\sketch_test2\sketch_test2.pde

65

インゲームプレビュー• 【インゲームプレビュー】とは、ツール側で音を加工、編集した結果を【実行中のゲーム】に送信し、音を即時に差し替える技術です。

• ゲームを中断させる事なく音の加工を反映させる事ができるため、非常に細かい微調整が可能です。

インゲーム接続

66

デザイン

66

インゲームプレビューの開始【F10キー】を押すまたは、【プレビューメニュー】から【インゲームプレビューの開始】を選択

発音数やCPU%が変化していれば接続OK

67

デザイン

67

これからのサウンドデザインに求められるもの

•楽器や身の周りの音のなるものもデザインの参考になります。

•なぜ、その音が鳴っているのか？どう変化するのか？意識してみます。

68

シンプルである事

•なるべく少ない操作で、最大の効果を求めます。

•演奏しやすいインタラクティブサウンドをデザインする事が良いです。

•難しいと練習（ルール設定）が必要になる

69

音はこだわるべき

•めっちゃ【凝って】良い。

•こだわりを捨てずに

•気持ちよい音を探求する。

•それが面白さや、楽しさに繋がる。

70

サウンドデザインでリッチに！

•シンプルプログラマを困らせない

•分かりやすさ効果的か、理論的か客観的に判断

•サウンドデザイン

• ADX2を使うと楽にデザインできます。

71

サウンドゲームジャムあります

•２０１３年１０月頃（土日）にサウンドゲームジャムあります。

•見学も可能です。UnityでのADX2LEの実例が見れます。

•詳しくはADX2LE.comで

72

ネコでもわかるインタラクティブサウンド20130706

Education

Transcript of ネコでもわかるインタラクティブサウンド20130706