enchantjs002

編集中

前回クマの絵をひとつ表示しました。
このenchant.jsでは、1秒間を何分割してタイミングを合わせるかを管理しています。
この分割数をfps(フレームパーセカンド)で指定します。
このタイミングで数を数えて内部で処理を行います。
この指定は、core変数(オブジェクト)を作成した後に、
core.fps = 15;
等のように指定します。

 bear.addEventListener('enterframe', function() {
    // ここに行う処理を記述します。
 });

とすることで、くまの表示を管理している変数(オブジェクト)に記述をすることで、フレームの数が数えられる度に何かの処理を行う
事が出来るようになります。

処理を

           this.x += 10;
           if (this.x > 320) this.x = 0;

とすれば、くまの絵を1秒間に150右に移動します。
ゲーム画面は320なので、2秒ちょっとで左から右に移動しこれを繰り返します。
動きはあまり滑らかでは無いですね。

           this.x += 2;

とすれば、1秒間で30右に移動しますので、画面を横切るには、11秒弱かかります。

this.rotate(2);
を加えると、1フレームで2度回転しますので、１回転に180(360÷2)
フレーム12秒(180÷15)が掛かります。

サンプルでは、

           this.scale(1.01, 1.01);

とありますが、

           this.scale(0.99, 0.99);

とすれば、少しずつ小さくなります。

色々と追加してこの後のサンプルでは、色々とやってみました。

最近のプログラム言語ではオブジェクト指向という考えをベースに変数と関数を予めまとめて考えます。

newでオブジェクトという従来は変数と同様のものを宣言しますが、このオブジェクトでは利用できるプロパティ（変数）やメソッド(関数)がセットにしてあり、今回の例では、オブジェクト名の後に「.」ピリオドをつけ、その後にプロパティやメソッドを指定します。

このenchant.jsの場合は、ゲームをドラマと考えるとプログラムは台本、coreというステージ上に役者bear、bear2が役割を与えられ、演技が決まっていて、スタートの合図と共に役を演じる。そんな感じになります。

前回のサンプルに加えて、くまを動かし、2つめのくまは縦に移動しています。
前回のテスト環境でmain.jsを変更して以下のサンプルを動かしてみましょう。

スクリプト全体

// 下準備
enchant();
 
// HTMLが会場、現場？
window.onload = function() {
 
    // セット作成
    var core = new Core(320, 320);
    core.preload('chara1.png');
    core.fps = 15;
    core.onload = function() {
    
        // 配役
        var bear = new Sprite(32, 32);
        // 役作り、メイク
        bear.image = core.assets['chara1.png'];
        bear.x = 0;
        bear.y = 0;
	bear.scale(0.5,0.5);
        bear.frame = 1;
 
        // 配役
        var bear2 = new Sprite(32, 32);
        // 役作り、メイク
        bear2.image = core.assets['chara1.png'];
        bear2.x = 160;
        bear2.y = 0;
	bear2.scale(0.5,0.5);
        bear2.frame = 6;
        
 
        // bear演技内容
        bear.addEventListener('enterframe', function() {
            this.x += 2;
            if (this.x > 320) this.x = 0;
            this.rotate(2);
            this.scale(1.005, 1.005);
                // あるタイミングで芝居が終わる
		if (core.frame>200) {
			core.stop();
		}
 
        });
 
        // bear2演技内容
        bear2.addEventListener('enterframe', function() {
            this.y += 2;
            if (this.y > 320) this.y = 0;
            this.rotate(-2);
            this.scale(1.005, 1.005);
 
        });
 
        core.rootScene.addChild(bear);// 役者bearをセットに入ってもらう
        core.rootScene.addChild(bear2);// 役者bear2をセットに入ってもらう
    
    }
    core.start(); //用意、スタート
 
};

WEBエンジニア：インターネットの活用

enchantjs002