Web　酒　肴

放置と思いきや、連続の更新ですよ。ある意味ツンデレみたいなもんですわ。 今回のテーマは「物体移動の角度と反射」です。 前回は縦方向と横方向の移動量だけを定義したけど、今回はそれに角度と速度をからめて考えます。

縦方向と横方向の移動量を決定したら角度と速度が確定します。 また、角度と速度を決定したら縦方向と横方向の移動量が確定します。 相互に変換できるので、その時々で便利な方を使うようにしましょう。

おっと、その前にタイトルを少し変えました。ActionScript→Flexに変更です。 それに合わせて過去の記事も変更させてもらいました。Flex主体で説明しているからね。

Flexにおける角度

Flexでの角度の考え方は、一般的な数学での考え方と同じです。 すなわち右に水平な方向が0度。そこから上に向かって角度が上がっていき垂直になったところが90度。 左方向に水平になって180度。下が270度で元の位置まで戻って360度です。 めんどくさいので図は用意しませんでした。

そして、一般的な数学と同じように角度から辺の長さを求めるのにsin, cos関数を使用します。 逆を求めるときは一般にatan関数を使用します。 詳しい説明はしません。 sin(角度）で実行するとその角度にふさわしいx方向の移動量が得られます。同じくcos(角度）でy方向の移動量が得られます。 これらの結果を現在の座標に加算することで、指定した角度の方向に距離１分だけ移動することになります。

Flexの事情ですが、角度をパラメータとして扱う場合、一般的な角度として扱う場合と、ラジアンという単位で扱う場合の2通りあります。 気温で言うと摂氏と華氏の違いのようなものです。 同じ角度を表すのでも違う数値になります。

そしてこれは関数毎に違うので、実行する関数によって普通の角度やラジアンを使い分けなくてはいけません。 ラジアンと角度は以下の計算で相互に変化できるので、少しめんどくさいけど問題はありません。 （Math.PIは円周率）

• 角度→ラジアン

  (ラジアン) = （角度） x Math.PI / 180

• ラジアン→角度

  （角度） = （ラジアン） x 180 / Math.PI

速度

指定した角度にどれくらいの移動量で移動するか、それが速度です。 sin, cos関数で得られた(x, y)にそれぞれ速度vをかけた値を(vx, vy)とすると、現在の座標に(vx, vy)を加算したとき、 物体の移動量はvとなります。 証明はしません。そうなるのだと思ってください。 どうしても知りたい方は高校の数学か物理の範囲で検索すれば出てくるかと思います。

　反射

次は反射です。 今回は壁に反射するケースだけを考えるので非常に簡単です。 左右の壁を超えた時はx方向の速度の正負を反転してあげるだけ。同じく上下の壁を超えた時はy方向の速度の正負を反転。 なぜそうなるのかは、考えましょう。

続きを読む

第２回からさっそくの放置かよ、と思ったみなさんこんばんわ。 インストールしたFlexBuilderの試用期間が終わる前にちゃんと完結するのか、ご心配のことでしょう。 安心してください。僕も同じように心配しています。

等速直線運動

さて、今回のテーマは「物体の移動」。その中でも最も基本的な「等速直線運動」に取り組みます。 中学生の理科で習ったやつですね。 物体が同じ速度で直線状に移動するというものです。 ああもっと勉強しておけばよかった、というのは全ての大人が感じる感情なので、気にしても仕方ありません。 未来は操作できても過去は操作できないのです。

それと同時に、今後のプログラム作成のベースとなる部分の説明をしますので、第２回として適切な分量になるかと思います。 説明は今後FlexBuilder3を前提にしますので、別の環境で行う方は適宜読み替えてください。

プロジェクトの作成

これから、新たな物を作成するたびにFlexBuilderのプロジェクトを作成するようにします。 今回も以下のようにFlexBuilder上から[新規]　→　[ActionScriptプロジェクト]とします。

プロジェクト名は何でもいいですが、例として「Animation1」としています。 入力したら「終了」ボタンをクリック。簡単です。

するとAnimation1.asというファイルが開かれるので、これを編集して今回の説明を行います。 この流れは今後も同じになるので憶えておきましょう。 以下が最初の状態。

続きを読む

ActionScript勉強し始めて１か月、アニメーションの勉強始めて３週間。 どっからどうみても入門者の僕が、入門者だからこそ出来る、かゆい所に手の届く解説記事をみなさんに届ける企画です。

入門者と言ってもJavaやRubyなど、いくつかの言語での開発経験はあるので、対象となる人も同じような人を想定しています。 アニメーションに関する知識は皆無でいいでしょう。 作図が必要な説明はちょっとしんどいので、sin, cosに関する知識は持っていてくれたら嬉しい。 でも知らなくても何とかなるよ。

では始めましょうか。

いい本があります

「ActionScript 3.0 アニメーション」という素晴らしい書籍があります。 ActionScriptで説明しているのですが、アニメーションに対するその考え方は言語を超えてあらゆる場面で役に立つでしょう。 さらにこの著者の、人に教えよう、理解してもらおうという姿勢が随所に見られて、読んでいてとても気持ちがいい。 税込７３５０円と高価だが買って損はない。むしろ余計な金持ってたらつまらんことに使って、時間と金をダブルで無駄にしていたと思うととっても得した一冊。

「ちぇ、宣伝かよ」　とか思った心の狭い方々へ

僕がこの本のエッセンスを自分なりにかいつまんで、このブログ上で解説しましょう。書籍を買う必要はありません。 少しでも僕を疑った心の狭さを全力で反省しながら、大いにアニメーションを学んでください。

色んな前提条件

• アニメーションの定義

  主に物理法則に基づいた物の動きのことです。 物が落下したり、ぶつかったりする動きをリアルに再現することを目的としています。 テレビアニメのようなものを想像した人は、ごめんなさい、ここで終了です。

• 言語と開発環境

  ActionScript3.0です。僕はAdobeのFlex Builder3を使用します。 ３万円ほどするソフトですが、６０日間の試用版があるので、そちらを使えばいいでしょう。 他にもFlash CS3 IDE（さらに高価）やフリーのコンパイラを使用してコマンドラインで開発することもできます。 また、FlashDevelopというフリーの開発環境もあるみたいです。 安く抑えようとすると、調査すべきこともそれなりに増えます。自分の財布や時間のゆとりと相談しましょう。 Flex Builder3の試用版を導入する人はこの辺が参考になるでしょう。

  Flex／AIRの開発環境Flex Builder 3を使ってみよう

• 解説する内容

  「ActionScript 3.0 アニメーション」の書籍の内容を僕が解釈して、自分なりに重要だと思えるところ、 それでいて簡単に解説できるところを選択して解説します。 書籍の内容の転載に近いようなことは、もちろん著作権侵害にあたるのでしません。 もっと深い内容が知りたくなった人はぜひ、この書籍を購入してください。

  ここまで読んで「結局、宣伝かよ」と思った人。正解です。

• 連載回数、連載ペースなど

  どちらも詳しくは未定です。あまり期待しないでください。 だけど、連載回数は１０回くらいいけたらいいなと思っています。 あまり長くしても、書いてる方も読んでる方も飽きるし。 連載ペースも本当に未定です。 疲れて途中で投げ出す可能性も否定できません。

ではでは、第１回はここまで　（「え～！！！」じゃない！！！）

第２回は「物体の移動」を予定しています。 まだまだ簡単ですよ。 Flex Builderインストールして楽しみにしておきなさい！