海さんぽ演出「メッセージボトル」

1. メッセージボトル
海さんぽ 1

2. 目次
1.表紙
2.目次
3.仕様
4.仕様するクラス
5〜9.ofAppクラス
10〜26.D_messagebottleクラス
27〜32.使用した書き方一覧 2

3. 仕様
 メッセージボトルが漂っている。
 マウスをクリックしているとマウスカーソルの方へ長靴が近づいてくる。
 ある範囲まで近づいて10/60秒経過したら、メッセージボトルが沈んでいく<小さく透明になっていく>。
 メッセージボトルが、中の手紙が飛び出た状態で浮かんでくる<大きく不透明になっていく>。
 再びメッセージボトルが沈んでいく。
 メッセージボトルが完全に消えてからしばらくして、画面の端からメッセージボトルが再登場する。
3

4. 使用するクラス
 ofApp.h
 ofApp.cpp<基となるクラス>
 D_messagebottle.hpp
 D_messagebottle.cpp<メッセージボトルについてのクラス>
4

5. ofApp.h
変数を宣言する。
• 自作クラスを参照する型
• Mmessagebottle
<D_messagebottleクラスを参照する変数>
• bool型
• MouseClicked
<マウスがクリックされたかどうか>
5

6. ofApp.cpp/setup
• 背景は青っぽい色にする
• フレームレートは60回/秒
• MouseClickedの初期値はfalse
• D_messagebottleクラスの
setupD_messagebottle関数を呼び出す
6

7. ofApp.cpp/update
• マウスの座標を測定して、
変数mousePositionに入れる
• D_ messagebottleクラスの
updateD_ message関数を呼び出す
7

8. ofApp.cpp/draw
D_ messagebottleクラスの
drawD_ messagebottle関数を呼び出す
8

9. ofApp.cpp/mousePressed
ofApp.cpp/mouseReleased
[mousePressed]
• 変数MouseClickedにtrueを代入する
[mouseReleased]
• 変数MouseClickedにfalseを代入する
9

10. D_messagebottle.hpp
引数を指定する。
• updated_messzgebottleに
mouseX,mouseY,mousePosition,MouseClicked
を引数として
ofAppから持ってくる。
変数を宣言する
• int型
• mTime1<演出開始から終了までカウントす
る>
• mNumber<メッセージボトルか登場する時
にどの端から出てくるか>
• mRandom<画像(手紙とボトル)の種類をラ
ンダムに決める変数> 10

11. 11
D_messagebottle.hpp(続き)
• float型
• mWidth<画像(メッセージボトル)の幅>
• mHeight<画像(メッセージボトル)の高さ>
• mWidth2<画像(手紙とボトル)の高さ>
• mHeight2<画像(手紙とボトル)の高さ>
• mRadius1~5<波紋1~5の半径>
• mAlphaBlending<画像の透明度>

12. 12
• ofVec2f型
• mPosition<画像の座標>
• mVelocity<画像の動く速度>
• ofImage型
• mD_ messagebottle <メッセージボトルの画像>
• mD_bottleandletter<手紙とボトルの画像0>
• mD_bottleandletter1<手紙とボトルの画像1>
• bool型
• mIsSpeedError<画像がマウスの座標に向かっているかどうか>
D_messagebottle.hpp(続き)

13. D_messagebottle.cpp
/setup D_messagebottle
• 画像の読み込み<loadメソッド>
• 最初は演出が始まっていないのでmTime1
の初期値は0
• 画像が画面上に登場する時の初期座標を
mPositionに代入。
Ex.mNumberが0の時は画面左端、
2の時は画面上端
13

14. D_messagebottle.cpp
/setup D_messagebottle
• 画像の速度をー1〜1の間でランダムにとる。
動きが遅すぎないように、速度がー0.8〜0.8
をとった時は再度、速度をー1〜1の間で
ランダムにとる。
値が決まったら、mVelocityに代入する。
• 画像<メッセージボトル>の大きさの初期値は幅150,高さ150
• 波紋!〜5の半径の初期値は全て0
• 画像の透明度の初期値は255<不透明>
• 最初は画像は漂っているだけなので
mIsSpeedErrorの初期値はfalse
• 画像<手紙とボトル>の大きさの初期値は幅100,高さ100
14

15. D_messagebottle.cpp/
update D_messagebottle
• もしMouseClickedがtrueなら
mTime1のカウント<演出中のカウント>について
• もしマウスカーソルが画像近くの範囲にあるなら
• mTime1でカウントする
• もしそうでない<近くの範囲にない>なら
• もしmTime1で10までカウントしているなら
カウントを続ける
15

16. 10<= mTime1 <= 150の時
• もしmTime1が10以上かつ150以下なら
• 画像<メッセージボトル>は縮小、透明になっていく
• タイミングをずらして、波紋1〜5の半径をそれぞれ拡大する。
タイミングはmTime1で調節する。
• もしmTime1が150なら
浮かんでくるための準備をする
• 画像<メッセージボトル>は透明
• 波紋1〜5の半径は全て0
16
D_messagebottle.cpp/
update D_messagebottle(続き)

17. D_messagebottle.cpp/
update D_messagebottle
<もしMouseClickedがtrueなら>の続き
• もしmTime1が150より大きく290以下なら
• 画像<手紙とボトル>は拡大、不透明になっていく
• タイミングをずらして、波紋1〜5をそれぞれ
拡大する。タイミングはmTime1で調節する。
• もしmTime1が290なら
• 画像<手紙とボトル>は不透明
• 波紋1〜5の半径は全て0
17

18. D_messagebottle.cpp/
update D_messagebottle
<もしMouseClickedがtrueなら>の続き
• もしmTime1が290より大きいなら
• 画像<手紙とボトル>は縮小、不透明になってい
く
• タイミングをずらして、波紋1〜5をそれぞれ
拡大する。
タイミングはmTime1で調節する。
• もしmAlphaBelndingが0より小さい(透明)なら
• 波紋1〜5の半径は全て0
18

19. D_messagebottle.cpp/
update D_messagebottle
<もしMouseClickedがtrueなら
→もしmTime1が290より大きいなら
→もしmAlphaBelndingが0より小さい<透明>なら>の続き
演出終了して、値の再設定
• 画像の座標の再設定
変数mNumberの値を0〜3の間でランダムにとる。
値によって、画像の初期座標がどの端から
出てくるか決まる。
Ex. mNumber = 0の時は画面左端から画像が登場。
19

20. • 画像の動く速度の再設定
• 画像<メッセージボトル>の大きさの初期化<幅150,高さ150>
• 画像<手紙とボトル>の大きさの初期化<幅150,高さ150>
• 画像の透明度の初期化<255>
• mTime1に0を代入<カウント終了>
20
D_messagebottle.cpp/
update D_messagebottle

21. D_messagebottle.cpp/
update D_messagebottle
• もしそうでない<mTime1が10未満>なら
• 画像がマウスカーソルの座標に向かっ
てくる
向かってくる速さが距離によって
変わらないように
カーソルの座標と画像の座標の差分
を<距離×0.05>で割った値を
変数mVelocityに代入する。
21

22. ＊場合分けをして<ー1>を掛ける位置を変えているのは、割る数が負にならない
ようにするため。
＊距離に<0.05>を掛けているのは速さが小さすぎないように。
• mPositionにmVelocityを足して、画像を動かす。
• 変数mIsSpeedErrorにtrueを代入
22
D_messagebottle.cpp/
update D_messagebottle

23. D_messagebottle.cpp/
update D_messagebottle
• もしMouseClickedがfalseなら
• もしmTime1が10より小さいなら
• もしmIsSpeedErrorがtrueなら
• 速度を再設定
• mIsSpeedErrorにfalseを代入
• 反射
• mPositionにmVelocityを足して、
画像を動かす。
• mTime1に0を代入<カウント終了>
23

24. D_messagebottle.cpp/
update D_messagebottle
<もしMouseClickedがfalseなら>の続き
• もしmTime1が10以上150以下なら
• mTime1でカウントを続ける
• 以下は<もしMouseClickedがtrueなら
→もしmTime1が10以上150以下な>)
と同じ
24

25. D_messagebottle.cpp/
update D_messagebottle
<もしMouseClickedがfalseなら>の続き
• もしmTime1が150より大きく290以下なら
• mTime1でカウントを続ける
• 以下は<もしMouseClickedがtrueなら
→もしmTime1が150より大きく290以下なら>
と同じ
25

26. D_messagebottle.cpp/
update D_messagebottle
<もしMouseClickedがfalseなら>の続き
• もしmTime1が290より大きいなら
• mTime1でカウントを続ける
• 以下は<もしMouseClickedがtrueなら
→もしmTime1が290より大きいな>と
同じ
26

27. D_messagebottle.cpp/
update D_messagebottle
<もしMouseClickedがfalseなら
→もしmTime1が290より大きいなら>の続き
27

28. D_messagebottle.cpp/
draw D_messagebottle
メッセージボトルが沈んでいく時の波紋
• タイミングをそれぞれずらして波紋1〜5を
表示する。
mTime1で各タイミングを調節する。
• 波紋の色は青<RGBのB = 255>
• 枠のみ図形にする
• 円を各半径で、画像の大きさと座標を
考慮した座標に表示
28

29. D_messagebottle.cpp/
draw D_messagebottle
手紙とボトルが浮かんでくる時の波紋
• タイミングをそれぞれずらして波紋1〜5を
表示する。
mTime1で各タイミングを調節する。
• 波紋の色は青<RGBのB = 255>
• 枠のみ図形にする
• 円を各半径で、画像の大きさと座標を
考慮した座標に表示
29

30. D_messagebottle.cpp/
draw D_messagebottle
手紙とボトルが沈んでいく時の波紋
• タイミングをそれぞれずらして波紋1〜5を
表示する。
mTime1で各タイミングを調節する。
• 波紋の色は青<RGBのB = 255>
• 枠のみ図形にする
• 円を各半径で、画像の大きさと座標を
考慮した座標に表示
30

31. D_messagebottle.cpp/
draw D_messagebottle
• もしmTime1が150より大きいなら
画像<手紙とボトル>を表示
• 画像の透明度に変数mAlphaBlendingを指定
• もしmTime1が151なら
• 変数mRandomの値を0か1の間でランダム
にとる
• もしmRandomが0なら
画像を幅mWidth2,高さmHeight2で
座標mPositionに表示
• もしそうでない<mRandomが1>なら
画像を幅mWidth2,高さmHeight2で
座標mPositionに表示
31

32. • もしそうでない<150以下>なら
画像<メッセージボトル>を表示
• 画像の透明度に変数mAlphaBlendingを指定
• 画像を幅mWidth,高さmHeightで座標mPositionに表示
32
D_messagebottle.cpp/
draw D_messagebottle

33. 33
完成！

34. 使用した書き方一覧①
 変数の宣言 ： 型 変数名;
 ＊型の例1. intは整数型、floatは実数型、ofVec2fは2次元のベクトルデータ型、boolは真偽値を入れる型
 ＊型の例2.ofImage型はofImageクラスを使う変数の型
 ＊型の例3.ofSoundPlayer型はofSoundPlayerクラスを使う変数の型
 ＊型の例4.自分が作ったクラスを使う変数の型の名前はクラス名
34

35. 使用した書き方一覧②
 静的変数であることの宣言 ： static const 型 変数名;
 配列の宣言 ： 型 変数名[個数];
 関数orメソッドの宣言 ： 型 関数orメソッド名（引数）;
 ＊C++にはプロパティという機能はない。
35

36. 使用した書き方一覧③
 クラスの関数orメソッドを呼び出す ： <クラス名型の>変数名 関数orメソッド名（引数）;
 ＊関数の例<ofAppクラスの場合> ： setup、update、draw
 ＊メソッドの例<ofImageクラスの場合> ： load<ファイル読み込み>、draw<表示>
 ＊メソッドの例<ofSoundPlayerクラスの場合>：
setVolume<音量調節>、play<サウンド再生>、setLoop<ループ再生するかどうか>
36

37. 使用した書き方一覧④
 フレームレートの指定 ： ofSetFrameRate<1秒間に何回実行するか>;
 背景の指定 ： ofSetBackgroundColor(R, G, B); ： ＊RGBの各値は0〜255
 ランダムな値の取得 ： ofRandom(最小値, 最大値); ： ＊ 最小値と最大値の間の乱数を取る
 2次元のベクトルデータの値の指定の例 ： 「<ofVec2f型の>変数.x 」 が変数のx座標を表す
37

38. 使用した書き方一覧⑤
 透明度をつける<AlphaBlendingをONにする)>： ofEnableAlphaBlending（）;
＊OFバージョン0.8.0以降はデフォルトでONになっている
 描画色と透明度の設定 ： ofSetColor（R, G, B,透明度）; ： ＊ RGB、透明度の各値は0〜255
 コードで描画した図の枠のみ ： ofNoFill();
 演算子の例 ：&&は「かつ」、||は「または」を意味する。
++は「+1」、変数 += 数は「変数に数を足した値を、変数に代入する」の意味。
38

39. 使用した書き方一覧⑥
 条件分岐(if文)： if（条件）{
処理
}else if（条件）{
処理
}else（条件）{
処理
}
 繰り返し処理(while文)：while(条件){
処理
}
条件に当てはまる間は繰り返し処理を実行
39