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() ; // ゲーム処理開始
}
ドロイド君が伸縮しながら上下に移動します。
