enchant.js勉強する流れになったのでスタート[1日目]
enchant.jsについてと、画像の読み込みまで。
enchant.jsについて
enchant.jsとは
- もともとはプログラミング学習を目的として開発された
- HTML5向けゲームエンジン
- CSS3アニメーションやjQueryをを加えてもOK。
- 0.6.x系以降でDOM→Canvasベースになったっぽい
（PCブラウザはパフォーマンスがあがるけど、Android 4.1の標準ブラウザによる描画に不具合有）
メリット
- PCでもスマホでも遊べる
- 他のJSライブラリと相性がいい
- 他のゲームライブラリと比べると軽め
- プラグインが豊富
[プラグイン]
デメリット
- AndroidでViewport指定を無視することがある
（enchantのベージョンとブラウザの相性により都度修正が必要） - 高解像度端末は低解像度のより動作速度が遅い
- 画面いっぱいに広がる処理はカクつく
- マルチタッチを扱うメソッドはない
学習環境
実際の組み立て
命令文調べたかったらココ
ゲームの組み立て方
- ゲーム本体にあるCoreオブジェクトを設定
Coreオブジェクトは rootScene を持っているので rootScene の上にくまを表示させる - くまはSpriteオブジェクト（bearというオブジェクトをつくる）
main.js
enchant();
window.onload = function () {
//coreオブジェクトの設定
var core = new Core(320,320);
core.preload('chara1.png');
core.onload = function() {
//bearオブジェクトの設定
var bear = new Sprite(32,32);
bear.image = core.assets['chara1.png'];
bear.x = 0;
bear.y = 0;
//coreにbearオブジェクトをのっける
core.rootScene.addChild(bear);
};
core.debug();
// core.start();
};
デバック
core.start();の代わりにcore.debug();を使うと、赤枠がでてデバックしやすいみたい
参考サイト
Flashっぽいので、なんとなくわかる気がする...