同志社大学クローバー祭にて開催した、「魔法使いアトリーからの挑戦状」のプログラム内部についてまとめました！

1. 『魔法使いアトリーからの挑戦状』
演出詳細
1

2. 『魔法使いアトリーからの挑戦状』とは
同志社大学の学園祭である『クローバー祭』において展示した作
品です。小さなお子さんでもインタラクティブアートを楽しんで
もらえるように、ゲーム性のある作品を作りました。
私たちアトリエフレームワークスのマスコットキャラクターであ
る「アトリー」の先祖が魔法使いであったという設定で、時間内
に先祖の「アトリー」から出されるミッションをこなしていく
ゲームとなっています。次のスライドで簡単にゲームの内容に触
れたのちにコードの詳細について書いていきます。
2

3. ゲームの内容
制限時間3分以内に、魔法使いアトリーが奪い去ってしまった街
の光を、ミッションをこなすことで取り戻していく、というゲー
ムです。
部屋の壁にホールセンサを仕込み、磁石をいれた魔法のステッキ
を使って、反応させることでミッションをクリアしていきます。
ここではセンサとの連携には触れず、ミッションの仕様とミッ
ション間のつなぎの演出のみに焦点を当てて説明していきます。
3

4. タイマー
• 3分タイマーを作る
• addonとしてofxTrueTypeFontUCを使う
• ヘッダファイルをincludeする
• 右のように変数宣言を行う
• コード上1分ならtimer=61
2分ならtimer=121とする
4

5. タイマー
• ofApp.cppのsetupに右下のように書く
• 自分好みのフォントを探して” ”内に書く
• 200はフォントサイズ
5

6. タイマー
• ofApp.cppのupdateに右下のコードを書く
• 0.016666は1/60を少数で表した数字
• Framerateを60に設定しているので1回回ってくるごとに1/60
を引く
6

7. タイマー
• ofApp.cppのdrawに右下のコードを書く
• 10秒未満のときは01:9ではなく01:09と表したいので条件文を
書く
• minやsecを文字として表す方法は
http://yoppa.org/iphone10/1284.html
を参考にした
7

8. タイマー
• ofApp.cppのupdateに右下のコードを書く
• 0.016666は1/60を少数で表した数字
• Framerateを60に設定しているので1回回ってくるごとに1/60
を引く
8

9. 街に光を灯す
真っ暗な街並みに光って
いるところのレイヤーを
重ねていくことで光った
ように見せていきます。
9

10. 街に光を灯す ofApp.h
真っ暗な街並み1枚、街並みの
中の光るもの(街灯、灯台、窓、
ランプ、カボチャの目の5種類)
それぞれが光っている状態のレ
イヤーを用意しました。全て同
じサイズです。
boolでtrueになった時に画像が
表示されるようにします。
10

11. 街に光を灯す ofApp.cpp
ここではキー判定で画像が表示
されていくようにしていますが、
実際にはホールセンサと連携さ
せています。
11

12. 街に光を灯す 完成
全てのレイヤーを重ねると右の
ようになりました。
本当は手前から順に光がついて
いく、という仕様にしたかった
のですが、これでも十分にパッ
と光が灯っているように見えま
した。
12

13. 階層移動
3枚の画像(街並みの画像、
真っ黒な画像2枚)を少しずつ重ねて
下に動かしていくことで、
空に昇っているようにしました。
13

14. 階層移動 ofApp.h
px,pyが街並みの画像の左上の
点の初期位置で、vx,xyでその
点を下に動かしていきます。
14

15. 階層移動 ofApp.cpp
これもキー判定にしていますが、
実際にはひとつのミッションの
クリアと同時に動き出すように
しています。
setupの画像のロード順は街並
みの画像を一番最後にします。
15

16. 月が昇る
• 月が昇っていくと同時に月が大きくなっていく.
• 月が頂点にきたら真っ黒な雲が月に被さって真っ黒になる.
• このような演出にしていきます。月が昇っていくと同時に月が
大きくなっていく.
• 月が頂点にきたら真っ黒な雲が月に被さって真っ黒になる.
16

17. 月が昇る ofApp.h
• moonとcloudをofImageで宣
言する.
• その他に、m_px, m_py,
m2_px, m2_py, c_px, c_pyを
float型で宣言する.
17

18. 月が昇る ofApp.cpp
setup
• framerateを６０に設定する.
• 背景を黒にする.
• 画像をロードする.
update
・月と雲の座標を動かす.
draw
・月と雲の画像をdrawする.
18

19. 月が昇る 完成
19

20. 満天の星に変化
背景を真っ黒に設定して、
その上に不透明度を上げながら
星空の画像を表示してくことで、
徐々に星が出てきている感じを
出しました。
20

21. 満天の星に変化 ofApp.h
timeはキーが押されるまでのタ
イム計測用です。
iで最初からずっとカウントを
とっていき、iとtimeとの差で
キーを押してからの時間を計測
して、不透明度をいい感じに上
げていきます。
21

22. 満天の星に変化 ofApp.cpp
ofSetColorの4つ目の引数が不
透明度です。
これもここではキー判定にして
いますが、一つのミッションの
クリアと同時にウドき出すよう
にしています。
22

23. 参考URL
田所淳さん 多摩美-”iTamabi”-iPhoneアプリ開発プロジェクト
2010
openframeworks for iPhone : 時計をつくる(オンライン)
http://yoppa.org/iphone10/1284.html
(最終閲覧 2018/2/18)
23