プロデルには、キャンバスという図形描画のための部品が用意されています。
キャンバス部品では、キャンバス上に表示する図形をオブジェクトとして扱えるため、ゲームやグラフなどの描画を気軽に作ることができます。
今回は、このキャンバス部品を使って、パクパクくんを描き、口をパクパクさせるという、簡単なアニメーションを作ってみたいと思います。この記事を通じて、プロデルでの図形描画の使い方を解説できればと思います。

パクパクくんを描く

まずはキャンバス部品に、パクパクくんを描いてみましょう。
まず、ウィンドウを作り、「キャンバス」部品をウィンドウ全体に貼り付けています。
次に、そのキャンバスへ「扇を描く」手順を呼び出して、扇形の図形を表示させます。
扇は、扇部品の大きさを基準に、中心から右中央部分を0度としています。
「背景色」には、#ではじまるHTMLの色番号を指定できます。また「黄色」などと具体的な色を日本語で指定することもできます。

窓というウィンドウを作る
　　そのタイトルは、「パクパク」
窓へキャンバス1というキャンバスを作る
　　そのドッキング方向を全体に変える
窓を表示する

キャンバス1へ扇を描いてパクパクとする
パクパクの位置と大きさは、｛50,50,150,150｝
パクパクの開始角度を45に変える
パクパクの扇角度を270に変える
パクパクの太さを0に変える
パクパクの背景色を「#ffd700」に変える
キャンバス1を更新する
待機する

※ここではプロデルデザイナのフォームデザイン機能を使わずに作っていますが、フォームデザイナにキャンバス部品を貼り付けることで同じ図形を描画できます

実行結果

プロデルデザイナで実行すると、次のような画像が表示されます。

口を動かしてみる

次に、口を動かすアニメーションを加えてみたいと思います。
方針としては、扇の開始角度と扇(黄色い部分)の角度を、一定時間おきに徐々に大きくし、一定の大きさになったら逆に徐々に小さくし、完全に閉じた状態でまた再び大きくする。という動作を行うようにプログラムします。

一定時間おきにプログラムを実行させる

「一定時間おきに」プログラムを実行させるには、「タイマー」種類を使うと便利です。

タイマーは、指定した「間隔」(ミリ秒単位)で、指定したイベント手順が呼び出されます。
次のプログラムでは、10ミリ秒(0.01秒)間隔で「時間になった手順」が実行されます。

タイマー1というタイマーを作る
タイマー1の時間になった時の手順は、時間になった
タイマー1の間隔を10に変える
タイマー1を開始する
待機する

時間になった手順
    //タイマーが一定時間になったときに実行するプログラム
終わり

口を閉じさせる

それでは、パクパクくんの口を動かしてみましょう。まずは、口を閉じさせるだけのアニメーションをプログラムで書いてみましょう。
最終的には、口を閉じたり開いたりさせたいのですが、これらの動作を一度に考えるのは難しいため、まずは口を閉じることだけを考えてみましょう。
ここでは、口の開き具合を「開き具合」変数という変数に格納することにします。
「開き具合」変数・・・口の開き具合を度数(0度～45度)で保存しておきます。

最初、開き具合を45(実際のパクパクくんの口の角度は2倍の90)にしておき、一定時間ごとに、開き具合を-5(度)分減らして、徐々に小さくしていきます。
扇は、パクパクくんの体にあたる部分なので、口を開けているように見せるために、「開始角度」と「扇角度」をうまく計算する必要があります。
また、扇部品の角度を変更したときは、キャンバスに反映されるように「キャンバス1を更新する」と最後に呼び出して、キャンバスを再描画するようにして下さい。

タイマー1というタイマーを作る
タイマー1の時間になった時の手順は、時間になった
タイマー1の間隔を10に変える
タイマー1を開始する
開き具合は、45
待機する

時間になった手順
    開き具合は、開き具合-5
    パクパクの開始角度を開き具合に変える
    パクパクの扇角度を360-開き具合*2に変える
    キャンバス1を更新する
終わり

実行すると、パクパクくんの口が徐々に閉じられるアニメーションが表示されると思います。

口を閉じたり開けたりする

このままでは、口を閉じるとアニメーションが終わってしまうため、次はパクパクくんの口を小さくしたり大きくしたりを繰り返すように改良します。

口を開く動作か開ける動作かを保存するために、「増減」変数を定義します。
「増減」・・・口を開こうとしている(5)か、閉じてようとしているか(-5)を変数で格納します。
今までは、単に開き具合を「-5」していましたが、今度は状態に応じてプログラムで5または-5とするように、プログラムします。

増減は、開き具合が45になった時にはマイナスにします。増減をマイナスにすると開き具合が徐々に小さくなります。
そして開き具合が0になったら逆にプラスにします。つまり再び開き具合が大きくなります。
なお、増減はそれぞれ-5(度)と5(度)としていますが、この数字が大きいほどおおざっぱに、小さいほどなめらかな動きになります。

先ほどのプログラムに上記のような動作をするプログラムを加えます。

タイマー1というタイマーを作る
タイマー1の時間になった時の手順は、時間になった
タイマー1の間隔を10に変える
タイマー1を開始する
開き具合は、45
待機する

時間になった手順
    もし開き具合が45以上なら増減は、-5
    他でもし開き具合が0以下なら増減は、5
    開き具合は、開き具合+増減
    パクパクの開始角度を開き具合に変える
    パクパクの扇角度を360-開き具合*2に変える
    キャンバス1を更新する
終わり

プログラムを実行すると、見事パクパクアニメーションができるようになるかと思います。

完成したプログラム

窓というウィンドウを作る
    そのタイトルは、「パクパクくん」
    その大きさを｛300,300｝に変える
    その設計スケール比率を｛96,96｝に変える
窓へキャンバス1というキャンバスを作る
    そのドッキング方向を全体に変える
窓を表示する

キャンバス1へ扇を描いてパクパクとする
パクパクの位置と大きさは、｛50,50,150,150｝
パクパクの開始角度を45に変える
パクパクの扇角度を270に変える
パクパクの太さを0に変える
パクパクの背景色を「#ffd700」に変える
キャンバス1を更新する

タイマー1というタイマーを作る
タイマー1の時間になった時の手順は、時間になった
タイマー1の間隔を10に変える
タイマー1を開始する
開き具合は、45
待機する

時間になった手順
    もし開き具合が45以上なら増減は、-5
    他でもし開き具合が0以下なら増減は、5
    開き具合は、開き具合+増減
    パクパクの開始角度を開き具合に変える
    パクパクの扇角度を360-開き具合*2に変える
    キャンバス1を更新する
終わり

応用 - スピードを変える

口の動作の速さを変えるにはどうすれば良いでしょうか？簡単な工夫でスピードを変えることができます。
ポイントは、「増減」変数やタイマーの「間隔」です。

まとめ

今回は、キャンバスとタイマーを使ってパクパクくんのアニメーションを作ってみました。
キャンバスを使うことで、図形を画面上に表示させることができます。
また、タイマーを使って一定間隔で、変数を変化させ、それを図形の角度に反映させることで、口を動かすアニメーションを作ることができました。

プログラムを作る際には、やりたいことを一度に考えるのではなく、やるたいことを一つ一つ(閉じる動作と開く動作とに)分解して、考えることで、プログラミングが進めやすくなります。

プロデルでは、キャンバスを使って曲線や多角形などの図形を表示させることもできます。図形を使ったアニメーションにぜひ挑戦してみて下さい。