#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サイズ);
//ここは表示したい領域を指定できるので33の画像でも11のサイズを入力すればトリミングが勝手にされる
変数名 = 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;
↑お願いします。
上記は画像の動く領域だが、画像サイズ、文字の大きさ、文字を置いて置く位置にも必須なので、
かなり大変である。
需要があったらそれについても書くのでコメントしてください。
アプリなら画面サイズ1つ1つに対しコードを分けるという方法もあるのだが、
冗長コードが大量に作成される未来が見えるのでお勧めしない。
次回の記事は当たり判定について書こうと思う。
不明点、不備ございましたら、コメントお願いします。