enchant.jsサンプルプログラム集

# サンプルプログラム集
## 01Spriteの表示
enchant.js上でスプライト(Sprite)を表示させるためのプログラム

```js
//くまというSpriteを準備する、画像内の表示される領域を設定する
var kuma = new Sprite(32, 32); 

//くまに画像を適用する
kuma.image = game.assets['./img/chara1.png']; 

//くまのX.Y座標を設定する
kuma.x = 100; 
kuma.y = 120; 

//画像上の表示したい画像の位置
kuma.frame = 1;

//ゲームのシーンにくまを追加させます
game.rootScene.addChild(kuma);
```
## 02Spriteの移動
Spriteの移動方法は２つある。
直接SpriteのX座標とY座標をいじる場合とGroupにSpriteを入れてGroupごと動かす場合がある。
Groupの話は○○で話します。
SpriteのX座標とY座標をいじる場合は

```js
var kuma = new Sprite(32, 32); 
kuma.image = game.assets['./img/chara1.png']; 
kuma.x = 100; 
kuma.y = 120; 
kuma.frame = 1;
//毎フレーム呼ばれる
kuma.on('enterframe',function(){
  //毎フレームくまのX,Yに＋0.5する
  kuma.x+=0.5;
  kuma.y+=0.5;
});
game.rootScene.addChild(kuma);
```
とする。
## 03シーンについて
シーンは[Gameオブジェクト]が管理する。(新しく作ったシーンはGameオブジェクトに渡さなければならない)
enchant.jsは[Gameオブジェクト]を作成したら、[rootScene]という名前の[Sceneオブジェクト]が勝手に作成される。
新しいシーンは

```js
//シーンを新しく作る
var secondScene = new Scene();
```
[Sceneオブジェクト]に追加する方法は

```js
var secondScene = new Scene();  //2個目のシーン
var thirdScene = new Scene();   //3個目のシーン

//現在のシーンの上に追加(現在のシーンは存在するが表示されない)
game.pushScene(secondScene);

//現在のシーンを消して追加(現在のシーンは管理から外れる)
game.replaceScene(thirdScene);

//現在のシーンを消して下にあったシーンを表示する
game.popScene();
```
![QiitaScene.png](https://qiita-image-store.s3.amazonaws.com/0/46090/700598c6-eefa-b957-3a64-94b5f2261926.png)

## 04文字の表示
enchant.jsでは文字表示にLabelクラスを使用します。

```js
var label = new Label();
//座標
label.x = 5;
label.y = 5;
//文字の色
label.color = 'red';
//フォント
label.font = '14px "Arial"';
//文字の設定
label.text = 'test';
```
## 05キー入力
キー入力の中で十字キーに関しては、
[Gameオブジェクト]の[inputプロパティ]に[up][down][right][left]プロパティが用意されています。
なので。
[仮にくまをキー入力で動かす場合]

```js
if (game.input.up) {
  //↑キー
  kuma.y -= 0.1;
}
if (game.input.down) {
  //↓キー
  kuma.y += 0.1;
}
if (game.input.right) {
  //→キー
  kuma.x += 0.1;
}
if (game.input.left) {
  //←キー
  kuma.x -= 0.1;
}
```
で使用できます。
その他のキーを使用したい場合は[keybind]を使用します。
[keybind]には[ASCIIコード番号]が必要になりますが、これも[Javascript]の[Stringクラス]の[charCodeAtメソッド]を用いることで解決します。
注意：charCodeAtに指定するのは大文字　
[m]->×
[M]->○

```js
//「M」キーを[aボタン]として使用する
game.keybind( 'M'.charCodeAt(0), 'a' );

if(game.input.a){
  //aボタンを入力
}
```
ちなみに英数字以外のキーのコード番号は
```
tab     9
enter  10
del    11
shift  16
ctrl   17
alt    18
space  32
```
## 06クリック＆タッチ座標
クリック＆タッチ(以下クリック)した時の関数

```js
//touchstart=タッチをした瞬間　　touchend=タッチを離した瞬間
/*オブジェクト名*/.addEventListener('touchstart', function(){
    // クリックした時の処理内容
});
```
画面上をタッチして、タッチ座標を調べる

```js
game.rootScene.addEventListener(Event.TOUCH_START, function(e) {
//eの部分は自由
//座標を受け取る
var sax = e.x;
var say = e.y ;
}
```
## 07Spriteの大きさ＆向き
Spriteを表示する際は元の画像の大きさがそのまま表示されます。
大きさを変更するためには[scaleX][scaleY]を使用する。
それぞれ、Xの大きさ。Yの大きさを表しており
[仮にくまの大きさをいじる場合]

```js
var kuma = new Sprite(32, 32); 
kuma.image = game.assets['./img/chara1.png']; 
kuma.x = 100; 
kuma.y = 120; 
kuma.frame = 1;
kuma.scaleX = 0.5;  //横方向の大きさが元の絵の大きさの半分になる
kuma.scaleY = 1.0;  //縦方向の大きさが元の絵の大きさと同じになる
game.rootScene.addChild(kuma);
```
1.0が元の大きさとして。1.0以上なら画像が大きくなり　1.0以下なら画像が小さくなる
![kuma4.png](https://qiita-image-store.s3.amazonaws.com/0/46090/be7a8c72-f306-c9ab-4ff8-9d7a66543056.png)
しかし、値が-になると

```js
var kuma = new Sprite(32, 32); 
kuma.image = game.assets['./img/chara1.png']; 
kuma.x = 100; 
kuma.y = 120; 
kuma.frame = 1;
kuma.scaleX = -1.0;  //横方向が負の数になると反転
kuma.scaleY = 1.0;  //縦方向の大きさが元の絵の大きさと同じになる
game.rootScene.addChild(kuma);
```
![kuma3.png](https://qiita-image-store.s3.amazonaws.com/0/46090/7933be0b-11ea-02fc-b4b3-c47ce4c0020e.png)
この様に左右が反転する。
これを利用し、右に移動中の絵と左に移動中の絵と２つの絵を必要としたものが、左右どちらかの絵だけで済むようになる。
## 08クラス
クラスの作り方は、以下の通りです。

```js
var Kuma = Class.create(Sprite, {
  initialize: function(x,y){  //初期化（引数）
    Sprite.call(this,32,32);  //自分のSpriteの大きさ
    this.x = x;
    this.y = y;
    this.image = game.assets['./img/chara1.png'];
    this.frame = 1;
    this.opacity = (Math.floor(Math.random()*101)/100;  //アルファ値
    //毎フレーム呼ばれる
    this.on('enterframe',function(){
    	this.rotate(Math.floor( Math.random()*11 ));   //時計回りにランダム度回転
    });
    game.rootScene.addChild(this);
  }
});
```
## 09MAP
マップの作り方の説明。
enchant.jsには最初のダウンロードしたファイルの中にサンプルの画像があるのでそれでMAPを作るとします。
![map2.png](https://qiita-image-store.s3.amazonaws.com/0/46090/f26940b1-362f-1827-9c8c-d8998c15a7c2.png)
↑の画像の左上から右に向かって[0,1,2,3,4...]となっている。

```js
//ブロック
var blocks = [
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1, 7, 8,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,10,-1,-1,-1],
    [-1, 0, 0, 0, 0, 0, 0, 0, 0,-1],
    [-1, 1, 1, 1, 1, 1, 1, 1, 1,-1],
];
var map = new Map(16, 16);    //絵の中の１種類の四角の大きさ
map.image = game.assets["./img/map2.png"];    //使う絵
map.loadData(blocks);    //ブロック(二次配列)をMAPに入れる
```
![qiitaMap.png](https://qiita-image-store.s3.amazonaws.com/0/46090/62c39196-9c7d-89b5-02c0-44f81d72e6ab.png)


## 10あたり判定
enchant.jsには簡単にあたり判定を取るための機能が２つある。
一つ目は、Sprite同士のあたり判定がある。

```js
//obj1はobj2と当たっているか
if (obj1.intersect(obj2)) {
  //当たっている
}
```
しかし、くまのSpriteを作ったときに[new Sprite(32, 32);]と大きさを(32,32)で指定した。この場合の当たる範囲は
![qiitaatariS01.png](https://qiita-image-store.s3.amazonaws.com/0/46090/294dbacd-f072-fe46-0086-3c934c8b8785.png)
となってしまい、実際のくまの大きさよりも大きくなってしまう。
![qiitaatariS02.png](https://qiita-image-store.s3.amazonaws.com/0/46090/adba1d88-1518-d2fc-84cb-b68747f69b3f.png)
↑の状態でも当たっていると判断されてしまう。
なので、表示される[Sprite]以外にあたり判定用の矩形[Sprite]を用意してあげるとよい。
![qiitaatariS03.png](https://qiita-image-store.s3.amazonaws.com/0/46090/7d90ed7e-d031-f0d2-2d76-d4fa501885f0.png)

二つ目は、MAPを使用した時のあたり判定がある。
これは[MAPオブジェクト]の[collisionData]に通過設定を指定して作成する。
上記のMAPで言うと

```js
var blocks = [
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1, 7, 8,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1,-1,-1,-1,-1,10,-1,-1,-1],
    [-1, 0, 0, 0, 0, 0, 0, 0, 0,-1],
    [-1, 1, 1, 1, 1, 1, 1, 1, 1,-1],
];
//通過設定用の二次配列
var cBlocks = [
    [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
    [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [ 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
    [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
];
var map = new Map(16, 16);
map.image = game.assets["./img/map2.png"];
map.loadData(blocks);
map.collisionData(blocks);    //通過設定用ブロック(二次配列)をMAPに入れる

//あたり判定
var atari = map.hitTest( x , y );  //xyは二次配列の用素数を表す　trueの場合は通過できない　falseの場合は通過できる
```