前回はクリックした場所へくまを移動させるプログラムを作りました。
今回は敵キャラを画面上に表示させるプログラムを作ろうと思います。
前回の記事
敵キャラ”しろくま”の出現
左の一覧より「enchant.jsサンプル(基礎編)」→「Sceneを使って画面を制御しよう」と書かれたサンプルをForkしましょう。
Forkすると以下の画面が立ち上がりますので、まずはRunボタンを押して、ゲームを動かしてみましょう！
ゲームが起動すると、今回は新たに白いくまが出現しました。
このサンプルでは、カスタムシーンというプログラムが主の説明ではありますが、今回は敵キャラ出現させることが目的なので、しろくまの表示部分だけピックアップして解説します。
普通のクマと白クマの表示の仕組みについて
//普通のクマ
bear1 = new Sprite(32, 32);
bear1.image = game.assets['chara1.gif'];
bear1.addEventListener('enterframe',function(){
this.y++;});
game.rootScene.addChild(bear1);//シーンに普通のクマを追加
//白クマくん
bear2 = new Sprite(32, 32);
bear2.image = game.assets['chara1.gif'];
bear2.x=50;
bear2.y=20;
bear2.frame=5;
bear2.addEventListener('enterframe',function(){
this.x++;});
game.rootScene.addChild(bear2);//シーンに普通のクマを追加
前回のプログラムでは、bearというものしか登場しなかったのですが、今回はbear1、bear2の2つが登場しています。
これは、bear1（普通のくま）、bear2（しろくま）を意味しており、キャラの数だけ増やしていく必要があります。
普通のクマと白クマの絵を切り替えるのは、「bear2.frame=5;」という命令で切り替えています。
frameとは何を意味しているのか補足しますと、くまの画像はスプライトシートという手法を用いていまして、実際のくまの画像は以下のようになっています。
1枚の画像に複数の絵が含まれています。
この絵を左上からframe=0、frame=1、frame=2・・・とframeという単位で管理しており、白クマはframe=5～8に該当します。
（frame=9とframe=14はキャラクターの絵がない為、何も表示されません）
普通のクマの絵を変えてみよう
では、普通のクマ(bear1)の絵を変えてみたいと思いますので、以下のようにコードを修正しましょう。
bear1.image = game.assets['chara1.gif'];
bear1.frame=10;
bear1.addEventListener('enterframe',function(){
this.y++;});
bear1.frame=10;を追加し、再度Runを押すと、普通のクマがリボンのついたクマに変わりました！
