ActionScriptで頑張ればFlashゲームは無料で作れる：Flashの基礎を無料で習得！ ActionScript入門（6）（1/3 ページ）

» 2008年06月12日 00時00分公開

[吉村美保，クラスメソッド株式会社]

編集部注：この連載をより深く理解するためには、記事「いまさら聞けない！ FlashとActionScriptについて」も併せてご覧ください。

ActionScriptのコーディングでFlashゲームを作る

　ActionScript 3（以下、AS3）の入門連載も今回で第6回になりました。前回の「ActionScript 3なら継承＆実装で大規模開発もできる」までに、変数や制御文、クラスの概念、継承などについて説明してきましたね。どれもプログラミングには大事な知識でした。

　今回は少し趣向を変えて、図形の描画ができる「Graphicsクラス」の解説をします。それと、特定のタイミングで処理を行うためのイベントの解説も少しだけしたいと思います。それらの知識を生かして、今回はちょっと楽しいゲーム・アプリケーションを作ってみましょう。

■福笑いFlashゲームを試してみよう

　今回は、最終的に以下のような福笑いFlashゲームを作成します。それを踏まえて解説していきたいと思います。

福笑いFlashゲーム「Mr. Punks」

各描画オブジェクト（髪の毛、顔、まゆ毛、目、鼻、口）が、ドラッグによる移動／回転をする福笑いアプリ
マウスダウンにより髪の毛の色が変わる

　以下で、実際に動かすことができるので、試してみてください。

福笑いFlashゲーム「Mr. Punks」（このまま動かせますが、実行にはFlash Playerが必要になります。Flash Playerのダウンロードページはこちら）　

Flash描画の土台「Sprite」クラスとは？

　前回までにもいくつか小さなプログラムを作成してきましたが、どれも「Spriteクラス」を「継承」していたと思います。連載第1回「Flashの要となるスクリプト言語『ActionScript』とは？」に出てきた「Lesson1.as」のコードの一部を見てみましょう。

Lesson1.as（一部抜粋）

public class Lesson1 extends Sprite {

    public function Lesson1 () {

        var textField:TextField = new TextField();

        textField.text = "I love ActionScript!!!";

        addChild(textField);

    }

}

　Lesson1クラスは、「extends」キーワードにより「Spriteクラス」を「継承」していますね。Spriteクラスのことを、連載第1回では「TextFieldクラスを載せるテンプレートのようなもの」と説明しましたが、具体的には「グラフィックスを表示でき、“子”オブジェクトを持つことができるクラス」といった感じです。

　AS3において、SWFファイルを生成するためには、メインクラス（SWFに関連付けられた最初に呼び出されるクラス）がSpriteクラスを継承している必要があります。そして何かしらを画面に表示するには、「Spriteオブジェクト自体に描画する」か、「Spriteオブジェクトの“子”として描画オブジェクトを追加する」必要があります。

　描画オブジェクトを“子”として追加するには、addChildメソッドを使います。連載第1回のコードでも、addChildは使われていましたね。

addChild(textField);

　こうすることで、文字が画面に表示されていました。

Flash描画メソッドがいっぱいの「Graphics」クラス

　先ほど、「Spriteオブジェクト自体に描画する」と述べました。Spriteクラスは「graphics」というGraphicsクラスのオブジェクトを持っており、このgraphicsを使って図形を描画することができます。具体的に円を描画するサンプルを作ってみましょう。

Lesson6_2.as

package {

import flash.display.Sprite;



public class Lesson6_2 extends Sprite   {

    public function Lesson6_2() {

        graphics.beginFill( 0xff0000 );             【1】

        graphics.drawCircle( 60, 80, 50 );                   【2】

        graphics.endFill();                                               【3】

    }

}

}

　【1】～【3】はGraphicsクラスの描画に使用するメソッドです。

【1】drawCircleに対する塗りの指定、引数（color：塗りの色、alpha：透明度（1.0はデフォルト値））

beginFill( color:uint, alpha:Number = 1.0 )

【2】円の描画、引数（x／y：円の中心座標、radius：半径）

drawCircle( x:Number, y:Number, radius:Number )

　ここでいう「座標」とは、描画範囲の一番左上をx軸で0y軸で0としたものになります。

図1　座標の捉え方

【3】塗りの終了

endFill()

　それでは、実行してみましょう。図2のように、半径50の赤い丸が60、80の位置に表示されました。

図2　赤い円を表示

■円周に線を付けたい場合

　円周に線を付けたい場合は、drawCircleの前にlinestyle()メソッドを呼び出します。

線のスタイル設定、引数（thickness：線の太さ、color：線の色、alpha：透明度）（一部）

lineStyle( thickness:Number, color:uint = 0, alpha:Number = 1.0, pixelHinting:Boolean = false, scaleMode:String = "normal", caps:String = null, joints:String = null, miterLimit:Number = 3 )

　先ほどのコードのdrawCircleの前に、以下のコードを追加すると、円の外側に太さが3で色が白の線が描画されます。

graphics.lineStyle( 3, 0xffffff );