Spriteを伸縮させる

記事内に広告が含まれています。

enchant.jsのSpriteを伸縮しながら移動します。

Spriteを伸縮させる

まずは表示用のHTML。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sample</title>
        <style>
            body { margin: 0; }
        </style>

        <script src="../js/enchant.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body>
    </body>
</html>

enchant.jsの読み込みはそれぞれのフォルダー形式に合わせてください。

実際の処理部分。

enchant() ;    // ライブラリの初期化
window.onload = function()
{
    var x = 1 ;
    var y = -1 ;

    //使用する画像のファイル名
    var pic_name = "../img/droid.png" ;

    //320×240ピクセルサイズの画面(Canvas)を作成する
    var game = new Game( 320, 240 ) ;

    //フレームレートの設定する
    game.fps = 40 ;

    //画像データをあらかじめ読み込ませる
    game.preload( pic_name ) ;

    //データの読み込みが完了したら処理
    game.onload = function(){
        //Spriteを作成する
        var droid = new Sprite( 32, 32 ) ;
        droid.image = game.assets[ pic_name ] ;
        droid.x = 20 ;
        droid.y = game.height - droid.height ;
        droid.scale( 0.5, 0.5 ) ;    //画像ちょっと縮小
        droid.counter = 0 ;
        game.rootScene.addChild( droid ) ;

        // フレームイベントが発生したら処理
        droid.addEventListener( Event.ENTER_FRAME, function(){
            switch( this.counter ){
                case 0 : // ドロイド君移動する
                    if( this.y == 0 || this.y > game.height - this.height ){
                        y *= -1 ;
                    }
                    this.y = this.y + y ;
                    this.counter++ ;
                    break ;
                case 1 : // ドロイド君伸ばす
                case 2 : // ドロイド君伸ばす
                case 3 : // ドロイド君伸ばす
                    this.scale( 1.0, 2.0 ) ;
                    this.counter++ ;
                    break ;
                case 4 : // ドロイド君縮める
                case 5 : // ドロイド君縮める
                case 6 : // ドロイド君縮める
                    this.scale( 1.0, 0.5 ) ;
                    this.counter++ ;
                    break ;
                case 20 : 
                    this.counter = 0 ;
                    break ;
                default :
                    this.counter++ ;
                    break ;
            }
        });
    }
    game.start() ;    // ゲーム処理開始
}

ドロイド君が伸縮しながら上下に移動します。

スポンサーリンク
スポンサーリンク
【PR】
Javascriptの学習におすすめの本
JavaScript
スポンサーリンク
タイトルとURLをコピーしました