memorandum-2013_09_18-enchant-js.md

#【備忘録】enchant.jsを実践で使うときのメモ(作成中) 今年の3月にプロジェクトでenchant.jsを利用する可能性があったので検証した際のメモ書きを整理してみました。主にv0.6.2における検証結果や遭遇した懸念点です。

現在は解決しているものもあるについては確認次第削除又は補足を載せますが一旦当時のままの情報を掲載します。

##【懸念事項】Retina対応　Android 4.0.4の不具合（Dom版）座標の移動と変形（縮尺+傾き）を同時に指定できないらしい

##【懸念事項】Retina対応　Android 4.0.4の不具合（Canvas版）ゲーム側で2倍に指定して作成し、CSSで必要サイズに縮小と言う手法が Android 4.0.4で利用できない（ブラウザの挙動がおかしくなる）

###対応策 ####Retina対応を行わない ####RetinaのiPhone4以降ようにJavaScriptと画像を用意要調査　可能でも工数が増える

##【懸念事項】TEXTの行間のコントロールが難しい（Canvas版） Canvas APIの仕様上、CSSのline-heightに相当するプロパティは標準に固定らしい

###対応策 ####文字列を配列にいれるなどの処理を作る例えばユーザー名などの変数+文章の場合など変数に入る文字列を考慮出来ない。調整に時間がかかる ####【解決策】テキストが多用する部分はDOMSceneを利用する（シーン単位でDOM版と同じにする） SpriteやEntityをSceneに追加する前に、Entity._element = document.createElement('div');とすることでSceneのDOMLayerに追加できるようになる。

##TEXT　NTTドコモのXperia、Android2.1で文字化け（おそらく二バイト）ベーシック認証があると文字化けベーシック認証が無ければ問題ないが、開発時に検証作業がやりにくい・・・ ※Androidのバグ

##loop()が効かない　場合の対策（v0.62でのバグ）

TimelineにTweenがひとつしかない場合TimeLine#loop()が正しく動作しません
ex)spはオブジェクト
// loopする
sp.tl.rotateBy(160, 30).rotateBy(160, 30).loop();
// loopしない
sp.tl.rotateBy(160, 30).loop();

##Retina対応ゲーム側で2倍に指定して作成し、CSSで必要サイズに縮小しかしAndroid 4.0.4 でNG!!!!

###解決策ゲーム側で2倍に指定して作成し、CSSで必要サイズに縮小 !!!Android 4.0.4 でNG!!!!

	<style type="text/css">

					html, body {
					    margin: 0;
					    height: 100%;
					}
					body {
						position: relative;
						padding: 0;
						background-color: #000;
					}
					div#enchant-stage {
					    width: 320px;
					    height: 320px;
					}
	</style>
</head>
<body>
	<div id="enchant-stage"></div>
</body>

###参考

CanvasのRetinaディスプレイ対応
CanvasでRetina対応を行う
[enchant-js] iPhoneで画面幅からページがはみ出てしまう場合の対処方法
enchant-jsが自力でやっているぽい・・・ja_enchant.js.html
HTML5で作るスマホブラウザゲーム

##Canvasが画面に収まらない [enchant-js] iPhoneで画面幅からページがはみ出てしまう場合の対処方法

ブラウザの表示領域サイズに依存するらしい・・・320×320では収まった・・・

###解決策！！！！ゲームの領域がブラウザの表示領域を超えている場合、縮小されて表示される(スマートフォン) ·Issue #173 · wise9/enchant.js

<style>
html, body {
    margin: 0;
    height: 100%;
}
div#enchant-stage {
    width: 640px;
    height: 640px;
}
</style>
<body>
<div id="enchant-stage"></div>
</body>

###サイズとかの参考

スマホ向けCanvasゲームの作り方 canvasなら横320px 縦416px

###その他参考

3panda/memorandum-2013_09_18-enchant-js.md