Oh!UCC 目次

・あいさつ

・プログラミング班の紹介

・Unreal Engine 4で製作中のアクションゲームの紹介

・テルミンもどきの紹介

新入生向けの活動

▼説明会

4/15(金) クラブ説明会 18:00

▼歓迎会

4/23(土) 新入生歓迎会 19:00

▼初心者向け講習会

4/23(土) python講習会 13:00

5/3(火) 3Dモデリング講習会 13:00

5/14(土) C#講習会 13:00

5/15(日) Unity講習会 13:00

5/21(土) DTM講習会 13:00

5/22(日) PCパーツ講習会 13:00

5/28(土) Java講習会 13:00

▼入部手続

5/6(金) 入部部会 18:00（予定）

新入生の皆さんへ

新入生の皆さん、ご入学おめでとうございます。

この冊子は大阪大学コンピュータクラブ（OUCC）の紹介用に作

った新入生向けの部誌です。

OUCC とは

OUCCは大阪大学公認サークルで、コンピュータに関わる様々

な事柄を通して、よりよい学生生活の場を作っていくことを目的

として活動しています。

内部にプログラミング班、CG班、電子工作班などがあります。

班は一応ありますが個人で好きなように活動しても全然かまい

ません。

普段は部室でゲームや麻雀をしている人が多いですがたまに

講習会をやったり KC3(関西情報系学生交流会)で他大の人と

交流や意見交換を行ったりいろいろしています。

また、年２回、春と夏に合宿があります。春合宿はコーディング

合宿で、ホテルに篭ってコーディングします。夏合宿はコンピュ

ータから離れようという合宿です。

プログラミング班の紹介

プログラミング班は、プログラミングに関する技術的な交流を目的として活動をして

います。主な活動内容は以下の通りです。

講習会・勉強会の開催

講習会や勉強会を定期的に行っています。

4～6 月ごろにはプログラミング言語の習得などを目的とした初心者向けの講習会が

開かれます。昨年度は Python講習会、C#講習会、JavaScript講習会、Unity講習会、

Web アプリ開発講習会、競技プログラミング講習会、Git 講習会などが行われました。

今年度開催される講習会についての情報はこの冊子の別のページにあると思います。

最新の情報は当部のブログ(http://oucc.org/press)を参照してください。いずれも初心者

向けのものなのでぜひお気軽にご参加ください。

LT会

LT（ライトニングトーク）とは、決められた短い時間で行われる自由なプレゼンテー

ションのことで、この会では各発表者による熱いプレゼンテーションが繰り広げられま

す。テーマも技術ネタからそうでないものまでなんでもありとなっています。毎回多く

の部員が参加し、大変な盛り上がりとなっています。

開発合宿

春合宿（コーディング合宿）にも積極的に参加しており、各自が目標を定めて 1日中

PCと向き合っています。最終日には合宿中の成果の発表を行います。

Unreal Engine 4で製作中のアクションゲーム「SPIRIT OF FIRE」

●Unreal Engine4とは

Unreal Engine 4とは、Epic Gamesが無料で公開している最新のゲームエンジンです。

物理ベースのレンダラーを搭載しており、簡単な設定でフォトリアルなシーンを構築できます。

https://www.unrealengine.com/ja　ここからダウンロード出来ます。

この記事ではUE4についてではなくゲームについて書いていますが、OUCCではUE4で3Dゲームを作

るための講習会も開く予定です。

●ストーリー

異世界「真紅の領域」から渡り来た完全社会性生物「レギオン」は、レギオン・ナノプローブと

呼ばれる彼らの細胞を細菌のように他種の生物に感染させ、同化する。レギオン・ナノプローブ

に感染した者は徘徊し、感染していない者を感染させようとする異形の怪物と化す。

しかし、レギオン・ナノプローブに感染してもすぐには同化されず、レギオンの持つ驚異的な能

力のみを獲得した一握りの人間たち―――「EVOLVED」が存在していた。

●ゲームシステム

プレイヤーはEVOLVEDである神風レイ、比良坂さくらなどのキャラを操作してレギオンと戦う。

敵を間を開けずに攻撃する、敵の攻撃を回避するなどの行動で内部パラメータのスタイリッシュ

ランクが上がり、ダメージを受けるとスタイリッシュランクが下がる。

高いスタイリッシュランクのときに敵を攻撃することでスタイリッシュポイントが多く溜まり、

最終的な評価は主に累積スタイリッシュポイントで行われる。

・コンボ

地上、空中の通常コンボ、突進攻撃、打ち上げ攻撃、必殺技、QTE（クイックタイムイベント）

を組み合わせ、自分なりに「かっこよく」コンボをキメることがこのゲームの目的である。

・オープンワールド

建物内部に入ったり、地域を移動する場合を除き、エリア移動（マップの読み直し）の概念は存

在せず、１辺数kmのマップを自由に移動出来る。

R2を押しながら走ると速く走るようになり、その状態で壁に触れると壁を走ることが出来る。ま

た、空中でR2ホールド中に×ボタンでグライド（滑空）出来る。

・クエスト

ゲーム開始時はFREE ROAM状態で、マップ内に点在するクエストの開始地点に行くことでクエス

トを開始する。クエストはストーリーモードのクエストとストーリーと無関係のクエストがあ

る。

・武器

プライマリウェポンは全キャラ刀となっており、セカンダリウェポンは片手剣、薙刀、双剣、銃

剣、ハンマーの中から選択する。プライマリ、セカンダリ切り替えは矢印ボタンの→で行う。

武器は初期装備を除きレギオンのボス個体を討滅することによって得られる素材を用いて作られ

ており、そのボスの能力の一部を引き出すことが出来る。

特定の条件を満たした状態でコンボのフィニッシュを出すと巨大な魔獣の体の一部が出現して追

撃する。

・アドレナリンサージ

敵の攻撃をジャストタイミングで回避することで精神を研ぎ澄まし、武器内部のS.O.F.（※）と

高度に同調して数秒間武器の特殊効果がフィニッシュ以外でも発動するようになる。

※レギオンナノプローブの細胞内共生生物で、超自然的能力を与える

・ターボブースト

地上でR2を素早く２回入力するとスピードスケートのように高速滑走出来る。これにより高層ビ

ルからの滑空に頼らなくてもマップ内をすばやく移動出来る。

・ノンリーサルモード

「デビルメイクライ」シリーズのチートの機能を標準搭載したもの。

矢印ボタン↓で非殺傷モードとなり、この間レギオンが死ななくなる。これにより任意のタイミ

ングで敵を殺すことが出来、コンボの設計がしやすくなる。

あくまでコンボ設計のためのシステムでありレギオン以外の人間はこのモードで攻撃しても死ぬ

ため、人間の護送クエストで巻き込み防止に使うことは出来ない。

●スクリーンショット

テルミンもどきを作る

こんにちは，OUCC 4回の徳永 (twitter: @yuntan t)です．大学に入って色々やってみたいこ

とあるな ∼プログラミングとかも興味あるな ∼∼というふわふわした方向けの記事を書こうと思います．やさしめに書いているのですでにプログラミングに習熟されている方は適宜読み飛ばし

ていただければと思います．

先日 3月 9日に，クララ・ロックモア生誕 105周年を記念して，Googleのロゴでテルミンを演

奏して遊べるようになったのを覚えていらっしゃるでしょうか*1．

• Google ロゴ、3 月 9 日はテルミンの演奏ができる - ITmedia ニュース http://www.

itmedia.co.jp/news/articles/1603/09/news062.html

• Google Doodle クララ・ロックモア生誕 105 周年 http://www.google.com/doodles/

clara-rockmores-105th-birthday

今でも上記の URLにアクセスして遊べます．今回はその簡易テルミンのパクリみたいなのを作

ろうと思います．

Step1 開発環境の用意

用意するものは

• Google Chromeや Firefox等のブラウザ*2

だけです．ブラウザで https://jsfiddle.net/ を開いてください．こんな画面が出てくると

思います．

図 1 JSFiddle

画面が 4 分割されていて，それぞれ右上に HTML, CSS, JAVASCRIPT, RESULT と表示さ

*1 その時期はちょうど前期の合格発表ですね. . .*2 Internet Explorerは多分動かないです

れていると思います．HTMLの枠にWebページの雛形，CSSにスタイリング，JAVASCRIPT

にプログラムのコードを書いて Runボタンを押すと，RESULTに実行結果が表示されるという

仕組みになっています．HTML, CSSについてはここでは細かく説明しません．以下のコードを

書いておけばいいです．

ソースコード 1 HTML

1 <canvas id="canvas"></canvas>

ソースコード 2 CSS

1 #canvas {

2 width: 100%;

3 height: 100%;

4 background-color: #111;

5 }

ここまで書いて Runボタンを押すと RESULT枠に黒い四角が表示されると思います．これで

とりあえず準備は完了です．

ここまでのコードは https://jsfiddle.net/yuntan_t/azuj6um6/ で見れます．

Step2 音を鳴らす

さっき作った黒い四角のことをキャンバスと呼ぶことにします．キャンバス上のマウスの位置

に合わせて音を鳴らしましょう．まずマウスの位置を取得します．以下のコードを JAVASCRIPT

の枠に書いてください．

1 var canvas = document.getElementById(’canvas’); // マウス座標を受け取るキャンバスを

取得する

2 var rect = canvas.getBoundingClientRect(); // キャンバスの大きさを取得

3

4 canvas.addEventListener(’mousemove’, function(e) {

5 // マウスがキャンバスの上で動くと実行される

6 console.debug(’x: ’ + e.clientX + ’, y: ’ + e.clientY);

7 });

ここで Runで実行して，「開発者コンソール」を開きましょう．ChromeではWebページ上で

右クリックして「検証」→「Console」タブ，Firefox ではWeb ページ上で右クリックして「検

証」→「Console」タブで開けます．キャンバスの上でマウスを動かすと画像のようにログがずら

ずら表示されます．

このようにすると，コードのある箇所が確かに実行されているのかを確認することができます．

この手法をよく「プリントデバッグ」と言ったりします．今の例では確かにマウスの座標を取得

できていることが確認できました．

では音を鳴らすコードを書きましょう．そのためにまず音がなる仕組みについて理解しておく

必要があります．

音というのは空気の振動，つまり波形です．最初に元となる波形をつくり，そいつを加工し

て，最終的にスピーカーで出力します．図はその様子を表しています．ひとつづつ説明します．

図 2 Chrome 開発者コンソール図 3 Firefox 開発者コンソール

図 4 音が鳴るまで

OscillatorNodeで波形を作ります．次に GainNodeで音の大きさを調整します．最後にスピー

カーに波形を出力します．AudioDestinationNodeはスピーカーのことです．

では図に書いたことをコードで表現しましょう．まず，波形の作成・変形・出力まで全てを司

る AudioContextを取得します．

1 var context = new AudioContext();

次に，3 つの Node を context から取得します．それぞれ context.createOscillator()，

context.createGain()，context.destination で取得できます．最後の destination の後

ろに括弧がついていない—関数ではない—ことに注意してください．createOscillator()のよ

うに createと接頭辞がついているものはいくつでも作ることができますが，スピーカーを新し

く作ることはできません．一つだけです．

では，取得した Node達を接続しましょう．

1 var oscillator = context.createOscillator();

2 var gainNode = context.createGain();

3

4 oscillator.connect(gainNode); // OscillatorNodeをGainNodeに接続

5 gainNode.connect(context.destination); // GainNodeをAudioDestinationNodeに接続

最後に oscillator.start()で波形の生成を開始します．ここまでのコードを書いて Runし

ましょう．注意スピーカーのボリュームは小さめにしておきましょう．音は鳴りましたか？ もし何

も起こらないようなら，開発者コンソールでエラーが出ていないか確認しましょう．

Step2 の締めくくりとしてマウスの位置に合わせて音の高さ (周波数)，大きさを変え

てみます．周波数を変えるには oscillator.frequency.value をいじります．大きさは

gainNode.gain.valueで変えられます．次のように簡単な関数を定義しておきましょう．

1 function updateAudio(freq, gain) {

2 oscillator.frequency.value = freq;

3 gainNode.gain.value = gain;

4 }

Step2の最初に書いたコードを修正します．

1 var FREQ_LOW = 100, FREQ_HIGH = 1500;

2

3 canvas.addEventListener(’mousemove’, function(e) {

4 // マウスがキャンバスの上で動くと実行される

5 var freq = e.clientX / rect.width * (FREQ_HIGH - FREQ_LOW) + FREQ_LOW; // 周波

数を計算

6 var gain = 1 - e.clientY / rect.height; // 音量を計算

7 updateAudio(freq, gain);

8 });

キャンバスでマウスを動かしてみましょう．横方向に動かすと音の高低が変化し，縦方向に動

かすと音量が変化します．

ここまでのコードは https://jsfiddle.net/yuntan_t/yt6pzL1c/2/ で見れます．

Step3 波を表示してみる

オシロスコープを見たことがありますか？*3波形を確認するために簡単なオシロスコープを作

成しましょう．まずスピーカーからでている音の波形を調べるため，AnalyserNode を作成し，

GainNodeと AudioDestinationNodeの間にはさみます．

1 var analyser = context.createAnalyser();

2

3 oscillator.connect(gainNode); // OscillatorNodeをGainNodeに接続

4 gainNode.connect(analyser); // GainNodeをAnalyserNodeに接続

5 analyser.connect(context.destination);

AnalyserNodeを使うと波形や周波数成分を簡単に調べられます．今回は波形を調べたいので

getFloatTimeDomainData()を使います．次のように使います．

1 var bufferLength = analyser.fftSize;

2 var dataArray = new Float32Array(bufferLength); // 波形を格納するためのバッファを作

成

3

4 analyser.getFloatTimeDomainData(dataArray); // 現在の波形を取得

次に，取得した波形データから波形をキャンバスに描画します．取得した波形データには点の

データが入っているので，それらをつなげて線にして描きます．キャンバスに線を描くには以下

のようにします．

*3 理系なら学部のうちに実験で何回か使います

1 var canvasCtx = canvas.getContext(’2d’); // キャンバスに描画するためのコンテキストを

取得

2 canvasCtx.lineWidth = 1;

3 canvasCtx.strokeStyle = ’rgb(0, 153, 0)’;

4 canvasCtx.beginPath(); // 線の描画を開始

5 canvasCtx.moveTo(x, y); // 線の開始点を指定

6 canvasCtx.lineTo(x, y); // 線を描く先の点を指定

7 canvasCtx.stroke(); // 指定した点を線でつなぐ

描画の更新をするには requestAnimationFrame()を用いて描画更新の予約を行います．

これらを使ってコードを書きます．紙面の都合上ここには載せられないので，後述のリンクを

見てください．

ここまでのコードは https://jsfiddle.net/yuntan_t/k26e2oey/1/ で見れます．

Step4 音に変化を付ける

テルミン奏者はよくビブラートという手法を使います．手を小刻みに振動させて，音の高低を

細かく変化させる手法です．この記事の締めくくりとしてビブラートをかけてみましょう．

ビブラートをかけるには周波数を定期的に変化させます．一定の間隔で何かを実行するには

setInterval()を使います．以下の例では 33ミリ秒ごとに OscillatorNodeの周波数を更新し

ています．

1 var vibratoCount = 0; // ビブラートをかけた回数

2 var VIBRATO_HZ = 50; // 変化させる周波数

3 var VIBRATO_SWITCH = 5; // 何回ごとにビブラートを切り替えるか

4

5 setInterval(function() {

6 if(vibratoCount / VIBRATO_SWITCH % 2 < 1) {

7 oscillator.frequency.value += VIBRATO_HZ;

8 } else {

9 oscillator.frequency.value -= VIBRATO_HZ;

10 }

11 vibratoCount++;

12 }, 33);

キャンバス上にマウスを持って行ってその位置で留めておくと，音が揺れているのがわかりま

す．テルミン奏者の演奏を YouTube などで見ていただくと分かるのですが，全く似ていません

ね．どちらかというと緊急自動車っぽいですね．これを読んでいる方が頑張って調整してくれる

ことに期待しています．(丸投げ)

ここまでのコードは https://jsfiddle.net/yuntan_t/fupgrb2t/1/ で見れます．

Step5 あとはまかせた

ここまでやった方，お疲れ様です．さて，プログラミングの醍醐味は他の誰も作ったことのな

いものを作ることにあります．ここまで実装された方は，せっかくなので自分のアイデアでなに

か機能を実装してみてください．例えば

• OscillatorNodeのデフォルトの出力波形は正弦波ですが，他にも矩形波 (square)，のこ

ぎり波 (sawtooth)，三角波 (triangle) が指定できます．oscillator.type = 'square'

などと指定します．それぞれどのような音になるのか試してみましょう．

• OscillatorNodeには前述の波形以外にも独自の波形を指定できます．詳細は「webaudio

periodicwave」で調べてください．ただこれを使うには少しフーリエ級数展開の勉強をす

る必要があります．

• 最初に挙げた Google のロゴのテルミンは演奏しやすいように 8 音しか出せないように

なっています．

• キーボードで演奏できるようにする

などでしょうか．また，ここで得た知識を使ってテルミンとは関係なく何かを作ってみるのも

いいでしょう．そのさいは参考情報のWebAudioのデモも見てみてください．

参考情報

WebAudioの APIについては

• AudioContext - Web API インターフェイス | MDN https://developer.mozilla.

org/ja/docs/Web/API/AudioContext

WebAudioの解説記事としては

• Getting Started with Web Audio API - HTML5 Rocks http://www.html5rocks.com/

ja/tutorials/webaudio/intro/

WebAudioを使ったデモとしては

• Violent Theremin http://mdn.github.io/violent-theremin/

• Violent Theremin のソース https://github.com/mdn/violent-theremin/blob/

gh-pages/scripts/app.js

• Plink Web Audio と Web Socket を使った、同時参加型音楽作成ゲーム http:

//dinahmoelabs.com/plink

• The Rick Astley Remixer 異種の音源をリミックスするゲーム http://dinahmoelabs.

com/rickastley

• Web Audio の デ モ 集 http://chromium.googlecode.com/svn/trunk/samples/

audio/samples.html

部室の地図

発行：大阪大学コンピュータクラブ

Web：http://oucc.org

E-mail：info@oucc.org

Twitter：@OUCC