back
スプライトを使いこなそう！ (5/5)
■キャラクタの拡大縮小・回転
enchant.jsのSpriteは、キャラクタのイメージ切り替えや移動などの他にもさまざまな機能が用意されています。覚えておくとすぐにでも役に立つのがイメージの「拡大縮小」と「回転」でしょう。
下のリスト欄に、実際の利用例を挙げておきました。ここでは上下の矢印でキャラクタを拡大縮小し、左右の矢印で回転をしています。実際に試してみると、キャラクタの向きや大きさが実に簡単に操作できることに驚くでしょう。
ここでは、ENTER_FRAMEのイベント処理関数でこれらの処理を行なっています。以下の部分ですね。
・イメージの拡大縮小
これはSpriteの「scaleX」「scaleY」というプロパティとして用意されています。それぞれ横方向および縦方向の倍率を指定するものです。1.0にすれば等倍、それより小さければ縮小され、大きければ拡大されます。これは倍率であって大きさ（サイズ、ドット数）ではありません。例えば「10」とすれば、10ドットではなく10倍になります。
・イメージの回転
これはSpriteの「rotation」というプロパティとして用意されています。一般に角度を利用する関数などはラジアン単位（１回転＝２Π）が多いのですが、これは度数単位（１回転＝360）になっています。rotation = 0が通常の向きで、プラスに設定すると右回転、マイナスに設定すると左回転していきます。
これらの操作は、キャラクタの中心位置がずれないようにして行われます。ですから、イメージが拡大されたからといって表示位置が右下にずれていったり……といったことは起こりません。
――以上、今回はスプライトについて「フレームによる表示イメージの切り替え」「キーによる移動」「ボタンによる表示の変更」「イメージの拡大縮小、回転」といったことについて説明しました。これらが一通りわかれば、かなり柔軟にキャラクタを操作できるようになります。実際にそれぞれで試してみて下さい。思った以上に簡単で楽しいですよ！
下のリスト欄に、実際の利用例を挙げておきました。ここでは上下の矢印でキャラクタを拡大縮小し、左右の矢印で回転をしています。実際に試してみると、キャラクタの向きや大きさが実に簡単に操作できることに驚くでしょう。
ここでは、ENTER_FRAMEのイベント処理関数でこれらの処理を行なっています。以下の部分ですね。
if (game.input.up){ this.scaleX += 0.1; this.scaleY += 0.1; }
if (game.input.down){ this.scaleX -= 0.1; this.scaleY -= 0.1; }
if (game.input.left){ this.rotation -= 10; }
if (game.input.right){ this.rotation += 10; }・イメージの拡大縮小
これはSpriteの「scaleX」「scaleY」というプロパティとして用意されています。それぞれ横方向および縦方向の倍率を指定するものです。1.0にすれば等倍、それより小さければ縮小され、大きければ拡大されます。これは倍率であって大きさ（サイズ、ドット数）ではありません。例えば「10」とすれば、10ドットではなく10倍になります。
・イメージの回転
これはSpriteの「rotation」というプロパティとして用意されています。一般に角度を利用する関数などはラジアン単位（１回転＝２Π）が多いのですが、これは度数単位（１回転＝360）になっています。rotation = 0が通常の向きで、プラスに設定すると右回転、マイナスに設定すると左回転していきます。
これらの操作は、キャラクタの中心位置がずれないようにして行われます。ですから、イメージが拡大されたからといって表示位置が右下にずれていったり……といったことは起こりません。
――以上、今回はスプライトについて「フレームによる表示イメージの切り替え」「キーによる移動」「ボタンによる表示の変更」「イメージの拡大縮小、回転」といったことについて説明しました。これらが一通りわかれば、かなり柔軟にキャラクタを操作できるようになります。実際にそれぞれで試してみて下さい。思った以上に簡単で楽しいですよ！
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
enchant();
window.onload = function(){
var game = new Game(400, 300);
game.preload("character2.png");
game.fps = 20;
game.onload = function(){
var char1 = new Sprite(100, 100);
char1.image = game.assets["character2.png"];
char1.x = 150;
char1.y = 100;
char1.addEventListener(enchant.Event.ENTER_FRAME, function(){
this.frame = this.age % 2;
if (game.input.up){ this.scaleX += 0.1; this.scaleY += 0.1; }
if (game.input.down){ this.scaleX -= 0.1; this.scaleY -= 0.1; }
if (game.input.left){ this.rotation -= 10; }
if (game.input.right){ this.rotation += 10; }
});
game.rootScene.backgroundColor = "#ffaaaa";
game.rootScene.addChild(char1);
};
game.start();
};
| << 前へ |