ひっぱって離す気持ちよさ！ゴムをひっぱるアクションゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- ゴムの動きを再現

今回作るのは、ゴムの物理挙動を使ったアクションゲームです。引っ張って離すゴムの気持ちいい動きを再現しよう。この教材でアニメーション移動（ツイーン）の方法も学ぶことができるのでぜひチャレンジしよう。

でもアプリはこちらから。ゴムの動力を使ってボールを弾くストラックアウトゲームにしてみました。https://openprocessing.org/sketch/1356972

- クミタテ式プログラミングドリルとは？

クミタテ式は一言で言えば、Scratchの設計図を使ってProcessingフレームワークのプログラムコーディングを学ぶ学習方法です。
初めてクミタテ式を学習する方は、はじめの一歩をご覧ください。チュートリアルや導入方法を紹介しています。

- 動画を見ながら学習する

動画で実況プログラミングしながら解説しています。このテキストを見ながら動画と一緒に学ぶのがおすすめです。

■[ここからスタート！]setupで画面を表示する

再生時に最初の1回だけ実行するsetupの枠組みを使って、画面の大きさを決める初期設定をしてあげましょう。

■drawで背景の色を変える

drawの枠組みを使って、1秒間に60回、停止するまでずっと実行されるようにしましょう。

■プレイヤーとなる円を表示しよう

背景に色はつけられましたか？
続いて、円を1つ表示します。この円をゴムに結ばれたプレイヤーとします。

■変数を使ってプレイヤーを表示する

円を表示できましたか？
続いて、変数を使ってプレイヤーを表示します。

■プレイヤーと画面の中心をヒモで結ぶ

プレイヤーと画面の中心とをヒモで結びましょう。
ヒモといっても線で表現します。

■マウスクリックでプレイヤーの位置を移動しよう

ヒモは描けましたか？
続いて、マウスクリックで、マウスの位置にプレイヤーを瞬間移動させましょう。

■ヒモをゴムにする

マウスの位置にプレイヤーを移動できましたか？
続いてただのヒモをゴムのように、プレイヤーを引き寄せる動きに変えましょう。
画面の中心にゆっくりアニメーションしながら移動させます。移動アニメーションは、以下のアルゴリズムで成立します。

新しい現在地 = 現在地 + (行きたい場所 - 現在地) * 0.1;

この移動アルゴリズムは、使い勝手がとても良いので、アニメーションさせたいいろいろな場面で使えるので非常におすすめです。僕も多用します。

■ゴムに勢いをつける

アニメーション移動はできましたか？緩急をつけた移動アニメーションはクオリティがグッと高く見えて良いですよね。
続いて、ゴムに勢いをつけましょう。中心で止まるのではなく、勢い余って反対側までふっとんで往復するような動きを作ります。
実は、先ほどのプログラムにちょっとした工夫を施すだけで実現できます。どこが変わったかわかりますか？

■ゴムの勢いを減速させる

ゴムの勢いは作れましたか？勢いがあるのは良いけど、勢いがありすぎて止まってくれませんね。
続いて、ゴムの勢いを減速させて、ゆっくり止まるようにしましょう。
これもアルゴリズムですね。理屈というより、「へぇこうなるんだぁ」くらいの理解で十分でしょう。

クミタテ式の設計図はここまでです。以下の応用課題は自分で考えてプログラミングしてみましょう。

■応用課題1. マウスドラッグで引っ張ろう

マウスドラッグでプレイヤーを引っ張り続けて、マウスを離したらプレイヤーが吹っ飛ぶ感じにしましょう。