Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

アトリエフレームワークス 個人制作 「あめ」

279 views

Published on

同志社ローム記念館プロジェクト アトリエフレームワークスのメンバーによる個人制作第5弾!今回の作品は雨と飴を掛け合わせたとても可愛らしい作品です!アニメーションの勉強資料を参考にして作ってくれました!

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

アトリエフレームワークス 個人制作 「あめ」

  1. 1. 個人制作資料 ~『あめ』の作り方~
  2. 2. イラストの準備 雨粒、飴、雲のいい感じの画像を用意します。 飴はカラフルにしたかったので、薄い色にして、カラフルに変化するように 処理していきます。 自分で描く場合、pngファイルにすれば下の絵のように背景を透過させて保 存できます。 準備した画像はbin中のdataの中にimageファイルを作って保存しておきます。
  3. 3. RAINクラスの準備 Rainクラスの準備については、macとwindowsで違うようなのでアニメーショ ン資料をご覧になっていただきたいと思います。 準備ができたら、実際にクラスに書き込んでいきます! 雨が降る→キーを押す→飴が降る→キーを離す→雨が降る…とループするこ とを目標に作っていきます。
  4. 4. 雨→飴 main.cpp ウィンドウのサイズを変更 して、正方形にしました。 ofApp.cppのsetupで、 ofSetWindowShape(int, int)を 使って設定することも できます。
  5. 5. 雨→飴 Rain.cpp 雨は当たり前ですが上から降るので 初期位置はy=0で、今回風の影響は 考えなかったのでvx=0にします。 vyはとる値の幅を大きくして、 できるだけ自然に雨が降るように しました。 update内のif文のように書いたら、 繰り返し雨が降るようになります。
  6. 6. 雨→飴 Rain.cpp Updateの続きです。 キーを押すと飴に変わり、 離すと雨に戻るようにしました。 飴をいい感じの鮮やかな色に したかったので、 RGB法ではなくHSV法を使いました。 H:色相、S:彩度、V:明度 で、明度を最大に固定しました。
  7. 7. 雨→飴 Rain.h こんな感じですね。 x、yはcppの画像の初期位置です。
  8. 8. 雨→飴 ofApp.cpp ここのisKeyPressedの真偽が Rainクラスに反映されるわけですね。
  9. 9. 雨→飴 ofApp.cpp 前のスライドの続きです。
  10. 10. 雨→飴 ofApp.h こんな感じです。
  11. 11. 完成!! 雨が降りました! キーを押すと飴に変わります!
  12. 12. 完成! 個人制作資料~『あめ』の作り方は以上です。 まだまだ改善点のある作品ではありますが、何らかの形でお役に立てば幸いです。

×