連載インデックスへ
マウスだけでもプログラミングできる!マウスだけでもプログラミングできる!(終)
- GUIベースの環境でプログラミングを始めよう -

ITちゃんのゲームをScratchで作り
Web上で共有しよう

鳥人間 郷田まり子
2009/11/5

アニメーションを付けてみよう

 では、この3枚のコスチュームを高速で次々と切り替えることで、踊るアニメーションを作ってみます。

パラパラマンガの要領で

 まずは、非常に単純な作り方をします。

「コスチュームを『左』に」→「待つ」→
「コスチュームを『中央』に」→「待つ」→
「コスチュームを『右』に」→「待つ」→
「コスチュームを『左』に」→「待つ」

 ひたすら、この繰り返しをします。繰り返される処理1回分を「ずっと」ブロックの中に入れます。

 これを実行してみると、3種類の画像が0.15秒ごとに切り替えられ、パラパラマンガの要領でアニメーションします。

 コスチュームの数が3枚と少なめなので、こんな書き方でも通用しますが、例えばこれからもっと滑らかなアニメーションを作るために、5枚、7枚と増えていくと、具合が良くありません。

 また、コマを送るたびに何か処理を入れる(例えば、「キーボードの[↓]ボタンが押されている場合のみ、しゃがんだ画像にすり替える」)といったプログラムを書くときに、同じ処理を大量に書くことになってしまい、作業効率がいまいち良くありません。「0.15秒待つ」というブロックを各所に挿入していくのも面倒な作業となってしまいます。

「リスト」でプログラムをスマートに

 そこで、次は変数の一種である「リスト」を使って、このプログラムを少しスマートな構造に直してみます。

 リストとは、「複数の変数を連続して並べた変数」です。今回の例では、コスチュームを「左(1)」→「中央(2)」→「右(3)」→「中央(2)」という順に切り替えるので、その順番に「1, 2, 3, 2」というリストを作成します。まずは、変数を作成するのと同じ要領で、「コスチューム一覧」というリストを作成します。


 すると、ステージに「コスチューム一覧」という小窓が表示されます。このグレーの枠の左下に小さな[+]というアイコンがあるので、そこをクリックすると、データが追加できます。そのデータを右の図のように編集します。

 このリストの値を取得するためには、「コスチューム一覧の3番目の要素」という具合に、リスト内での番号を指定します(プログラミング経験者にとって、配列のインデックスが1から始まることが珍しく感じられるでしょう。この辺りは、日常感覚との乖離を極力避けるScratchならではの設計です)。

リストでパラパラマンガを作り直す

 このリストを使って、先ほどのアニメーションの処理を書き直してみます。まず、「現在、リスト『コスチューム一覧』の何番目を表示しているか」ということを表すための変数「コスチューム番号」を追加します。

 そして、以下のようにブロックを組みます。

 まず、コスチューム番号を「1」にセットします。そして、「ずっと」ブロックの中では、「コスチューム番号を1ずつずらしながら、『コスチューム一覧』からその番号のコスチュームを選び、切り替える」という処理を行います。

  • コスチュームを「コスチューム一覧」の「コスチューム番号」番目にする
    リスト「コスチューム一覧」の中から、指定した番号の値を取得。「『コスチューム一覧』の『コスチューム番号』番目」の部分の値は、例えば「コスチューム番号」が1のときは1、「コスチューム番号」が4なら2となる。こうして得た番号のコスチュームを表示
  • 「コスチューム番号」を「コスチューム番号」+1にする
    「コスチューム番号」の値を1増やす
  • もし「コスチューム番号」=5なら、「コスチューム番号」を1にする
    「コスチューム一覧」には、4個のデータしか入っていない。「コスチューム番号」が増えていって5に達したら、これを再び1に巻き戻す

 これを実行し、ステージ上の「コスチューム番号」の値に注目してください。「コスチューム番号」の値が1→2→3→4→1→2→3→4という順番に変化しています。

キーボード操作で“アニメ”を“ゲーム”にする

 いままでは、ひたすら踊り続けるだけでしたが、これにキーボード処理を加えます。キーボードの[↓]キーを押したときにしゃがむようにしてみます。かたつむりの格好をしてしゃがんでいる画像をコスチュームとして取り込みます。

 このままではステージのど真ん中に表示されてしまうので、位置を調整します。コスチューム一覧にある[編集]ボタンを押すと、[ペイントエディター]という簡単なエディタが開くので、そこで右下にずらします。

 先ほど、「0.15秒ごとに、コスチューム番号を切り替える」という処理を作りました。「ずっと」というブロックの中身を少し改造し、「もし[↓]キーが押されていたらしゃがむ、そうでなければ、通常どおりコスチュームを切り替え、コスチューム番号をずらす」という処理に変更してみます。

 下のように、「もし...でなければ...」ブロックを「ずっと」ブロックの中に挿入し、いままで「ずっと」ブロックの中に入っていた一連の処理をドラッグ&ドロップして「でなければ」ブロック内に移動します。そして、「もし」ブロック内が実行される条件として、[調べる]タブから「...キーが押された」ブロックを選び、はめ込みます。

 これで、ユーザーとの対話ができるようになりました。キーボードの「↓」キーを押したときだけしゃがみ、それ以外のときは踊り続けます。

1-2-3-4

 INDEX
マウスだけでもプログラミングできる!(終)
ITちゃんのゲームをScratchで作りWeb上で共有しよう
  Page1
「ITちゃん」の「枕投げゲーム」を動かしてみよう
オリジナル画像を取り込んでみよう
Page2
アニメーションを付けてみよう
キーボード操作で“アニメ”を“ゲーム”にする
  Page3
背景と音を付けて、さらにゲームっぽくする
枕が“当たる”と「ぽよん」と音が鳴る
  Page4
ScratchをJavaアプレットにしてWebで共有
Scratchで始める「フィジカルコンピューティング」
非プログラマでもプログラミングが必要なときに備えて
【おまけ】ITちゃん画像ダウンロード

[an error occurred while processing this directive]
「デザインハック」コーナーへ



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間