welcome: please sign in
location: "クレーンゲーム"の差分
8と36のリビジョン間の差分 (その間の編集: 28回)
⇤ ← 2011-05-31 12:29:26時点のリビジョン8 →
サイズ: 1151
編集者: masahiko
コメント:
← 2012-06-07 01:59:49時点のリビジョン36 → ⇥
サイズ: 7004
編集者: masahiko
コメント:
削除された箇所はこのように表示されます。 追加された箇所はこのように表示されます。
行 3: 行 3:
ゲーム作りを通してプログラム作成の手順を学びます。 ゲーム作りを通してプログラム作成の考え方を学びます。
行 9: 行 9:
画面例
 . {{attachment:crane30.png}}
----
=== オブジェクト指向 ===
それぞれのもの(オブジェクト)の状態や動作を考えることで
プログラムの構成を決定します。

このプロジェクトでは
 1. クレーンの動き
 1. Aボタンを押したときの動作
 1. Bボタンを押したときの動作
 1. ぬいぐるみの動き
に分け、この順にスクリプトを作成していきます。
行 11: 行 25:
うまく操作したときのクレーンの動きを考えます。
 . {{attachment:catch.png}}
状態図に書くとこのようになります。
 . {{attachment:crane01.png}}		 クレーンの動きは上下左右の４つです。
 . {{attachment:idou1.png}}

開始時には左上にあり、
動き始めてから止まるまでなにも操作をしなかったら
つぎのような動きになります。

箇条書きにするとこのようになります。(シナリオ)
 1. クレーンが右に動く
 1. 右端についた
 1. クレーンが下に動く
 1. 下端についた
 1. クレーンが上に動く
 1. 上端についた
 1. クレーンが左に動く
 1. 左端についた
 1. 停止


図に書くとこのようになります。(状態図)
 . {{attachment:crane31.png}}
行 16: 行 47:
一度に１つのスクリプトがチクタクで動作するように考えます。 一度に１つのスクリプトがチクタクで動作するように考えると分かりやすい。
行 18: 行 49:
青の点線で囲んだ範囲が１つのスクリプトになります。
 . {{attachment:crane02.png}}		  . {{attachment:crane32.png}}
青の点線で囲んだ範囲を１つのスクリプトとして作成します。
 . スクリプト１～４はどれか１つが'''チクタク'''で動作すると考えます。
 . ボタンが押されたときは、対応するスクリプトを'''１回'''実行します。

スクリプト１はこのように書けます。
クレーンの絵の向きを変えずに動かす方法は２つあります。
 . 座標を設定する方法で書いた場合
 . {{attachment:crane07.png}}
 . 進行方向を設定する方法を用いる場合
 . {{attachment:crane08.png}}
スクリプト２は下方向の移動で、下端についたときの処理を
テストタイルを使って書きます。
 . {{attachment:crane09.png}}
スクリプト３、スクリプト４も同様に書けます。

Aボタンが押されたときは、スクリプト１をスタートすればよい。

Bボタンが押されたときは、スクリプト１を停止し、スクリプト２をスタートすればよい。
 . {{attachment:crane10.png}}
行 21: 行 71:
=== 動作全体 ===
Aボタンが押されたときの処理を加えれば、とりあえず完成。		 === 全体の動作 ===
通常、Aボタンが押されるのは停止状態のときである。

クレーンが動き始める前に、
初期位置に移動するなどの処理が必要なら
スクリプト１をスタートするまえに行う。

したがって状態図はこのようになる。
行 26: 行 82:
上の状態図で考えられていないときの処理。 上の状態図で考えられていない場面を考える。(別のシナリオ)
行 28: 行 84:
 . {{attachment:crane04.png}} 例えば、次の場合の処理が記述されていません。
 * スクリプト１が動作しているときにBボタンが押されなかった。
 * 停止状態でないときにAボタンが押された。

スクリプト１が動作しているときにBボタンが押されないままだと、
クレーンが右端を通り過ぎて画面から消えてしまいます。

 . 右端に着いたら左に進む、とすれば状態図はこのようになります。
 . {{attachment:crane22.png}}
 . スクリプト１に処理を追加することで修正できます。

停止状態でないときにAボタンが押された場合、
次の処理を行えば最初から行われるようにできる。
 . スクリプト１～４を停止する。
 . クレーンを初期位置に戻す。
 . スクリプト１をスタートする。

他にも動作がおかしな点があるかもしれません。
 . 発見するにはシナリオを
 . 動作を検討するには状態図を
使うとよい。
行 31: 行 107:
ぬいぐるみの状態は次の３つが考えられます。
 . 止まっている。
 . クレーンでつかまれている。
 . クレーンから開放されて落ちている。
状態図にするとこのようになります。
行 32: 行 113:
状態の数が少なく、状態の変わり方も単純なので、
１つのスクリプトで書けそうです。

クレーンでつかまれているときを考えます。
 . ぬいぐるみの座標をクレーンの座標と同じにすれば、クレーンの動きと一緒にぬいぐるみを動かすことができます。
 . {{attachment:crane15.png}}
 . クレーンでつかまれているかどうかの判定は'''タートルへの距離'''を用いて行えます。
 . '''タートルへの距離'''は２つのオブジェクトの中心位置の距離を求めるものです。
 . {{attachment:crane12.png}}
 . このように記述すると、距離が３０より小さいときぬいぐるみがクレーンと一緒に動きます。
 . {{attachment:crane11.png}}
 . クレーンの中心位置と距離の数値をうまく調整して、赤丸の範囲にぬいぐるみの中心位置が入っているかどうか判定できるようにします。
 . {{attachment:crane14.png}}
クレーンから落ちるときを考えます。
 . 下方向に動かすにはｙ座標を使うのが簡単です。
 . {{attachment:crane16.png}}
 . ある色に触れるまで落ちるようにするにはこのように書きます。
 . {{attachment:crane18.png}}
 . 下の方に何かを描いておき、その色を判定に使えばよい。
 . {{attachment:crane17.png}}

３つの状態をまとめると
 . クレーンにつかまれている時は
  . クレーンと一緒に動く
 . そうではなくて
  . 指定の色に触れている時は
   . 止まっている
  . そうでない時は
   . 下に動く
となり、次のように記述できます。
 . {{attachment:crane19.png}}
----
=== 完成まで ===
ぬいぐるみを適当な場所に配置し、
ぬいぐるみのスクリプトをチクタクにする処理を
Aボタンが押されたときのスクリプトに追加します。

本物のように動作させるには細かな調整が必要かもしれません。

いろいろ考えて試みてください。

----

=== 補足 ===

次のようなことを行いたいと思っていることでしょう。

 . クレーンが開いたり閉じたりする。
 . Bボタンは１回しか押せないようにする。

ある機能を使うと簡単にできます。
近々解説します。

クレーンゲーム

ゲーム作りを通してプログラム作成の考え方を学びます。

ゲーム内容 

  • Aボタンを押すとクレーンが動き始め、Bボタンを押すとクレーンが下がり、うまくぬいぐるみをつかんだら運ぶことができます。

画面例

  • crane30.png

オブジェクト指向

それぞれのもの(オブジェクト)の状態や動作を考えることで プログラムの構成を決定します。

このプロジェクトでは

  1. クレーンの動き
  2. Aボタンを押したときの動作
  3. Bボタンを押したときの動作
  4. ぬいぐるみの動き

に分け、この順にスクリプトを作成していきます。

クレーンの動きを考える

クレーンの動きは上下左右の４つです。

  • idou1.png

開始時には左上にあり、 動き始めてから止まるまでなにも操作をしなかったら つぎのような動きになります。

箇条書きにするとこのようになります。(シナリオ)

  1. クレーンが右に動く
  2. 右端についた
  3. クレーンが下に動く
  4. 下端についた
  5. クレーンが上に動く
  6. 上端についた
  7. クレーンが左に動く
  8. 左端についた
  9. 停止

図に書くとこのようになります。(状態図)

  • crane31.png

個々の状態に対応するスクリプトに分け、 一度に１つのスクリプトがチクタクで動作するように考えると分かりやすい。

  • crane32.png

青の点線で囲んだ範囲を１つのスクリプトとして作成します。

  • スクリプト１～４はどれか１つがチクタクで動作すると考えます。

  • ボタンが押されたときは、対応するスクリプトを１回実行します。

スクリプト１はこのように書けます。 クレーンの絵の向きを変えずに動かす方法は２つあります。

  • 座標を設定する方法で書いた場合

  • [添付]

  • 進行方向を設定する方法を用いる場合

  • [添付]

スクリプト２は下方向の移動で、下端についたときの処理を テストタイルを使って書きます。

  • [添付]

スクリプト３、スクリプト４も同様に書けます。

Aボタンが押されたときは、スクリプト１をスタートすればよい。

Bボタンが押されたときは、スクリプト１を停止し、スクリプト２をスタートすればよい。

  • [添付]

全体の動作

通常、Aボタンが押されるのは停止状態のときである。

クレーンが動き始める前に、 初期位置に移動するなどの処理が必要なら スクリプト１をスタートするまえに行う。

したがって状態図はこのようになる。

  • [添付]

動作詳細

上の状態図で考えられていない場面を考える。(別のシナリオ)

例えば、次の場合の処理が記述されていません。

  • スクリプト１が動作しているときにBボタンが押されなかった。
  • 停止状態でないときにAボタンが押された。

スクリプト１が動作しているときにBボタンが押されないままだと、 クレーンが右端を通り過ぎて画面から消えてしまいます。

  • 右端に着いたら左に進む、とすれば状態図はこのようになります。

  • [添付]

  • スクリプト１に処理を追加することで修正できます。

停止状態でないときにAボタンが押された場合、 次の処理を行えば最初から行われるようにできる。

  • スクリプト１～４を停止する。
  • クレーンを初期位置に戻す。
  • スクリプト１をスタートする。

他にも動作がおかしな点があるかもしれません。

  • 発見するにはシナリオを
  • 動作を検討するには状態図を

使うとよい。

ぬいぐるみの動作

ぬいぐるみの状態は次の３つが考えられます。

  • 止まっている。
  • クレーンでつかまれている。
  • クレーンから開放されて落ちている。

状態図にするとこのようになります。

  • [添付]

状態の数が少なく、状態の変わり方も単純なので、 １つのスクリプトで書けそうです。

クレーンでつかまれているときを考えます。

  • ぬいぐるみの座標をクレーンの座標と同じにすれば、クレーンの動きと一緒にぬいぐるみを動かすことができます。

  • crane15.png

  • クレーンでつかまれているかどうかの判定はタートルへの距離を用いて行えます。

  • タートルへの距離は２つのオブジェクトの中心位置の距離を求めるものです。

  • crane12.png

  • このように記述すると、距離が３０より小さいときぬいぐるみがクレーンと一緒に動きます。

  • crane11.png

  • クレーンの中心位置と距離の数値をうまく調整して、赤丸の範囲にぬいぐるみの中心位置が入っているかどうか判定できるようにします。

  • crane14.png

クレーンから落ちるときを考えます。

  • 下方向に動かすにはｙ座標を使うのが簡単です。

  • crane16.png

  • ある色に触れるまで落ちるようにするにはこのように書きます。

  • crane18.png

  • 下の方に何かを描いておき、その色を判定に使えばよい。

  • crane17.png

３つの状態をまとめると

  • クレーンにつかまれている時は
    • クレーンと一緒に動く
  • そうではなくて
    • 指定の色に触れている時は
      • 止まっている
    • そうでない時は
      • 下に動く

となり、次のように記述できます。

  • crane19.png

完成まで

ぬいぐるみを適当な場所に配置し、 ぬいぐるみのスクリプトをチクタクにする処理を Aボタンが押されたときのスクリプトに追加します。

本物のように動作させるには細かな調整が必要かもしれません。

いろいろ考えて試みてください。

補足

次のようなことを行いたいと思っていることでしょう。

  • クレーンが開いたり閉じたりする。
  • Bボタンは１回しか押せないようにする。

ある機能を使うと簡単にできます。 近々解説します。

クレーンゲーム (最終更新日時 2012-06-14 12:49:54 更新者 masahiko)