enchant.jsの基本

enchant.jsを書いてみる

　そもそも使われているゲームが少ない、更新も止まっているが、個人的に好きなので書く。
　開発環境はMonaca、必要なファイルはHTML、CSS、enchant.js、main.jsがあれば
　必要最低限はできる。
　imgファイルやmp3ファイルは必要に応じて追加していってほしい。

enchant.jsをやるにあたって踏まえといて欲しい知識

　ブラウザでもアプリでもそうなのだが、if文とswitch文の処理速度の違いを覚えていてほしい。

　https://qiita.com/ko8@github/items/f9aaf17c9c519386a961

　優秀な記事が書いてあるので1度でいいから目を通しておいてほしい。

画像のUpload

　enchant.jsは基本的に画像を動かしてゲームを構築していく。
　
　game.preload('画像のパス')

　で画像をアップロードしてから
　
　画像オブジェクトの作成

　変数名 = new Sprite(画像のXサイズ,画像のYサイズ);
　//ここは表示したい領域を指定できるので3*3の画像でも1*1のサイズを入力すればトリミングが勝手にされる

　変数名 = game.assets['画像のパス']

　で変数に画像を入れる。

　game.rootScene.addChild(変数名);

　で画像表示
　
　変数名.tl.moveTo(移動先のX座標,移動先のY座標,速度)

　で画像を動かす
　ちなみにmoveToは絶対パスなので左上からの値を書かなければならない。
　
　これさえ出来ればただ単に画像が動くアプリが作れる。

　面白そう

画面サイズの対応

　
　これが一番難しく、めんどくさい。
　AndroidStudioやXcodeなら自動になっているが、enchant.jsでやるためには
　window.innerWidthとwindow.innerHeightを使うのがいいと思う。
　それ以外のやり方は知らない。

　例えば

　変数名.tl.moveTo(window.innerWidth,window.innerHeight,速度)

　や

　変数名.tl.moveTo(window.innerWidth-window.innerWidth/2,
　window.innerHeight-window.innerHeight/2,速度)
　
　などという書き方で画面サイズに対応できる。
　
　そもそもだが、window.innerWidthなどを複数回書くのはお勧めしないので、変数に入れることをお勧めする

　例
　var 変数名 = window.innerWidth;
　var 変数名 = window.innerHeight;

　↑お願いします。
　
　上記は画像の動く領域だが、画像サイズ、文字の大きさ、文字を置いて置く位置にも必須なので、
　かなり大変である。
　需要があったらそれについても書くのでコメントしてください。
　
　アプリなら画面サイズ１つ１つに対しコードを分けるという方法もあるのだが、
　冗長コードが大量に作成される未来が見えるのでお勧めしない。
　
　次回の記事は当たり判定について書こうと思う。
　不明点、不備ございましたら、コメントお願いします。