_福島GamejamＣＲＩ・ミドルウェア事前セミナー資料

(1)

ネコでもわかる

インタラクティブサウンド

田中孝

2013-07-06

(2)

このワークショップでは

• 音の作り方

• 波形編集（基本）

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

• Unityスクリプトとかはやりません

→ゲームジャムで実践

その前段階の

(3)

レジュメ

サウンドデザインインタラクションデザインサウンド再生 ADX2LE_OSCBasicPlayer アプリケーション /adx2/0/playcueid OSC (udp) localhost通信 /StremingAssets/ NewProject.acf CueSheet_0.acb

CRI Atom Craft

ビルド出力ファイル差し替え Processing ProcessingのoscP5 インゲームプレビュー作成中最終出力

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

• ツール紹介５分

• Audacity

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

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

テルミンから学ぶ

• チャレンジ（課題）３０分

簡単なアプリに音をつけてみる

• 発表１５分

• まとめ

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

(4)

インタラクティブとは？

• インタラクティブ

(5)

何と対話？双方向？

(6)

何を使って？

(7)

(8)

• CRI Atom Craft

ADX2LE OSC Player

processing

を使います。

CRI Atom Craft

プレーヤー

プログラム

１ デザイン

３

２

(9)

サウンドデザイン

CRI Atom Craft

• CRI Atom Craftを使って

音をデザインします

• ADX2LEのサウンドオーサリング

ツールです。

http://www.adx2le.com/

ゲームジャムでも使う

デザイン

１

(10)

• ADX2 OSC Player

を使って

音を鳴らします。

• Unityで作られたADX2LEの

プレーヤーアプリです。

サウンド再生 ADX2LE_OSCBasicPlayer アプリケーション /StremingAssets/ NewProject.acf CueSheet_0.acb

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

プレーヤー

２

(11)

• Processingを使って

インタラクションを実現

します

• Processingは電子アートとビジュアルデ

ザインの為のプログラム言語です。

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

Processing

ProcessingのoscP5

http://www.processing.org/

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

プログラム

３

(12)

• 波形素材

• 波形加工

波形素材

４ 波形加工

５

(13)

• 波形素材は

ChipTuneのものを使用

• チップチューンは矩形波形や三角波形、

ノイズなどシンプルな波形集です。

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

ゲームジャムでも使って

_OK

波形素材

４

(14)

• 波形加工、録音、

wav出力

は

Audacityのものを使用

• チップチューンは矩形波形や三角波形、

ノイズなどシンプルな波形集です。

http://audacity.sourceforge.net/

ゲームジャムでも使える

波形加工

５

(15)

Audacity

で録音、加工、wav保存

(16)

録音

• Audacityを起動

• 赤いボタンを押す

マイクの入力レベル

(17)

波形の表示調整

• 境界線をドラッグして高さ変更

波形加工

(18)

波形の表示調整

• ルーペで横方向の拡大縮小

波形加工

(19)

ステレオをモノラルへ

• いくつか録音されていたらややこしいので

いらないものを「

_{X」ボタンで閉じる}

メニューを選択

波形加工

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

(20)

波形の入らない部分カット

• 入らない部分を範囲選択

波形加工

• ドラッグして選択

• Ctr+Xで選択した部

分がカットされる。

• Ctr+Vでペーストも

可能

(21)

音を大きくする

• 正規化（ノーマライズ）する

波形加工

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

_{...」を選択}

• 音が大きくなる

←みたいな波形だとあまり大きくならない

コンプレッサーなど使うと良い

(22)

ピッチを変更

• 正規化（ノーマライズ）する

波形加工

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

_{...」を選択}

スライダーを右にす

ると高く、左にする

と低くなる

(23)

波形出力

• 正規化（ノーマライズ）する

波形加工

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

_{...」を選択}

(24)

インタラクティブサウンドを

作ってみよう

(25)

テルミンから学ぶ

• テルミンはロシアのテルミン

博士が作った楽器で、

アンテナに手をかざすと音が

出て、かざし方によって変化

します。

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

デザイン

(26)

テルミンの仕組み

• 右のアンテナに

近づくと音程が高く

離れると音程が低く

なります。

• 左のアンテナに

近づくと音が小さく

離れると音が大きく

なります。

デザイン

(27)

データ作成

• ボリュームとピッチが

インタラクティブに

変化する音を作ります。

CRI Atom Craft

デザイン

１

(28)

音を鳴らすキューを作る

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

にする

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

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

す。

デザイン

(29)

• CRI Atom Craft

を起動

(30)

• 新規プロジェクト作成

１

２

(31)

• マテリアルへ

波形を追加

１

２ デザイン

波形素材

(32)

• キュー作成

２

(33)

ボリュームつまみを再現

• ボリュームは縦で

• 指揮者が腕を上げる高さに

合わせて変化するようにデ

ザインする

• AISACを使います

• AISACはADX2LEの

音色パラメータをコントロールの為

の機能です。

デザイン

(34)

• キュー選択

１

２

(35)

• ＋ボタン押し、

AISACの追加...を選択

１ _２

(36)

• 追加ボタンを押す

１ _２

３

(37)

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

１

２

(38)

• 音を確認する

１

２

３

４ デザイン

(39)

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

• ピアノや弦楽器のようなイ

メージでカーブをデザイン

する

• もう一つ

AISACを使います。

ピッチアンテナを再現

デザイン

(40)

• ＋ボタン押し、

AISACの追加...を選択

１ _２

(41)

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

１

３

２

４ デザイン

(42)

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

１

２

(43)

• 音を確認する

１

２

３

４ デザイン

(44)

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

• ツール上でもある程度確認できますが、

２つを同時にコントロールする他のアプリで動かすた

め、ツールから

_{ACF,ACBという}

インタラクティブサウンドの元になるデータを出力し

ます。

(45)

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

後でインゲームプレビューで波形追加などを行うため

以下の操作をしておきます。

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

• 「パディング使

...」のチェックを外しグレーにする

１

２

(46)

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

１

２

(47)

• キューシートを右クリックし、

「Atomキューシートバイナリ出力先フォルダをエクスプローラで開

く...」を選択

１

２

３

• acf

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

(48)

ACF

、ACBを利用する

• CRI Atom Craft

の

データを

ADX2LE OSC Player

で再生する

サウンドデザインインタラクションデザインサウンド再生 ADX2LE_OSCBasicPlayer アプリケーション /adx2/0/playcueid OSC (udp) localhost通信 /StremingAssets/ NewProject.acf

CRI Atom Craft

１ プレーヤー

デザイン

１

２

(49)

• ADX2LE OSC Playerを起動

• ブロックを解除する

• 起動する

(50)

ファイルをコピーする

(51)

• バッチを実行する

C:\ADX2LE_Workshop\AtomCraftData\copy.bat

• ACF,ACBファイルをコ

ピーしました。

ファイルコピー

C:ドライブにADX2LE_Workshopを

展開していないと正しく動作しないので

注意

(52)

• ADX2LEOSCBasicPlayer_Dataを開く

• StreamingAssetsを開く

• ACB

、ACFを差し替える

１

２

４

３

• 先ほど

ツールで出力したフォルダから

inGamePreviewを開く

【参考】もしも手動でやる場合は以下のよう

な手順になります。

ファイルコピー

デザイン

(53)

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

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

２

１

(54)

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

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

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

１

２

３

４ プレーヤー

(55)

• いちいちバッチを実行するのは面倒なので、

ビルド時に呼び出すようにします。

２

１

３

４

５ ファイルコピー

(56)

もっと直感的に

• プレーヤーでも２つコントロールができましたが、

同時にコントロールしたいので、

マウスの位置（たて、よこ座標）が反応するような、

簡単なプログラムを用意しました。

• サウンドデザインする上で簡単なプロトタイプを作

ると

ります。

プログラムからどんな風にコントロールされるか理

解を深めると、データ作成に有利な点が見つかるか

もしれません。

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

(57)

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

• processingで

インタラクティブ

サウンドを

コントロールします。

CRI Atom Craft

プログラム

３

(58)

• proessingが起動します

• sketch_AISACXY.pdeを開く

１

２

３

• を押して実行

• を押して停止

(59)

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 プログラム

(60)

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){

playerState = 1;

myMessage = new OscMessage("/adx2/0/aisac 1 "+(1f-mouseY/240f));

プログラムの流れ

起動直後一度呼ばれる

描画は毎度呼ばれる

１

2 プログラム

(61)

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

myMessage = new OscMessage("/adx2/0/aisac 1 "+(1f-mouseY/240f)); oscP5.send(myMessage, myRemoteLocation);

ellipse(mouseX,mouseY,60,60); }

通信処理

OSCインポート

OSCアドレスをセット

再生メッセージ

停止メッセージ

AISAC0メッセージ

AISAC1メッセージ

１

3

2

4 プログラム

(62)

playerState = 1;

myMessage = new OscMessage("/adx2/0/aisac 1 "+(1f-mouseY/240f)); oscP5.send(myMessage, myRemoteLocation);

判定の処理

マウス押されたら

再生中なら

再生中かどうか

マウス状態

１

2

3 プログラム

(63)

チャレンジ（課題）

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

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

(64)

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

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

• ヒント

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

(65)

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

• ヒント：

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

• C:\ADX2LE_Workshop\processingSample

(66)

インゲームプレビュー

• 【インゲームプレビュー】とは、

ツール側で音を加工、編集した結果を

【実行中のゲーム】に送信し、

音を即時に差し替える技術です。

• ゲームを中断させる事なく音の加工を反映させる事ができ

るため、非常に細かい微調整が可能です。

インゲーム接続

デザイン

(67)

インゲームプレビューの開始

【F10キー】を押す

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

_福島GamejamＣＲＩ・ミドルウェア事前セミナー資料

ネコでもわかる

インタラクティブサウンド

田中孝

2013-07-06

このワークショップでは

•

音の作り方

•

波形編集（基本）

•

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

•

Unityスクリプトとかはやりません

→ゲームジャムで実践

その前段階の

レジュメ

•

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

•

ツール紹介 ５分

•

Audacity

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

•

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

テルミンから学ぶ

•

チャレンジ（課題） ３０分

簡単なアプリに音をつけてみる

•

発表 １５分

•

まとめ

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

インタラクティブとは？

•

インタラクティブ

何と対話？双方向？

何を使って？

•

CRI Atom Craft

ADX2LE OSC Player

processing

を使います。

プレーヤー

プログラム

１

デザイン

３

２

サウンドデザイン

CRI Atom Craft

•

CRI Atom Craftを使って

音をデザインします

•

ADX2LEのサウンドオーサリング

ツールです。

http://www.adx2le.com/

ゲームジャムでも使う

デザイン

１

•

ADX2 OSC Player

を使って

音を鳴らします。

•

Unityで作られたADX2LEの

プレーヤーアプリです。

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

プレーヤー

２

•

Processingを使って

インタラクションを実現

します

•

Processingは電子アートとビジュアルデ

ザインの為のプログラム言語です。

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

ツール紹介５分

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

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

チャレンジ（課題）３０分

発表１５分

_OK

_{X」ボタンで閉じる}