アニメ）プログラムにできること　ブン：No.02

 

連投で申し訳ない感がしてますが、ブンです。

今回はgifアニメではなくFlashを用意してみました。

画像は一切使用せず、ActionScript3.0でのプログラミングのみで作りました。

 

実は、ここ数日、１日１プログラムと題して組んでいたもので、

最終的にはブログパーツ的なものを作ろうかと思っています。

個人的にやってることなのですが、話のネタにもできそうなので流用で。

 

ここではアニメーションを行なう上での考え方について触れていくので、

もし、処理内容そのものが気になるという方がいらっしゃったら

遠慮なくコメントで質問して下さい。

後日ガッツリ説明させて頂きます。

 

さて。

下に実物がありますが、先に操作説明をさせて頂きます。

操作を行なう前にはFlash部分をクリックしてください。

（フォーカスの関係で入力が認識されないので）

10種類の場面があり、キーボードで

上もしくは下を入力すると、場面を切り替えられます。

また、キーボードで右もしくは左を入力すると、

背景の色を変えることができます。

また、場面によってはマウスカーソルの移動に合わせて

反応するものがあります。適当に移動させてみて下さい。

 

 

プログラムでのアニメーションでできることと言えば、

リアルタイムで変化の内容そのものを変えられること、

マウスやキーボードなどコントローラーから入力を受け付けられること、

乱数（ランダムな数）などのデータを利用できること、などがあります。

もし、それらを利用しないようなアニメーションを考える場合、

プログラムを利用する必要はない、と言ってもいいでしょう。

 

では、もっとプログラムによるアニメーションについて考えるために、

先ほどのFlashの考察を行なっていこうと思います。 

 

まず、キーボードによって場面や背景の色を

変更した瞬間に行なわれているアニメーションについてです。

入力を行なわれた瞬間に、現在の場面のIDと背景の番号を表示し、

その後、一定時間変更がなければ徐々に画面外へ移動し消えます。

何故こうしたのかといいますと、常にこの表示があると邪魔だったので

一定時間だけ表示して消そうと思ったからです。

また、パッと消えるよりは何らかのアニメーションが

あった方がよいと思ったので、画面外へ移動するようにしました。

他にも徐々に薄くして消すというアニメーションも考えられます。

が、本来このようなアニメーションは必要ではありません。

というのも、あくまで見栄えの問題でしかないからです。

裏を返せば、オマケ程度のアニメーションなので、

あまりこだわった動きをさせる必要はありません。

むしろやりすぎるとサブの情報提示でしかないのに、

メインの画面を邪魔してしまう可能性があります。

 

また、背景の色を変化させるときも、少しアニメーションを入れています。

というのも、突然背景の色が変わると目に負担がかかるからです。

急激な色の変化は、場合によって異常症状を引き起こします。

この症状は光過敏性発作と言われており、

いわゆるテレビアニメでの「部屋を明るくして離れて見てね」の

起源となった事件のポケモンショック、ポケモンフラッシュというヤツです。

これはテレビアニメだけではなくゲームにおいても起こりうる症状です。

私が知る限りの具体的な対処法としては、

色の変化を緩やかにすること、そして原色を使用しないことです。

変化を緩やかにする、というのはまさにアニメーションです。

ぼかしていく、濃くしていく、などのアニメーションで対応できます。

後者の原色とは、真っ赤、真っ青、真緑などのことで、

RGBの16進数で言えば0xFF0000、0x00FFFFなど、

RGB要素単体の10進数では255です（お絵描きツールでもありますよね）

また、真っ黒（0x000000、R：0　G：0　B：0）も

目に悪いと聞いたことがあるので、私が黒を使う場合、

0x111111など、真っ黒ではない色を使用するようにしています。

 

ではメインの各場面のアニメーションの話に移ります。

 

まず、１つ目の場面（ID：1）についてです。

この場面で行なわれているアニメーションは他のものとは違い、

明確な開始と終了が存在し、終了すればもう一度開始する

ループ処理を行なっています。

ループといっても、全く同じ動きを繰り返すのではなく、

どこから動き始めるかはランダムです。

アニメーションさせているもの自体は複数の薄い棒だけなので、

非常に単純な動きではありますが、重なりあうことによって

四角形のような違った図形を見せることができます。

変化前（棒）の状態が、どのようにして変化後（四角形）に

移り変わっていくのか、その様子を表現できることは、

アニメーションにできることの１つであり、

その中でもランダムだからこそ全く同じものを見せない、

というのは、プログラムでのアニメーション特有といってもいいでしょう。

 

次に２つ目の場面（ID：2）についてです。

このアニメーションは、ただランダムなサイズの円形を

ゆらゆら揺らしながら画面上部へ移動させているだけのものです。

が、このアニメーションによって、シャボン玉や気泡のようなものが

ふわふわと上へ昇っていく様子を表現してみました。

これは、どのようなものを表現したいのか、

明確な目標を持ってプログラミングしたものであり、

「適当にプログラミングしたら、面白そうなものができた」

という状況とは全く異なります。

「こんなアニメーションをさせるためには、

どのようにプログラミングすればよいのか」

と考え実装しているわけです。

テレビアニメやゲームの多くには、世界観が存在します。

その世界観にあったプログラムとはなんなのか、

例えば水中の世界だから水の表現をしたい、

といったように、考えなければならないときは当然あるでしょう。

 

次に３つ目の場面（ID：3）についてです。

２つ目の水のイメージから派生して作ったもので、

マウスカーソルを動かすと、ゆらゆらと揺れます。

これは水面をイメージしてプログラミングしたものですが、

決して水面のリアルな動きをシミュレートしているわけではありません。

横に等間隔に配置した点を、縦にのみバネ運動させているだけです。

点の移動は現状の位置がマウスカーソルの位置に近ければ近いほど

近い位置まで移動するようになっています。

また、この水面は何層か重なっており、

各水面におけるバネのパラメータは変えてあります。

なので、水面はそれぞれ異なった動きをするようになっています。

私としては、これで十分水面を表現できていると思ったので、

「動きが激しいと水滴が舞う」などのリアルさは追求していません。

しかし、場合によってはそのような表現も必要になるかもしれません。

少なくとも、この表現では船が転覆し、

波に呑まれていくような表現はできないでしょう。

 

次に４つ目の場面（ID：4）についてです。

この場面のアニメーションは他のものと異なって、

あまりリアルタイムな変化がないものとなっています。

どちらかといえば、プログラムで図形を自動生成することに

重点を置いているため、アニメーションによる見せ方は不十分でしょう。

ではもし、これにアニメーションをつけるとすれば、

どのようなものが考えられるでしょうか？

ここでの図形の提示方法としては、

色の薄い状態から徐々に濃くすることでフェードインさせる、

色の濃い状態から徐々に薄くすることでフェードアウトさせる、

などが考えられます。

また、他にアニメーションの効果を追加するのであれば、

光らせる、回転させる、拡大縮小する、などが挙げられます。

縦と横のサイズ比を調整することによって、

奥行きや立体的な回転も表現することができるかもしれません。

また、アニメーションからは少し話がずれますが、

ゲームとして各図形に属性などのパラメータを設け、

出現した図形によって効果が異なる、出現方法が異なる、

といったシステムを考えることもできそうです。

 

次に５つ目の場面（ID：5）についてです。

これは一般的にも見られる、ただのデジタル時計です。

あくまで現在時刻の取得と表示の練習をしたかっただけなので、

アニメーションとしてはあまり特徴がないものとなっています。

ですが、このアニメーションは他のものに比べて

非常に変化が激しいものでもあります。

というのも、ミリ秒部分の表示は高速で変化し、

表示される数値の形は前後の数値の形に全く依存していません。

例えば、５の前後の数値は４と６ですが、

『４』も『５』も『６』も、全く関連性のない形をしています。

もし「数値が増えると棒が増える」などの場合であれば、

多少前後に関連性が出てきますが、今回はそうではありません。

結果としてミリ秒の表示部分だけで言えば、

「目紛しく変化している」という情報は得ることができても、

「今はこの数値だ」という情報は得にくくなっています。

そして今回、私はこれで構わないと思いました。

「今が一体どの数値なのか」といった情報はあまり重要ではなく

「変化している」という情報が伝わればそれでいいわけです。

もし、ミリ秒が今どのような数値であるかを伝えたいと思った場合、

具体的な数値として提示すると共に、

時、分、秒、ミリ秒をメーターのようなもので表現し、

徐々に増えていく様子を表現していたかもしれません。

 

次に６つ目の場面（ID：6）についてです。

５つ目に引き続いて時計ですが、今度はデジタルではなくアナログです。

アナログ時計は数値をうまく角度に割り当てることで表現されています。

これはある意味では時間だけでなく、他のものにも使える表現だと言えます。

例えば温度や湿度、スピードメーターなんかもそうですね。

そしてこういった表現をアニメーションとして利用するとなると、

現在の数値を参照し、反映させる必要が出てきます。

その数値が変われば結果的にアニメーションになるわけです。

で、アナログ時計の話に戻りますが。

アナログ時計の場合、実は針の位置が

「１なら１を表す角度になっている」というわけではありません。

例えば１時の場合を考えましょう。

１時と言っても、０分から５９分、０秒から５９秒まで存在します。

そしてそんな１時の間、短針は１時の角度で留まっているわけではありません。

０分であればちゃんと１時を示す角度になりますが、

３０分であれば１時と２時の間、５９分であればほぼ２時を指しています。

実はこれは本来秒針にも言えることで、秒針はカッチカッチと動くのではなく、

ミリ秒に対応して滑らかに動くのが正しいわけです。

しかし、秒針が滑らかに動くアナログ時計はあまりありません。

そこまでの正確さが基本的に不要だからです。

ゲーム内で自作のメーターなどを作る場合には、

どこまでを提示するかを考えることが必要になるかもしれません。

 

次に７つ目の場面（ID：7）についてです。

これはどちらかというと、８つ目の場面を

作ろうとして偶然先に生まれたものです。

少し花火をイメージして色や移動角度を調整しましたが、

本来の花火であれば、重力や時間につれて色が変わり消える、

と言った部分も考えられます。

重力が干渉する間も、色が変化する間もないほどに高速で移動しているような、

ミサイルやピストルの弾的な表現でもあるかもしれません。

偶然の産物だからこそ、ここから更に

花火として利用するのであれば花火としての調整を、

ミサイルとして利用するのであればミサイルとしての調整を

ピストルの弾として利用するのであればピストルの弾としての調整を

する必要があると言えるでしょう。

 

次に８つ目の場面（ID：8）についてです。

実は７つ目の場面での線の表現はドットを打つことで行なっていたのですが、

こちらは線を描くことで線の荒さを軽減しています。

具体的に言いますと、bitmapData.setPixel32(x, y, color)から

spr.graphics.lineTo(x, y)、bitmapData.draw(spr)にしています。

で、このアニメーションでは回路の中の電気の流れのような

サイバー的なものを表現してみました。

光の線が回路のどの部分を通過するかはランダムですが、

回路ということもあり、配線の構成そのもの（分岐点）は

一定の規則を持たせるようにしました。

これによって、時には光の線同士が同じ場所を通過するようになっています。

最初は規則を持たせず、適当なタイミングで曲がるようにしていたのですが、

私が表現したいと思った回路の規則正しい配線の並びを

うまく表現できていなかったので、そのあたりは調整しました。

機械の基盤なんかは効率よく配線されていて、綺麗だと私は思いますし、

そんな綺麗さを表現できたらなぁと思ったわけです。

もっと言えば、実際に回路を背景として用意しておき、

その上を配線通りに光が通過するような表現もあればいいかもしれません。

 

次に９つ目の場面（ID：9）についてです。

５つ目の場面のアナログ時計に似ていますが、

数字が変わるときにはアニメーションをさせています。

５つ目の説明でもあったように、次の数字、次の数字へと

変わっていく様子は何ら関係性のない形への変化となってしまいます。

なので、ここでは回転するという要素を加えることで

変化する様子をアニメーションさせています。

ミリ秒部分の表記がないため、１秒ごとに数値が変わるだけの

アニメーションとなりがちですが、こう言ったアニメーションを挟むことで、

変化を楽しむ要素が増えると言えるでしょう。

また、この回転の表現ですが、回転しているように見えて実は

各数値の横の比率を変化させているだけです。

消える時には徐々に小さく、現れる時には徐々に大きくしています。

４つ目の場面の話をしたときにも少し触れましたが、

縦と横の比率を変化させるだけでも、まるで回転しているかのような

表現を実現することができます。

いろんな場合にも使えるアニメーションだと言えるでしょう。

 

最後に10つ目の場面（ID：10）についてです。

これはマウスカーソルの現在地に向くように回転する物体を複数用意し、

画面内に並べているだけのものです。

最初は画面中央に１つだけ用意していたのですが、

思いつきで小さいものをたくさん並べたところ、

なかなか面白い挙動をしたので、そのままにしました。

一つ一つの物体の回転についてですが、ただその方向を向くのではなく、

少し余韻を持たせるようにしています。

激しい動きから突然止まると分かりやすいかもしれません。

実は、この動きは３つ目のアニメーションで使用した

バネ運動の処理を流用しています。

というのも、そもそもバネ運動を位置ではなく

回転でやってみようと想い至った結果がこれだからです。

バネ運動を実物のバネとして考えると、あまり関連性がないように思われますが、

基準点（基準の角度）や移動量（変わった角度の大きさ）があるといった

特徴を持っているため、座標を回転角度に対応させれば十分可能です。

このように、同じような処理であっても違った形で見せることは可能なので、

面白そうな挙動をしたアニメーションの処理を

別のアニメーションで使ってみるといった挑戦はアリだと私は思います。

 

 

長々と話をしてきましたが。

プログラムでのアニメーションについて述べただけであり、

ゲームにはどのように使用するのか、どのようなものが必要なのかを

具体的に述べてきたわけではありません。

が、ゲームを作る上でも考えなければならない部分が

少し見えたのではないでしょうか。

例えば、何をメインとし何をサブとして見せるのか、

提示すべき情報とはなんなのか、見ていて目が疲れたりしないだろうか、

変化している様子をうまく提示するにはどうすればいいだろうか、

こんなものを表現したくて作って見たがうまく表現できただろうか、

思いつきで作ってしまったがこれは表現として妥当だろうか、

などなど。いろいろあるように思えます。

こういった部分を考えていくことで、

アニメーションのクオリティ、ゲームのクオリティを高めることは

可能だと私は思います。

 

さて最後に。

ここでの話はあくまでプログラム的な処理を中心としています。

次回はプログラム＋グラフィックの話を実物を交えてしようかと思います。

ただ、もしコメント等で質問があれば先にそちらに触れるかもしれません。

ではでは、長々とお付き合いありがとうございました。

 

（投稿：ブン）