3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

enchant.jsの基本

Last updated at Posted at 2018-11-14

#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つに対しコードを分けるという方法もあるのだが、
 冗長コードが大量に作成される未来が見えるのでお勧めしない。
 
 次回の記事は当たり判定について書こうと思う。
 不明点、不備ございましたら、コメントお願いします。

3
3
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?