Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

はじめてのActionScript 3~ライフゲームを作ってみる

Free Flex 2 SDKのセットアップからライフゲームを作るまで

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/10/23 00:00

Adobeより、フリーで入手可能な「Free Flex 2 SDK」が公開されています。これには、Flashの次期バージョンであるFlash 9で使える、ActionScript 3が含まれています。そこで、まず「Free Flex 2 SDK」のセットアップ方法を紹介し、簡単な使用例を確認しながらライフゲーム(生物のシミュレーションゲーム)を作ってみます。

目次

はじめに

 Adobeより、フリーで入手可能なFree Flex 2 SDKが公開されています。Flexは、Adobeが提供するRIA(Rich Internet Application)と呼ばれる高度なインターネットアプリケーションを構築するためのツールとテクノロジーの総称です。Flex 2アプリケーションはFlash 9を利用して、さまざまな機能を実現します。

 Flash 8の次のバージョンであるFlash 9では、ActionScript 3.0(以下、ActionScript 3)が採用されることになっており、Free Flex 2 SDKは、このActionScript 3を使ってプログラムを作っていきます。

対象読者

  • Free Flex 2 SDKで何か作ってみたい人
  • Flash 9が気になっている人
  • JavaやC++などオブジェクト指向プログラミングが分かる人

必要な環境

 本稿では、Windows XP上でFree Flex2 SDKを利用して開発を行います。Adobeのダウンロードページからアーカイブをダウンロードしておきましょう。

本稿の目標

 本稿で最終的に作成するプログラムは次のようなライフゲームです。ライフゲームは生命の誕生・消滅を、増殖・淘汰などのプロセスで再現したシミュレーションゲームです。

目標とするライフゲーム
目標とするライフゲーム

 ここで作成するライフゲームは以下のページで試すことができます。

 ライフゲームの作成は以下の手順で進めます。

  1. Free Flex 2 SDKのセットアップ
  2. Spriteの作成から見るActionScript 2.0との違い
  3. 画像ファイルの埋め込み
  4. マウス操作
  5. Timerの処理
  6. ライフゲームの組み立て

1. Free Flex 2 SDKのセットアップ

 まずはじめに、Free Flex 2 SDKをWindows XPにセットアップしましょう。ここでは、ダウンロードしたFree Flex 2 SDKのアーカイブ(flex_sdk_2.zip)を解凍し、これを「C:\flex_sdk_2」にコピーしたものとして説明します。

  1. Flash Player 9をインストールします。解凍したアーカイブの中にある「player/debug」フォルダの「Install Flash Player 9.exe」を実行します。
  2. コンパイラへのパスを通します。設定の手順は次のとおりです。
    1. Windowsの[スタート]メニューを開く。
    2. [マイコンピュータ]を右クリックして[プロパティ]をクリック。
    3. [詳細設定]のタブをクリック。
    4. [環境変数]のボタンをクリック。
    5. 変数「PATH」の最後に「;C:\flex_sdk_2\bin」を追加。

 以上でFree Flex 2 SDKのセットアップは終了です。

便利なFlex Builder 2
 Adobeのサイトでは、Free Flex2 SDKを含むFlex Builder 2の体験版もダウンロードできるようになっています。これを利用すると、EclipseベースのIDE上で開発が行えます。Flex Builder 2を利用する場合は、上記のようなセットアップ作業は必要ありません。

はじめてのActionScript 3

 設定ができたら、さっそく何か簡単なプログラムをコンパイルしてみましょう。以下は画面に円を描くだけのプログラムです。これを「FirstCircle.as」という名前で保存します(ファイル名はクラス名に拡張子「.as」を付けたものにする必要があります)。

円を描くプログラム(FirstCircle.as)
/* FirstCircle.as */
package {
    import flash.display.Sprite;
    import flash.display.Graphics;

    public class FirstCircle extends Sprite
    {
        public function FirstCircle()
        {
            var p:Sprite = new Sprite();
            p.graphics.beginFill(0xFF0000);
            p.graphics.drawCircle(80,80,60);
            p.graphics.endFill();
            addChild(p);
        }
    }
}

 次にコンパイルするためのバッチファイル(*.bat)を作ります。これをダブルクリックするとコンパイルされます。

コンパイル用バッチファイル
mxmlc FirstCircle.as

 コンパイルすると、「FirstCircle.swf」というFlashファイルが作成されるはずです。これを実行すると次のように赤い円が表示されます。

実行結果
実行結果

 ただし、Flashの画面サイズや背景色などを指定できません。そこで、次のようなXMLの設定ファイルを作ります。名前は「メインクラス名-config.xml」にします。ここでは「FirstCircle.as」というファイル名なので、設定ファイルの名前は「FirstCircle-config.xml」となります。

 設定ファイルの雛形は次のとおりです。XMLなので、タグ名から設定項目の意味が想像できるでしょう。<output>には出力ファイル名、<default-size>には出力するSWFファイルの画面サイズ、<default-background-color>には画面の背景色を指定します。

設定ファイルの雛形
<flex-config>
  <output>FirstCircle.swf</output>
  <default-size>
    <width>400</width>
    <height>200</height>
  </default-size>
  <default-frame-rate>24</default-frame-rate>
  <default-background-color>0xFFFFFF</default-background-color>
  <use-network>false</use-network>
</flex-config>

 その他のオプションは以下のページで確認できます。

 設定ファイルを作成したらソースファイルと同じディレクトリに配置します。再度コンパイルして、設定ファイルの内容が反映されているか確認してみてください。

2. Spriteの作成から見るActionScript 2.0との違い

 ActionScript 2.0から3.0へとバージョンは変わりましたが、文法が劇的に変化した訳ではありません。大きく変化したのはクラス構造です。

 また、以前はMovieClipを生成するのに、attachMovie()など特別なメソッドを使わなければなりませんでしたが、素直にインスタンスの生成(new 演算子)でMovieClipなどを作成できます。メンバ変数も_x_widthとアンダーバー付きのものが、xwidthと自然な形になっています。これから、ActionScript 3を覚える人にとっては、より自然な形で使えるようになった点が大きいと言えるでしょう。

図形の描画

 では、先ほどの円を描くプログラムに戻って内容を確認してみましょう。packageの中にclassがあり、その中にfunctionがあります。クラスの名前と同じ関数がコンストラクタで、一番はじめに実行されます。

円を描くプログラム
/* FirstCircle.as */
package {
    import flash.display.Sprite;
    import flash.display.Graphics;

    public class FirstCircle extends Sprite
    {
        public function FirstCircle()
        {
            var p:Sprite = new Sprite();    // *1 Spriteの生成
            p.graphics.beginFill(0xFF0000); // *2 Spriteへの描画
            p.graphics.drawCircle(80,80,60);
            p.graphics.endFill();
            addChild(p);       // *3 表示オブジェクトとして追加
        }
    }
}

 コンストラクタの内容を確認してみましょう。*1の行ではSpriteの生成を行い、*2の行以降で生成したSpriteに対して描画を行い、*3の行でSpriteを表示するために、メインの表示クラスに追加しています。

 Spriteクラスは、基本的なFlashの表示をつかさどる機能を持っています。直接graphicsオブジェクトを通じて線や円を描画することもできますが、子となる表示オブジェクトを追加することによっても描画することができます。

 このように、まず、表示したいオブジェクトを作成し、そこに何かしらの描画を行います。この時点ではまだ画面に表示されず、親オブジェクトに表示したいオブジェクトを追加することによって画面に表示することができます。

テキストの表示

 テキストを表示する場合も、図形を表示するのと同じようにTextFieldというオブジェクトを作り、addChild()でオブジェクトを追加することで表示することができます。

テキストの表示(TextHello.as)
/* TextHello.as */
package {
    import flash.display.*;
    import flash.text.*;

    public class TextHello extends Sprite
    {
        public function TextHello()
        {
            var txt:TextField = new TextField();
            txt.text = "Hello!";
            txt.x = 20;
            txt.y = 20;
            addChild(txt);
        }
    }
}

 実行結果は次のようになります。

TextHello.swfの実行結果
TextHello.swfの実行結果

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • クジラ飛行机(クジラヒコウヅクエ)

    ソフト企画「くじらはんど」にて、多数のフリーソフトを公開しています。日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」、日本語Wiki記法が特徴の「KonaWiki」などを公開しています。

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5